// ===== Peeka v2 — Feature visuals & sections =====
const { useState: useStateV2, useEffect: useEffectV2 } = React;

// ===== Hero =====
const HeroV2 = () => (
  <section className="relative pt-24 pb-20 md:pt-32 md:pb-28 bg-navy-900 text-white overflow-hidden noise">
    <div className="absolute -top-40 left-1/4 w-[600px] h-[600px] glow-radial blur-3xl opacity-60 pointer-events-none"></div>
    <div className="absolute bottom-0 right-0 w-[500px] h-[500px] glow-radial blur-3xl opacity-40 pointer-events-none"></div>
    <Fireflies count={16} />

    <div className="relative max-w-7xl mx-auto px-5 sm:px-8 grid md:grid-cols-[1.1fr_1fr] gap-12 md:gap-8 items-center">
      <div>
        <div className="inline-flex items-center gap-2 bg-white/5 border border-white/10 rounded-full px-3 py-1 text-xs text-white/80 mb-6 backdrop-blur">
          <span className="w-1.5 h-1.5 rounded-full bg-glow-400 shadow-glow-sm"></span>
          Asisten Keuangan UMKM
          <span className="text-white/40">•</span>
          <span className="text-glow-300">Bot Telegram + AI NLP</span>
        </div>

        <h1 className="text-4xl sm:text-5xl md:text-[4rem] font-extrabold leading-[1.05] tracking-tight text-balance">
          Kelola Keuangan UMKM{" "}
          <span className="relative inline-block">
            <span className="relative z-10 bg-gradient-to-r from-glow-300 via-glow-400 to-glow-300 bg-clip-text text-transparent italic">
              Sat-Set
            </span>
            <span className="absolute inset-0 blur-2xl bg-glow-400/40 -z-0"></span>
          </span>
          ,<br />
          Cukup Lewat Chat Telegram!
        </h1>

        <p className="mt-6 text-lg text-white/70 max-w-xl text-pretty leading-relaxed">
          Gak perlu download aplikasi berat atau pusing belajar akuntansi. Catat
          pemasukan, pengeluaran, hingga tagih piutang cukup pakai bahasa
          manusia di Telegram. Biarkan AI Peeka yang merapikan laporanmu!
        </p>

        <div className="mt-8 flex flex-col sm:flex-row gap-3">
          <a
            href="https://t.me/peeka_id_bot?start=mulai_sekarang"
            className="group inline-flex items-center justify-center gap-2 bg-glow-400 hover:bg-glow-300 text-navy-900 font-bold px-6 py-3.5 rounded-full shadow-glow transition-all hover:-translate-y-0.5"
          >
            <Icon name="send" size={18} />
            Mulai di Telegram (Gratis)
            <Icon
              name="arrow-right"
              size={18}
              className="transition-transform group-hover:translate-x-1"
            />
          </a>
          <a
            href="#cara-pakai"
            className="inline-flex items-center justify-center gap-2 bg-white/5 hover:bg-white/10 border border-white/15 text-white font-semibold px-6 py-3.5 rounded-full backdrop-blur"
          >
            <Icon name="play" size={16} />
            Lihat Cara Pakai
          </a>
        </div>

        <div className="mt-8 flex flex-wrap items-center gap-x-6 gap-y-2 text-sm text-white/60">
          <div className="flex items-center gap-2">
            <Icon name="check" size={16} className="text-teal-400" /> Tanpa
            install
          </div>
          <div className="flex items-center gap-2">
            <Icon name="check" size={16} className="text-teal-400" /> Bahasa
            manusia
          </div>
          <div className="flex items-center gap-2">
            <Icon name="check" size={16} className="text-teal-400" /> Scan nota
            OCR
          </div>
        </div>
      </div>

      <div className="relative">
        <div className="absolute -inset-8 glow-radial blur-2xl opacity-80"></div>
        <div className="relative">
          <TelegramWindow
            botName="Peeka Bot"
            subtitle="AI Asisten Keuangan · online"
          >
            <div className="flex justify-center">
              <span className="text-[10px] bg-white/80 text-navy-900/70 rounded-md px-2 py-0.5 shadow-sm">
                HARI INI
              </span>
            </div>
            <ChatBubble side="user" time="09:12" delay={400}>
              Azis beli gorengan 10rb
            </ChatBubble>
            <ChatBubble
              side="bot"
              time="09:12"
              delay={1600}
              avatar="P"
              name="Peeka Bot"
            >
              <span className="text-teal-600 font-semibold">
                ✅ Pemasukan dicatat
              </span>
              {"\n"}
              <span className="font-mono text-[12px]">• Azis — Gorengan</span>
              {"\n"}
              <span className="font-mono text-[12px]">• Rp 10.000</span>
            </ChatBubble>
            <ChatBubble side="user" time="09:14" delay={2800}>
              Bayar listrik 200rb
            </ChatBubble>
            <ChatBubble
              side="bot"
              time="09:14"
              delay={4000}
              avatar="P"
              name="Peeka Bot"
            >
              <span className="text-teal-600 font-semibold">
                ✅ Pengeluaran dicatat
              </span>
              {"\n"}
              <span className="font-mono text-[12px]">
                • Listrik — Utilitas
              </span>
              {"\n"}
              <span className="font-mono text-[12px]">• Rp 200.000</span>
            </ChatBubble>
          </TelegramWindow>
        </div>

        <div className="absolute -left-2 top-10 bg-white rounded-2xl shadow-card px-3 py-2 flex items-center gap-2 ring-1 ring-black/5 hidden sm:flex">
          <div className="w-8 h-8 rounded-full bg-teal-50 flex items-center justify-center text-teal-600">
            <Icon name="sparkles" size={16} />
          </div>
          <div>
            <div className="text-[10px] text-navy-900/60">AI NLP memproses</div>
            <div className="text-sm font-bold text-navy-900 font-mono">
              ~5 detik
            </div>
          </div>
        </div>
        <div className="absolute -right-2 bottom-20 bg-white rounded-2xl shadow-card px-3 py-2 ring-1 ring-black/5 hidden sm:block">
          <div className="flex items-center gap-2">
            <span className="w-2 h-2 rounded-full bg-teal-500 animate-pulse"></span>
            <div className="text-[10px] text-navy-900/60">Kategori auto</div>
          </div>
          <div className="text-sm font-bold text-navy-900">Makanan · F&B</div>
        </div>
      </div>
    </div>
  </section>
);

