/* @jsx React.createElement */
// Sub-page components (services, portfolio, contact) + shared bits.
const { useState: useStateS, useEffect: useEffectS } = React;

// ============================================================
// Page header (sub-page hero)
// ============================================================
function PageHeader({ eye, title, sub }) {
  return (
    <section style={{ position: "relative", paddingTop: 144, paddingBottom: 64, overflow: "hidden" }}>
      <div className="lattice" />
      <div className="container" style={{ position: "relative" }}>
        <div className="eyebrow" style={{ marginBottom: 18, display: "flex", alignItems: "center", gap: 12 }}>
          <span className="bracket-jp">「</span>{eye}<span className="bracket-jp">」</span>
        </div>
        <h1 className="h-display" style={{ color: "var(--labs-fg)", maxWidth: 14 + "ch", fontSize: "clamp(48px, 7vw, 96px)" }}>
          {title}
        </h1>
        {sub && <p className="lede" style={{ marginTop: 24 }}>{sub}</p>}
      </div>
    </section>
  );
}

// ============================================================
// SERVICES DETAIL PAGE — long sections per service
// ============================================================
const SERVICE_DETAILS = [
  {
    id: "web",
    n: "01",
    title: "Web Development",
    sub: "Landing · Marketing · Brand",
    desc: "Website yang loading-nya cepet, mobile-friendly, dan gak bikin tim brand kamu pusing pas mau update konten.",
    deliver: [
      "Design hi-fi (mobile + desktop)",
      "Build dengan stack modern (Next.js / Astro)",
      "CMS sederhana (Sanity / Notion-as-CMS)",
      "Setup analytics + SEO basic",
      "Deploy ke Vercel / Cloudflare",
    ],
    stack: ["Next.js", "Astro", "Tailwind", "Sanity CMS", "Vercel"],
    timeline: "2–4 minggu",
    starting: "Rp 12.500.000",
    examples: ["Brand site", "Portfolio agency", "Campaign micro-site", "Multi-language ID/EN/JP"],
    color: "var(--labs-accent)",
  },
  {
    id: "webapp",
    n: "02",
    title: "Web App",
    sub: "POS · Dashboard · Internal tools",
    desc: "Aplikasi internal yang harian. Bukan demo cantik — tools yang benar-benar bikin tim kamu kerja lebih cepat.",
    deliver: [
      "Discovery: mapping user flow & data model",
      "Wireframe → mockup → prototype",
      "Build dengan auth, role, audit log",
      "Integrasi printer thermal / payment / WA",
      "Training tim + dokumentasi",
    ],
    stack: ["Next.js", "Supabase", "PostgreSQL", "Prisma", "Stripe / Midtrans"],
    timeline: "6–12 minggu",
    starting: "Rp 35.000.000",
    examples: ["POS cafe & restoran", "Dashboard sales", "CRM internal", "Inventory & supplier"],
    color: "var(--indie-cyan-500)",
  },
  {
    id: "ai",
    n: "03",
    title: "AI Integration",
    sub: "Chatbot · Automation · LLM",
    desc: "Kamu udah punya prompt yang work. Notebook yang akurat. Kita bantu kemas jadi produk hidup yang dipakai customer harian.",
    deliver: [
      "Audit prototype kamu (notebook / n8n / Make)",
      "Frontend: chat, form, wizard, dashboard",
      "Backend: auth, rate-limit, billing, log",
      "Prompt management & evaluasi",
      "Hosting + monitoring + cost tracking",
    ],
    stack: ["Claude / GPT", "Vercel AI SDK", "LangChain", "Pinecone / pgvector", "Inngest"],
    timeline: "4–10 minggu",
    starting: "Rp 25.000.000",
    examples: ["Chatbot konsultasi WA", "Auto-tag CRM", "Q&A from PDF", "AI writing assistant internal"],
    color: "var(--indie-orange-500)",
  },
  {
    id: "consult",
    n: "04",
    title: "IT Consultant",
    sub: "Tech stack · Architecture · Audit",
    desc: "Kadang yang dibutuhin bukan tim baru — cuma second opinion yang jujur. Half-day session, jelas, actionable.",
    deliver: [
      "Pre-call: kamu kirim konteks 1 halaman",
      "Sesi 3-4 jam (Zoom atau Jakarta on-site)",
      "Tech stack & architecture review",
      "Cost audit (cloud, SaaS, vendor)",
      "Written report + action items",
    ],
    stack: ["Cloud audit", "DB review", "Codebase walkthrough", "Vendor selection", "Hiring plan"],
    timeline: "1–2 minggu",
    starting: "Rp 2.500.000",
    examples: ["Founder pre-MVP review", "Migrasi WP → headless", "Audit infra Google Cloud", "Hiring CTO / tech lead"],
    color: "var(--indie-cyan-500)",
  },
];

