/* @jsx React.createElement */
// Landing sections for INDIE Labs.

const { useState, useEffect, useRef } = React;

// ============================================================
// HERO — kinetic question that cycles
// ============================================================
const HERO_QUESTIONS = [
  "Cafe yang dikelola dari data?",
  "Brand UKM level nasional?",
  "Founder yang ship, bukan janji?",
  "Tim yang main bareng AI?",
  "Pengusaha yang tidur tenang?",
];

function HeroQuestion() {
  const [i, setI] = useState(0);
  const [typed, setTyped] = useState("");
  const [phase, setPhase] = useState("typing"); // typing | holding | erasing

  useEffect(() => {
    let to;
    const word = HERO_QUESTIONS[i];
    if (phase === "typing") {
      if (typed.length < word.length) {
        to = setTimeout(() => setTyped(word.slice(0, typed.length + 1)), 28 + Math.random() * 22);
      } else {
        to = setTimeout(() => setPhase("holding"), 3600);
      }
    } else if (phase === "holding") {
      to = setTimeout(() => setPhase("erasing"), 200);
    } else {
      if (typed.length > 0) {
        to = setTimeout(() => setTyped(word.slice(0, typed.length - 1)), 14);
      } else {
        to = setTimeout(() => {
          setI((i + 1) % HERO_QUESTIONS.length);
          setPhase("typing");
        }, 360);
      }
    }
    return () => clearTimeout(to);
  }, [i, typed, phase]);

  return (
    <span style={{
      fontFamily: "var(--font-serif)",
      fontStyle: "italic",
      fontWeight: 400,
      color: "var(--labs-accent)",
      textTransform: "none",
      letterSpacing: "-0.005em",
      lineHeight: 1.05,
      fontSize: "clamp(34px, 4.2vw, 60px)",
      display: "inline-block",
    }}>
      {typed}
      <span className="caret" />
    </span>
  );
}

function Hero() {
  return (
    <section style={{ position: "relative", paddingTop: 144, paddingBottom: 96, overflow: "hidden" }}>
      <div className="lattice" />
      <div className="container" style={{ position: "relative" }}>
        <div className="split split-hero">
          <div>
            <div className="eyebrow" style={{ marginBottom: 24, display: "flex", alignItems: "center", gap: 12 }}>
              <span className="bracket-jp">「</span>
              INDIE Labs. · R&amp;D for software
              <span className="bracket-jp">」</span>
            </div>

            <h1 className="h-display" style={{ color: "var(--labs-fg)", margin: 0 }}>
              <span style={{ display: "block", lineHeight: 1.1, marginBottom: 18, minHeight: "1.2em" }}>
                <span className="eyebrow-dim" style={{ display: "block", marginBottom: 10, color: "var(--labs-fg-3)" }}>Mau jadi —</span>
                <HeroQuestion />
              </span>
              <span style={{ display: "block" }}>Mulai dari</span>
              <span style={{ display: "block" }}>satu obrolan.</span>
            </h1>

            <p className="lede" style={{ marginTop: 28 }}>
              Kami percaya teknologi itu kendaraan, bukan tujuan.
              Tujuannya: kamu jadi versi paling siap dari brand-mu — di
              internet, di operasi, di kepercayaan customer.
            </p>

            <div style={{ display: "flex", gap: 12, marginTop: 36, flexWrap: "wrap" }}>
              <a href={WA_LINK()} target="_blank" rel="noopener" className="btn btn-primary">
                Diskusi proyek
                <span style={{ fontSize: 16, lineHeight: 1 }}>→</span>
              </a>
              <a href="portfolio.html" className="btn btn-ghost">
                Lihat portfolio
              </a>
            </div>

            <div style={{ display: "flex", gap: 32, marginTop: 56, flexWrap: "wrap" }}>
              <Stat n="12+" l="Brand sudah jadi" />
              <Stat n="2–6 mgg" l="Dari ide ke live" />
              <Stat n="100%" l="Punya kamu sepenuhnya" />
            </div>
          </div>

          <HeroSideCard />
        </div>
      </div>
    </section>
  );
}

