import Image from "next/image";
import Link from "next/link";
import { FAQ, FloatingWhatsapp, Footer, Header, LeadForm, PriceCalculator } from "./components/public-ui";
import { Icon } from "./components/icons";
import { ProjectGrid } from "./components/project-grid";
import { TestimonialGrid } from "./components/testimonial-grid";
import { phoneHref, whatsappHref } from "./lib/business-settings";
import { readBusinessSettings, readPublicAreas, readPublicFaqs, readPublicProjects, readPublicTestimonials, readServices } from "./lib/public-settings";

const benefits = (warranty:string) => [
  ["shield", "Instalasi aman & rapi", "Pengerjaan direncanakan agar jalur mudah diperiksa dan dirawat."],
  ["check", "Estimasi transparan", "Ruang lingkup jasa dan material dijelaskan sebelum pekerjaan dimulai."],
  ["bolt", "Respons area Bogor", "Penjadwalan diprioritaskan untuk Kota dan Kabupaten Bogor."],
  ["phone", "Dukungan pascapekerjaan", `Garansi pekerjaan ${warranty} dengan cakupan tertulis pada penawaran.`],
];

const problems = ["MCB sering turun", "Stop kontak terasa panas", "Lampu berkedip", "Sebagian ruangan mati", "Bau terbakar dari kabel/panel", "Daya tidak mencukupi", "Instalasi lama tidak rapi", "Kebocoran arus", "Grounding tidak berfungsi", "Perlu tambahan titik"];
const process = [["01", "Konsultasi awal", "Kirim lokasi, kebutuhan, jumlah titik, dan foto kondisi."], ["02", "Survei & pemeriksaan", "Teknisi memeriksa jalur, panel, beban, akses, dan tingkat kesulitan."], ["03", "Estimasi & penawaran", "Ruang lingkup, harga, material, jadwal, dan garansi dirinci tertulis."], ["04", "Pengerjaan & pengujian", "Pekerjaan dilaksanakan lalu diuji sesuai lingkup yang disepakati."], ["05", "Serah terima", "Hasil dijelaskan, didokumentasikan, dan masuk dukungan pascapekerjaan."]];

