// Shared atoms + data for both variations

const CLIENT_RESULTS = [
  { brand: "Hotto Purto", sales: "Rp 1.4M", growth: "+55%", roas: "14.01x", period: "Apr 2026", image: "./assets/portfolio-case-hottopurto-apr26.png", alt: "Omset naik hingga 1,4 miliar dan ROAS 14X untuk Hotto Purto" },
  { brand: "Fame", sales: "Rp 211JT", growth: "+96%", roas: "11.71x", period: "Mar 2026", image: "./assets/portfolio-case-fame-mar26.png", alt: "Omset naik hingga 211 juta dan ROAS 11X untuk Fame" },
  { brand: "UFO Elektronika", sales: "Rp 5.6M", growth: "+27%", roas: "83.80x", period: "Apr 2026", image: "./assets/portfolio-case-ufoelektronika-apr26.png", alt: "Omset naik hingga 5,6 miliar dan ROAS 83X untuk UFO Elektronika" },
  { brand: "FM Powder", sales: "Rp 363JT", growth: "+43%", roas: "14.93x", period: "Feb 2026", image: "./assets/portfolio-case-fm-powder-mar26.png", alt: "Omset naik hingga 363 juta dan ROAS 14X untuk FM Powder" },
  { brand: "Kiddie Splash", sales: "Rp 613JT", growth: "+75%", roas: "7.29x", period: "Apr 2026", image: "./assets/portfolio-case-kiddiesplash-apr26.png", alt: "Omset naik hingga 613 juta dan ROAS 7X untuk Kiddie Splash" },
  { brand: "Unihome", sales: "Rp 322JT", growth: "+38%", roas: "18.09x", period: "Apr 2026", image: "./assets/portfolio-case-unihome-apr26.png", alt: "Omset naik hingga 322 juta dan ROAS 18X untuk Unihome" },
  { brand: "Sano Home", sales: "Rp 800JT", growth: "+106%", roas: "23.73x", period: "Mar 2026", image: "./assets/portfolio-case-sanohome-mar26.png", alt: "Omset naik hingga 800 juta dan ROAS 23X untuk Sano Home" },
  { brand: "Healthzilla", sales: "Rp 259JT", growth: "+124%", roas: "12.55x", period: "Apr 2026", image: "./assets/portfolio-case-healthzilla-apr26.png", alt: "Omset naik hingga 259 juta dan ROAS 12X untuk Healthzilla" },
  { brand: "UFO Ponorogo", sales: "Rp 374JT", growth: "+130%", roas: "58.55x", period: "Apr 2026", image: "./assets/portfolio-case-ufo-ponorogo-apr26.png", alt: "Omset naik hingga 374 juta dan ROAS 58X untuk UFO Ponorogo" },
  { brand: "UFO Jabodetabek", sales: "Rp 517JT", growth: "+21%", roas: "62.99x", period: "Apr 2026", image: "./assets/portfolio-case-ufo-jabodetabek-apr26.png", alt: "Omset naik hingga 517 juta dan ROAS 62X untuk UFO Jabodetabek" },
  { brand: "Case 01", sales: "Rp 1.03M", growth: "+71%", roas: "9.37x", period: "Bulanan", image: "./assets/case-1.webp", alt: "Omset naik hingga 1M dan ROAS 9X" },
  { brand: "Case 02", sales: "Rp 4.18M", growth: "+40%", roas: "98.9x", period: "30 Hari", image: "./assets/case-2.webp", alt: "Omset tembus 4M dengan kenaikan 40 persen dan biaya iklan sekitar 20 juta" },
  { brand: "Case 03", sales: "Rp 220JT", growth: "+231%", roas: "5.47x", period: "Bulanan", image: "./assets/case-3.webp", alt: "Sales naik 231 persen jadi 220 juta dengan biaya iklan hanya 16 juta" },
  { brand: "Case 04", sales: "Rp 107JT", growth: "+62%", roas: "6.19x", period: "Bulanan", image: "./assets/case-4.webp", alt: "Sales naik 62 persen jadi 107 juta dengan biaya iklan hanya 13 juta" },
  { brand: "Case 05", sales: "Rp 258JT", growth: "+81%", roas: "10.64x", period: "Bulanan", image: "./assets/case-5.webp", alt: "Sales naik 81 persen jadi 250 juta dengan biaya iklan hanya 19 juta" },
  { brand: "Case 06", sales: "Rp 511JT", growth: "+31%", roas: "6.25x", period: "Bulanan", image: "./assets/case-6.webp", alt: "Sales naik 31 persen jadi 511 juta dengan ROAS iklan 6.25X" },
  { brand: "Case 07", sales: "Rp 119JT", growth: "+128%", roas: "-", period: "Bulanan", image: "./assets/case-7.webp", alt: "Sales naik 128 persen jadi 119 juta" },
  { brand: "Case 08", sales: "Rp 61JT", growth: "+1000%", roas: "-", period: "Bulanan", image: "./assets/case-8.webp", alt: "Toko baru langsung ngegas sales naik 1000 persen" },
  { brand: "Case 09", sales: "Rp 260JT", growth: "+122%", roas: "14.59x", period: "30 Hari", image: "./assets/case-9.webp", alt: "Omset naik 122 persen dengan target sales 260 juta dan ROAS iklan 14.5X" },
  { brand: "Case 10", sales: "Rp 180JT", growth: "+50%", roas: "20.78x", period: "30 Hari", image: "./assets/case-10.webp", alt: "Sales naik 50 persen menjadi 180 juta dengan ROAS iklan 20.7X" },
];

