// VARIATION A — "SAFE": modernized version of current layout.
// Feels familiar to the original: big ALL-CAPS hero, pain points, results carousel,
// WA testimonials grid, pricing discount, form. Cleaner hierarchy, rounded cards,
// less chaotic than the original, but same emotional beats.

const VariationA = () => {
  const [resultIdx, setResultIdx] = React.useState(0);
  const [resultModalOpen, setResultModalOpen] = React.useState(false);
  const [form, setForm] = React.useState({
    fullName: "",
    whatsapp: "",
    email: "",
    storeUrl: "",
    businessScale: "0-10 orang pegawai",
    monthlyRevenue: "Di bawah Rp 50 Juta",
    leadSource: "Instagram",
    meetingTimeline: "Secepatnya (1-3 hari)",
    notes: "",
  });
  const [submitted, setSubmitted] = React.useState(false);
  const [openFaq, setOpenFaq] = React.useState(0);
  const [ctaVisible, setCtaVisible] = React.useState(false);
  const [submitting, setSubmitting] = React.useState(false);
  const [formFeedback, setFormFeedback] = React.useState({ type: "", message: "" });
  const formRef = React.useRef(null);

  React.useEffect(() => {
    const onScroll = () => setCtaVisible(window.scrollY > 700);
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  React.useEffect(() => {
    if (!resultModalOpen) return;
    const onKeyDown = (event) => {
      if (event.key === "Escape") setResultModalOpen(false);
      if (event.key === "ArrowLeft") {
        setResultIdx((prev) => (prev - 1 + CLIENT_RESULTS.length) % CLIENT_RESULTS.length);
      }
      if (event.key === "ArrowRight") {
        setResultIdx((prev) => (prev + 1) % CLIENT_RESULTS.length);
      }
    };
    window.addEventListener("keydown", onKeyDown);
    return () => window.removeEventListener("keydown", onKeyDown);
  }, [resultModalOpen]);

  const scrollToForm = () => {
    formRef.current?.scrollIntoView({ behavior: "smooth", block: "center" });
  };

  const handleChange = (key, value) => {
    setForm((prev) => ({ ...prev, [key]: value }));
  };

  const handleSubmit = async (event) => {
    event.preventDefault();
    setSubmitting(true);
    setFormFeedback({ type: "", message: "" });

    try {
      const response = await fetch("https://task.dapurinsight.asia/api/waitlist", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(form),
      });

      if (!response.ok) {
        throw new Error("Gagal menyimpan data. Coba lagi sebentar.");
      }

      setSubmitted(true);
      setFormFeedback({ type: "success", message: "Data berhasil dikirim. Kami arahkan ke WhatsApp sekarang." });

      const whatsappMessage = encodeURIComponent(
        "Halo saya tertarik dengan jasa yang ditawarkan Dapur Insight Agency! saya baru saja mengisi form. Mohon infonya lebih lanjut. Terimakasih!"
      );

      window.setTimeout(() => {
        window.location.href = `https://wa.me/6289505099567?text=${whatsappMessage}`;
      }, 240);
    } catch (error) {
      setFormFeedback({
        type: "error",
        message: error instanceof Error ? error.message : "Terjadi kendala saat mengirim form.",
      });
    } finally {
      setSubmitting(false);
    }
  };

  const featured = CLIENT_RESULTS[resultIdx];

  return (
    <div className="vA">
      {/* ═══════════ TOP BAR ═══════════ */}
      <header className="vA-top">
        <div className="vA-logo">
          <img className="vA-logo-image" src="./assets/logo-dapur-insight.png" alt="Dapur Insight Agency" />
        </div>
        <div className="vA-top-right">
          <ShopeeCertBadge />
          <a href="https://wa.me/6289505099567" className="vA-wa-btn">
            <span className="wa-dot" /> 0895-0509-9567
          </a>
        </div>
      </header>

      {/* ═══════════ HERO ═══════════ */}
      <section className="vA-hero">
        <div className="vA-hero-chip">
          <span className="chip-pulse" /> Diskon spesial untuk 3 slot pertama di bulan ini
        </div>

        <h1 className="vA-h1">
          Omset klien kami naik <span className="hl">30–200%</span><br/>
          dalam <span className="hl-ser">1–2 bulan</span> dengan<br/>
          ROAS <span className="hl-big mono">10–35×</span> setiap bulannya
        </h1>

        <p className="vA-sub" style={{ color: 'rgb(17, 6, 111)' }}>
          Ini bukan asal ngomong tapi ini hasil nyata dari proses panjang yang kami lalui selama 5 tahun lebih bareng 50+ brand owner di Shopee & TikTok.
          <br/>Kamu tinggal duduk, biar Dapur Insight yang masak strateginya. 🍳
        </p>

        <div className="vA-hero-cta">
          <button className="btn-primary" onClick={scrollToForm}>
            Konsultasi Gratis Sekarang
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>
          </button>
          <button className="btn-ghost" onClick={() => document.getElementById("vA-results")?.scrollIntoView({behavior:"smooth"})}>
            Lihat hasil kerja kami
          </button>
        </div>

        <div className="vA-hero-stats">
          <Stat value="50+" label="Brand yang kami tangani" mono />
          <Stat value="30–200%" label="Kenaikan omset rata-rata" mono />
          <Stat value="10–30×" label="ROAS yang kami capai" mono />
          <Stat value="1–2 bln" label="Rata rata hasil nyatanya" mono />
        </div>
      </section>

      {/* ═══════════ PAIN POINTS ═══════════ */}
      <section className="vA-pain">
        <div className="section-kicker mono">[ MASALAH YANG SERING KAMI DENGAR ]</div>
        <h2 className="vA-h2">
          Bingung rasanya omset <span className="underline-wavy">stuck dan ga naik-naik?</span>
        </h2>
        <p className="vA-section-sub">
          Tenang, kamu ga sendirian. Banyak seller yang datang ke kami dengan masalah seperti ini 👇
        </p>

        <div className="vA-pain-grid">
          {PAIN_POINTS.map((p, i) => (
            <div className="vA-pain-card" key={i}>
              <div className="pain-num mono">0{i+1}</div>
              <div className="pain-icon">{p.icon}</div>
              <div className="pain-title">{p.title}</div>
              <div className="pain-body">{p.body}</div>
            </div>
          ))}
          <div className="vA-pain-card pain-solution">
            <div className="pain-num mono">↳</div>
            <div className="pain-icon">🧑‍🍳</div>
            <div className="pain-title">Di Dapur Insight, kami ga cuma otak-atik iklan</div>
            <div className="pain-body">Kami bedah struktur toko, produk, audiens, dan funnel marketing. sampai &gt;&gt;&gt; <b>Terbukti hasilnya.</b></div>
          </div>
        </div>
      </section>

      {/* ═══════════ RESULTS CAROUSEL ═══════════ */}
      <section className="vA-results" id="vA-results">
        <div className="section-kicker mono">[ BUKTI BUKAN JANJI ]</div>
        <h2 className="vA-h2" style={{ color: 'rgb(58, 0, 0)' }}>
          Puluhan strategi sudah kami coba selama 5 tahun,<br/>
          kamu ga usah pusing mikirin strateginya, tinggal <span className="hl">duduk dan nikmati cuannya.</span>
        </h2>

        <div className="vA-carousel">
          <button className="carousel-arrow left" onClick={() => setResultIdx((resultIdx - 1 + CLIENT_RESULTS.length) % CLIENT_RESULTS.length)} aria-label="Previous">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M15 6l-6 6 6 6" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/></svg>
          </button>

          <div className="carousel-stage">
            <button className="carousel-main" type="button" onClick={() => setResultModalOpen(true)} aria-label={`Lihat detail ${featured.alt || featured.brand}`}>
              <ResultPlaceholder result={featured} featured />
            </button>
            <div className="carousel-meta">
              <div className="meta-kicker mono">PORTFOLIO · {String(resultIdx+1).padStart(2,'0')} / {String(CLIENT_RESULTS.length).padStart(2,'0')}</div>
              <div className="meta-brand">Portfolio Kami</div>
              <div className="meta-proof-grid">
                <div className="proof-chip">
                  <div className="proof-chip-label mono">SALES</div>
                  <div className="proof-chip-value">{featured.sales}</div>
                </div>
                <div className="proof-chip">
                  <div className="proof-chip-label mono">NAIK</div>
                  <div className="proof-chip-value is-growth">{featured.growth}</div>
                </div>
                <div className="proof-chip">
                  <div className="proof-chip-label mono">ROAS IKLAN</div>
                  <div className="proof-chip-value">{featured.roas}</div>
                </div>
              </div>
              <div className="meta-period mono">Periode {featured.period}</div>
              <button className="btn-primary btn-sm" onClick={scrollToForm}>
                Saya mau hasil serupa →
              </button>
            </div>
          </div>

          <button className="carousel-arrow right" onClick={() => setResultIdx((resultIdx + 1) % CLIENT_RESULTS.length)} aria-label="Next">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M9 6l6 6-6 6" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/></svg>
          </button>
        </div>

      </section>

      {/* ═══════════ PRESS / MEDIA TRUST ═══════════ */}
      <section className="vA-press">
        <div className="section-kicker mono">[ MEDIA TRUST ]</div>
        <div className="press-card">
          <div className="press-shot-wrap">
            <img
              className="press-shot"
              src="./assets/idn-times-jabar.png"
              alt="Artikel IDN Times Jabar tentang Dapur Insight Agency"
            />
          </div>
          <div className="press-copy">
            <div className="press-mark">IDN<span>TIMES</span> JABAR</div>
            <div className="press-copy-kicker mono">DILIPUT MEDIA</div>
            <h3 className="press-title">Dapur Insight Agency, Partner Strategis Scale-UP Brand di Marketplace</h3>
            <div className="press-meta mono">20 Feb 2026 · 23:42 WIB</div>
            <p className="press-body">
              Dapur Insight Agency sudah masuk pemberitaan IDN Times Jabar sebagai partner strategis untuk membantu brand tumbuh lebih terukur di marketplace.
            </p>
          </div>
        </div>
      </section>

      {/* TESTIMONIALS disembunyikan dulu dari tampilan, jangan hapus data/komponennya */}
      {false && (
        <section className="vA-testi">
          <div className="section-kicker mono">[ APA KATA MEREKA ]</div>
          <h2 className="vA-h2">
            Chat-chat dari klien<br/>
            yang udah <span className="hl">nikmatin hasilnya</span>
          </h2>
          <div className="vA-testi-grid">
            {TESTIMONIALS.map((t, i) => <WATestimonial t={t} key={i} />)}
          </div>
        </section>
      )}

      {/* ═══════════ CERT + STOP BUYING ═══════════ */}
      <section className="vA-cert">
        <div className="cert-left">
          <div className="section-kicker mono" style={{color:'rgba(255,255,255,0.6)'}}>[ STOP BUANG-BUANG UANG ]</div>
          <h2 className="vA-h2 invert" style={{ width: '800px', maxWidth: '100%' }}>
            Serahkan ke <span className="hl-invert">AHLINYA</span>.<br/>
            Kami <span className="ser">Certified Shopee Enabler</span>, bukan Agency Abal - Abal.
          </h2>
          <p className="vA-section-sub invert" style={{ width: '850px', maxWidth: '100%' }}>
            Dapur Insight Agency adalah Official Partner Shopee Certified Enabler Platform — artinya metodologi,
            tools, dan tim kami sudah diverifikasi langsung oleh Shopee.
          </p>
          <div className="cert-badges">
            <img
              className="cert-official-logo"
              src="./assets/certified-shopee.png"
              alt="Shopee Certified Enablers Program Q1 2026 - Dapur Insight Agency Indonesia"
            />
          </div>
        </div>
      </section>

      {/* ═══════════ PRICING ═══════════ */}
      <section className="vA-pricing">
        <div className="section-kicker mono">[ PROMO BULAN INI ]</div>
        <h2 className="vA-h2">
          Diskon spesial untuk<br/>
          <span className="hl">5 orang pertama</span> bulan ini
        </h2>

        <div className="vA-price-card">
          <div className="price-ribbon mono">HEMAT 1 JUTA</div>
          <div className="price-top">
            <div className="price-label mono">HARGA SPESIAL · BULAN PERTAMA</div>
            <div className="price-row">
              <div className="price-now mono">Rp 4.000.000</div>
              <div className="price-was">
                <span className="was-label mono">Harga normal</span>
                <span className="was-value mono">Rp 5.000.000/bln</span>
              </div>
            </div>
          </div>

          <div className="price-list">
            <div className="price-item"><span className="check">✓</span> Full management Shopee Ads (semua ads type)</div>
            <div className="price-item"><span className="check">✓</span> Audit toko & kompetitor di awal</div>
            <div className="price-item"><span className="check">✓</span> Weekly report & strategy call</div>
            <div className="price-item"><span className="check">✓</span> Bid & budget optimization harian</div>
            <div className="price-item"><span className="check">✓</span> Direct access ke Strategist via WA</div>
            <div className="price-item"><span className="check">✓</span> Bonus: TikTok Ads setup (senilai 1.5 jt)</div>
          </div>

          <button className="btn-primary btn-lg" onClick={scrollToForm}>
            Ambil diskonnya sekarang
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>
          </button>
          <div className="price-foot mono">SISA 2 SLOT LAGI HUBUNGI KAMI SEGERA UNTUK DAPAT POTONGAN SPESIAL!</div>
        </div>
      </section>

      {/* ═══════════ PROCESS ═══════════ */}
      <section className="vA-process">
        <div className="section-kicker mono">[ CARA KERJANYA ]</div>
        <h2 className="vA-h2">Prosesnya <span className="hl">simpel banget</span></h2>
        <div className="vA-process-row">
          {PROCESS.map((p, i) => (
            <div className="vA-process-step" key={i}>
              <div className="proc-n mono">{p.n}</div>
              <div className="proc-t">{p.title}</div>
              <div className="proc-b">{p.body}</div>
              {i < PROCESS.length - 1 && <div className="proc-line" />}
            </div>
          ))}
        </div>
      </section>

      {/* ═══════════ FORM ═══════════ */}
      <section className="vA-form" ref={formRef} id="vA-form">
        <div className="form-left">
          <div className="section-kicker mono">[ LANGKAH TERAKHIR ]</div>
          <h2 className="vA-h2">
            Gimana? <span className="hl">Tertarik?</span>
          </h2>
          <p className="vA-section-sub">
            Atau masih mikir-mikir? Sini kami bantu mikir biar ga skeptis duluan. Isi form singkat
            di samping — tim kami bakal sapa di WhatsApp dalam 1 jam kerja.
          </p>
          <div className="form-perks">
            <div className="perk"><span className="check">✓</span> Konsultasi awal GRATIS, ga ada biaya tambahan</div>
            <div className="perk"><span className="check">✓</span> Audit toko sekilas langsung di WA</div>
            <div className="perk"><span className="check">✓</span> Jadwal Zoom sesuai jamnya kamu</div>
            <div className="perk"><span className="check">✓</span> Kalau cocok, lanjut. Kalau ga, ya ga maksa</div>
          </div>
        </div>

        <form className="form-right" onSubmit={handleSubmit}>
          {!submitted ? (
            <>
              <div className="form-title">Lengkapi data kamu</div>
              <label className="field">
                <span className="field-label">Nama lengkap <em>*</em></span>
                <input required value={form.fullName} onChange={e=>handleChange("fullName", e.target.value)} placeholder="Nama lengkap Anda" />
              </label>
              <label className="field">
                <span className="field-label">No. WhatsApp <em>*</em></span>
                <div className="field-wa">
                  <span className="wa-flag"><img src="https://flagcdn.com/24x18/id.png" alt="ID" /> +62</span>
                  <input required value={form.whatsapp} onChange={e=>handleChange("whatsapp", e.target.value)} placeholder="81234567890" inputMode="numeric" />
                </div>
              </label>
              <label className="field">
                <span className="field-label">Email</span>
                <input type="email" value={form.email} onChange={e=>handleChange("email", e.target.value)} placeholder="nama@email.com" />
              </label>
              <label className="field">
                <span className="field-label">Link Toko Shopee <em>*</em></span>
                <input required value={form.storeUrl} onChange={e=>handleChange("storeUrl", e.target.value)} placeholder="https://shopee.co.id/namatoko" />
              </label>
              <label className="field">
                <span className="field-label">Skala Usaha <em>*</em></span>
                <select value={form.businessScale} onChange={e=>handleChange("businessScale", e.target.value)}>
                  <option>0-10 orang pegawai</option>
                  <option>11-25 orang pegawai</option>
                  <option>26-50 orang pegawai</option>
                  <option>51-100 orang pegawai</option>
                  <option>100+ orang pegawai</option>
                </select>
              </label>
              <label className="field">
                <span className="field-label">Skala Omset Per Bulan <em>*</em></span>
                <select value={form.monthlyRevenue} onChange={e=>handleChange("monthlyRevenue", e.target.value)}>
                  <option>Di bawah Rp 50 Juta</option>
                  <option>Rp 50 - 100 Juta</option>
                  <option>Rp 100 - 300 Juta</option>
                  <option>Rp 300 Juta - 1 Miliar</option>
                  <option>Di atas Rp 1 Miliar</option>
                </select>
              </label>
              <label className="field">
                <span className="field-label">Tahu dari mana Dapur Insight Agency? <em>*</em></span>
                <select value={form.leadSource} onChange={e=>handleChange("leadSource", e.target.value)}>
                  <option>Instagram</option>
                  <option>TikTok</option>
                  <option>Google Search</option>
                  <option>Referral / rekomendasi</option>
                  <option>Event / komunitas</option>
                  <option>Lainnya</option>
                </select>
              </label>
              <label className="field">
                <span className="field-label">Kapan Anda ingin segera online meeting sama kami? <em>*</em></span>
                <select value={form.meetingTimeline} onChange={e=>handleChange("meetingTimeline", e.target.value)}>
                  <option>Secepatnya (1-3 hari)</option>
                  <option>Minggu ini</option>
                  <option>Minggu depan</option>
                  <option>Masih eksplorasi dulu</option>
                </select>
              </label>
              <label className="field">
                <span className="field-label">Catatan tambahan</span>
                <textarea value={form.notes} onChange={e=>handleChange("notes", e.target.value)} placeholder="Ceritakan kondisi toko, target scale-up, kendala terbesar, atau hal yang ingin dibahas saat meeting." />
              </label>
              {formFeedback.message && (
                <div className={"form-feedback " + (formFeedback.type === "success" ? "is-success" : "is-error")}>
                  {formFeedback.message}
                </div>
              )}
              <button className="btn-primary btn-lg btn-full" type="submit" disabled={submitting}>
                {submitting ? "Menyimpan data..." : "Kirim & Mulai Analisa Toko"}
              </button>
              <div className="form-foot mono">
                Protected by reCAPTCHA · Privacy Policy · Terms of Service
              </div>
            </>
          ) : (
            <div className="form-success">
              <div className="success-icon">✓</div>
              <div className="success-title">Form terkirim!</div>
              <div className="success-body">
                Kamu bakal kami arahkan ke WhatsApp sekarang. Tim kami sapa dalam 1 jam kerja untuk audit toko sekilas.
              </div>
              <a href="https://wa.me/6289505099567" className="btn-primary btn-lg">
                Buka WhatsApp sekarang
              </a>
            </div>
          )}
        </form>
      </section>

      {/* ═══════════ OUR SERVICES ═══════════ */}
      <section className="vA-services">
        <div className="vA-services-copy">
          <div className="section-kicker mono">[ OUR SERVICES ]</div>
          <h2 className="vA-h2">
            Fokus di channel yang terbukti meningkatkan traffic & penjualan secara konsisten.
          </h2>
          <p className="vA-section-sub">
            Fokus kami bukan sekadar menjalankan iklan, tapi memastikan performa stabil, biaya efisien, dan penjualan terus bertumbuh.
          </p>
        </div>

        <div className="vA-services-logos">
          <div className="vA-service-logo-card">
            <img src="./assets/shopee.png" alt="Shopee" />
          </div>
          <div className="vA-service-logo-card vA-service-logo-dark">
            <img src="./assets/tiktok-shop-tokopedia.webp" alt="TikTok Shop by Tokopedia" />
          </div>
          <div className="vA-service-logo-card">
            <img src="./assets/meta.png" alt="Meta" />
          </div>
        </div>
      </section>

      {/* ═══════════ FAQ ═══════════ */}
      <section className="vA-faq">
        <div className="section-kicker mono">[ PERTANYAAN YANG SERING DITANYA ]</div>
        <h2 className="vA-h2">FAQ</h2>
        <div className="vA-faq-list">
          {FAQ.map((f, i) => (
            <div className={"faq-item" + (openFaq === i ? " open" : "")} key={i} onClick={() => setOpenFaq(openFaq === i ? -1 : i)}>
              <div className="faq-q">
                <span className="mono faq-num">{String(i+1).padStart(2,'0')}</span>
                <span>{f.q}</span>
                <span className="faq-plus">{openFaq === i ? "−" : "+"}</span>
              </div>
              {openFaq === i && <div className="faq-a">{f.a}</div>}
            </div>
          ))}
        </div>
      </section>

      {/* ═══════════ FOOTER ═══════════ */}
      <footer className="vA-footer">
        <div className="foot-brand">
          <img className="footer-logo-image" src="./assets/logo-dapur-insight.png" alt="Dapur Insight Agency" />
          <span>Dapur Insight Agency</span>
        </div>
        <div className="foot-copy mono">© 2026 · Shopee Certified Enabler Platform · Jakarta, ID</div>
        <div className="foot-links">
          <a href="#">Privacy</a><a href="#">Terms</a><a href="https://wa.me/6289505099567">WhatsApp</a>
        </div>
      </footer>

      {/* ═══════════ STICKY CTA BAR ═══════════ */}
      <div className={"vA-sticky" + (ctaVisible ? " show" : "")}>
        <div className="sticky-left">
          <div className="sticky-title">Siap scale-up tokomu? 🔥</div>
          <div className="sticky-sub mono">PROMO UTK 5 ORANG PERTAMA · HEMAT 1 JUTA</div>
        </div>
        <button className="btn-primary" onClick={scrollToForm}>
          HubungiKami!→
        </button>
      </div>

      {resultModalOpen && (
        <div className="result-modal" onClick={() => setResultModalOpen(false)}>
          <div className="result-modal-dialog" onClick={(event) => event.stopPropagation()}>
            <button className="result-modal-close" type="button" onClick={() => setResultModalOpen(false)} aria-label="Close">
              ×
            </button>
            <button
              className="result-modal-arrow left"
              type="button"
              onClick={() => setResultIdx((resultIdx - 1 + CLIENT_RESULTS.length) % CLIENT_RESULTS.length)}
              aria-label="Previous result"
            >
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M15 6l-6 6 6 6" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/></svg>
            </button>
            <div className="result-modal-image-wrap">
              <img className="result-modal-image" src={featured.image} alt={featured.alt || featured.brand} />
            </div>
            <button
              className="result-modal-arrow right"
              type="button"
              onClick={() => setResultIdx((resultIdx + 1) % CLIENT_RESULTS.length)}
              aria-label="Next result"
            >
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M9 6l6 6-6 6" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/></svg>
            </button>
          </div>
        </div>
      )}
    </div>
  );
};

window.VariationA = VariationA;