// ===== Problem / Solusi =====
const SolusiV2 = () => (
  <section className="relative py-20 md:py-24 bg-cream-100">
    <div className="max-w-6xl mx-auto px-5 sm:px-8">
      <div className="grid md:grid-cols-2 gap-10 lg:gap-16 items-center">
        {/* Left: receipt image */}
        <div className="reveal relative flex justify-center md:justify-end order-2 md:order-1">
          <div className="relative">
            <div className="absolute -inset-6 bg-glow-400/20 blur-3xl rounded-full pointer-events-none"></div>
            <img
              src="peeka-receipt.png"
              alt="Peeka scan nota"
              className="relative max-w-sm w-full h-auto drop-shadow-2xl"
            />
          </div>
        </div>
        {/* Right: copy */}
        <div className="reveal text-center md:text-left order-1 md:order-2">
          <span className="inline-block text-xs font-bold tracking-widest text-teal-600 uppercase mb-4">
            Solusi
          </span>
          <h2 className="text-3xl sm:text-4xl md:text-5xl font-extrabold text-navy-900 text-balance leading-tight">
            Males Nyatet Pengeluaran
            <br />
            <span className="text-navy-900/40">Pemasukan & Piutang?</span>
          </h2>
          <p className="mt-6 text-lg text-navy-900/70 max-w-xl text-pretty leading-relaxed">
            Kami tahu pemilik UMKM itu sibuk. Dengan Peeka, cukup foto nota
            belanjaan, AI kami akan otomatis membaca angka dan mencatatnya.
            Pantau piutang pelanggan juga tinggal sekali klik.
          </p>
          <div className="mt-8 flex flex-wrap justify-center md:justify-start gap-3">
            {[
              "Foto nota → otomatis",
              "Chat bahasa manusia",
              "Piutang sekali klik",
            ].map((t, i) => (
              <div
                key={i}
                className="inline-flex items-center gap-2 bg-white ring-1 ring-navy-900/5 rounded-full px-4 py-2 text-sm font-semibold text-navy-900 shadow-sm"
              >
                <Icon
                  name="check-circle-2"
                  size={16}
                  className="text-teal-500"
                />{" "}
                {t}
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  </section>
);

// ===== Fitur Utama (grid of 8) =====
const FiturV2 = () => {
  const features = [
    {
      icon: "message-square-text",
      title: "Catat Lewat Telegram",
      copy: 'Cukup kirim chat seperti "Azis beli gorengan 10rb" atau "Bayar listrik 200rb" ke Telegram. Peeka langsung kelola pencatatan otomatis.',
      big: true,
    },
    {
      icon: "tags",
      title: "Kategori Otomatis by AI",
      copy: "Semua transaksi dikategorikan otomatis. Kamu juga bisa buat kategori khusus sesuai bisnismu.",
    },
    {
      icon: "scan-line",
      title: "Scan Nota & OCR",
      copy: "Males ngetik? Foto nota belanja bahan bakumu. AI Peeka langsung baca angka.",
    },
    {
      icon: "line-chart",
      title: "Laporan & Grafik Web",
      copy: "Dashboard web yang gampang dipahami. Pantau laba-rugi jadi lebih enak.",
    },
    {
      icon: "hand-coins",
      title: "Manajemen Piutang",
      copy: "Daftar piutang tersusun rapi dengan link pelunasan cepat.",
    },
    {
      icon: "file-text",
      title: "Kirim Nota",
      copy: "Nota/Invoice  profesional tinggal chat. Kirim ke pelanggan dalam hitungan detik.",
    },
    {
      icon: "layout-dashboard",
      title: "Dashboard Web Pro",
      copy: "Tampilan profesional dengan grafik analisis lengkap.",
    },
  ];

  return (
    <section id="fitur" className="relative py-20 md:py-28 bg-cream-50">
      <div className="max-w-7xl mx-auto px-5 sm:px-8">
        <div className="max-w-3xl reveal">
          <span className="inline-block text-xs font-bold tracking-widest text-teal-600 uppercase mb-4">
            Fitur Utama
          </span>
          <h2 className="text-3xl sm:text-4xl md:text-5xl font-extrabold text-navy-900 text-balance leading-tight">
            Tujuh cara Peeka bikin keuangan UMKM jadi{" "}
            <span className="italic text-teal-600">effortless</span>.
          </h2>
        </div>

        <div className="mt-14 grid md:grid-cols-3 lg:grid-cols-4 gap-4 md:auto-rows-fr">
          {features.map((f, i) => (
            <div
              key={i}
              className={`reveal group relative bg-white rounded-2xl p-6 ring-1 ring-navy-900/5 shadow-sm hover:shadow-card hover:-translate-y-1 transition-all ${f.big ? "md:col-span-2 lg:col-span-2 bg-gradient-to-br from-navy-900 to-navy-800 text-white ring-0" : ""}`}
            >
              <div
                className={`w-11 h-11 rounded-xl flex items-center justify-center mb-4 ${f.big ? "bg-glow-400 shadow-glow-sm text-navy-900" : "bg-cream-100 text-teal-600 group-hover:bg-glow-400 group-hover:text-navy-900 transition"}`}
              >
                <Icon name={f.icon} size={20} strokeWidth={2.2} />
              </div>
              <h3
                className={`font-extrabold text-balance leading-tight ${f.big ? "text-2xl text-white" : "text-lg text-navy-900"}`}
              >
                {f.title}
              </h3>
              <p
                className={`mt-2 text-pretty leading-relaxed ${f.big ? "text-white/70 text-sm" : "text-sm text-navy-900/60"}`}
              >
                {f.copy}
              </p>
              {f.big && (
                <div className="mt-5 inline-flex items-center gap-2 text-xs font-mono text-glow-300 bg-white/5 border border-white/10 rounded-lg px-3 py-2">
                  <span className="text-white/50">user@peeka:~$</span>
                  <span className="caret">"Azis beli gorengan 10rb"</span>
                </div>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// ===== Cara Pakai (interactive two-column sim) =====
const CaraPakaiV2 = () => {
  const [tab, setTab] = useState(0);
  const [key, setKey] = useState(0); // force re-mount to replay animation
  useEffect(() => {
    setKey((k) => k + 1);
  }, [tab]);

  const tabs = [
    {
      label: "Catat Pengeluaran",
      icon: "arrow-down-to-line",
      heading: "Catat bahan baku dengan bahasa sehari-hari.",
      copy: "Kombinasi NLP (untuk teks) dan OCR (untuk foto nota) membaca item dan nominal sekaligus. Satu pesan, beberapa item — Peeka memecahnya otomatis.",
      bullets: [
        "Parsing multi-item dalam satu chat",
        "Kategori auto (bahan baku, utilitas, gaji)",
        "Total harian ter-update realtime",
      ],
      sim: (
        <>
          <div className="flex justify-center">
            <span className="text-[10px] bg-white/80 text-navy-900/70 rounded-md px-2 py-0.5 shadow-sm">
              HARI INI · PENGELUARAN
            </span>
          </div>
          <ChatBubble side="user" time="14:02" delay={300}>
            belanja bahan baku, tepung terigu 2kg 50k dan gula 10kg 150rb
          </ChatBubble>
          <ChatBubble
            side="bot"
            time="14:02"
            delay={1800}
            avatar="P"
            name="Peeka Bot"
          >
            <span className="text-teal-600 font-semibold">
              ✅ Pengeluaran dicatat
            </span>
            {"\n"}
            <span className="font-mono text-[12px]">
              • Tepung Terigu 2kg — Rp 50.000
            </span>
            {"\n"}
            <span className="font-mono text-[12px]">
              • Gula 10kg — Rp 150.000
            </span>
            {"\n\n"}
            <span className="text-navy-900/70 text-[12px]">
              Total pengeluaran hari ini:{" "}
            </span>
            <span className="font-bold font-mono text-[12px]">Rp 200.000</span>
          </ChatBubble>
          <ChatBubble side="bot" time="14:02" delay={3200} avatar="P">
            <span className="text-[11px] text-navy-900/60">Kategori auto:</span>{" "}
            <span className="inline-block text-[10px] bg-teal-50 text-teal-700 rounded px-1.5 py-0.5 font-semibold">
              Bahan Baku
            </span>
          </ChatBubble>
        </>
      ),
    },
    {
      label: "Catat Pemasukan",
      icon: "arrow-up-from-line",
      heading: "Jualan jalan terus, catatan tetap rapi.",
      copy: "Customer datang, langsung ketik transaksi di Telegram. Peeka memisahkan item, menghitung total, dan menambahkan ke kas tanpa bikin kamu berhenti melayani.",
      bullets: [
        "Auto-split per item & nominal",
        "Kas ter-update instant",
        "Simpan nama pelanggan untuk riwayat",
      ],
      sim: (
        <>
          <div className="flex justify-center">
            <span className="text-[10px] bg-white/80 text-navy-900/70 rounded-md px-2 py-0.5 shadow-sm">
              HARI INI · PEMASUKAN
            </span>
          </div>
          <ChatBubble side="user" time="12:30" delay={300}>
            Azis beli Gorengan 10 biji 10rb sama nambah sambel 5k
          </ChatBubble>
          <ChatBubble
            side="bot"
            time="12:30"
            delay={1800}
            avatar="P"
            name="Peeka Bot"
          >
            <span className="text-teal-600 font-semibold">
              ✅ Pemasukan masuk
            </span>
            {"\n"}
            <span className="font-mono text-[12px]">
              • Gorengan 10 biji — Rp 10.000
            </span>
            {"\n"}
            <span className="font-mono text-[12px]">• Sambal — Rp 5.000</span>
            {"\n\n"}
            <span className="font-bold text-navy-900 text-[12px]">
              Kas bertambah Rp 15.000! 🎉
            </span>
          </ChatBubble>
          <ChatBubble side="bot" time="12:30" delay={3200} avatar="P">
            <span className="text-[11px] text-navy-900/60">Pelanggan:</span>{" "}
            <span className="text-[11px] font-semibold text-navy-900">
              Azis
            </span>{" "}
            <span className="inline-block text-[10px] bg-glow-400/20 text-glow-600 rounded px-1.5 py-0.5 font-semibold ml-1">
              Regular
            </span>
          </ChatBubble>
        </>
      ),
    },
  ];

  const active = tabs[tab];
  return (
    <section id="cara-pakai" className="relative py-20 md:py-28 bg-cream-100">
      <div className="max-w-7xl mx-auto px-5 sm:px-8">
        <div className="text-center reveal max-w-3xl mx-auto">
          <span className="inline-block text-xs font-bold tracking-widest text-teal-600 uppercase mb-4">
            Cara Pakai
          </span>
          <h2 className="text-3xl sm:text-4xl md:text-5xl font-extrabold text-navy-900 text-balance leading-tight">
            Ketik, Peeka catat.
          </h2>
          <p className="mt-4 text-navy-900/60 text-pretty">
            Klik tab di bawah untuk melihat simulasi chat yang sebenarnya.
          </p>
        </div>

        <div className="mt-10 flex justify-center gap-2">
          {tabs.map((t, i) => (
            <button
              key={i}
              onClick={() => setTab(i)}
              className={`inline-flex items-center gap-2 px-4 py-2.5 rounded-full text-sm font-semibold transition ${tab === i ? "bg-navy-900 text-white shadow-card" : "bg-white text-navy-900/60 ring-1 ring-navy-900/10 hover:text-navy-900"}`}
            >
              <Icon name={t.icon} size={15} />
              {t.label}
            </button>
          ))}
        </div>

        <div className="mt-10 grid md:grid-cols-[1fr_1fr] gap-8 md:gap-12 items-center">
          <div className="reveal">
            <div className="inline-flex items-center gap-2 bg-teal-50 text-teal-700 rounded-full px-3 py-1 text-xs font-semibold mb-4">
              <Icon name={active.icon} size={14} /> Fitur {tab + 1}
            </div>
            <h3 className="text-2xl md:text-3xl font-extrabold text-navy-900 text-balance leading-tight">
              {active.heading}
            </h3>
            <p className="mt-4 text-navy-900/65 text-pretty leading-relaxed">
              {active.copy}
            </p>
            <ul className="mt-6 space-y-3">
              {active.bullets.map((b, i) => (
                <li key={i} className="flex items-start gap-3">
                  <span className="mt-0.5 w-5 h-5 rounded-full bg-glow-400 flex items-center justify-center flex-shrink-0 shadow-glow-sm">
                    <Icon
                      name="check"
                      size={12}
                      className="text-navy-900"
                      strokeWidth={3}
                    />
                  </span>
                  <span className="text-navy-900/80 text-sm">{b}</span>
                </li>
              ))}
            </ul>
          </div>

          <div className="relative">
            <div className="absolute -inset-6 glow-radial blur-2xl opacity-60"></div>
            <div key={key} className="relative">
              <TelegramWindow
                botName="Peeka Bot"
                subtitle="AI Asisten Keuangan · online"
              >
                {active.sim}
              </TelegramWindow>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

// ===== Menu Bot (terminal-style) =====
const MenuBotV2 = () => {
  const commands = [
    {
      cmd: "/login",
      desc: "Link khusus akses ke Dashboard Web — tanpa masukin user password, semua mudah sekali klik.",
      icon: "log-in",
    },
    {
      cmd: "/laporan_pemasukan",
      desc: "Rekap instan pemasukan harian/bulanan langsung di dashboard web.",
      icon: "trending-up",
    },
    {
      cmd: "/laporan_pengeluaran",
      desc: "Rekap instan pengeluaran harian/bulanan langsung di dashboard web.",
      icon: "trending-down",
    },
    {
      cmd: "/bantuan",
      desc: "Panduan cara pakai — jawaban cepat untuk pertanyaan umum.",
      icon: "life-buoy",
    },
    {
      cmd: "/list_piutang",
      desc: "Lihat daftar piutang aktif dan langsung bisa eksekusi pelunasan.",
      icon: "hand-coins",
    },
  ];

  return (
    <section
      id="menu-bot"
      className="relative py-20 md:py-28 bg-navy-900 text-white overflow-hidden noise"
    >
      <div className="absolute top-0 left-0 w-[500px] h-[500px] glow-radial blur-3xl opacity-40 pointer-events-none"></div>
      <Fireflies count={6} />

      <div className="relative max-w-6xl mx-auto px-5 sm:px-8">
        <div className="text-center reveal max-w-3xl mx-auto">
          <span className="inline-block text-xs font-bold tracking-widest text-glow-300 uppercase mb-4">
            Menu Bot
          </span>
          <h2 className="text-3xl sm:text-4xl md:text-5xl font-extrabold text-balance leading-tight">
            Shortcut <span className="font-mono text-glow-300">/command</span>{" "}
            untuk akses instan.
          </h2>
          <p className="mt-4 text-white/60 text-pretty">
            Akses menu command ini di menu telegram chat kamu
          </p>
        </div>

        <div className="mt-12 reveal">
          <div className="bg-navy-950 rounded-2xl border border-white/10 shadow-2xl overflow-hidden">
            <div className="flex items-center gap-2 px-4 py-3 border-b border-white/10 bg-white/5">
              <div className="flex gap-1.5">
                <span className="w-2.5 h-2.5 rounded-full bg-rose-400"></span>
                <span className="w-2.5 h-2.5 rounded-full bg-glow-400"></span>
                <span className="w-2.5 h-2.5 rounded-full bg-teal-400"></span>
              </div>
              <div className="text-xs font-mono text-white/50 ml-2">
                peeka-bot — /commands
              </div>
            </div>
            <div className="divide-y divide-white/5">
              {commands.map((c, i) => (
                <div
                  key={i}
                  className="px-5 py-4 flex items-start gap-4 hover:bg-white/[0.03] transition"
                >
                  <div className="w-10 h-10 rounded-lg bg-glow-400/15 text-glow-300 flex items-center justify-center flex-shrink-0">
                    <Icon name={c.icon} size={18} />
                  </div>
                  <div className="flex-1 min-w-0">
                    <div className="font-mono text-base text-glow-300 font-semibold">
                      {c.cmd}
                    </div>
                    <div className="text-sm text-white/65 mt-1 text-pretty">
                      {c.desc}
                    </div>
                  </div>
                  <button className="hidden sm:inline-flex items-center gap-1 text-xs text-white/50 hover:text-white bg-white/5 border border-white/10 rounded-md px-2.5 py-1.5">
                    <Icon name="copy" size={11} /> Salin
                  </button>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

// ===== Dashboard Preview (data-rich but approachable) =====
const DashboardV2 = () => {
  const bars = [40, 62, 48, 75, 58, 88, 94];
  const categories = [
    { n: "Bahan Baku", v: 3200000, pct: 42, c: "bg-teal-500" },
    { n: "Gaji & Upah", v: 1800000, pct: 24, c: "bg-glow-400" },
    { n: "Utilitas", v: 1100000, pct: 15, c: "bg-navy-700" },
    { n: "Transport", v: 740000, pct: 10, c: "bg-rose-400" },
    { n: "Lainnya", v: 680000, pct: 9, c: "bg-navy-900/40" },
  ];

  return (
    <section className="relative py-20 md:py-28 bg-cream-50">
      <div className="max-w-7xl mx-auto px-5 sm:px-8">
        <div className="grid md:grid-cols-[1fr_1.2fr] gap-10 md:gap-14 items-center">
          <div className="reveal">
            <span className="inline-block text-xs font-bold tracking-widest text-teal-600 uppercase mb-4">
              Dashboard Web
            </span>
            <h2 className="text-3xl sm:text-4xl md:text-5xl font-extrabold text-navy-900 text-balance leading-tight">
              Data-rich, tapi tetap{" "}
              <span className="italic text-teal-600">mudah dipahami</span>.
            </h2>
            <p className="mt-5 text-navy-900/65 text-pretty leading-relaxed">
              Semua transaksi dari Telegram otomatis masuk ke dashboard web.
              Grafik, kategori, piutang — dalam satu layar. Tanpa spreadsheet
              pusing.
            </p>
            <div className="mt-6 space-y-2.5">
              {[
                ["layout-dashboard", "Ringkasan 7 hari + bulanan"],
                ["pie-chart", "Breakdown kategori otomatis"],
                ["file-down", "Export PDF & Excel (paket Pro)"],
              ].map(([ic, t], i) => (
                <div
                  key={i}
                  className="flex items-center gap-3 text-sm text-navy-900/80"
                >
                  <div className="w-7 h-7 rounded-lg bg-teal-50 text-teal-600 flex items-center justify-center">
                    <Icon name={ic} size={14} />
                  </div>
                  {t}
                </div>
              ))}
            </div>
          </div>

          <div className="relative reveal">
            <div className="absolute -inset-8 glow-radial blur-3xl opacity-40"></div>
            {/* Browser chrome */}
            <div className="relative bg-white rounded-2xl shadow-card ring-1 ring-navy-900/10 overflow-hidden">
              <div className="flex items-center gap-2 px-4 py-2.5 bg-cream-100 border-b border-navy-900/5">
                <div className="flex gap-1.5">
                  <span className="w-2.5 h-2.5 rounded-full bg-rose-400"></span>
                  <span className="w-2.5 h-2.5 rounded-full bg-glow-400"></span>
                  <span className="w-2.5 h-2.5 rounded-full bg-teal-400"></span>
                </div>
                <div className="flex-1 text-center text-[11px] font-mono text-navy-900/50 bg-white rounded-md py-1 mx-4">
                  app.peeka.id/dashboard
                </div>
              </div>

              <div className="p-5 space-y-5">
                {/* Top stats */}
                <div className="grid grid-cols-3 gap-3">
                  <div className="bg-gradient-to-br from-navy-900 to-navy-800 text-white rounded-xl p-3.5">
                    <div className="text-[10px] uppercase tracking-wider text-white/50">
                      Pemasukan
                    </div>
                    <div className="font-extrabold font-mono text-lg text-glow-300">
                      Rp 10.2jt
                    </div>
                    <div className="text-[10px] text-teal-300 flex items-center gap-1 mt-0.5">
                      <Icon name="trending-up" size={10} /> +18%
                    </div>
                  </div>
                  <div className="bg-cream-100 rounded-xl p-3.5 ring-1 ring-navy-900/5">
                    <div className="text-[10px] uppercase tracking-wider text-navy-900/50">
                      Pengeluaran
                    </div>
                    <div className="font-extrabold font-mono text-lg text-navy-900">
                      Rp 7.5jt
                    </div>
                    <div className="text-[10px] text-rose-500 flex items-center gap-1 mt-0.5">
                      <Icon name="trending-up" size={10} /> +4%
                    </div>
                  </div>
                  <div className="bg-glow-400/20 rounded-xl p-3.5 ring-1 ring-glow-400/40">
                    <div className="text-[10px] uppercase tracking-wider text-glow-600">
                      Laba
                    </div>
                    <div className="font-extrabold font-mono text-lg text-navy-900">
                      Rp 2.7jt
                    </div>
                    <div className="text-[10px] text-teal-700 flex items-center gap-1 mt-0.5">
                      <Icon name="trending-up" size={10} /> Profit
                    </div>
                  </div>
                </div>

                {/* Chart - lifeline area chart */}
                <div className="bg-cream-50 rounded-xl p-4 ring-1 ring-navy-900/5">
                  <div className="flex items-center justify-between mb-3">
                    <div>
                      <div className="text-[10px] uppercase tracking-wider text-navy-900/50">
                        Pemasukan 7 Hari
                      </div>
                      <div className="font-bold text-navy-900 font-mono">
                        Rp 10.284.500
                      </div>
                    </div>
                    <div className="flex gap-1">
                      {["Harian", "Mingguan", "Bulanan"].map((l, i) => (
                        <span
                          key={i}
                          className={`text-[10px] px-2 py-1 rounded font-semibold ${i === 0 ? "bg-navy-900 text-white" : "text-navy-900/50"}`}
                        >
                          {l}
                        </span>
                      ))}
                    </div>
                  </div>
                  <div className="relative h-24">
                    <svg
                      viewBox="0 0 280 96"
                      className="w-full h-full overflow-visible"
                      preserveAspectRatio="none"
                    >
                      <defs>
                        <linearGradient
                          id="lifelineFill"
                          x1="0"
                          y1="0"
                          x2="0"
                          y2="1"
                        >
                          <stop
                            offset="0%"
                            stopColor="#14B8A6"
                            stopOpacity="0.35"
                          />
                          <stop
                            offset="100%"
                            stopColor="#14B8A6"
                            stopOpacity="0"
                          />
                        </linearGradient>
                        <linearGradient
                          id="lifelineStroke"
                          x1="0"
                          y1="0"
                          x2="1"
                          y2="0"
                        >
                          <stop offset="0%" stopColor="#14B8A6" />
                          <stop offset="100%" stopColor="#FFD84D" />
                        </linearGradient>
                      </defs>
                      {/* Area fill */}
                      <path
                        d="M 0,70 C 25,62 40,55 60,50 C 85,44 100,58 120,48 C 145,36 160,28 180,30 C 205,33 220,18 240,14 C 260,11 270,9 280,8 L 280,96 L 0,96 Z"
                        fill="url(#lifelineFill)"
                      />
                      {/* Stroke line */}
                      <path
                        d="M 0,70 C 25,62 40,55 60,50 C 85,44 100,58 120,48 C 145,36 160,28 180,30 C 205,33 220,18 240,14 C 260,11 270,9 280,8"
                        fill="none"
                        stroke="url(#lifelineStroke)"
                        strokeWidth="2.5"
                        strokeLinecap="round"
                      />
                      {/* Data points */}
                      {[
                        { x: 0, y: 70 },
                        { x: 47, y: 54 },
                        { x: 93, y: 52 },
                        { x: 140, y: 42 },
                        { x: 187, y: 30 },
                        { x: 233, y: 16 },
                        { x: 280, y: 8 },
                      ].map((p, i) => (
                        <g key={i}>
                          <circle
                            cx={p.x}
                            cy={p.y}
                            r="3"
                            fill="#fff"
                            stroke="#14B8A6"
                            strokeWidth="2"
                          />
                        </g>
                      ))}
                      {/* Last point pulse highlight */}
                      <circle
                        cx="280"
                        cy="8"
                        r="5"
                        fill="#FFD84D"
                        opacity="0.4"
                      >
                        <animate
                          attributeName="r"
                          values="5;9;5"
                          dur="2s"
                          repeatCount="indefinite"
                        />
                        <animate
                          attributeName="opacity"
                          values="0.4;0;0.4"
                          dur="2s"
                          repeatCount="indefinite"
                        />
                      </circle>
                      <circle
                        cx="280"
                        cy="8"
                        r="3.5"
                        fill="#FFD84D"
                        stroke="#fff"
                        strokeWidth="1.5"
                      />
                    </svg>
                  </div>
                  <div className="flex justify-between mt-2 px-0.5">
                    {["S", "S", "R", "K", "J", "S", "M"].map((d, i) => (
                      <span
                        key={i}
                        className="text-[9px] text-navy-900/40 font-mono"
                      >
                        {d}
                      </span>
                    ))}
                  </div>
                </div>

                {/* Category breakdown */}
                <div className="bg-cream-50 rounded-xl p-4 ring-1 ring-navy-900/5">
                  <div className="text-[10px] uppercase tracking-wider text-navy-900/50 mb-3">
                    Breakdown Pengeluaran
                  </div>
                  <div className="space-y-2">
                    {categories.map((c, i) => (
                      <div key={i} className="flex items-center gap-3 text-xs">
                        <span className="font-semibold text-navy-900 w-24 truncate">
                          {c.n}
                        </span>
                        <div className="flex-1 h-2 rounded-full bg-navy-900/5 overflow-hidden">
                          <div
                            className={`h-full ${c.c}`}
                            style={{ width: c.pct + "%" }}
                          ></div>
                        </div>
                        <span className="font-mono text-navy-900/70 w-16 text-right">
                          {c.pct}%
                        </span>
                      </div>
                    ))}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

// ===== Pricing =====
const PricingV2 = () => {
  const free = [
    "Bisa Login Dashboard",
    "Catat via Telegram (Bahasa Manusia)",
    "Maks. 100 Transaksi/Bulan",
    "Akses Laporan Harian Dasar",
    "Kirim Invoice Digital Profesional",
    "Dashboard Web Standard",
  ];
  const pro = [
    "Transaksi Tanpa Batas (Unlimited)",
    "Scan Nota OCR Unlimited",
    "Manajemen Piutang + Link Pelunasan",
    "Export Laporan (Excel/PDF)",
    "Kirim Invoice Digital Profesional",
    "Dashboard Web Pro + Grafik Analisis",
  ];
  return (
    <section id="harga" className="relative py-20 md:py-28 bg-cream-100">
      <div className="max-w-6xl mx-auto px-5 sm:px-8">
        <div className="text-center reveal max-w-3xl mx-auto">
          <span className="inline-block text-xs font-bold tracking-widest text-teal-600 uppercase mb-4">
            Harga
          </span>
          <h2 className="text-3xl sm:text-4xl md:text-5xl font-extrabold text-navy-900 text-balance leading-tight">
            Mulai gratis, upgrade saat bisnis tumbuh.
          </h2>
          <p className="mt-4 text-navy-900/60 text-pretty">
            Tanpa kartu kredit. Batalkan kapan saja.
          </p>
        </div>

        <div className="mt-12 grid md:grid-cols-2 gap-5 max-w-4xl mx-auto">
          {/* Free */}
          <div className="reveal relative bg-white rounded-3xl p-8 ring-1 ring-navy-900/10 shadow-sm">
            <div className="flex items-center gap-2 text-xs font-bold text-navy-900/60 uppercase tracking-widest">
              <Icon name="gift" size={14} /> Paket Gratis
            </div>
            <div className="mt-4 flex flex-wrap items-baseline gap-x-2 gap-y-1">
              <span className="text-5xl font-extrabold text-navy-900 font-mono whitespace-nowrap">
                Rp 0
              </span>
              <span className="text-navy-900/50 whitespace-nowrap">
                /selamanya
              </span>
            </div>
            <p className="mt-2 text-sm text-navy-900/60">
              Cocok untuk mulai dan kenalan dengan Peeka.
            </p>
            <a
              href="https://t.me/peeka_id_bot?start=mulai_sekarang"
              className="mt-6 inline-flex w-full items-center justify-center gap-2 bg-navy-900 hover:bg-navy-800 text-white font-semibold py-3 rounded-full transition"
            >
              Mulai Gratis di Telegram <Icon name="arrow-right" size={16} />
            </a>
            <ul className="mt-6 space-y-3 text-sm">
              {free.map((t, i) => (
                <li key={i} className="flex items-start gap-3">
                  <span className="mt-0.5 w-5 h-5 rounded-full bg-teal-50 text-teal-600 flex items-center justify-center flex-shrink-0">
                    <Icon name="check" size={12} strokeWidth={3} />
                  </span>
                  <span className="text-navy-900/80">{t}</span>
                </li>
              ))}
            </ul>
          </div>

          {/* Pro */}
          <div className="reveal relative bg-gradient-to-br from-navy-900 to-navy-800 text-white rounded-3xl p-8 shadow-glow overflow-hidden">
            <div className="absolute -top-20 -right-20 w-60 h-60 glow-radial blur-3xl opacity-70"></div>
            <div className="relative">
              <div className="flex items-center justify-between">
                <div className="inline-flex items-center gap-2 text-xs font-bold text-glow-300 uppercase tracking-widest">
                  <Icon name="sparkles" size={14} /> Full Akses
                </div>
                <span className="text-[10px] font-bold text-navy-900 bg-glow-400 rounded-full px-2 py-1">
                  POPULER
                </span>
              </div>
              <div className="mt-4 flex flex-wrap items-baseline gap-x-2 gap-y-1">
                <span className="text-5xl font-extrabold font-mono text-glow-300 whitespace-nowrap">
                  Rp 24.500
                </span>
                <span className="text-white/60 whitespace-nowrap">/bulan</span>
              </div>
              <p className="mt-2 text-sm text-white/60">
                Untuk UMKM yang serius tumbuh.
              </p>
              <a
                href="https://t.me/peeka_id_bot?start=upgrade_pro"
                className="mt-6 inline-flex w-full items-center justify-center gap-2 bg-glow-400 hover:bg-glow-300 text-navy-900 font-bold py-3 rounded-full transition"
              >
                Upgrade ke Pro <Icon name="arrow-right" size={16} />
              </a>
              <ul className="mt-6 space-y-3 text-sm">
                {pro.map((t, i) => (
                  <li key={i} className="flex items-start gap-3">
                    <span className="mt-0.5 w-5 h-5 rounded-full bg-glow-400 text-navy-900 flex items-center justify-center flex-shrink-0 shadow-glow-sm">
                      <Icon name="check" size={12} strokeWidth={3} />
                    </span>
                    <span className="text-white/90">{t}</span>
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

// ===== UMKM Samples =====
const UMKMV2 = () => {
  const samples = [
    {
      name: "Mbak Ambyar",
      biz: "Persewaan Kostum",
      icon: "shirt",
      quote:
        '"Piutang sewa kostum yang ribet akhirnya rapi! Gak ada lagi nota nyelip, semua aman di genggaman Telegram.."',
      tint: "from-teal-400 to-teal-600",
    },
    {
      name: "Maspekik Custom",
      biz: "Fashion Sablon Kaos",
      icon: "graduation-cap",
      quote:
        '"Ngirim invoice makin cepet sama si peeka dan langsung auto kecatet semua dong pengeluaran dan pemasukan bisnis aku."',
      tint: "from-glow-300 to-glow-500",
    },
    {
      name: "Ayra Gift",
      biz: "Hampers & Merchandise",
      icon: "store",
      quote:
        '"Akhirnya aku ada temen curhat nyatet pengeluaran bisnis aku, dan dia langsung ngerekap kategorinya."',
      tint: "from-navy-700 to-navy-900",
    },
  ];

  return (
    <section id="umkm" className="relative py-20 md:py-28 bg-cream-50">
      <div className="max-w-6xl mx-auto px-5 sm:px-8">
        <div className="text-center reveal max-w-3xl mx-auto">
          <span className="inline-block text-xs font-bold tracking-widest text-teal-600 uppercase mb-4">
            Sample UMKM
          </span>
          <h2 className="text-3xl sm:text-4xl md:text-5xl font-extrabold text-navy-900 text-balance leading-tight">
            Cerita Mereka yang Sudah 'Sat-Set' Bareng Peeka.
          </h2>
        </div>

        <div className="mt-12 grid md:grid-cols-3 gap-5">
          {samples.map((s, i) => (
            <div
              key={i}
              className="reveal bg-white rounded-2xl p-6 ring-1 ring-navy-900/5 shadow-sm hover:-translate-y-1 transition"
            >
              <div
                className={`w-14 h-14 rounded-2xl bg-gradient-to-br ${s.tint} flex items-center justify-center mb-5 shadow-card`}
              >
                <Icon name={s.icon} size={24} className="text-white" />
              </div>
              <div className="font-extrabold text-navy-900 text-lg">
                {s.name}
              </div>
              <div className="text-xs font-mono text-teal-600 mt-0.5">
                {s.biz}
              </div>
              <p className="mt-4 text-sm text-navy-900/65 text-pretty leading-relaxed">
                "{s.quote}"
              </p>
              <div className="mt-5 pt-5 border-t border-navy-900/5 flex items-center gap-1.5 text-glow-500">
                {[0, 1, 2, 3, 4].map((k) => (
                  <Icon key={k} name="star" size={12} />
                ))}
                <span className="text-navy-900/40 text-xs ml-1 font-mono">
                  5.0
                </span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// ===== CTA =====
const CTAV2 = () => (
  <section id="cta" className="relative py-20 md:py-24 bg-cream-100">
    <div className="max-w-5xl mx-auto px-5 sm:px-8">
      <div className="relative overflow-hidden rounded-3xl bg-navy-900 text-white p-10 md:p-16 text-center noise">
        <div className="absolute inset-0 glow-radial blur-3xl opacity-70"></div>
        <Fireflies count={10} />
        <div className="relative">
          <h2 className="text-3xl sm:text-4xl md:text-5xl font-extrabold text-balance leading-tight">
            Siap catat keuangan dengan cara yang lebih{" "}
            <span className="text-glow-300">mudah</span>?
          </h2>
          <p className="mt-5 text-white/70 text-pretty max-w-xl mx-auto">
            Klik tombol di bawah, langsung ke chat Peeka Bot.
          </p>
          <div className="mt-8 flex justify-center">
            <a
              href="https://t.me/peeka_id_bot?start=mulai_sekarang"
              className="inline-flex items-center justify-center gap-2 bg-glow-400 hover:bg-glow-300 text-navy-900 font-bold px-7 py-4 rounded-full shadow-glow"
            >
              <Icon name="send" size={18} /> Mulai di Telegram (Gratis)
            </a>
          </div>
        </div>
      </div>
    </div>
  </section>
);

// ===== Footer =====
const FooterV2 = () => (
  <footer className="bg-navy-950 text-white pt-16 pb-10 relative overflow-hidden">
    <div className="absolute -top-20 left-1/2 -translate-x-1/2 w-[600px] h-[300px] glow-radial blur-3xl opacity-30 pointer-events-none"></div>
    <div className="relative max-w-7xl mx-auto px-5 sm:px-8">
      <div className="grid md:grid-cols-[1.5fr_1fr_1fr_1fr] gap-10">
        <div>
          <Logo light />
          <p className="mt-4 text-white/60 text-sm text-pretty max-w-sm leading-relaxed">
            Peeka — Asisten Keuangan UMKM berbasis Bot Telegram. Memberdayakan
            UMKM Indonesia dengan Kecerdasan Artifisial.
          </p>
          <div className="mt-5 flex gap-2">
            {["send", "instagram", "twitter", "youtube"].map((s) => (
              <a
                key={s}
                href="#"
                className="w-9 h-9 rounded-full bg-white/5 hover:bg-glow-400/20 hover:text-glow-300 text-white/60 flex items-center justify-center transition"
              >
                <Icon name={s} size={15} />
              </a>
            ))}
          </div>
        </div>
        <div>
          <div className="text-xs uppercase tracking-wider text-white/40 mb-4">
            Produk
          </div>
          <ul className="space-y-2.5 text-sm text-white/70">
            <li>
              <a href="#fitur" className="hover:text-glow-300">
                Fitur
              </a>
            </li>
            <li>
              <a href="#cara-pakai" className="hover:text-glow-300">
                Cara Pakai
              </a>
            </li>
            <li>
              <a href="#menu-bot" className="hover:text-glow-300">
                Menu Bot
              </a>
            </li>
            <li>
              <a href="#harga" className="hover:text-glow-300">
                Harga
              </a>
            </li>
          </ul>
        </div>
        <div>
          <div className="text-xs uppercase tracking-wider text-white/40 mb-4">
            Perusahaan
          </div>
          <ul className="space-y-2.5 text-sm text-white/70">
            <li>
              <a href="#" className="hover:text-glow-300">
                Tentang Kami
              </a>
            </li>
            <li>
              <a href="#" className="hover:text-glow-300">
                Blog
              </a>
            </li>
            <li>
              <a href="#" className="hover:text-glow-300">
                Karir
              </a>
            </li>
            <li>
              <a href="#" className="hover:text-glow-300">
                Kontak
              </a>
            </li>
          </ul>
        </div>
        <div>
          <div className="text-xs uppercase tracking-wider text-white/40 mb-4">
            Bantuan
          </div>
          <ul className="space-y-2.5 text-sm text-white/70">
            <li>
              <a href="#" className="hover:text-glow-300">
                Pusat Bantuan
              </a>
            </li>
            <li>
              <a href="#" className="hover:text-glow-300">
                Status
              </a>
            </li>
            <li>
              <a href="#" className="hover:text-glow-300">
                Privasi
              </a>
            </li>
            <li>
              <a href="#" className="hover:text-glow-300">
                Syarat
              </a>
            </li>
          </ul>
        </div>
      </div>

      <div className="mt-14 pt-6 border-t border-white/10 flex flex-col sm:flex-row items-center justify-between gap-4 text-xs text-white/40">
        <div>© 2026 Peeka Part Of Jagoan Media Malang</div>
        <div className="flex items-center gap-4">
          <span className="flex items-center gap-1.5">
            <span className="w-1.5 h-1.5 rounded-full bg-teal-400 animate-pulse"></span>{" "}
            Sistem normal
          </span>
          <span className="font-mono">v2.4.1</span>
        </div>
      </div>
    </div>
  </footer>
);

// ===== App =====
const AppV2 = () => {
  useReveal();
  return (
    <div className="min-h-screen">
      <Nav />
      <main>
        <HeroV2 />
        <SolusiV2 />
        <FiturV2 />
        <CaraPakaiV2 />
        <MenuBotV2 />
        <DashboardV2 />
        <PricingV2 />
        <UMKMV2 />
        <CTAV2 />
      </main>
      <FooterV2 />
    </div>
  );
};

ReactDOM.createRoot(document.getElementById("root")).render(<AppV2 />);