const PAIN_POINTS = [
  { icon: "⏱", title: "Iklan udah jalan berbulan - bulan tapi ROAS-nya mengecewakan", body: "Budget habis, closing sedikit. Rasanya kayak bakar duit tanpa tahu boncosnya di mana." },
  { icon: "📉", title: "Omset stuck berbulan - bulan", body: "Semua jurus udah kamu terapin tapi ga ada hasil yang memuaskan" },
  { icon: "🧠", title: "Bingung bagi waktu antara iklan & operasional bisnis", body: "Ngurusin CPC, Iklan GMV Max, pantau iklan yang jumlahnya bisa ratusan, yakin kamu ga keteteran?" },
  { icon: "🎯", title: "Pengen scale-up tapi ga tau strateginya", body: "Dari dulu pengennya bisnis bisa lebih berkembang tapi ga kesampaian" },
  { icon: "🔥", title: "Omset naik, tapi biaya iklan ikut naik juga", body: "Net profit makin tipis, ngatur strategi iklan ga bisa asal - asalan agar net profit kamu berkembang" },
];

const TESTIMONIALS = [
  { name: "Pak Rizal", role: "Owner Skincare Brand", time: "09:42", messages: ["Bang hasil iklan bulan ini gila sih 😭", "Omset tembus 1.2M cuma dalam 3 minggu", "Padahal sebelumnya mentok di 400an", "Makasih banyak Tim Dapur Insight!"] },
  { name: "Bu Sari", role: "Fashion Seller", time: "14:18", messages: ["Awalnya ragu mau pake agency", "Tapi setelah 1 bulan, ROAS dari 3x naik ke 15x", "Budget iklan sama persis, tapi hasilnya beda jauh", "Worth it banget 🙌"] },
  { name: "Ko Hendra", role: "Elektronik Store", time: "20:05", messages: ["Reportingnya detail banget", "Tiap minggu ada update & rekomendasi", "Ga kayak freelancer lain yang ngilang 😂", "Recommended pokoknya"] },
  { name: "Mba Intan", role: "Mom & Baby Brand", time: "11:23", messages: ["Omset naik 120% dalam 2 bulan 🔥", "Tim Dapur Insight sabar banget jawab pertanyaan", "Gw yang awam jadi ngerti cara baca datanya", "10/10 mau lanjut kontrak"] },
  { name: "Pak Budi", role: "Herbal & Wellness", time: "16:47", messages: ["Produk herbal saya niche banget", "Tapi mereka bisa nemuin audience yang tepat", "Bulan pertama udah balik modal jasa", "Bulan kedua udah untung bersih"] },
  { name: "Mba Laras", role: "Home Living", time: "08:30", messages: ["Dari ROAS 2x jadi 11x 🤯", "Gw ga perlu mikirin iklan lagi", "Bisa fokus develop produk baru", "Terima kasih banyak tim 🙏"] },
];

