// Page sections

// HERO
function Hero({ lang }) {
  const H = window.COPY.hero;
  const h1 = lang === 'zh' ? H.h1_zh : H.h1_en;
  return (
    <section id="top" className="relative pt-28 pb-20 overflow-hidden">
      {/* grid backdrop */}
      <div className="absolute inset-0 grid-bg pointer-events-none"
           style={{ maskImage: 'radial-gradient(ellipse at 50% 30%, black 40%, transparent 75%)',
                    WebkitMaskImage: 'radial-gradient(ellipse at 50% 30%, black 40%, transparent 75%)' }} />
      {/* accent glow */}
      <div className="absolute pointer-events-none"
           style={{ top: '-10%', right: '-10%', width: '60%', height: '80%',
                    background: 'radial-gradient(closest-side, color-mix(in oklab, var(--accent) 16%, transparent), transparent)',
                    filter: 'blur(20px)' }} />

      <div className="relative max-w-[1280px] mx-auto px-6 grid lg:grid-cols-12 gap-10 items-start">
        <div className="lg:col-span-7">
          <Reveal>
            <Kicker>{window.t(H.eyebrow, lang)}</Kicker>
          </Reveal>
          <Reveal delay={80}>
            <h1 className="mt-6 text-[44px] sm:text-[56px] lg:text-[64px] leading-[1.02] tracking-[-0.025em] font-medium whitespace-pre-line"
                style={{ textWrap: 'balance', color: 'var(--fg)' }}>
              {h1}
            </h1>
          </Reveal>
          <Reveal delay={160}>
            <p className="mt-7 max-w-[58ch] text-[17px] leading-[1.55]"
               style={{ color: 'var(--fg-dim)', textWrap: 'pretty' }}>
              {window.t(H.sub, lang)}
            </p>
          </Reveal>

          {/* pillars */}
          <Reveal delay={220}>
            <div className="mt-8 flex flex-wrap gap-x-8 gap-y-2">
              <Pillar n="01" labelKey="install"   lang={lang} />
              <Pillar n="02" labelKey="operate"   lang={lang} />
              <Pillar n="03" labelKey="comply"    lang={lang} />
              <Pillar n="04" labelKey="aggregate" lang={lang} />
            </div>
          </Reveal>

          <Reveal delay={280}>
            <div className="mt-9 flex flex-wrap items-center gap-3">
              <Btn variant="primary" href="#contact">{window.t(H.ctaPrimary, lang)}</Btn>
              <Btn variant="secondary" href="#capabilities">{window.t(H.ctaSecondary, lang)}</Btn>
              <div className="ml-0 sm:ml-3 mt-3 sm:mt-0">
                <Countdown lang={lang} />
              </div>
            </div>
          </Reveal>
        </div>

        {/* Schematic panel */}
        <div className="lg:col-span-5">
          <Reveal delay={220}>
            <div className="relative border hairline rounded-[3px] noise"
                 style={{ background: 'linear-gradient(180deg, var(--panel), var(--bg-2))' }}>
              <div className="flex items-center justify-between px-4 h-9 border-b hairline">
                <div className="flex items-center gap-2">
                  <span className="w-1.5 h-1.5 rounded-full" style={{ background: 'var(--accent)' }} />
                  <span className="mono text-[10px] uppercase tracking-[0.18em]"
                        style={{ color: 'var(--fg-dim)' }}>
                    live fleet · demo
                  </span>
                </div>
                <span className="mono text-[10px]" style={{ color: 'var(--fg-mute)' }}>
                  voltan/gw · v1.2.0-rc3
                </span>
              </div>
              <div className="p-3">
                <SchematicDER />
              </div>
              <div className="px-4 h-9 border-t hairline flex items-center justify-between mono text-[10px]"
                   style={{ color: 'var(--fg-mute)' }}>
                <span>IEEE 2030.5 · SEP2 · mTLS</span>
                <span>AEST · {new Date().toISOString().slice(0,10)}</span>
              </div>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

// WHO WE SERVE
function Serve({ lang }) {
  const S = window.COPY.serve;
  return (
    <section id="serve" className="relative py-24 border-t hairline">
      <div className="max-w-[1280px] mx-auto px-6">
        <div className="grid lg:grid-cols-12 gap-10 items-end">
          <div className="lg:col-span-5">
            <Kicker>{window.t(S.kicker, lang)}</Kicker>
            <h2 className="mt-4 text-[32px] sm:text-[40px] leading-[1.1] tracking-[-0.02em] font-medium"
                style={{ color: 'var(--fg)', textWrap: 'balance' }}>
              {window.t(S.h2, lang)}
            </h2>
          </div>
          <div className="lg:col-span-6 lg:col-start-7">
            <p className="text-[15px] leading-[1.65]" style={{ color: 'var(--fg-dim)' }}>
              {window.t(S.sub, lang)}
            </p>
          </div>
        </div>

        <div className="mt-12 grid sm:grid-cols-2 lg:grid-cols-4 border-l border-t hairline">
          {S.cards.map((c, i) => (
            <Reveal key={i} delay={i * 60}>
              <div className="border-r border-b hairline p-6 h-full group transition"
                   style={{ background: 'var(--bg-2)' }}>
                <div className="flex items-center justify-between">
                  <span className="mono text-[10px] uppercase tracking-[0.18em]"
                        style={{ color: 'var(--fg-mute)' }}>{c.tag}</span>
                  <span className="w-2 h-2" style={{ background: 'var(--accent)' }} />
                </div>
                <h3 className="mt-6 text-[20px] font-medium leading-snug"
                    style={{ color: 'var(--fg)' }}>
                  {window.t(c.title, lang)}
                </h3>
                <div className="mt-5">
                  <div className="mono text-[10px] uppercase tracking-[0.18em] mb-1.5"
                       style={{ color: 'var(--fg-mute)' }}>
                    {lang === 'zh' ? '痛点' : 'Pain'}
                  </div>
                  <p className="text-[14px] leading-[1.55]"
                     style={{ color: 'var(--fg-dim)' }}>{window.t(c.pain, lang)}</p>
                </div>
                <div className="mt-5 pt-5 border-t hairline">
                  <div className="mono text-[10px] uppercase tracking-[0.18em] mb-1.5"
                       style={{ color: 'var(--accent)' }}>
                    {lang === 'zh' ? 'Voltan 提供' : 'We provide'}
                  </div>
                  <p className="text-[14px] leading-[1.55]"
                     style={{ color: 'var(--fg)' }}>{window.t(c.offer, lang)}</p>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// STACK
function Stack({ lang }) {
  const S = window.COPY.stack;
  const [active, setActive] = React.useState(0);
  return (
    <section id="capabilities" className="relative py-28 border-t hairline"
             style={{ background: 'var(--bg-2)' }}>
      <div className="max-w-[1280px] mx-auto px-6">
        <div className="grid lg:grid-cols-12 gap-10 items-end">
          <div className="lg:col-span-7">
            <Kicker>{window.t(S.kicker, lang)}</Kicker>
            <h2 className="mt-4 text-[36px] sm:text-[48px] leading-[1.05] tracking-[-0.022em] font-medium"
                style={{ color: 'var(--fg)', textWrap: 'balance' }}>
              {window.t(S.h2, lang)}
            </h2>
          </div>
          <div className="lg:col-span-5">
            <p className="text-[15px] leading-[1.65]" style={{ color: 'var(--fg-dim)' }}>
              {window.t(S.sub, lang)}
            </p>
          </div>
        </div>

        {/* 4-layer flow */}
        <div className="mt-14 relative">
          {/* connector labels on top */}
          <div className="hidden lg:grid grid-cols-4 mb-3 mono text-[10px] uppercase tracking-[0.18em]"
               style={{ color: 'var(--fg-mute)' }}>
            <div>Field</div>
            <div>Runtime</div>
            <div>Protocol</div>
            <div>Market</div>
          </div>

          <div className="grid lg:grid-cols-4 gap-0 border hairline">
            {S.layers.map((l, i) => {
              const isActive = active === i;
              return (
                <button
                  key={l.key}
                  onMouseEnter={() => setActive(i)}
                  onFocus={() => setActive(i)}
                  onClick={() => setActive(i)}
                  className="text-left p-7 border-r hairline last:border-r-0 transition relative"
                  style={{
                    background: isActive ? 'color-mix(in oklab, var(--accent) 8%, var(--bg-2))' : 'transparent',
                    borderBottom: 'none',
                  }}>
                  <div className="flex items-center justify-between">
                    <span className="mono text-[11px]" style={{ color: 'var(--accent)' }}>{l.step}</span>
                    <span className="mono text-[10px] uppercase tracking-[0.18em]"
                          style={{ color: 'var(--fg-mute)' }}>
                      {String(i + 1).padStart(2,'0')} / 04
                    </span>
                  </div>
                  <h3 className="mt-5 text-[22px] font-medium leading-tight"
                      style={{ color: 'var(--fg)' }}>
                    {window.t(l.title, lang)}
                  </h3>
                  <p className="mt-3 text-[13.5px] leading-[1.6]"
                     style={{ color: 'var(--fg-dim)' }}>
                    {window.t(l.desc, lang)}
                  </p>
                  <div className="mt-5 h-1 w-full relative overflow-hidden"
                       style={{ background: 'var(--line)' }}>
                    <div className="absolute inset-y-0 left-0 transition-all"
                         style={{ width: isActive ? '100%' : '0%', background: 'var(--accent)' }} />
                  </div>
                </button>
              );
            })}
          </div>

          {/* detail row */}
          <div className="border-x border-b hairline p-8 lg:p-10"
               style={{ background: 'var(--panel)' }}>
            <div className="grid lg:grid-cols-12 gap-8">
              <div className="lg:col-span-5">
                <div className="mono text-[10px] uppercase tracking-[0.18em]"
                     style={{ color: 'var(--accent)' }}>
                  {S.layers[active].step} · {window.t(S.layers[active].title, lang)}
                </div>
                <p className="mt-4 text-[18px] leading-[1.45]"
                   style={{ color: 'var(--fg)', textWrap: 'pretty' }}>
                  {window.t(S.layers[active].desc, lang)}
                </p>
              </div>
              <div className="lg:col-span-7">
                <ul className="grid sm:grid-cols-2 gap-x-8 gap-y-3">
                  {window.t(S.layers[active].bullets, lang).map((b, j) => (
                    <li key={j} className="flex items-start gap-3 text-[14px]"
                        style={{ color: 'var(--fg)' }}>
                      <span className="mt-[7px] w-3 h-px flex-none"
                            style={{ background: 'var(--accent)' }} />
                      <span style={{ color: 'var(--fg-dim)' }}>{b}</span>
                    </li>
                  ))}
                </ul>
              </div>
            </div>
          </div>

          {/* coverage comparison */}
          <div className="mt-10 grid lg:grid-cols-12 gap-6 items-center">
            <div className="lg:col-span-5">
              <p className="text-[13px] leading-[1.6]" style={{ color: 'var(--fg-dim)' }}>
                {window.t(S.footnote, lang)}
              </p>
            </div>
            <div className="lg:col-span-7">
              <CoverageTable lang={lang} />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function CoverageTable({ lang }) {
  const rows = [
    { name: lang === 'zh' ? '安装商 / EPC'   : 'Installer / EPC',   cov: [1,0,0,0] },
    { name: lang === 'zh' ? '运维公司'        : 'O&M vendor',         cov: [0,1,0,0] },
    { name: lang === 'zh' ? '协议 SaaS'       : 'Protocol SaaS',     cov: [0,0,1,0] },
    { name: lang === 'zh' ? 'VPP 聚合商'      : 'VPP aggregator',    cov: [0,0,0,1] },
    { name: 'Voltan',                                                 cov: [1,1,1,1] },
  ];
  const layerLabels = lang === 'zh'
    ? ['安装', '运维', '合规', '聚合']
    : ['Install', 'Operate', 'Comply', 'Aggregate'];
  return (
    <div className="border hairline" style={{ background: 'var(--panel)' }}>
      <div className="grid grid-cols-[1.4fr_repeat(4,1fr)] text-[11px] mono uppercase tracking-[0.16em] px-4 py-3 border-b hairline"
           style={{ color: 'var(--fg-mute)' }}>
        <div>{lang === 'zh' ? '服务商类型' : 'Vendor type'}</div>
        {layerLabels.map(l => <div key={l} className="text-center">{l}</div>)}
      </div>
      {rows.map((r, i) => {
        const isUs = r.name === 'Voltan';
        return (
          <div key={i} className="grid grid-cols-[1.4fr_repeat(4,1fr)] px-4 py-3 items-center text-[13px] border-b hairline last:border-b-0"
               style={{ background: isUs ? 'color-mix(in oklab, var(--accent) 10%, transparent)' : 'transparent' }}>
            <div style={{ color: isUs ? 'var(--fg)' : 'var(--fg-dim)', fontWeight: isUs ? 600 : 400 }}>
              {r.name}
            </div>
            {r.cov.map((v, j) => (
              <div key={j} className="flex justify-center">
                {v ? (
                  <span className="w-4 h-4 flex items-center justify-center"
                        style={{ background: 'var(--accent)', color: 'var(--accent-ink)' }}>
                    <svg width="10" height="10" viewBox="0 0 10 10"><path d="M1 5 L4 8 L9 2" fill="none" stroke="currentColor" strokeWidth="1.5" /></svg>
                  </span>
                ) : (
                  <span className="w-4 h-px" style={{ background: 'var(--line-strong)' }} />
                )}
              </div>
            ))}
          </div>
        );
      })}
    </div>
  );
}

// PROOF
function Proof({ lang }) {
  const P = window.COPY.proof;
  return (
    <section id="proof" className="py-20 border-t hairline">
      <div className="max-w-[1280px] mx-auto px-6">
        <Kicker>{window.t(P.kicker, lang)}</Kicker>
        <div className="mt-10 grid sm:grid-cols-2 lg:grid-cols-4 border-l border-t hairline">
          {P.stats.map((s, i) => (
            <Reveal key={i} delay={i * 80}>
              <div className="border-r border-b hairline p-8 flex flex-col justify-between h-full min-h-[180px]"
                   style={{ background: 'var(--bg-2)' }}>
                <div className="text-[42px] sm:text-[52px] font-medium leading-none tracking-[-0.02em]"
                     style={{ color: 'var(--fg)' }}>
                  <StatNum value={s.value} suffix={s.suffix} />
                </div>
                <div className="mt-6 flex items-center gap-2">
                  <span className="w-2.5 h-2.5" style={{ background: 'var(--accent)' }} />
                  <span className="text-[13px]" style={{ color: 'var(--fg-dim)' }}>
                    {window.t(s.label, lang)}
                  </span>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// TECHNOLOGY
function Tech({ lang }) {
  const T = window.COPY.tech;
  return (
    <section id="technology" className="py-28 border-t hairline"
             style={{ background: 'var(--bg-2)' }}>
      <div className="max-w-[1280px] mx-auto px-6 grid lg:grid-cols-12 gap-12">
        <div className="lg:col-span-5">
          <Kicker>{window.t(T.kicker, lang)}</Kicker>
          <h2 className="mt-4 text-[32px] sm:text-[42px] leading-[1.1] tracking-[-0.022em] font-medium"
              style={{ color: 'var(--fg)', textWrap: 'balance' }}>
            {window.t(T.h2, lang)}
          </h2>
          <p className="mt-5 text-[15px] leading-[1.65]" style={{ color: 'var(--fg-dim)' }}>
            {window.t(T.sub, lang)}
          </p>

          <a href={T.link.href} target="_blank" rel="noopener noreferrer"
             className="mt-6 inline-flex items-center gap-2 text-[13px] mono"
             style={{ color: 'var(--accent)' }}>
            {window.t(T.link, lang)}
          </a>
        </div>

        <div className="lg:col-span-7">
          <div className="border-t hairline">
            {T.items.map((it, i) => (
              <Reveal key={i} delay={i * 40}>
                <div className="grid grid-cols-[160px_1fr] gap-6 py-5 border-b hairline">
                  <div className="mono text-[12px] tracking-[0.04em]"
                       style={{ color: 'var(--fg)' }}>{window.t(it.k, lang)}</div>
                  <div className="text-[14.5px] leading-[1.6]"
                       style={{ color: 'var(--fg-dim)' }}>{window.t(it.v, lang)}</div>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// WHY NOW
function WhyNow({ lang }) {
  const W = window.COPY.why;
  const body = lang === 'zh' ? W.body.zh : W.body.en;
  const h2 = lang === 'zh' ? W.h2_zh : W.h2_en;
  return (
    <section id="why-now" className="py-28 border-t hairline relative overflow-hidden">
      {/* subtle calendar-like backdrop */}
      <div className="absolute inset-0 grid-bg pointer-events-none opacity-60" />
      <div className="relative max-w-[1100px] mx-auto px-6">
        <Kicker>{window.t(W.kicker, lang)}</Kicker>
        <h2 className="mt-4 text-[34px] sm:text-[48px] leading-[1.08] tracking-[-0.022em] font-medium max-w-[20ch]"
            style={{ color: 'var(--fg)', textWrap: 'balance' }}>
          {h2}
        </h2>

        {/* timeline */}
        <div className="mt-14 relative">
          <div className="absolute inset-x-0 top-4 h-px" style={{ background: 'var(--line)' }} />
          <div className="grid grid-cols-3 relative">
            {[
              { d: 'Q4 2025', t: lang === 'zh' ? '试点 DNSP 上线 v1.2' : 'Pilot DNSPs enable v1.2', done: true },
              { d: 'Q2 2026', t: lang === 'zh' ? 'OEM 固件交付窗口' : 'OEM firmware shipping window', done: false },
              { d: 'Jul 2026', t: lang === 'zh' ? 'v1.2 全面强制' : 'v1.2 mandatory across DNSPs', done: false, accent: true },
            ].map((m, i) => (
              <div key={i} className="pr-6">
                <div className="relative">
                  <span className="absolute -top-[3px] left-0 w-2 h-2 rounded-full"
                        style={{ background: m.accent ? 'var(--accent)' : (m.done ? 'var(--fg-dim)' : 'var(--line-strong)') }} />
                  <div className="pl-5 mono text-[11px] uppercase tracking-[0.18em]"
                       style={{ color: m.accent ? 'var(--accent)' : 'var(--fg-mute)' }}>
                    {m.d}
                  </div>
                </div>
                <div className="mt-4 text-[15px] leading-[1.5]"
                     style={{ color: 'var(--fg)' }}>{m.t}</div>
              </div>
            ))}
          </div>
        </div>

        <div className="mt-14 grid lg:grid-cols-2 gap-10">
          {body.map((p, i) => (
            <p key={i} className="text-[16px] leading-[1.65] max-w-[56ch]"
               style={{ color: i === 0 ? 'var(--fg)' : 'var(--fg-dim)', textWrap: 'pretty' }}>
              {p}
            </p>
          ))}
        </div>
      </div>
    </section>
  );
}

// ABOUT
function About({ lang }) {
  const A = window.COPY.about;
  return (
    <section id="about" className="py-24 border-t hairline" style={{ background: 'var(--bg-2)' }}>
      <div className="max-w-[1280px] mx-auto px-6">
        <div className="grid lg:grid-cols-12 gap-10 items-end">
          <div className="lg:col-span-7">
            <Kicker>{window.t(A.kicker, lang)}</Kicker>
            <h2 className="mt-4 text-[32px] sm:text-[40px] leading-[1.1] tracking-[-0.02em] font-medium"
                style={{ color: 'var(--fg)', textWrap: 'balance' }}>
              {window.t(A.h2, lang)}
            </h2>
          </div>
          <div className="lg:col-span-5">
            <p className="text-[14px]" style={{ color: 'var(--fg-dim)' }}>
              {window.t(A.sub, lang)}
            </p>
          </div>
        </div>

        <div className="mt-12 grid md:grid-cols-3 border-l border-t hairline">
          {A.founders.map((f, i) => (
            <Reveal key={i} delay={i * 80}>
              <div className="border-r border-b hairline p-6 h-full flex flex-col">
                {/* monogram placeholder — striped to indicate where a real portrait would go */}
                <div className="w-full aspect-[5/4] relative overflow-hidden"
                     style={{
                       background: 'var(--bg)',
                       backgroundImage: 'repeating-linear-gradient(135deg, var(--line) 0 1px, transparent 1px 8px)',
                     }}>
                  <div className="absolute inset-0 flex items-center justify-center">
                    <span className="mono text-[10px] uppercase tracking-[0.18em] px-2 py-1"
                          style={{ color: 'var(--fg-mute)', background: 'var(--bg-2)' }}>
                      portrait
                    </span>
                  </div>
                  <div className="absolute top-3 left-3 mono text-[10px] uppercase tracking-[0.18em]"
                       style={{ color: 'var(--fg)' }}>
                    {f.name.split(' ').map(p => p[0]).join('')}
                  </div>
                </div>
                <div className="mt-5">
                  <div className="text-[16px] font-medium" style={{ color: 'var(--fg)' }}>{f.name}</div>
                  <div className="mono text-[11px] mt-1" style={{ color: 'var(--accent)' }}>
                    {window.t(f.role, lang)}
                  </div>
                  <p className="mt-4 text-[13.5px] leading-[1.6]" style={{ color: 'var(--fg-dim)' }}>
                    {window.t(f.bio, lang)}
                  </p>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}


// CONTACT
function Contact({ lang }) {
  const C = window.COPY.contact;
  const [seg, setSeg] = React.useState('oem');
  const [email, setEmail] = React.useState('');
  const [company, setCompany] = React.useState('');
  const [msg, setMsg] = React.useState('');
  const [sent, setSent] = React.useState(false);
  const valid = /.+@.+\..+/.test(email) && company.length > 1 && msg.length > 4;
  const submit = (e) => { e.preventDefault(); if (valid) setSent(true); };
  return (
    <section id="contact" className="py-28 border-t hairline" style={{ background: 'var(--bg-2)' }}>
      <div className="max-w-[1100px] mx-auto px-6 grid lg:grid-cols-12 gap-10">
        <div className="lg:col-span-5">
          <Kicker>{window.t(C.kicker, lang)}</Kicker>
          <h2 className="mt-4 text-[30px] sm:text-[38px] leading-[1.1] tracking-[-0.02em] font-medium"
              style={{ color: 'var(--fg)', textWrap: 'balance' }}>
            {window.t(C.h2, lang)}
          </h2>
          <div className="mt-8 text-[13px] mono space-y-2" style={{ color: 'var(--fg-dim)' }}>
            <div>{window.t(C.direct, lang)}</div>
            <div><a href="mailto:u7541840@gmail.com" style={{ color: 'var(--fg)' }}>u7541840@gmail.com</a></div>
          </div>
        </div>
        <div className="lg:col-span-7">
          <form onSubmit={submit}
                className="border hairline p-6 lg:p-8 rounded-[2px]"
                style={{ background: 'var(--panel)' }}>
            <div className="mono text-[11px] uppercase tracking-[0.18em]"
                 style={{ color: 'var(--fg-mute)' }}>
              {window.t(C.segLabel, lang)}
            </div>
            <div className="mt-3 grid grid-cols-2 md:grid-cols-4 gap-0 border hairline">
              {C.segs.map((s, i) => (
                <button key={s.id} type="button"
                  onClick={() => setSeg(s.id)}
                  className={`text-left px-4 py-3 text-[13px] border-r hairline last:border-r-0 ${i >= 2 ? 'border-t md:border-t-0' : ''}`}
                  style={{
                    background: seg === s.id ? 'color-mix(in oklab, var(--accent) 14%, transparent)' : 'transparent',
                    color: seg === s.id ? 'var(--fg)' : 'var(--fg-dim)',
                  }}>
                  {window.t(s.label, lang)}
                </button>
              ))}
            </div>

            <div className="mt-6 grid sm:grid-cols-2 gap-4">
              <Field label={window.t(C.email, lang)} value={email} onChange={setEmail} type="email" />
              <Field label={window.t(C.company, lang)} value={company} onChange={setCompany} />
            </div>
            <div className="mt-4">
              <Field label={window.t(C.message, lang)} value={msg} onChange={setMsg} textarea />
            </div>
            <div className="mt-6 flex items-center justify-between">
              <div className="mono text-[11px]" style={{ color: 'var(--fg-mute)' }}>
                {sent
                  ? <span style={{ color: 'var(--accent)' }}>● {window.t(C.sent, lang)}</span>
                  : (valid ? '● ready' : '○ required fields')}
              </div>
              <Btn variant="primary" onClick={submit}>
                {window.t(C.submit, lang)}
              </Btn>
            </div>
          </form>
        </div>
      </div>
    </section>
  );
}

function Field({ label, value, onChange, type = "text", textarea = false }) {
  const id = React.useId();
  return (
    <label htmlFor={id} className="block">
      <div className="mono text-[10px] uppercase tracking-[0.18em] mb-2"
           style={{ color: 'var(--fg-mute)' }}>{label}</div>
      {textarea
        ? <textarea id={id} value={value} onChange={e => onChange(e.target.value)}
                    rows={4}
                    className="w-full bg-transparent border hairline rounded-[2px] px-3 py-2.5 text-[14px] outline-none transition focus:border-[var(--accent)]"
                    style={{ color: 'var(--fg)', resize: 'vertical' }} />
        : <input id={id} value={value} onChange={e => onChange(e.target.value)} type={type}
                 className="w-full bg-transparent border hairline rounded-[2px] px-3 h-11 text-[14px] outline-none transition focus:border-[var(--accent)]"
                 style={{ color: 'var(--fg)' }} />
      }
    </label>
  );
}

// FOOTER
function Footer({ lang, setLang }) {
  const F = window.COPY.footer;
  return (
    <footer className="py-14 border-t hairline">
      <div className="max-w-[1280px] mx-auto px-6 grid lg:grid-cols-12 gap-10 items-start">
        <div className="lg:col-span-5">
          <div style={{ color: 'var(--fg)' }}><Wordmark size={22} /></div>
          <p className="mt-4 text-[14px] max-w-[38ch]" style={{ color: 'var(--fg-dim)' }}>
            {window.t(F.tagline, lang)}
          </p>
        </div>
        <div className="lg:col-span-4 grid grid-cols-2 gap-6 text-[13px]" style={{ color: 'var(--fg-dim)' }}>
          <div>
            <div className="mono text-[10px] uppercase tracking-[0.18em] mb-3"
                 style={{ color: 'var(--fg-mute)' }}>{lang === 'zh' ? '公司' : 'Company'}</div>
            <div className="space-y-1.5">
              <div>{window.t(F.addr, lang)}</div>
              <div className="mono">{F.abn}</div>
            </div>
          </div>
          <div>
            <div className="mono text-[10px] uppercase tracking-[0.18em] mb-3"
                 style={{ color: 'var(--fg-mute)' }}>{lang === 'zh' ? '链接' : 'Links'}</div>
            <div className="space-y-1.5">
              <a href="#capabilities" className="block hover:text-white">{window.t(window.COPY.nav.capabilities, lang)}</a>
              <a href="#technology"   className="block hover:text-white">{window.t(window.COPY.nav.technology, lang)}</a>
              <a href="#contact"      className="block hover:text-white">{window.t(window.COPY.nav.contact, lang)}</a>
            </div>
          </div>
        </div>
        <div className="lg:col-span-3 flex lg:justify-end">
          <LangToggle lang={lang} setLang={setLang} />
        </div>
      </div>
      <div className="max-w-[1280px] mx-auto px-6 mt-10 pt-6 border-t hairline flex flex-wrap items-center justify-between gap-2 mono text-[11px]"
           style={{ color: 'var(--fg-mute)' }}>
        <span>{window.t(F.rights, lang)}</span>
        <span>v2026.04 · built in Australia</span>
      </div>
    </footer>
  );
}

Object.assign(window, { Hero, Serve, Stack, Proof, Tech, WhyNow, About, Contact, Footer });