export default async function Home() {
  const [business,services,faqItems,areas,projects,testimonials]=await Promise.all([readBusinessSettings(),readServices(),readPublicFaqs(20),readPublicAreas(),readPublicProjects(3),readPublicTestimonials(6)]),whatsapp=whatsappHref(business.whatsapp_number),phone=phoneHref(business.phone_number||business.whatsapp_number);
  return <>
    <Header />
    <main>
      <section className="hero">
        <Image unoptimized className="hero-image" src="/images/hero-electrician.png" alt="Teknisi Padjajaran Elektrik memeriksa panel MCB yang tertata" fill priority sizes="100vw" />
        <div className="hero-overlay" />
        <div className="shell hero-content">
          <p className="eyebrow light">Layanan kelistrikan · Bogor</p>
          <h1>Jasa Instalasi Listrik <span>Profesional di Bogor</span></h1>
          <p>Instalasi, perbaikan, panel listrik, grounding, dan penambahan titik untuk rumah, ruko, kantor, serta bangunan komersial.</p>
          <div className="hero-actions"><Link className="button button-accent" href="/permintaan-survei"><Icon name="calendar" /> Jadwalkan Survei</Link>{whatsapp&&<a className="button button-ghost" href={`${whatsapp}?text=${encodeURIComponent(`Halo ${business.business_name}, saya ingin konsultasi instalasi listrik di Bogor.`)}`} target="_blank" rel="noreferrer"><Icon name="whatsapp" /> Konsultasi WhatsApp</a>}</div>
          <ul className="trust-inline"><li><Icon name="check" /> Pengerjaan rapi</li><li><Icon name="check" /> Estimasi transparan</li>{business.warranty&&<li><Icon name="check" /> Garansi {business.warranty}</li>}</ul>
        </div>
        {phone&&<div className="hero-contact"><span>Butuh arahan awal?</span><a href={phone}><Icon name="phone" /> {business.phone_number||business.whatsapp_number}</a></div>}
      </section>

      <section className="benefit-strip"><div className="shell benefit-grid">{benefits(business.warranty||"sesuai penawaran").map(([icon, title, text]) => <article key={title}><span className="icon-box"><Icon name={icon} /></span><div><h2>{title}</h2><p>{text}</p></div></article>)}</div></section>

      <section className="section about-section" id="tentang"><div className="shell split-layout">
        <div className="image-stack"><Image unoptimized src="/images/electrical-work.png" alt="Teknisi melakukan pemeriksaan grounding dan panel listrik" width={1536} height={1024} sizes="(max-width: 900px) 100vw, 48vw" /><div className="image-badge"><Icon name="shield" /><div><strong>Proses terukur</strong><span>Dari survei sampai serah terima</span></div></div></div>
        <div className="content-block"><span className="eyebrow">Tentang Padjajaran Elektrik</span><h2>Kelistrikan yang direncanakan untuk aman digunakan dan mudah dirawat</h2><p>Kami membantu pemilik rumah dan tempat usaha merencanakan, memasang, memperbaiki, serta merawat sistem kelistrikan. Setiap pekerjaan dimulai dari kebutuhan nyata di lokasi—bukan asumsi.</p><div className="check-grid">{["Konsultasi kebutuhan", "Survei lokasi", "Rencana titik listrik", "RAB atau penawaran", "Pengerjaan", "Pengujian", "Serah terima", "Garansi pekerjaan"].map((x) => <span key={x}><Icon name="check" /> {x}</span>)}</div><Link className="text-link" href="/tentang-kami">Kenali proses kerja kami <Icon name="arrow" /></Link></div>
      </div></section>

      <section className="section services-section"><div className="shell"><div className="section-heading light-heading"><div><span className="eyebrow light">Layanan utama</span><h2>Solusi kelistrikan untuk rumah dan tempat usaha</h2></div><p>Instalasi baru menjadi layanan utama, didukung perbaikan, audit, dan maintenance berdasarkan kondisi lapangan.</p></div><div className="service-grid">{services.map((service, index) => <Link className="service-card" href={`/layanan/${service.slug}`} key={service.slug}><span className="service-number">0{index + 1}</span><span className="service-icon"><Icon name={service.icon} /></span><h3>{service.title}</h3><p>{service.excerpt}</p><span className="card-link">Lihat detail <Icon name="arrow" /></span></Link>)}</div><div className="center-action"><Link className="button button-light" href="/layanan">Lihat Semua Layanan</Link></div></div></section>

      <section className="section problems-section"><div className="shell problem-layout"><div className="content-block"><span className="eyebrow">Masalah yang ditangani</span><h2>Jangan abaikan tanda gangguan listrik</h2><p>Gangguan kecil dapat menandakan sambungan longgar, beban berlebih, isolasi kabel rusak, atau perangkat proteksi yang perlu diperiksa.</p><div className="warning"><Icon name="bolt" /><p><strong>Peringatan keselamatan</strong> Jangan membongkar panel atau kabel sendiri jika tidak memiliki kompetensi. Jika ada panas, asap, percikan, atau bau terbakar, jauhi area dan matikan sumber listrik hanya bila aman dilakukan.</p></div><Link className="button" href="/permintaan-survei">Minta Pemeriksaan</Link></div><div className="problem-list">{problems.map((p, i) => <div key={p}><span>{String(i + 1).padStart(2, "0")}</span><strong>{p}</strong><Icon name="arrow" /></div>)}</div></div></section>

      <section className="section process-section"><div className="shell"><div className="section-heading centered"><span className="eyebrow">Proses kerja</span><h2>Sederhana, jelas, dan dapat diperiksa</h2><p>Judul dan rincian setiap tahap dapat diperbarui melalui CMS.</p></div><div className="process-grid">{process.map(([n, title, text], i) => <article key={n}><span>{n}</span><h3>{title}</h3><p>{text}</p>{i < process.length - 1 && <i />}</article>)}</div></div></section>

      {projects.length>0&&<section className="section portfolio-section"><div className="shell"><div className="section-heading"><div><span className="eyebrow">Portofolio terverifikasi</span><h2>Dokumentasi pekerjaan terbaru</h2></div><p>Foto, area, dan lingkup yang tampil berasal dari proyek asli yang diterbitkan melalui CMS.</p></div><ProjectGrid items={projects}/><div className="center-action"><Link className="button" href="/portofolio">Lihat Semua Proyek</Link></div></div></section>}

      <section className="section pricing-section"><div className="shell"><div className="section-heading"><div><span className="eyebrow">Estimasi transparan</span><h2>Hitung kebutuhan awal Anda</h2></div><p>Harga awal di bawah hanya memuat item yang berhasil diverifikasi dari sumber. Semua harga dapat diperbarui dan dinonaktifkan melalui CMS.</p></div><PriceCalculator /><div className="price-note"><Icon name="shield" /><p>Harga merupakan estimasi jasa saja dan dapat berubah berdasarkan lokasi, jumlah titik, material, jalur kabel, kondisi bangunan, ketinggian, tingkat kesulitan, dan hasil survei.</p><Link href="/harga-instalasi-listrik-bogor">Lihat daftar harga <Icon name="arrow" /></Link></div></div></section>

      {areas.length>0&&<section className="section areas-section"><div className="shell areas-layout"><div className="area-copy"><span className="eyebrow light">Area layanan</span><h2>Fokus melayani Bogor dan sekitarnya</h2><p>Jadwal dikonfirmasi berdasarkan area, jenis pekerjaan, urgensi, dan ketersediaan teknisi.</p><Link className="button button-accent" href="/area">Lihat Detail Area</Link></div><div className="area-cloud">{areas.map(area => <Link href={`/area/${area.slug}`} key={area.id}><span /><strong>{area.name}</strong></Link>)}</div></div></section>}

      {testimonials.length>0&&<section className="section testimonial-section" id="testimoni"><div className="shell"><div className="section-heading"><div><span className="eyebrow">Testimoni pelanggan</span><h2>Pengalaman dari pekerjaan yang nyata</h2></div><p>Hanya testimoni asli yang sumbernya telah dicatat dan diverifikasi oleh administrator.</p></div><TestimonialGrid items={testimonials}/></div></section>}

      {faqItems.length>0&&<section className="section faq-section"><div className="shell faq-layout"><div className="faq-intro"><span className="eyebrow">Pertanyaan umum</span><h2>Jawaban sebelum Anda menjadwalkan pekerjaan</h2><p>Belum menemukan jawabannya? Kirim foto panel atau kondisi instalasi melalui formulir konsultasi.</p>{whatsapp&&<a className="text-link" href={whatsapp} target="_blank" rel="noreferrer">Tanya melalui WhatsApp <Icon name="arrow" /></a>}</div><FAQ items={faqItems} limit={6} /></div></section>}

      <section className="section form-section"><div className="shell form-layout"><div className="form-side"><span className="eyebrow light">Langkah berikutnya</span><h2>Dapatkan estimasi yang lebih relevan</h2><p>Kirim lokasi, jenis bangunan, kebutuhan, jumlah titik, dan foto kondisi jika tersedia.</p><ul><li><Icon name="check" /> Data tersimpan untuk tindak lanjut</li><li><Icon name="check" /> Tim melihat sumber kampanye secara otomatis</li><li><Icon name="check" /> Anda dapat melanjutkan percakapan via WhatsApp</li></ul></div><LeadForm /></div></section>

      <section className="final-cta"><Image unoptimized src="/images/hero-electrician.png" alt="" fill sizes="100vw" /><div className="final-cta-overlay"/><div className="shell final-cta-content"><span className="eyebrow light">{business.business_name}</span><h2>Butuh Teknisi Instalasi Listrik di Bogor?</h2><p>Konsultasikan kebutuhan rumah atau tempat usaha Anda pada jam operasional.</p><div><Link className="button button-accent" href="/permintaan-survei">Konsultasikan Kebutuhan Anda</Link>{phone&&<a className="button button-ghost" href={phone}><Icon name="phone" /> Telepon</a>}</div></div></section>
    </main>
    <Footer /><FloatingWhatsapp />
  </>;
}