function Stat({ n, l }) {
  return (
    <div>
      <div className="mono" style={{ fontSize: 28, fontWeight: 700, color: "var(--labs-accent)", letterSpacing: "-.01em" }}>{n}</div>
      <div style={{ fontSize: 12, fontFamily: "var(--font-mono)", letterSpacing: ".12em", textTransform: "uppercase", color: "var(--labs-fg-3)", marginTop: 4 }}>{l}</div>
    </div>
  );
}

function HeroSideCard() {
  // Live "build log" terminal — playful tech moment
  const lines = [
    { t: "[09:14]", k: "ok",   m: "pos.indie.cafe · deployed" },
    { t: "[09:42]", k: "ok",   m: "acct.umkm.dashboard · build ✓" },
    { t: "[10:08]", k: "info", m: "ai.chatbot.coffeshop · 1,204 queries today" },
    { t: "[10:31]", k: "ok",   m: "lab/14 — landing page · live" },
    { t: "[11:02]", k: "warn", m: "client feedback · 2 minor tweaks" },
    { t: "[11:18]", k: "ok",   m: "merged · main · #lab14" },
  ];
  const [show, setShow] = useState(0);
  useEffect(() => {
    if (show >= lines.length) return;
    const to = setTimeout(() => setShow(show + 1), 380);
    return () => clearTimeout(to);
  }, [show]);
  useEffect(() => {
    if (show < lines.length) return;
    const to = setTimeout(() => setShow(0), 4000);
    return () => clearTimeout(to);
  }, [show]);

  const color = (k) => k === "ok" ? "#8be58b" : k === "warn" ? "#F0D050" : "#6fc1ff";

  return (
    <div style={{ position: "relative" }}>
      <div className="stamp-corner">Live · status</div>
      <div className="terminal" style={{ minHeight: 320 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 14, fontSize: 11 }}>
          <span style={{ width: 10, height: 10, borderRadius: "50%", background: "#ff5f57" }} />
          <span style={{ width: 10, height: 10, borderRadius: "50%", background: "#febc2e" }} />
          <span style={{ width: 10, height: 10, borderRadius: "50%", background: "#28c840" }} />
          <span style={{ marginLeft: 12, color: "var(--labs-fg-3)" }}>~/indielabs · build-log</span>
        </div>
        <div className="comment" style={{ marginBottom: 6 }}># live from the lab</div>
        {lines.slice(0, show).map((l, i) => (
          <div key={i} className="fade-up" style={{ display: "flex", gap: 10 }}>
            <span className="comment">{l.t}</span>
            <span style={{ color: color(l.k), width: 44, display: "inline-block" }}>{l.k.toUpperCase()}</span>
            <span>{l.m}</span>
          </div>
        ))}
        {show < lines.length && <span className="caret" />}
      </div>

      {/* Lab flask side seal */}
      <div style={{
        position: "absolute", bottom: -32, right: -24,
        width: 96, height: 96, borderRadius: "50%",
        background: "var(--labs-bg)",
        border: "1px dashed var(--labs-line-2)",
        display: "flex", alignItems: "center", justifyContent: "center",
        transform: "rotate(-6deg)",
      }}>
        <img src="assets/logos/indielabs.png" alt="" style={{ width: 80, height: 80, borderRadius: "50%" }} />
      </div>
    </div>
  );
}