function ServiceDetailPage() {
  return (
    <>
      <PageHeader
        eye="services · 4 jalan jadi siapa"
        title={<>Empat jalan,<br/>dikerjakan teliti.</>}
        sub="Tiap jalan punya scope yang jelas — timeline, tahap, biaya. Pilih satu yang paling dekat dengan posisi kamu sekarang, atau ngobrol dulu sama kami."
      />

      <section style={{ paddingBottom: 96 }}>
        <div className="container">
          {SERVICE_DETAILS.map((s, i) => (
            <ServiceBlock key={s.id} s={s} flip={i % 2 === 1} />
          ))}
        </div>
      </section>

      <section className="section" id="process" style={{ background: "#000F1F", borderTop: "1px solid var(--labs-line)", borderBottom: "1px solid var(--labs-line)" }}>
        <div className="container">
          <SectionHead
            eye="// how we work"
            title={<>Empat tahap.<br/>Empat minggu pertama jelas.</>}
            desc="Kami pegang transparansi sebagai default — kamu akan tahu kapan keputusan ada di tangan kamu."
          />
          <div className="grid-4" style={{ marginTop: 56, gap: 24 }}>
            {PROCESS.map((p) => (
              <div key={p.n}>
                <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 14 }}>
                  <div className="mono" style={{ fontSize: 11, color: "var(--labs-accent)", letterSpacing: ".18em" }}>{p.n}</div>
                  <div className="rule" style={{ flex: 1 }} />
                </div>
                <h4 style={{ fontFamily: "var(--font-display)", fontSize: 28, textTransform: "uppercase", letterSpacing: ".01em", color: "var(--labs-fg)", margin: 0 }}>{p.t}</h4>
                <div style={{ fontFamily: "var(--font-jp)", fontSize: 13, color: "var(--labs-fg-3)", marginTop: 4 }}>{p.j}</div>
                <p style={{ fontSize: 13, color: "var(--labs-fg-2)", lineHeight: 1.65, marginTop: 16 }}>{p.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <Pricing />
      <ContactCTA />
    </>
  );
}

function ServiceBlock({ s, flip }) {
  return (
    <div id={s.id} className="split split-eq svc-block" style={{
      padding: "80px 0", borderTop: "1px solid var(--labs-line)",
    }}>
      <div className="sticky-side" style={{ order: flip ? 2 : 1, position: "sticky", top: 96 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 24 }}>
          <div className="seal" style={{ color: s.color, borderColor: s.color }}>
            <span className="mono" style={{ fontWeight: 700, fontSize: 14 }}>{s.n}</span>
          </div>
          <div>
            <div className="eyebrow-dim">{s.sub}</div>
            <h2 className="h-display" style={{ fontSize: 56, color: "var(--labs-fg)", marginTop: 4 }}>{s.title}</h2>
          </div>
        </div>
        <p className="lede" style={{ marginBottom: 28 }}>{s.desc}</p>

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24, marginBottom: 28 }}>
          <Meta label="Timeline" value={s.timeline} />
          <Meta label="Starting from" value={s.starting} mono />
        </div>

        <a href={WA_LINK(`Halo INDIE Labs, saya tertarik service ${s.title}.`)} target="_blank" rel="noopener" className="btn btn-primary">
          Diskusi {s.title} →
        </a>
      </div>

      <div style={{ order: flip ? 1 : 2, display: "flex", flexDirection: "column", gap: 16 }}>
        <div className="card" style={{ borderColor: s.color, background: "linear-gradient(180deg, rgba(250,250,247,0.02), var(--labs-surface))" }}>
          <div className="eyebrow-dim" style={{ marginBottom: 14 }}>// what you get</div>
          <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 12 }}>
            {s.deliver.map((d) => (
              <li key={d} style={{ display: "flex", gap: 12, alignItems: "flex-start", fontSize: 14, color: "var(--labs-fg-2)" }}>
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke={s.color} strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" style={{ marginTop: 3, flex: "0 0 auto" }}>
                  <polyline points="20 6 9 17 4 12"/>
                </svg>
                <span>{d}</span>
              </li>
            ))}
          </ul>
        </div>

        <div className="card" style={{ background: "var(--labs-bg)", border: "1px solid var(--labs-line)" }}>
          <div className="eyebrow-dim" style={{ marginBottom: 12 }}>// usually built with</div>
          <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
            {s.stack.map((x) => (
              <span key={x} className="mono" style={{
                fontSize: 12, padding: "5px 10px", borderRadius: 999,
                background: "rgba(250,250,247,0.05)",
                border: "1px solid var(--labs-line-2)",
                color: "var(--labs-fg-2)", letterSpacing: ".04em",
              }}>{x}</span>
            ))}
          </div>

          <div className="rule" style={{ margin: "20px 0" }} />

          <div className="eyebrow-dim" style={{ marginBottom: 12 }}>// example projects</div>
          <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
            {s.examples.map((x) => (
              <span key={x} style={{
                fontSize: 13, padding: "5px 12px", borderRadius: 999,
                background: "rgba(240,208,80,0.08)",
                color: s.color, fontWeight: 500,
              }}>{x}</span>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

function Meta({ label, value, mono }) {
  return (
    <div style={{ borderLeft: "2px solid var(--labs-accent)", paddingLeft: 14 }}>
      <div className="eyebrow-dim" style={{ marginBottom: 6 }}>{label}</div>
      <div className={mono ? "mono" : ""} style={{ fontSize: 18, fontWeight: 700, color: "var(--labs-fg)" }}>{value}</div>
    </div>
  );
}

// ============================================================
// PORTFOLIO PAGE — placeholder grid + filter
// ============================================================
const WORKS = [
  { tag: "POS", title: "Order & kitchen display untuk specialty cafe", client: "Cafe Hira · Bandung", year: "2026", color: "var(--indie-orange-500)", brand: "indiecafe", category: "Web App" },
  { tag: "AI", title: "Chatbot konsultasi visa via WhatsApp", client: "Visa & Co · Jakarta", year: "2026", color: "var(--labs-accent)", brand: "indielabs", category: "AI Integration" },
  { tag: "Dashboard", title: "Inventory & sales tracker untuk UKM packaging", client: "Pak Made Pack · Bali", year: "2025", color: "var(--indie-cyan-500)", brand: "indiepack", category: "Web App" },
  { tag: "Web", title: "Brand site multi-language untuk butik renovasi", client: "INDIE Ruma", year: "2025", color: "var(--indie-cyan-500)", brand: "indieruma", category: "Web" },
  { tag: "AI", title: "Auto-tag CRM customer dengan LLM", client: "Kost Network ID", year: "2025", color: "var(--indie-cyan-500)", brand: "indiekost", category: "AI Integration" },
  { tag: "Web", title: "Campaign micro-site Yappari! vending", client: "Yappari!", year: "2024", color: "var(--indie-yellow-400)", brand: "yappari", category: "Web" },
  { tag: "Consult", title: "Tech stack audit + hiring plan founder F&B", client: "Anonymous (NDA)", year: "2024", color: "var(--indie-orange-500)", brand: "indiebrand", category: "Consult" },
  { tag: "Web App", title: "Booking & schedule untuk music school", client: "INDIE Music School", year: "2024", color: "var(--indie-red-500)", brand: "ims", category: "Web App" },
  { tag: "Web", title: "Portfolio + shop untuk paper goods studio", client: "indiepaper", year: "2024", color: "var(--indie-yellow-400)", brand: "indiepaper", category: "Web" },
];

const CATEGORIES = ["All", "Web", "Web App", "AI Integration", "Consult"];

function PortfolioPage() {
  const [cat, setCat] = useStateS("All");
  const filtered = cat === "All" ? WORKS : WORKS.filter((w) => w.category === cat);
  return (
    <>
      <PageHeader
        eye="portfolio · cerita brand"
        title={<>Brand yang sudah<br/>jadi versi-nya.</>}
        sub="Sebagian besar di bawah NDA — yang di sini bisa kami pamerkan. Klik untuk baca cerita siapa mereka sebelum dan sesudah. Yang lain bisa diceritain pas ngobrol."
      />

      <section className="section" style={{ paddingTop: 32 }}>
        <div className="container">
          <div style={{ display: "flex", gap: 8, flexWrap: "wrap", marginBottom: 32, alignItems: "center" }}>
            <span className="eyebrow-dim" style={{ marginRight: 8 }}>// filter</span>
            {CATEGORIES.map((c) => (
              <button key={c} onClick={() => setCat(c)}
                className="mono"
                style={{
                  fontSize: 12, padding: "8px 14px", borderRadius: 999,
                  background: cat === c ? "var(--labs-accent)" : "transparent",
                  color: cat === c ? "#001933" : "var(--labs-fg-2)",
                  border: `1px solid ${cat === c ? "var(--labs-accent)" : "var(--labs-line-2)"}`,
                  cursor: "pointer", letterSpacing: ".08em",
                  fontWeight: cat === c ? 700 : 500,
                  transition: "all 200ms var(--ease-out)",
                }}>
                {c}
                {c !== "All" && (
                  <span style={{ marginLeft: 8, opacity: 0.6 }}>
                    {WORKS.filter((w) => w.category === c).length}
                  </span>
                )}
              </button>
            ))}
            <div style={{ flex: 1 }} />
            <span className="mono" style={{ fontSize: 12, color: "var(--labs-fg-3)" }}>
              {filtered.length} {filtered.length === 1 ? "project" : "projects"}
            </span>
          </div>

          <div className="grid-3">
            {filtered.map((w, i) => <WorkCard key={i} w={w} />)}
          </div>

          <div className="card" style={{
            marginTop: 64, padding: 48, textAlign: "center",
            border: "1px dashed var(--labs-line-2)", background: "transparent",
          }}>
            <div className="eyebrow" style={{ marginBottom: 12 }}>// next</div>
            <h3 className="h-heavy" style={{ fontSize: 28, color: "var(--labs-fg)", marginBottom: 12 }}>
              Mau jadi case berikutnya?
            </h3>
            <p style={{ color: "var(--labs-fg-2)", marginBottom: 20, maxWidth: 480, margin: "0 auto 20px" }}>
              Ngobrol dulu sambil ngopi. Kami dengerin, kasih opini, dan
              kalau cocok — bangun bareng.
            </p>
            <a href={WA_LINK()} target="_blank" rel="noopener" className="btn btn-primary">Mulai diskusi →</a>
          </div>
        </div>
      </section>
    </>
  );
}

function WorkCard({ w }) {
  return (
    <div className="card" style={{
      padding: 0, overflow: "hidden",
      display: "flex", flexDirection: "column", minHeight: 380,
      cursor: "pointer",
    }}
      onMouseEnter={(e) => { e.currentTarget.style.transform = "translateY(-2px)"; }}
      onMouseLeave={(e) => { e.currentTarget.style.transform = "translateY(0)"; }}>
      <div style={{
        height: 220, 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: -24, bottom: -24,
          width: 180, height: 180, borderRadius: "50%",
          opacity: 0.5,
        }} />
        <div style={{
          position: "absolute", top: 16, left: 16, display: "flex", gap: 6,
        }}>
          <span style={{
            fontFamily: "var(--font-mono)", fontSize: 10,
            letterSpacing: ".18em", textTransform: "uppercase",
            color: "#001933", background: "rgba(250,250,247,0.9)",
            padding: "4px 10px", borderRadius: 999, fontWeight: 700,
          }}>{w.tag}</span>
        </div>
        <div style={{
          position: "absolute", bottom: 16, left: 16,
          fontFamily: "var(--font-mono)", fontSize: 10,
          letterSpacing: ".18em", textTransform: "uppercase",
          color: "rgba(0,25,51,0.7)", fontWeight: 600,
        }}>
          {w.year}
        </div>
      </div>
      <div style={{ padding: 24, display: "flex", flexDirection: "column", flex: 1 }}>
        <div style={{ fontSize: 16, fontWeight: 700, color: "var(--labs-fg)", lineHeight: 1.35 }}>{w.title}</div>
        <div style={{ marginTop: 8, fontSize: 13, color: "var(--labs-fg-3)" }}>{w.client}</div>
        <div style={{ marginTop: "auto", paddingTop: 18, display: "flex", justifyContent: "space-between", alignItems: "center" }}>
          <span className="mono" style={{ fontSize: 11, color: "var(--labs-fg-4)", letterSpacing: ".12em" }}>
            // {w.category}
          </span>
          <span style={{ color: "var(--labs-accent)", fontSize: 13, fontWeight: 600 }}>Read →</span>
        </div>
      </div>
    </div>
  );
}

// ============================================================
// CONTACT PAGE — multi-step brief form
// ============================================================
const CONTACT_SERVICES = [
  { id: "web",     label: "Website", desc: "Landing / brand / portfolio" },
  { id: "webapp",  label: "Web App", desc: "POS, dashboard, internal tools" },
  { id: "ai",      label: "AI Integration", desc: "Chatbot, automation, LLM" },
  { id: "consult", label: "Consultation", desc: "Half-day audit & opinion" },
  { id: "other",   label: "Not sure yet", desc: "Let's figure it out together" },
];

const BUDGETS = ["< 15jt", "15–35jt", "35–100jt", "100jt+", "Belum tau"];
const TIMELINES = ["ASAP (<1 bln)", "1–3 bulan", "3–6 bulan", "Fleksibel"];

function ContactPage() {
  const [step, setStep] = useStateS(1);
  const [data, setData] = useStateS({
    service: "",
    name: "",
    email: "",
    company: "",
    budget: "",
    timeline: "",
    brief: "",
  });
  const [sent, setSent] = useStateS(false);

  const set = (k, v) => setData({ ...data, [k]: v });
  const canNext1 = !!data.service;
  const canNext2 = data.name.trim() && data.email.trim().includes("@");
  const canSend  = data.brief.trim().length > 10;

  const submit = () => {
    setSent(true);
    // In real prod we'd POST. For prototype, open WA with prefilled message.
    const lines = [
      `Halo INDIE Labs, saya tertarik diskusi proyek.`,
      ``,
      `Service: ${CONTACT_SERVICES.find(s => s.id === data.service)?.label}`,
      `Nama: ${data.name}`,
      `Email: ${data.email}`,
      data.company && `Company: ${data.company}`,
      `Budget: ${data.budget || "—"}`,
      `Timeline: ${data.timeline || "—"}`,
      ``,
      `Brief:`,
      data.brief,
    ].filter(Boolean).join("\n");
    setTimeout(() => {
      window.open(WA_LINK(lines), "_blank");
    }, 600);
  };

  if (sent) {
    return (
      <>
        <PageHeader eye="contact · sent" title="Brief terkirim." sub="Terima kasih sudah dengerin pitch kami. WhatsApp akan kebuka di tab baru — biar lebih cepat sampai." />
        <section className="section">
          <div className="container" style={{ maxWidth: 640 }}>
            <div className="card" style={{ background: "var(--labs-accent)", color: "#001933", padding: 32, border: "1.5px solid #001933", boxShadow: "6px 6px 0 #000" }}>
              <div style={{ fontSize: 48 }}>✓</div>
              <h3 style={{ fontSize: 24, fontWeight: 800, marginTop: 12, color: "#001933" }}>
                Kami akan balas dalam 1×24 jam.
              </h3>
              <p style={{ fontSize: 15, color: "#001933", opacity: 0.85, marginTop: 8 }}>
                Sambil nunggu, mampir <a href="portfolio.html" style={{ color: "#001933", textDecoration: "underline", fontWeight: 600 }}>portfolio kami</a> dulu.
              </p>
              <div style={{ display: "flex", gap: 10, marginTop: 20 }}>
                <a href="index.html" className="btn" style={{ background: "#001933", color: "var(--labs-accent)", border: "1px solid #001933" }}>Back to home</a>
                <button onClick={() => { setSent(false); setStep(1); setData({ service: "", name: "", email: "", company: "", budget: "", timeline: "", brief: "" }); }}
                  className="btn" style={{ background: "transparent", color: "#001933", border: "1px solid #001933" }}>
                  Send another
                </button>
              </div>
            </div>
          </div>
        </section>
      </>
    );
  }

  return (
    <>
      <PageHeader
        eye="contact · brief"
        title={<>Ceritain mau<br/>jadi siapa.</>}
        sub="3 langkah, kurang dari 2 menit. Brief masuk langsung ke kotak masuk kami — bukan robot, bukan auto-responder. Dijawab sama orang yang akan ngerjain proyek kamu."
      />

      <section className="section" style={{ paddingTop: 32 }}>
        <div className="container split split-form" style={{ alignItems: "start" }}>
          <ContactSide />

          <div className="card" style={{ background: "var(--labs-surface)", padding: 36, borderColor: "var(--labs-line-2)" }}>
            <StepBar step={step} total={3} />

            {step === 1 && (
              <Step1 data={data} set={set} />
            )}
            {step === 2 && (
              <Step2 data={data} set={set} />
            )}
            {step === 3 && (
              <Step3 data={data} set={set} />
            )}

            <div style={{ display: "flex", gap: 10, marginTop: 28, justifyContent: "space-between" }}>
              {step > 1 ? (
                <button onClick={() => setStep(step - 1)} className="btn btn-ghost btn-sm">← Kembali</button>
              ) : <span />}

              {step < 3 ? (
                <button onClick={() => setStep(step + 1)} className="btn btn-primary"
                  disabled={(step === 1 && !canNext1) || (step === 2 && !canNext2)}
                  style={{ opacity: ((step === 1 && !canNext1) || (step === 2 && !canNext2)) ? 0.4 : 1 }}>
                  Lanjut →
                </button>
              ) : (
                <button onClick={submit} className="btn btn-primary" disabled={!canSend}
                  style={{ opacity: canSend ? 1 : 0.4 }}>
                  Kirim brief →
                </button>
              )}
            </div>
          </div>
        </div>
      </section>
    </>
  );
}

function ContactSide() {
  return (
    <div className="sticky-side" style={{ position: "sticky", top: 96 }}>
      <div className="eyebrow-dim" style={{ marginBottom: 12 }}>// or just reach out</div>
      <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
        <ContactRow icon="wa" label={WA_DISPLAY} href={WA_LINK()} sub="Respons 1-3 jam (jam kerja)" />
        <ContactRow icon="mail" label={EMAIL} href={`mailto:${EMAIL}`} sub="Untuk brief panjang / lampiran" />
        <ContactRow icon="pin" label="Jakarta · Bandung" sub="On-site visit by appointment" />
      </div>

      <div className="rule" style={{ margin: "28px 0" }} />

      <div className="eyebrow-dim" style={{ marginBottom: 12 }}>// what happens next</div>
      <ol style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 14 }}>
        {[
          ["Kami baca brief kamu (1×24 jam)"],
          ["Reply via WA/email — minta klarifikasi kalau perlu"],
          ["Booking discovery call 30-60 menit (free)"],
          ["Kirim proposal + estimasi tertulis"],
        ].map((s, i) => (
          <li key={i} style={{ display: "flex", gap: 12, fontSize: 13, color: "var(--labs-fg-2)" }}>
            <span className="mono" style={{ color: "var(--labs-accent)", letterSpacing: ".12em" }}>0{i+1}</span>
            <span>{s[0]}</span>
          </li>
        ))}
      </ol>
    </div>
  );
}

function ContactRow({ icon, label, sub, href }) {
  const icons = {
    wa:   <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.654z"/></svg>,
    mail: <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>,
    pin:  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>,
  };
  const inner = (
    <>
      <div className="seal" style={{ width: 44, height: 44, color: "var(--labs-accent)" }}>{icons[icon]}</div>
      <div>
        <div style={{ fontWeight: 600, color: "var(--labs-fg)" }}>{label}</div>
        {sub && <div style={{ fontSize: 12, color: "var(--labs-fg-3)", marginTop: 2 }}>{sub}</div>}
      </div>
    </>
  );
  return href ? (
    <a href={href} target={icon === "wa" ? "_blank" : undefined} rel="noopener"
       style={{ textDecoration: "none", display: "flex", alignItems: "center", gap: 14 }}>
      {inner}
    </a>
  ) : (
    <div style={{ display: "flex", alignItems: "center", gap: 14 }}>{inner}</div>
  );
}

function StepBar({ step, total }) {
  return (
    <div style={{ marginBottom: 28 }}>
      <div className="eyebrow-dim" style={{ marginBottom: 14 }}>// step {step} of {total}</div>
      <div style={{ display: "flex", gap: 6 }}>
        {Array.from({ length: total }).map((_, i) => (
          <div key={i} style={{
            flex: 1, height: 3,
            background: i < step ? "var(--labs-accent)" : "var(--labs-line)",
            borderRadius: 2,
            transition: "background 200ms var(--ease-out)",
          }} />
        ))}
      </div>
    </div>
  );
}

function Step1({ data, set }) {
  return (
    <>
      <h3 className="h-heavy" style={{ fontSize: 26, color: "var(--labs-fg)", marginBottom: 8 }}>
        Apa yang mau dibangun?
      </h3>
      <p style={{ fontSize: 14, color: "var(--labs-fg-3)", marginBottom: 24 }}>
        Pilih yang paling dekat. Bisa diubah nanti pas diskusi.
      </p>
      <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
        {CONTACT_SERVICES.map((s) => (
          <button key={s.id} onClick={() => set("service", s.id)}
            style={{
              all: "unset", cursor: "pointer",
              display: "flex", alignItems: "center", gap: 14,
              padding: "16px 18px", borderRadius: 8,
              border: `1.5px solid ${data.service === s.id ? "var(--labs-accent)" : "var(--labs-line-2)"}`,
              background: data.service === s.id ? "rgba(240,208,80,0.08)" : "transparent",
              transition: "all 150ms var(--ease-out)",
            }}>
            <span style={{
              width: 20, height: 20, borderRadius: "50%",
              border: `2px solid ${data.service === s.id ? "var(--labs-accent)" : "var(--labs-line-2)"}`,
              display: "flex", alignItems: "center", justifyContent: "center",
              flex: "0 0 auto",
            }}>
              {data.service === s.id && <span style={{ width: 10, height: 10, borderRadius: "50%", background: "var(--labs-accent)" }} />}
            </span>
            <div>
              <div style={{ fontWeight: 600, color: "var(--labs-fg)" }}>{s.label}</div>
              <div style={{ fontSize: 12, color: "var(--labs-fg-3)", marginTop: 2 }}>{s.desc}</div>
            </div>
          </button>
        ))}
      </div>
    </>
  );
}

function Step2({ data, set }) {
  return (
    <>
      <h3 className="h-heavy" style={{ fontSize: 26, color: "var(--labs-fg)", marginBottom: 8 }}>
        Kenalan dulu.
      </h3>
      <p style={{ fontSize: 14, color: "var(--labs-fg-3)", marginBottom: 24 }}>
        Biar kami bisa nyebut nama kamu pas balas.
      </p>
      <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
        <Field label="Nama kamu" value={data.name} onChange={(v) => set("name", v)} placeholder="Indra" />
        <Field label="Email" type="email" value={data.email} onChange={(v) => set("email", v)} placeholder="kamu@email.com" />
        <Field label="Perusahaan / brand (optional)" value={data.company} onChange={(v) => set("company", v)} placeholder="Cafe Hira" />
      </div>
    </>
  );
}

function Step3({ data, set }) {
  return (
    <>
      <h3 className="h-heavy" style={{ fontSize: 26, color: "var(--labs-fg)", marginBottom: 8 }}>
        Sedikit konteks.
      </h3>
      <p style={{ fontSize: 14, color: "var(--labs-fg-3)", marginBottom: 24 }}>
        Budget & timeline kami pakai buat assess fit — bukan untuk nge-judge.
      </p>

      <div style={{ marginBottom: 18 }}>
        <div className="eyebrow-dim" style={{ marginBottom: 10 }}>Budget</div>
        <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
          {BUDGETS.map((b) => (
            <Chip key={b} label={b} active={data.budget === b} onClick={() => set("budget", b)} />
          ))}
        </div>
      </div>

      <div style={{ marginBottom: 18 }}>
        <div className="eyebrow-dim" style={{ marginBottom: 10 }}>Timeline</div>
        <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
          {TIMELINES.map((b) => (
            <Chip key={b} label={b} active={data.timeline === b} onClick={() => set("timeline", b)} />
          ))}
        </div>
      </div>

      <div>
        <div className="eyebrow-dim" style={{ marginBottom: 10 }}>Brief — apa yang mau dibangun?</div>
        <textarea className="field" rows={5} value={data.brief}
          onChange={(e) => set("brief", e.target.value)}
          placeholder="Misal: cafe specialty di Bandung, kapasitas 30 seat. Butuh POS yang bisa cetak struk ke printer thermal, integrasi dengan dapur, dan laporan harian via WA. Ada 2 cabang yang akan dibuka tahun depan..."
          style={{ resize: "vertical", minHeight: 120 }} />
        <div style={{ fontSize: 11, color: "var(--labs-fg-4)", marginTop: 6, fontFamily: "var(--font-mono)" }}>
          {data.brief.length} chars · min 10 chars
        </div>
      </div>
    </>
  );
}

function Field({ label, value, onChange, placeholder, type = "text" }) {
  return (
    <label style={{ display: "flex", flexDirection: "column", gap: 6 }}>
      <span className="eyebrow-dim">{label}</span>
      <input type={type} className="field" value={value}
        onChange={(e) => onChange(e.target.value)} placeholder={placeholder} />
    </label>
  );
}

function Chip({ label, active, onClick }) {
  return (
    <button onClick={onClick}
      style={{
        fontFamily: "var(--font-sans)", fontSize: 13, fontWeight: 500,
        padding: "8px 14px", borderRadius: 999,
        background: active ? "var(--labs-accent)" : "transparent",
        color: active ? "#001933" : "var(--labs-fg-2)",
        border: `1.5px solid ${active ? "var(--labs-accent)" : "var(--labs-line-2)"}`,
        cursor: "pointer",
        transition: "all 150ms var(--ease-out)",
      }}>
      {label}
    </button>
  );
}

Object.assign(window, {
  PageHeader, ServiceDetailPage, PortfolioPage, ContactPage, WorkCard,
  SERVICE_DETAILS, WORKS, CATEGORIES, CONTACT_SERVICES, BUDGETS, TIMELINES,
});