const FAQ = [
  { q: "Siapa sih Dapur Insight Agency?", a: "Kami agency spesialis Shopee & TikTok Ads Management yang sudah menangani 50+ brand di Indonesia. Tim kami sudah bersertifikasi Shopee Certified Enabler Platform." },
  { q: "Ada garansinya ga?", a: "Iya ada. Detailnya kami jelaskan setelah anda isi form & kita ngobrol di WA biar sesuai dengan kondisi toko anda." },
  { q: "Servicenya cocok untuk siapa saja?", a: "Brand Owner, Pebisnis Online, dan Seller Offline yang ingin migrasi ke marketplace. Minimal sudah punya toko aktif di Shopee." },
  { q: "Berapa lama kontrak minimalnya?", a: "Kami rekomendasikan minimal 1 bulan untuk melihat hasil optimal. Banyak klien yang lanjut sampai 6-12 bulan." },
  { q: "Ada nomor WhatsApp-nya?", a: "Ada. Silakan chat ke 0895-0509-9567 untuk tanya-tanya lebih lanjut." },
];

const PROCESS = [
  { n: "01", title: "Isi form singkat", body: "Nama, WA, Email , dan Data bisnismu — cukup 30 detik" },
  { n: "02", title: "Diarahkan ke WhatsApp", body: "Tim kami akan sapa & cek toko kamu" },
  { n: "03", title: "Analisa toko & kompetitor", body: "Kami bedah potensi scale-up-nya" },
  { n: "04", title: "Zoom strategy call", body: "Kalau toko kamu ada potensi maka akan kami ajak Diskusi" },
  { n: "05", title: "Eksekusi & scale-up 🚀", body: "Tim kami jalankan, kamu nikmati hasilnya" },
];

// Shared components
const Stat = ({ value, label, sub, mono }) => (
  <div className="stat-card">
    <div className={"stat-value" + (mono ? " mono" : "")}>{value}</div>
    <div className="stat-label">{label}</div>
    {sub && <div className="stat-sub">{sub}</div>}
  </div>
);

const ShopeeCertBadge = ({ size = "md" }) => (
  <div className={`cert-badge cert-${size}`}>
    <div className="cert-icon" aria-hidden>
      <svg viewBox="0 0 24 24" width="18" height="18" fill="none">
        <path d="M5 12.5l4 4 10-10" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"/>
      </svg>
    </div>
    <div>
      <div className="cert-top">Shopee Certified</div>
      <div className="cert-bot">Enabler Platform · Q1 2026</div>
    </div>
  </div>
);

const ResultPlaceholder = ({ result, featured = false }) => (
  <div className={"result-ph" + (featured ? " featured" : "")}>
    <div className="ph-image-wrap">
      <img className="ph-image" src={result.image} alt={result.alt || result.brand} />
    </div>
  </div>
);

// WA-style testimonial card
const WATestimonial = ({ t }) => (
  <div className="wa-card">
    <div className="wa-header">
      <div className="wa-avatar" aria-hidden>{t.name.split(' ').map(x=>x[0]).join('').slice(0,2)}</div>
      <div className="wa-id">
        <div className="wa-name">{t.name}</div>
        <div className="wa-role">{t.role} · online</div>
      </div>
      <div className="wa-actions" aria-hidden>
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M15.5 10a5 5 0 01-5 5h-.5v2l-3-3 3-3v2h.5a3 3 0 003-3V10z" fill="currentColor"/></svg>
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none"><circle cx="5" cy="12" r="1.6" fill="currentColor"/><circle cx="12" cy="12" r="1.6" fill="currentColor"/><circle cx="19" cy="12" r="1.6" fill="currentColor"/></svg>
      </div>
    </div>
    <div className="wa-body">
      {t.messages.map((m, i) => (
        <div key={i} className={"wa-bubble" + (i === t.messages.length - 1 ? " last" : "")}>
          {m}
          {i === t.messages.length - 1 && (
            <span className="wa-time">
              {t.time}
              <svg width="14" height="10" viewBox="0 0 16 11" fill="none" style={{marginLeft:4, verticalAlign:'middle'}}>
                <path d="M1 5.5l2.5 2.5L8 3.5M7 5.5L9.5 8 15 2.5" stroke="#4FC3F7" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/>
              </svg>
            </span>
          )}
        </div>
      ))}
    </div>
  </div>
);

Object.assign(window, {
  CLIENT_RESULTS, PAIN_POINTS, TESTIMONIALS, FAQ, PROCESS,
  Stat, ShopeeCertBadge, ResultPlaceholder, WATestimonial,
});