// ============================================================
// TRUST STRIP — "part of INDIE Group"
// ============================================================
function TrustStrip() {
  const SUBS = ["indiebrand","indiepreneur","indiespace","ims","indieruma","indiekost","indiecafe","indielabs","indiepack","indiepaper","pixelindie","yappari"];
  const items = [...SUBS, ...SUBS]; // doubled for marquee
  return (
    <section style={{ padding: "40px 0 32px", borderTop: "1px solid var(--labs-line)", borderBottom: "1px solid var(--labs-line)", background: "var(--labs-sunken)", overflow: "hidden" }}>
      <div className="container" style={{ display: "flex", alignItems: "center", gap: 40 }}>
        <div style={{ flex: "0 0 auto", paddingRight: 32, borderRight: "1px solid var(--labs-line)" }}>
          <div className="eyebrow-dim">Part of</div>
          <div style={{ fontFamily: "var(--font-display)", fontSize: 26, letterSpacing: ".02em", textTransform: "uppercase", marginTop: 6, color: "var(--labs-fg)" }}>
            INDIE Group
          </div>
        </div>
        <div style={{ flex: 1, overflow: "hidden", mask: "linear-gradient(to right, transparent, black 8%, black 92%, transparent)", WebkitMask: "linear-gradient(to right, transparent, black 8%, black 92%, transparent)" }}>
          <div className="marquee">
            {items.map((id, i) => (
              <div key={i} style={{ display: "flex", alignItems: "center", gap: 12, opacity: id === "indielabs" ? 1 : 0.55 }}>
                <img src={`assets/logos/${id}.png`} style={{ width: 36, height: 36, borderRadius: "50%" }} alt={id} />
                <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: ".16em", textTransform: "uppercase", color: id === "indielabs" ? "var(--labs-accent)" : "var(--labs-fg-3)" }}>
                  {id}
                </span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// SERVICES
// ============================================================
const SERVICES = [
  {
    n: "01",
    id: "web",
    title: "Web Development",
    sub: "Landing · Marketing · Brand",
    body: "Punya rumah online sendiri — bukan numpang di marketplace. Brand kamu hadir di Google, di feed, di klien yang Googling kamu jam 11 malam.",
    bullets: ["Landing page & micro-site", "Company profile + CMS", "Multi-language ID/EN/JP"],
    icon: (
      <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
        <rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8M12 17v4"/><path d="M2 8h20"/>
      </svg>
    ),
  },
  {
    n: "02",
    id: "webapp",
    title: "Web App",
    sub: "POS · Dashboard · Internal tools",
    body: "Operasi rapi, kamu tinggal mantau. Bukan kamu yang nge-handle 100 hal harian — tools-mu yang ngerjain, kamu yang mikirin langkah berikutnya.",
    bullets: ["POS untuk cafe & restoran", "Dashboard sales & inventory", "Multi-user, role-based"],
    icon: (
      <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
        <rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18M9 3v18"/>
      </svg>
    ),
  },
  {
    n: "03",
    id: "ai",
    title: "AI Integration",
    sub: "Chatbot · Automation · LLM",
    body: "AI yang kamu pamerin ke klien, bukan disimpen di notebook. Dari prompt yang work jadi produk yang dipake harian — dengan auth, billing, log, semuanya rapi.",
    bullets: ["Chatbot WA / web custom", "Workflow automation", "RAG, embeddings, fine-tune"],
    icon: (
      <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
        <circle cx="12" cy="12" r="3"/><path d="M12 2v3M12 19v3M4.93 4.93l2.12 2.12M16.95 16.95l2.12 2.12M2 12h3M19 12h3M4.93 19.07l2.12-2.12M16.95 7.05l2.12-2.12"/>
      </svg>
    ),
  },
  {
    n: "04",
    id: "consult",
    title: "IT Consultant",
    sub: "Tech stack · Architecture · Audit",
    body: "Keputusan teknologi yang gak bikin nyesel enam bulan lagi. Half-day session — jelas, jujur, tanpa upsell tersembunyi.",
    bullets: ["Tech stack review", "Architecture & cost audit", "Hiring plan & vendor selection"],
    icon: (
      <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
        <path d="M9 12l2 2 4-4"/><path d="M21 12c0 1-2 6-9 6s-9-5-9-6 2-6 9-6 9 5 9 6z"/>
      </svg>
    ),
  },
];

function Services() {
  return (
    <section className="section" id="services">
      <div className="container">
        <SectionHead
          eye="// services"
          title={<>Empat jalan jadi<br />versi siap-mu.</>}
          desc="Bukan tentang fitur atau platform. Tentang siapa kamu setelah enam minggu kerja bareng — brand yang hadir, operasi yang rapi, AI yang dipakai harian."
        />
        <div className="grid-4" style={{ marginTop: 56 }}>
          {SERVICES.map((s) => <ServiceCard key={s.id} s={s} />)}
        </div>
      </div>
    </section>
  );
}

function ServiceCard({ s }) {
  return (
    <a href={`services.html#${s.id}`} className="card" style={{
      textDecoration: "none", color: "inherit",
      display: "flex", flexDirection: "column", minHeight: 320,
      position: "relative", overflow: "hidden",
    }}
       onMouseEnter={(e) => { e.currentTarget.style.transform = "translateY(-2px)"; }}
       onMouseLeave={(e) => { e.currentTarget.style.transform = "translateY(0)"; }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 28 }}>
        <div className="seal">{s.icon}</div>
        <div className="mono" style={{ fontSize: 12, color: "var(--labs-fg-4)", letterSpacing: ".12em" }}>{s.n}</div>
      </div>
      <div style={{ fontSize: 19, fontWeight: 700, color: "var(--labs-fg)" }}>{s.title}</div>
      <div className="eyebrow-dim" style={{ marginTop: 6, color: "var(--labs-fg-3)" }}>{s.sub}</div>
      <p style={{ fontSize: 14, color: "var(--labs-fg-2)", lineHeight: 1.6, marginTop: 14, marginBottom: 14 }}>{s.body}</p>
      <ul style={{ listStyle: "none", padding: 0, margin: "auto 0 0", display: "flex", flexDirection: "column", gap: 6 }}>
        {s.bullets.map((b) => (
          <li key={b} style={{ fontSize: 12, color: "var(--labs-fg-3)", display: "flex", gap: 8, alignItems: "flex-start" }}>
            <span style={{ color: "var(--labs-accent)", marginTop: 2 }}>·</span>
            <span>{b}</span>
          </li>
        ))}
      </ul>
    </a>
  );
}

function SectionHead({ eye, title, desc, alignRight }) {
  return (
    <div className="split split-head">
      <div>
        <div className="eyebrow" style={{ marginBottom: 18 }}>{eye}</div>
        <h2 className="h-display" style={{ color: "var(--labs-fg)" }}>{title}</h2>
      </div>
      {desc && <p className="lede-sm" style={{ marginBottom: 8 }}>{desc}</p>}
    </div>
  );
}

// ============================================================
// USE CASES — F&B POS, SMB Accounting, AI-to-Prod
// ============================================================
const USECASES = [
  {
    k: "F&B",
    color: "var(--indie-orange-500)",
    title: "Jadi cafe yang dikelola dari data, bukan feeling.",
    body: "Tau menu mana yang laku jam berapa, mana yang harus di-pensiunin. Closing tinggal liat dashboard, bukan rekap manual sampe tengah malam.",
    points: ["Order ke kitchen display", "Split bill, diskon, voucher", "Laporan harian otomatis ke WA"],
    badge: "indiecafe",
  },
  {
    k: "UKM",
    color: "var(--indie-cyan-500)",
    title: "Jadi UKM yang dipercaya brand nasional.",
    body: "Invoice profesional, stok ke-track, supplier puas. Pas calon klien besar nanya ‘sistemnya gimana?’ — kamu udah punya jawabannya.",
    points: ["Invoice & quotation generator", "Stok & supplier tracking", "Export ke Excel / e-Faktur"],
    badge: "indiepack",
  },
  {
    k: "Founders",
    color: "var(--labs-accent)",
    title: "Jadi founder yang ship produk, bukan janji.",
    body: "Prompt yang work + notebook yang akurat = bukan produk. Kami bantu kemas jadi yang bisa dibayar customer — dengan auth, billing, dan ke-handle 24/7.",
    points: ["Frontend chat / form / wizard", "Auth, billing, rate-limit", "Hosting & monitoring beres"],
    badge: "indielabs",
  },
];

function UseCases() {
  return (
    <section className="section" id="use-cases" style={{ background: "var(--labs-sunken)", borderTop: "1px solid var(--labs-line)", borderBottom: "1px solid var(--labs-line)" }}>
      <div className="container">
        <SectionHead
          eye="// who they become"
          title={<>Tiga jalan,<br />tiga jadi-an.</>}
          desc="Customer kami biasanya tidak cerita soal fitur — mereka cerita soal siapa mereka jadi setelah kerja bareng. Tiga pola ini paling sering kami dengar."
        />
        <div className="grid-3" style={{ marginTop: 56 }}>
          {USECASES.map((u) => <UseCaseCard key={u.k} u={u} />)}
        </div>
      </div>
    </section>
  );
}

function UseCaseCard({ u }) {
  return (
    <div className="card" style={{ display: "flex", flexDirection: "column", gap: 18, minHeight: 360, position: "relative", overflow: "hidden" }}>
      <div style={{
        position: "absolute", top: -40, right: -40, width: 160, height: 160,
        borderRadius: "50%", background: u.color, opacity: 0.10,
      }} />
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
        <div style={{
          display: "inline-flex", alignItems: "center",
          padding: "5px 10px", borderRadius: 999,
          background: "rgba(250,250,247,0.06)",
          fontFamily: "var(--font-mono)", fontSize: 11,
          letterSpacing: ".18em", textTransform: "uppercase",
          color: u.color, border: `1px solid ${u.color}`,
        }}>
          {u.k}
        </div>
        <img src={`assets/logos/${u.badge}.png`} alt="" style={{ width: 40, height: 40, borderRadius: "50%", opacity: 0.85 }} />
      </div>
      <h3 className="h-heavy" style={{ fontSize: 24, color: "var(--labs-fg)", lineHeight: 1.2 }}>{u.title}</h3>
      <p style={{ fontSize: 14, color: "var(--labs-fg-2)", lineHeight: 1.65, margin: 0 }}>{u.body}</p>
      <div className="rule" />
      <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 10 }}>
        {u.points.map((p) => (
          <li key={p} style={{ display: "flex", gap: 10, alignItems: "flex-start", fontSize: 13, color: "var(--labs-fg-2)" }}>
            <span style={{ color: u.color, marginTop: 2, fontFamily: "var(--font-mono)" }}>→</span>
            <span>{p}</span>
          </li>
        ))}
      </ul>
    </div>
  );
}

