/* @jsx React.createElement */
// Landing sections (bottom half) for INDIE Labs.
const { useState: useStateB, useEffect: useEffectB, useRef: useRefB } = React;

// ============================================================
// AI DEMO — playable in-page playground using antbridge.indiegroup.id (Anthropic-compatible)
// ============================================================
const DEMO_PROMPTS = [
  "Cafe specialty di Bandung, kapasitas 30 seat, butuh POS",
  "Brand fashion lokal, jual via WA, mau migrasi ke web sendiri",
  "Klinik kecil, butuh sistem booking + reminder via WhatsApp",
  "Punya prompt LLM yang work di n8n, mau jadi web app B2B",
];

function AIDemo() {
  const [input, setInput] = useStateB("");
  const [out, setOut] = useStateB("");
  const [loading, setLoading] = useStateB(false);
  const [error, setError] = useStateB(null);

  const run = async (text) => {
    const prompt = (text ?? input).trim();
    if (!prompt) return;
    setLoading(true); setError(null); setOut("");
    try {
      const sys = `Kamu adalah technical scoping assistant dari INDIE Labs, studio software di Indonesia.
Bahasa: Indonesia santai, ramah, jelas, hindari jargon.
Tugas: dari brief 1 kalimat dari user, kasih:

**Diagnosis singkat** (1 kalimat).
**Recommended scope** (3-4 bullet pendek, mulai dengan kata kerja).
**Estimasi kasar**: timeline (mingguan), tim (jumlah orang).
**Tier paket yang pas**: Starter / Growth / Custom + alasan 1 kalimat.

Total max 110 kata. Pakai format markdown sederhana. Jangan basa-basi pembuka.`;
      const resp = await fetch("https://antbridge.indiegroup.id/v1/messages", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          model: "claude-sonnet-4-20250514",
          max_tokens: 1024,
          system: sys,
          messages: [{ role: "user", content: `Brief: "${prompt}"` }],
        }),
      });
      if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
      const data = await resp.json();
      const out = data?.content?.[0]?.text;
      if (!out) throw new Error("empty response");
      setOut(out);
    } catch (e) {
      setError("Demo lagi sibuk. Coba lagi sebentar atau langsung WhatsApp kami.");
    }
    setLoading(false);
  };

  return (
    <section className="section" id="ai-demo">
      <div className="container">
        <div className="split split-side">
          <div className="sticky-side" style={{ position: "sticky", top: 96 }}>
            <div className="eyebrow" style={{ marginBottom: 18 }}>// scoping playground</div>
            <h2 style={{
              fontFamily: "var(--font-serif)", fontStyle: "italic", fontWeight: 400,
              color: "var(--labs-fg)", fontSize: "clamp(40px, 5vw, 68px)",
              lineHeight: 1.02, letterSpacing: "-0.01em", margin: 0, textWrap: "balance",
            }}>
              Coba dulu.<br/>
              <span style={{ color: "var(--labs-accent)" }}>Brief kamu —<br/>kami scope-in.</span>
            </h2>
            <p className="lede-sm" style={{ marginTop: 24 }}>
              Tulis ide proyek kamu satu kalimat. AI kami balas dengan jalan
              jadi siapa kamu nanti — scope, estimasi, dan paket yang pas.
              Live, di halaman ini.
            </p>
            <div style={{ fontSize: 12, fontFamily: "var(--font-mono)", color: "var(--labs-fg-3)", marginTop: 24, display: "flex", gap: 10, alignItems: "center" }}>
              <span style={{ width: 8, height: 8, borderRadius: "50%", background: "#8be58b", boxShadow: "0 0 0 3px rgba(139,229,139,0.2)" }} />
              powered by Claude · for indicative scoping only
            </div>
          </div>

          <div className="card" style={{ background: "var(--labs-surface)", borderColor: "var(--labs-line-2)", padding: 28 }}>
            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 18 }}>
              <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
                <div style={{ width: 32, height: 32, borderRadius: "50%", background: "var(--labs-accent)", display: "flex", alignItems: "center", justifyContent: "center" }}>
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#001933" strokeWidth="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6M16 13H8M16 17H8M10 9H8"/></svg>
                </div>
                <div>
                  <div style={{ fontWeight: 700, fontSize: 15 }}>Project scoper</div>
                  <div className="eyebrow-dim">v0.3 · indielabs</div>
                </div>
              </div>
              <div className="mono" style={{ fontSize: 11, color: "var(--labs-fg-3)" }}>~110 words max</div>
            </div>

            <textarea
              className="field"
              rows={3}
              placeholder="Misal: cafe specialty di Bandung, kapasitas 30 seat, butuh POS sederhana yang bisa cetak struk ke printer thermal..."
              value={input}
              onChange={(e) => setInput(e.target.value)}
              style={{ resize: "vertical", minHeight: 84, fontSize: 14 }}
            />

            <div style={{ display: "flex", gap: 8, marginTop: 12, flexWrap: "wrap" }}>
              {DEMO_PROMPTS.map((p) => (
                <button key={p} onClick={() => { setInput(p); run(p); }}
                  style={{
                    fontFamily: "var(--font-mono)", fontSize: 11,
                    padding: "6px 10px", borderRadius: 999,
                    background: "var(--labs-field-bg)",
                    color: "var(--labs-fg-3)",
                    border: "1px solid var(--labs-line-2)",
                    cursor: "pointer", letterSpacing: ".04em",
                  }}
                  onMouseEnter={(e) => { e.currentTarget.style.color = "var(--labs-accent)"; e.currentTarget.style.borderColor = "var(--labs-accent)"; }}
                  onMouseLeave={(e) => { e.currentTarget.style.color = "var(--labs-fg-3)"; e.currentTarget.style.borderColor = "var(--labs-line-2)"; }}>
                  {p.length > 56 ? p.slice(0, 56) + "…" : p}
                </button>
              ))}
            </div>

            <div style={{ display: "flex", gap: 10, marginTop: 16, alignItems: "center" }}>
              <button className="btn btn-primary" onClick={() => run()} disabled={loading || !input.trim()}
                style={{ opacity: (loading || !input.trim()) ? 0.5 : 1 }}>
                {loading ? "Scoping…" : "Scope it →"}
              </button>
              <button onClick={() => { setInput(""); setOut(""); setError(null); }}
                style={{ background: "transparent", border: "none", color: "var(--labs-fg-3)", cursor: "pointer", fontSize: 13 }}>
                Reset
              </button>
            </div>

            {(loading || out || error) && (
              <div style={{ marginTop: 22, borderTop: "1px solid var(--labs-line)", paddingTop: 22 }}>
                {loading && (
                  <div style={{ display: "flex", gap: 8, alignItems: "center", color: "var(--labs-fg-3)", fontSize: 13 }}>
                    <span style={{ width: 8, height: 8, borderRadius: "50%", background: "var(--labs-accent)", animation: "blink 0.8s infinite" }} />
                    Reading brief, kira-kira scope, estimasi, paket...
                  </div>
                )}
                {error && (
                  <div style={{ fontSize: 13, color: "#ff9a8a" }}>{error}</div>
                )}
                {out && (
                  <div className="markdown" style={{ fontSize: 14, lineHeight: 1.7, color: "var(--labs-fg)" }}
                       dangerouslySetInnerHTML={{ __html: tinyMd(out) }} />
                )}
              </div>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

// minimal markdown: **bold**, headings, list, line breaks
function tinyMd(s) {
  return s
    .replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;")
    .replace(/\*\*(.+?)\*\*/g, '<strong style="color:var(--labs-accent)">$1</strong>')
    .replace(/^### (.+)$/gm, '<h4 style="font-size:14px;margin:10px 0 4px;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.12em;color:var(--labs-fg-3)">$1</h4>')
    .replace(/^- (.+)$/gm, '<div style="display:flex;gap:8px;align-items:flex-start;margin:4px 0"><span style="color:var(--labs-accent);font-family:var(--font-mono)">·</span><span>$1</span></div>')
    .replace(/\n\n/g, "<br/><br/>")
    .replace(/\n/g, " ");
}

// ============================================================
// PORTFOLIO TEASER (3 placeholder cards → link to portfolio page)
// ============================================================
const PORTFOLIO_TEASER = [
  { tag: "POS", title: "Order & kitchen display untuk specialty cafe", year: "2026", color: "var(--indie-orange-500)", brand: "indiecafe" },
  { tag: "AI", title: "Chatbot konsultasi visa via WhatsApp", year: "2026", color: "var(--labs-accent)", brand: "indielabs" },
  { tag: "Dashboard", title: "Inventory & sales tracker untuk UKM packaging", year: "2025", color: "var(--indie-cyan-500)", brand: "indiepack" },
];

function PortfolioTeaser() {
  return (
    <section className="section" id="portfolio-teaser" style={{ background: "var(--labs-sunken)", borderTop: "1px solid var(--labs-line)", borderBottom: "1px solid var(--labs-line)" }}>
      <div className="container">
        <div style={{ display: "flex", alignItems: "end", justifyContent: "space-between", gap: 32, marginBottom: 48 }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 18 }}>// works · selected</div>
            <h2 className="h-display" style={{ color: "var(--labs-fg)" }}>
              Kerjaan terakhir<br/>kami.
            </h2>
          </div>
          <a href="portfolio.html" className="btn btn-ghost">Semua portfolio →</a>
        </div>

        <div className="grid-3">
          {PORTFOLIO_TEASER.map((w, i) => (
            <a key={i} href="portfolio.html" className="card" style={{
              textDecoration: "none", color: "inherit", padding: 0, overflow: "hidden",
              display: "flex", flexDirection: "column", minHeight: 360,
            }}
               onMouseEnter={(e) => { e.currentTarget.style.transform = "translateY(-2px)"; }}
               onMouseLeave={(e) => { e.currentTarget.style.transform = "translateY(0)"; }}>
              <div style={{
                height: 200, position: "relative", overflow: "hidden",
                background: `linear-gradient(135deg, ${w.color} 0%, ${w.color}88 100%)`,
              }}>
                <div style={{
                  position: "absolute", inset: 0,
                  backgroundImage: "radial-gradient(circle, rgba(0,0,0,0.18) 1px, transparent 1.2px)",
                  backgroundSize: "20px 20px",
                }} />
                <img src={`assets/logos/${w.brand}.png`} alt="" style={{
                  position: "absolute", right: -20, bottom: -20,
                  width: 160, height: 160, borderRadius: "50%",
                  opacity: 0.55,
                }} />
                <div style={{
                  position: "absolute", top: 16, left: 16,
                  fontFamily: "var(--font-mono)", fontSize: 11,
                  letterSpacing: ".18em", textTransform: "uppercase",
                  color: "#001933", background: "rgba(250,250,247,0.85)",
                  padding: "4px 10px", borderRadius: 999, fontWeight: 600,
                }}>
                  {w.tag}
                </div>
              </div>
              <div style={{ padding: 24, display: "flex", flexDirection: "column", flex: 1 }}>
                <div className="mono" style={{ fontSize: 11, color: "var(--labs-fg-3)", letterSpacing: ".18em", marginBottom: 10 }}>{w.year}</div>
                <div style={{ fontSize: 17, fontWeight: 700, color: "var(--labs-fg)", lineHeight: 1.35 }}>{w.title}</div>
                <div style={{ marginTop: "auto", paddingTop: 18, color: "var(--labs-accent)", fontSize: 13, fontWeight: 600 }}>
                  Read case →
                </div>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================================
// PRICING
// ============================================================
const PRICING = [
  {
    name: "Starter",
    jp: "スターター",
    identity: "Mulai hadir.",
    price: "Rp 12.500.000",
    sub: "Mulai dari",
    desc: "Buat brand & founder solo. Tahap pertama — dari ‘belum ada apa-apa di Google’ jadi punya rumah online sendiri.",
    inc: [
      "1 page brief + 1 revisi major",
      "Up to 5 halaman, responsive",
      "CMS sederhana (edit sendiri)",
      "Domain + hosting set-up",
      "2 minggu support",
    ],
    cta: "Buat yang baru mulai hadir",
    highlight: false,
  },
  {
    name: "Growth",
    jp: "グロース",
    identity: "Naik kelas.",
    price: "Rp 35.000.000",
    sub: "Mulai dari",
    desc: "Buat UKM siap scale. Tahap dimana operasi mulai rapi dan brand kamu dipercaya untuk transaksi yang lebih besar.",
    inc: [
      "Discovery 2 sesi + wireframe",
      "Web-app custom (1-2 modul)",
      "Auth, role, dashboard admin",
      "Integrasi WA / payment / accounting",
      "1 bulan free support",
      "Training tim kamu",
    ],
    cta: "Buat yang siap naik kelas",
    highlight: true,
  },
  {
    name: "Custom",
    jp: "カスタム",
    identity: "Main di liga sendiri.",
    price: "Let's talk",
    sub: "Quote per proyek",
    desc: "Buat startup, klien enterprise, atau founder yang produknya bikin pasar baru. Treatment khusus, ritme khusus.",
    inc: [
      "Dedicated team (PM + design + eng)",
      "Sprint mingguan, demo Jumat",
      "AI integration & deployment",
      "Long-term retainer optional",
      "SLA & monitoring infra",
    ],
    cta: "Buat yang main sendiri",
    highlight: false,
  },
];

function Pricing() {
  return (
    <section className="section" id="pricing">
      <div className="container">
        <SectionHead
          eye="// pricing · 3 stages"
          title={<>Harga jelas.<br/>Quote pun jujur.</>}
          desc="Tiap tier mewakili satu tahap jadi siapa kamu. Kalau ragu pilih yang mana, langsung WA — biasanya 5 menit udah kelar."
        />

        <div className="grid-3" style={{ marginTop: 56 }}>
          {PRICING.map((p) => <PriceCard key={p.name} p={p} />)}
        </div>

        <div style={{ marginTop: 28, textAlign: "center", fontSize: 13, color: "var(--labs-fg-3)" }}>
          Harga belum termasuk PPN. Pembayaran 50% di awal, 50% di launch.
        </div>
      </div>
    </section>
  );
}

function PriceCard({ p }) {
  return (
    <div className="card" style={{
      position: "relative",
      borderColor: p.highlight ? "var(--labs-accent)" : "var(--labs-line)",
      background: p.highlight ? "linear-gradient(180deg, rgba(240,208,80,0.06), var(--labs-surface) 60%)" : "var(--labs-surface)",
      padding: 28,
      display: "flex", flexDirection: "column", gap: 16,
      minHeight: 480,
    }}>
      {p.highlight && (
        <div style={{
          position: "absolute", top: -14, right: 24,
          background: "var(--labs-accent)", color: "#001933",
          fontFamily: "var(--font-script)", fontSize: 18,
          fontWeight: 700,
          padding: "4px 14px", borderRadius: 4,
          transform: "rotate(-3deg)",
          boxShadow: "2px 2px 0 rgba(var(--labs-shadow-ink), 0.6)",
        }}>paling sering dipilih ✨</div>
      )}
      <div>
        <div style={{ fontFamily: "var(--font-display)", fontSize: 36, textTransform: "uppercase", letterSpacing: ".01em", lineHeight: 1, color: "var(--labs-fg)" }}>
          {p.name}
        </div>
        <div style={{ fontFamily: "var(--font-jp)", fontSize: 13, color: "var(--labs-fg-3)", marginTop: 4 }}>{p.jp}</div>
        {p.identity && (
          <div style={{
            fontFamily: "var(--font-serif)", fontStyle: "italic",
            fontSize: 22, color: p.highlight ? "var(--labs-accent)" : "var(--labs-fg)",
            marginTop: 10, letterSpacing: "-0.005em", lineHeight: 1.1,
          }}>
            “{p.identity}”
          </div>
        )}
      </div>
      <div>
        <div style={{ fontSize: 11, color: "var(--labs-fg-3)", fontFamily: "var(--font-mono)", letterSpacing: ".14em", textTransform: "uppercase" }}>{p.sub}</div>
        <div className="mono" style={{ fontSize: 30, fontWeight: 700, color: p.highlight ? "var(--labs-accent)" : "var(--labs-fg)", marginTop: 4, letterSpacing: "-.01em" }}>
          {p.price}
        </div>
      </div>
      <p style={{ fontSize: 14, color: "var(--labs-fg-2)", lineHeight: 1.6, margin: 0 }}>{p.desc}</p>
      <div className="rule" />
      <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 10 }}>
        {p.inc.map((i) => (
          <li key={i} style={{ display: "flex", gap: 10, alignItems: "flex-start", fontSize: 13, color: "var(--labs-fg-2)" }}>
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke={p.highlight ? "var(--labs-accent)" : "var(--labs-fg-3)"} strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" style={{ marginTop: 4, flex: "0 0 auto" }}>
              <polyline points="20 6 9 17 4 12"/>
            </svg>
            <span>{i}</span>
          </li>
        ))}
      </ul>
      <a href={WA_LINK(`Halo INDIE Labs, saya tertarik paket ${p.name}.`)} target="_blank" rel="noopener"
         className={p.highlight ? "btn btn-primary" : "btn btn-ghost"}
         style={{ marginTop: "auto", justifyContent: "center" }}>
        {p.cta} →
      </a>
    </div>
  );
}

// ============================================================
// FAQ
// ============================================================
const FAQS = [
  {
    q: "Berapa lama biasanya satu proyek?",
    a: "Landing page 2-3 minggu. Web-app sederhana 6-10 minggu. AI integration 4-8 minggu, tergantung kompleksitas. Kami selalu kasih timeline rinci di awal — bukan janji manis.",
  },
  {
    q: "Source code-nya milik siapa?",
    a: "Kamu. 100%. Repo dipindah ke akun kamu di launch day. Kami juga kasih dokumentasi setup biar tim lain bisa lanjut kalau perlu.",
  },
  {
    q: "Pakai no-code atau coding beneran?",
    a: "Tergantung kebutuhan. Untuk MVP cepat kami sering pakai Next.js + Supabase. Untuk UKM yang butuh ringan, kadang Webflow + Make.com. Kami diskusikan trade-off-nya jujur sebelum mulai.",
  },
  {
    q: "Bisa revisi setelah launch?",
    a: "Bisa. Tiap paket dapet free support 2 minggu - 1 bulan. Setelahnya, ada paket retainer mulai Rp 3.5jt/bulan kalau mau tim kami tetep on standby.",
  },
  {
    q: "Kerja remote atau bisa ketemuan?",
    a: "Dua-duanya. Tim kami di Jakarta & Bandung. Sprint review bisa via Zoom, kunjungan on-site untuk proyek besar.",
  },
  {
    q: "Bisa cuma konsultasi tanpa lanjut bangun?",
    a: "Bisa. Booking IT Consultant — half-day session Rp 2.5jt, kamu dapet rekomendasi tech stack, estimasi cost, dan opini jujur. Kalau lanjut bangun, biayanya dipotong dari proyek.",
  },
];

function FAQ() {
  const [open, setOpen] = useStateB(0);
  return (
    <section className="section" id="faq">
      <div className="container">
        <div className="split split-faq">
          <div className="sticky-side" style={{ position: "sticky", top: 96 }}>
            <div className="eyebrow" style={{ marginBottom: 18 }}>// faq</div>
            <h2 style={{
              fontFamily: "var(--font-serif)", fontStyle: "italic", fontWeight: 400,
              color: "var(--labs-fg)", fontSize: "clamp(40px, 5vw, 64px)",
              lineHeight: 1.02, letterSpacing: "-0.01em", margin: 0, textWrap: "balance",
            }}>
              Pertanyaan<br/>yang sering<br/>kami dapet.
            </h2>
            <p className="lede-sm" style={{ marginTop: 20 }}>
              Gak ketemu jawabannya? <a href={WA_LINK("Halo INDIE Labs, saya mau tanya...")} target="_blank" rel="noopener" style={{ color: "var(--labs-accent)", textDecoration: "underline" }}>WhatsApp aja</a> — direspons jam kerja.
            </p>
          </div>
          <div>
            {FAQS.map((f, i) => (
              <div key={i} style={{ borderTop: "1px solid var(--labs-line)", padding: "20px 0" }}>
                <button onClick={() => setOpen(open === i ? -1 : i)}
                  style={{
                    all: "unset", display: "flex", justifyContent: "space-between",
                    alignItems: "center", width: "100%", cursor: "pointer", gap: 16,
                  }}>
                  <div style={{ display: "flex", gap: 14, alignItems: "baseline" }}>
                    <span className="mono" style={{ fontSize: 12, color: "var(--labs-accent)", letterSpacing: ".12em" }}>
                      {String(i + 1).padStart(2, "0")}
                    </span>
                    <span style={{ fontSize: 18, fontWeight: 600, color: "var(--labs-fg)" }}>{f.q}</span>
                  </div>
                  <span style={{
                    width: 28, height: 28, borderRadius: "50%",
                    border: "1px solid var(--labs-line-2)",
                    display: "flex", alignItems: "center", justifyContent: "center",
                    color: "var(--labs-fg-2)", fontSize: 16,
                    transition: "transform 200ms var(--ease-out)",
                    transform: open === i ? "rotate(45deg)" : "rotate(0)",
                  }}>+</span>
                </button>
                {open === i && (
                  <div style={{ marginTop: 14, paddingLeft: 34, color: "var(--labs-fg-2)", lineHeight: 1.7, fontSize: 15, maxWidth: "62ch" }}>
                    {f.a}
                  </div>
                )}
              </div>
            ))}
            <div style={{ borderTop: "1px solid var(--labs-line)" }} />
          </div>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// CONTACT CTA
// ============================================================
function ContactCTA() {
  return (
    <section className="section" id="contact-cta" style={{ paddingBottom: 128 }}>
      <div className="container">
        <div className="card" style={{
          background: "var(--labs-accent)", color: "#001933",
          border: "1.5px solid #001933",
          boxShadow: "8px 8px 0 rgba(var(--labs-shadow-ink), 1)",
          padding: "56px 48px",
          position: "relative", overflow: "hidden",
        }}>
          <div style={{
            position: "absolute", top: -80, right: -80,
            width: 320, height: 320, borderRadius: "50%",
            border: "1px dashed rgba(0,25,51,0.25)",
          }} />
          <div style={{
            position: "absolute", top: -40, right: -40,
            width: 240, height: 240, borderRadius: "50%",
            border: "1px dashed rgba(0,25,51,0.2)",
          }} />
          <div className="split split-cta" style={{ position: "relative" }}>
            <div>
              <div className="eyebrow" style={{ color: "#001933", opacity: 0.7, marginBottom: 18 }}>// next step</div>
              <h2 style={{ color: "#001933", fontSize: "clamp(40px, 5.6vw, 76px)", fontFamily: "var(--font-serif)", fontStyle: "italic", fontWeight: 400, letterSpacing: "-0.01em", lineHeight: 1.0, margin: 0, textWrap: "balance" }}>
                Siap jadi versi<br/>siap-mu?<br/>
                <span style={{ fontFamily: "var(--font-script)", fontWeight: 700, fontStyle: "normal", fontSize: "0.62em", lineHeight: 1.1, display: "inline-block", marginTop: 6 }}>Kita ngobrol dulu — gratis.</span>
              </h2>
              <p style={{ fontSize: 17, lineHeight: 1.6, color: "#001933", opacity: 0.85, marginTop: 20, maxWidth: 520 }}>
                30–60 menit ngobrol. Kami dengerin dulu, baru kasih arah.
                Cocok lanjut, gak cocok kami tetep bantu arahin ke orang
                yang tepat. Gak ada upsell, gak ada drama.
              </p>
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: 12, position: "relative" }}>
              <a href={WA_LINK()} target="_blank" rel="noopener" className="btn btn-wa" style={{ justifyContent: "center", fontSize: 16, padding: "16px 22px" }}>
                <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.587-5.946.003-6.556 5.338-11.891 11.893-11.891 3.181.001 6.167 1.24 8.413 3.488 2.245 2.248 3.481 5.236 3.48 8.414-.003 6.557-5.338 11.892-11.893 11.892-1.99-.001-3.951-.5-5.688-1.448l-6.305 1.654zm6.597-3.807c1.676.995 3.276 1.591 5.392 1.592 5.448 0 9.886-4.434 9.889-9.885.002-5.462-4.415-9.89-9.881-9.892-5.452 0-9.887 4.434-9.889 9.884-.001 2.225.651 3.891 1.746 5.634l-.999 3.648 3.742-.981zm11.387-5.464c-.074-.124-.272-.198-.57-.347-.297-.149-1.758-.868-2.031-.967-.272-.099-.47-.149-.669.149-.198.297-.768.967-.941 1.165-.173.198-.347.223-.644.074-.297-.149-1.255-.462-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.297-.347.446-.521.151-.172.2-.296.3-.495.099-.198.05-.372-.025-.521-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.501-.669-.51l-.57-.01c-.198 0-.52.074-.792.372s-1.04 1.016-1.04 2.479 1.065 2.876 1.213 3.074c.149.198 2.095 3.2 5.076 4.487.709.306 1.263.489 1.694.626.712.226 1.36.194 1.872.118.571-.085 1.758-.719 2.006-1.413.248-.695.248-1.29.173-1.414z"/></svg>
                WhatsApp 0897 6046 5000
              </a>
              <a href={`mailto:${EMAIL}?subject=Diskusi proyek dari indielabs.id`} className="btn" style={{ background: "#001933", color: "var(--labs-accent)", border: "1px solid #001933", justifyContent: "center", padding: "14px 22px" }}>
                ✉ {EMAIL}
              </a>
              <a href="contact.html" className="btn" style={{ background: "transparent", color: "#001933", border: "1px solid #001933", justifyContent: "center", padding: "13px 22px" }}>
                Atau kirim brief lewat form →
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { AIDemo, PortfolioTeaser, Pricing, FAQ, ContactCTA, PRICING, FAQS, PORTFOLIO_TEASER, DEMO_PROMPTS, tinyMd });