// ============================================================
// PROCESS — 4 step
// ============================================================
const PROCESS = [
  { n: "01", t: "Discovery", j: "ディスカバリー", d: "Ngobrol santai 30-60 menit. Kita mapping problem, goal, dan timeline. Free, no strings." },
  { n: "02", t: "Design",    j: "デザイン",      d: "Wireframe → mockup hi-fi. Kamu review tiap step. Revisi sampai pas, sebelum ngoding sebaris pun." },
  { n: "03", t: "Build",     j: "ビルド",        d: "Sprint mingguan. Demo tiap Jumat. Kamu lihat progress real, bukan janji-janji." },
  { n: "04", t: "Launch & care", j: "ローンチ", d: "Deploy, monitor, training tim kamu. 30 hari free support pasca-launch." },
];

function Process() {
  return (
    <section className="section" id="process">
      <div className="container">
        <SectionHead
          eye="// process · 4 stages"
          title={<>Empat tahap. Dari ‘punya<br/>ide’ jadi ‘punya brand’.</>}
          desc="Bukan sprint mistis. Empat minggu pertama sudah jelas siapa pegang keputusan apa — supaya gak ada surprise di tengah jalan."
        />
        <div className="grid-4" style={{ marginTop: 56, gap: 24 }}>
          {PROCESS.map((p, i) => (
            <div key={p.n} style={{ position: "relative", paddingTop: 24 }}>
              <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 className="jp" 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>
  );
}

Object.assign(window, {
  Hero, TrustStrip, Services, UseCases, Process, SectionHead, SERVICES, USECASES, PROCESS,
});