/* HLiD — Workflow, Observability, Integrations, Case, Next, Footer */

/* Demo request form — POSTs to window.HLID_DEMO_ENDPOINT or falls back to mailto */
function DemoForm() {
  const { t } = useT();
  const [state, setState] = React.useState({ status: 'idle', msg: '' });
  const [form, setForm] = React.useState({ name: '', email: '', company: '', entities: '', note: '' });
  const upd = (k) => (e) => setForm(f => ({ ...f, [k]: e.target.value }));

  const submit = async (e) => {
    e.preventDefault();
    if (!form.email || !form.name || !form.company) {
      setState({ status: 'error', msg: t('f.err') });
      return;
    }
    setState({ status: 'sending', msg: '' });
    try {
      const endpoint = window.HLID_DEMO_ENDPOINT || '/api/demo';
      const res = await fetch(endpoint, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ ...form, source: 'hlid.at', ts: new Date().toISOString() }),
      });
      if (!res.ok) throw new Error('Endpoint returned ' + res.status);
      setState({ status: 'ok', msg: t('f.ok') });
      if (window.umami) window.umami.track('demo-submitted', { company: form.company });
    } catch (err) {
      // Fallback: open mail client with prefilled body
      const body = encodeURIComponent(
        `Name: ${form.name}\nEmail: ${form.email}\nCompany: ${form.company}\nEntities: ${form.entities}\n\n${form.note}`
      );
      window.location.href = `mailto:hlid@nibelung.io?subject=${encodeURIComponent('Demo request — ' + form.company)}&body=${body}`;
      setState({ status: 'fallback', msg: t('f.fallback') });
    }
  };

  if (state.status === 'ok') {
    return (
      <div className="border border-signal/40 bg-signal/5 px-8 py-10 rounded-[3px] text-center">
        <div className="font-mono text-[10px] uppercase tracking-[0.22em] text-signal mb-3">{t('f.okTag')}</div>
        <div className="font-display text-[22px] text-fg leading-snug">{state.msg}</div>
      </div>
    );
  }

  const fieldCls = "w-full bg-transparent border border-border text-fg placeholder:text-fg-subtle font-display text-[15px] px-4 py-3 rounded-[3px] focus:outline-none focus:border-fg transition-colors";

  return (
    <form onSubmit={submit} className="grid grid-cols-2 gap-3">
      <input className={fieldCls} placeholder={t('f.name')} value={form.name} onChange={upd('name')} required />
      <input className={fieldCls} placeholder={t('f.email')} type="email" value={form.email} onChange={upd('email')} required />
      <input className={fieldCls + ' col-span-2'} placeholder={t('f.company')} value={form.company} onChange={upd('company')} required />
      <input className={fieldCls + ' col-span-2'} placeholder={t('f.entities')} value={form.entities} onChange={upd('entities')} />
      <textarea className={fieldCls + ' col-span-2 min-h-[96px] resize-none'} placeholder={t('f.note')} value={form.note} onChange={upd('note')} />
      <div className="col-span-2 flex flex-col md:flex-row items-stretch md:items-center gap-3 mt-1">
        <button
          type="submit"
          disabled={state.status === 'sending'}
          className="group inline-flex items-center justify-center gap-3 bg-fg text-bg px-8 py-3.5 font-mono text-[12px] uppercase tracking-[0.2em] rounded-[3px] hover:bg-fg/90 transition-colors focus-ring disabled:opacity-60"
        >
          {state.status === 'sending' ? t('f.sending') : t('f.submit')}
          {state.status !== 'sending' && (
            <svg width="16" height="10" viewBox="0 0 16 10" fill="none" className="transition-transform group-hover:translate-x-1">
              <path d="M1 5h14M10 1l4 4-4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="square"/>
            </svg>
          )}
        </button>
        <div className="font-mono text-[10px] uppercase tracking-[0.18em] text-fg-subtle leading-relaxed whitespace-pre-line">
          {t('f.sla')}
        </div>
      </div>
      {state.status === 'error' && (
        <div className="col-span-2 font-mono text-[11px] text-amber">{state.msg}</div>
      )}
      {state.status === 'fallback' && (
        <div className="col-span-2 font-mono text-[11px] text-fg-muted">{state.msg}</div>
      )}
    </form>
  );
}

/* Approval UI screenshot placeholder — real invoice approval view */
function ApprovalUIMock() {
  return (
    <div className="relative w-full aspect-[16/10] bg-bg-sunken overflow-hidden">
      {/* App top bar */}
      <div className="h-10 border-b border-border flex items-center px-4 gap-3 bg-bg-elevated">
        <img src="assets/logo.webp" alt="" className="w-4 h-4 object-contain"/>
        <span className="font-mono text-[10px] text-fg-muted tracking-[0.1em]">app.hlid.at / inbox / INV-2025-08421</span>
        <div className="flex-1"/>
        <span className="font-mono text-[10px] text-signal tracking-[0.15em] uppercase flex items-center gap-1.5">
          <span className="w-1.5 h-1.5 bg-signal rounded-full"/>Live
        </span>
        <span className="font-mono text-[10px] text-fg-subtle">MR</span>
      </div>
      <div className="grid grid-cols-[180px_1fr_320px] h-[calc(100%-2.5rem)]">
        {/* Left rail */}
        <div className="border-r border-border p-3 space-y-1">
          {[['Inbox','42',true],['Needs me','7',false],['Variance','4',false],['Blocked','2',false],['Posted','—',false],['Archive','',false]].map(([l,n,a]) => (
            <div key={l} className={`flex items-center justify-between px-2.5 py-1.5 rounded-[3px] ${a?'bg-bg-elevated':''}`}>
              <span className={`text-[11px] ${a?'text-fg':'text-fg-muted'}`}>{l}</span>
              <span className="font-mono text-[10px] text-fg-subtle">{n}</span>
            </div>
          ))}
          <div className="pt-4 pb-2 font-mono text-[9px] uppercase tracking-[0.2em] text-fg-subtle">Entities</div>
          {['AT HQ','CH HQ','DE HQ','Holding'].map((e,i)=>(
            <div key={e} className="flex items-center gap-2 px-2.5 py-1">
              <span className={`w-1.5 h-1.5 rounded-full ${i===0?'bg-signal':'bg-fg-faint'}`}/>
              <span className="text-[11px] text-fg-muted">{e}</span>
            </div>
          ))}
        </div>
        {/* Invoice detail */}
        <div className="border-r border-border overflow-hidden">
          <div className="p-4 border-b border-border">
            <div className="flex items-center gap-2 mb-2">
              <span className="font-mono text-[9px] uppercase tracking-[0.2em] text-amber">Variance</span>
              <span className="text-fg-faint">·</span>
              <span className="font-mono text-[10px] text-fg-muted">INV-2025-08421</span>
            </div>
            <div className="font-display font-bold text-fg text-[18px] tracking-tight mb-1">Gebrüder Weiss GmbH</div>
            <div className="text-[11px] text-fg-muted">Due <span className="font-mono text-fg">2026-04-28</span> · Entity <span className="font-mono text-fg">AT HQ</span></div>
          </div>
          <div className="p-4 border-b border-border">
            <div className="font-mono text-[9px] uppercase tracking-[0.2em] text-fg-subtle mb-2">Amount</div>
            <div className="font-mono text-[26px] text-fg leading-none tabular-nums tracking-tight">€12,840.00</div>
            <div className="text-[11px] text-fg-subtle mt-2 font-mono">Net €10,700.00 · VAT 20% · 8 lines</div>
          </div>
          <div className="p-4">
            <div className="font-mono text-[9px] uppercase tracking-[0.2em] text-fg-subtle mb-3">3-way match</div>
            <div className="space-y-2 text-[11px]">
              {[['PO-2481','€12,840.00','matched',true],['GRN-9912','8 / 8 lines','matched',true],['Vendor tax ID','ATU 43218109','verified',true],['Cost centre','CC-0117 · IT Ops','97% conf',true]].map(([l,v,n,ok])=>(
                <div key={l} className="flex items-center gap-3">
                  <span className={ok?'text-signal':'text-danger'}>✓</span>
                  <span className="text-fg-muted w-28">{l}</span>
                  <span className="font-mono text-fg tabular-nums flex-1">{v}</span>
                  <span className="font-mono text-[10px] text-fg-subtle">{n}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
        {/* Right context */}
        <div className="p-4 bg-bg space-y-4">
          <div>
            <div className="font-mono text-[9px] uppercase tracking-[0.2em] text-fg-subtle mb-2">HLiD analysis</div>
            <div className="flex items-center gap-2 mb-3">
              <div className="w-28 h-1 bg-border rounded-full overflow-hidden"><div className="h-full bg-amber" style={{width:'72%'}}/></div>
              <span className="font-mono text-[10px] text-amber">72%</span>
            </div>
            <p className="text-[11px] text-fg leading-relaxed">
              VAT rate differs from PO (20% vs. 10% reduced). Freight line exceeds PO by <span className="font-mono text-amber">€240.00</span>. All other fields match.
            </p>
          </div>
          <div>
            <div className="font-mono text-[9px] uppercase tracking-[0.2em] text-fg-subtle mb-2">Approver path</div>
            <div className="flex items-center gap-1.5 flex-wrap text-[10px]">
              <span className="px-2 py-0.5 bg-bg-elevated border border-border rounded-[2px] font-mono">HLiD</span>
              <span className="text-fg-subtle">→</span>
              <span className="px-2 py-0.5 bg-bg-elevated border border-border-strong rounded-[2px] text-fg">Marta R.</span>
              <span className="text-fg-subtle">→</span>
              <span className="px-2 py-0.5 bg-bg-elevated border border-border rounded-[2px] text-fg-muted">CFO</span>
            </div>
          </div>
          <div className="pt-3 border-t border-border space-y-2">
            <div className="bg-fg text-bg text-center py-2 rounded-[3px] font-mono text-[10px] uppercase tracking-[0.15em]">Approve & post</div>
            <div className="border border-border text-fg-muted text-center py-2 rounded-[3px] font-mono text-[10px] uppercase tracking-[0.15em]">Request changes</div>
          </div>
        </div>
      </div>
    </div>
  );
}

/* Dashboard mini-mocks */
function FunnelDash() {
  const rows = [['Received','24,812',100],['Extracted','24,612',99.2],['Matched','22,104',89.1],['Approved','21,440',86.4],['Posted','21,406',86.2]];
  return (
    <div className="p-5 space-y-3 h-full">
      <div className="flex items-center justify-between">
        <div className="font-mono text-[10px] uppercase tracking-[0.2em] text-fg-muted">Production funnel · 30d</div>
        <span className="font-mono text-[10px] text-signal flex items-center gap-1.5"><span className="w-1.5 h-1.5 bg-signal rounded-full"/>Live</span>
      </div>
      <div className="space-y-2 pt-2">
        {rows.map(([l,v,p])=>(
          <div key={l}>
            <div className="flex items-baseline justify-between mb-1.5">
              <span className="text-[12px] text-fg-muted">{l}</span>
              <span className="font-mono text-[12px] text-fg tabular-nums">{v}</span>
            </div>
            <div className="h-1.5 bg-border rounded-full overflow-hidden"><div className="h-full bg-steel" style={{width:`${p}%`}}/></div>
          </div>
        ))}
      </div>
      <div className="pt-4 grid grid-cols-3 gap-3 border-t border-border mt-3">
        {[['Drop-off','0.8%',''],['Avg time','1.8s','p95'],['Touchless','63.1%','']].map(([l,v,s])=>(
          <div key={l}><div className="font-mono text-[9px] text-fg-subtle uppercase tracking-[0.15em]">{l}</div><div className="font-mono text-[16px] text-fg tabular-nums">{v}</div>{s && <div className="font-mono text-[9px] text-fg-subtle">{s}</div>}</div>
        ))}
      </div>
    </div>
  );
}
function ApproverDash() {
  const ppl = [['Marta Rojas','CFO · AT',238,96.1],['Jan Huber','Director · AT',181,94.2],['Lena Eder','Controller · CH',142,97.8],['Stefan Weiss','Director · AT',97,88.4],['Ana Marković','Treasurer',54,99.1]];
  return (
    <div className="p-5 space-y-3 h-full">
      <div className="font-mono text-[10px] uppercase tracking-[0.2em] text-fg-muted">Approver deep-dive</div>
      <div className="pt-2">
        <div className="grid grid-cols-[1fr_60px_50px] gap-2 pb-2 border-b border-border font-mono text-[9px] uppercase tracking-[0.15em] text-fg-subtle">
          <span>Person</span><span className="text-right">30d</span><span className="text-right">SLA</span>
        </div>
        {ppl.map(([n,r,c,s])=>(
          <div key={n} className="grid grid-cols-[1fr_60px_50px] gap-2 py-2 border-b border-border items-center">
            <div>
              <div className="text-[12px] text-fg">{n}</div>
              <div className="font-mono text-[9.5px] text-fg-subtle">{r}</div>
            </div>
            <span className="font-mono text-[12px] text-fg tabular-nums text-right">{c}</span>
            <span className={`font-mono text-[11px] tabular-nums text-right ${s>=95?'text-signal':s>=90?'text-amber':'text-danger'}`}>{s}%</span>
          </div>
        ))}
      </div>
    </div>
  );
}
function VendorDash() {
  return (
    <div className="p-5 space-y-3 h-full">
      <div className="font-mono text-[10px] uppercase tracking-[0.2em] text-fg-muted">Vendor scorecard</div>
      <div className="pt-2 space-y-3">
        {[['Gebrüder Weiss GmbH','VEN-0139','€214,820','A',97],['OMV Aktiengesellschaft','VEN-0041','€1,284,410','A',99],['Mondi Group AG','VEN-0308','€88,302','B',87],['Spar Österr. Warenh.','VEN-0512','€42,140','B',81],['Strabag SE','VEN-0019','€1,904,200','A',95]].map(([n,id,vol,g,s])=>(
          <div key={id} className="grid grid-cols-[1fr_80px_30px_60px] gap-3 items-center pb-2.5 border-b border-border">
            <div>
              <div className="text-[12px] text-fg truncate">{n}</div>
              <div className="font-mono text-[9.5px] text-fg-subtle">{id}</div>
            </div>
            <span className="font-mono text-[11px] text-fg tabular-nums text-right">{vol}</span>
            <span className={`font-mono text-[11px] text-center rounded-[2px] py-0.5 ${g==='A'?'text-signal bg-signal/10':'text-amber bg-amber/10'}`}>{g}</span>
            <div className="flex items-center gap-1.5 justify-end">
              <div className="w-10 h-1 bg-border rounded-full overflow-hidden"><div className="h-full bg-steel-strong" style={{width:`${s}%`}}/></div>
              <span className="font-mono text-[10px] text-fg-muted tabular-nums">{s}</span>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}
function AIQualityDash() {
  const fields = [['Vendor',99.4],['Amount',99.1],['VAT',97.8],['Lines',94.2],['Cost ctr',91.6],['PO link',89.3]];
  return (
    <div className="p-5 space-y-3 h-full">
      <div className="flex items-center justify-between">
        <div className="font-mono text-[10px] uppercase tracking-[0.2em] text-fg-muted">AI quality · field-level</div>
        <span className="font-mono text-[10px] text-fg-subtle">Holdout · 2.4k</span>
      </div>
      <div className="pt-2">
        <div className="font-mono text-[42px] text-fg tabular-nums leading-none tracking-tighter">97.4<span className="text-fg-subtle text-[24px]">%</span></div>
        <div className="font-mono text-[10px] text-fg-subtle uppercase tracking-[0.2em] mt-1">Weighted extraction accuracy</div>
      </div>
      <div className="pt-3 space-y-1.5">
        {fields.map(([f,p])=>(
          <div key={f} className="flex items-center gap-3">
            <span className="text-[11px] text-fg-muted w-20">{f}</span>
            <div className="flex-1 h-1 bg-border rounded-full overflow-hidden"><div className="h-full bg-signal" style={{width:`${p}%`}}/></div>
            <span className="font-mono text-[10px] text-fg tabular-nums w-10 text-right">{p}%</span>
          </div>
        ))}
      </div>
    </div>
  );
}

/* ------------ 5. WORKFLOW ------------ */
function Workflow() {
  const { t } = useT();
  return (
    <section id="workflow" className="relative border-t border-border bg-bg">
      <div className="max-w-7xl mx-auto px-6 md:px-8 py-20 md:py-32">
        <Eyebrow n="§ 04" label={t('wf.eyebrow')} />
        <div className="grid grid-cols-12 gap-8 mb-16 md:mb-20">
          <Reveal className="col-span-12 md:col-span-8">
            <h2 className="font-display font-bold text-fg tracking-tighter leading-[0.98]" style={{ fontSize: 'clamp(2.5rem, 5.5vw, 4.75rem)' }}>
              {t('wf.h1.a')}<br/>
              <span className="text-fg-subtle">{t('wf.h1.b')}</span>
            </h2>
          </Reveal>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-12 md:gap-16 mb-20">
          <Reveal>
            <div className="border-t border-border pt-6">
              <div className="font-mono text-[10px] uppercase tracking-[0.22em] text-fg-subtle mb-6">{t('wf.approvalHead')}</div>
              <ul className="space-y-3">
                {[
                  [t('wf.a1.t'), t('wf.a1.b')],
                  [t('wf.a2.t'), t('wf.a2.b')],
                  [t('wf.a3.t'), t('wf.a3.b')],
                  [t('wf.a4.t'), t('wf.a4.b')],
                ].map(([title, d]) => (
                  <li key={title} className="grid grid-cols-[16px_1fr] gap-3 py-3 border-b border-border">
                    <span className="text-fg-subtle font-mono text-[11px] pt-1">—</span>
                    <div>
                      <div className="text-[15px] text-fg font-display font-bold tracking-tight">{title}</div>
                      <div className="text-[13.5px] text-fg-muted leading-relaxed mt-1">{d}</div>
                    </div>
                  </li>
                ))}
              </ul>
            </div>
          </Reveal>
          <Reveal delay={120}>
            <div className="border-t border-border pt-6">
              <div className="font-mono text-[10px] uppercase tracking-[0.22em] text-fg-subtle mb-6">{t('wf.paymentHead')}</div>
              <ul className="space-y-3">
                {[
                  [t('wf.p1.t'), t('wf.p1.b')],
                  [t('wf.p2.t'), t('wf.p2.b')],
                  [t('wf.p3.t'), t('wf.p3.b')],
                  [t('wf.p4.t'), t('wf.p4.b')],
                ].map(([title, d]) => (
                  <li key={title} className="grid grid-cols-[16px_1fr] gap-3 py-3 border-b border-border">
                    <span className="text-fg-subtle font-mono text-[11px] pt-1">—</span>
                    <div>
                      <div className="text-[15px] text-fg font-display font-bold tracking-tight">{title}</div>
                      <div className="text-[13.5px] text-fg-muted leading-relaxed mt-1">{d}</div>
                    </div>
                  </li>
                ))}
              </ul>
            </div>
          </Reveal>
        </div>

        {/* Approval UI screenshot framed as laptop */}
        <Reveal delay={200}>
          <div className="mt-8">
            <div className="font-mono text-[10px] uppercase tracking-[0.22em] text-fg-subtle mb-4">{t('wf.fig')}</div>
            <div className="border border-border rounded-md overflow-hidden bg-bg-elevated">
              {/* Window chrome */}
              <div className="flex items-center gap-1.5 px-3 py-2 border-b border-border bg-bg-sunken">
                <span className="w-2.5 h-2.5 rounded-full bg-border-strong"/>
                <span className="w-2.5 h-2.5 rounded-full bg-border-strong"/>
                <span className="w-2.5 h-2.5 rounded-full bg-border-strong"/>
                <div className="flex-1 text-center font-mono text-[10px] text-fg-subtle tracking-[0.08em]">app.hlid.at</div>
              </div>
              <ApprovalUIMock/>
            </div>
            <div className="mt-3 text-[12px] text-fg-subtle font-mono">
              {t('wf.figNote')}
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* ------------ 6. OBSERVABILITY ------------ */
function Observability() {
  const { t } = useT();
  const tiles = [
    [t('obs.t1'), <FunnelDash/>],
    [t('obs.t2'), <ApproverDash/>],
    [t('obs.t3'), <VendorDash/>],
    [t('obs.t4'), <AIQualityDash/>],
  ];
  return (
    <section id="observability" className="relative border-t border-border bg-bg-sunken">
      <div className="max-w-7xl mx-auto px-6 md:px-8 py-20 md:py-32">
        <Eyebrow n="§ 05" label={t('obs.eyebrow')} />
        <div className="grid grid-cols-12 gap-8 mb-16 md:mb-20">
          <Reveal className="col-span-12 md:col-span-8">
            <h2 className="font-display font-bold text-fg tracking-tighter leading-[0.98]" style={{ fontSize: 'clamp(2.5rem, 5.5vw, 4.75rem)' }}>
              {t('obs.h1.a')}<br/>
              <span className="text-fg-subtle">{t('obs.h1.b')}</span>
            </h2>
          </Reveal>
          <Reveal delay={100} className="col-span-12 md:col-span-4 md:pt-4">
            <p className="text-[15px] text-fg-muted leading-relaxed">{t('obs.lede')}</p>
          </Reveal>
        </div>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          {tiles.map(([label, dash], i) => (
            <Reveal key={label} delay={i * 80}>
              <div>
                <div className="border border-border rounded-md overflow-hidden bg-bg-elevated aspect-[16/10]">{dash}</div>
                <div className="mt-3 flex items-baseline justify-between">
                  <div className="font-display font-bold text-fg text-[15px] tracking-tight">{label}</div>
                  <div className="font-mono text-[10px] uppercase tracking-[0.2em] text-fg-subtle">Fig {String(i+2).padStart(2,'0')}</div>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ------------ 7. INTEGRATIONS ------------ */
function Integrations() {
  const { t } = useT();
  const erps = ['BMD','SAP','NetSuite','Dynamics 365','Business Central','Odoo','Abacus'];
  const crms = ['Salesforce','Monday','Business Central','Twenty'];
  const LogoTile = ({ name }) => (
    <div className="border border-border rounded-md px-5 py-5 h-16 flex items-center justify-center font-display font-bold text-[17px] text-fg-muted tracking-tight opacity-60 hover:opacity-100 hover:border-border-strong transition-all">
      {name}
    </div>
  );
  return (
    <section id="integrations" className="relative border-t border-border bg-bg">
      <div className="max-w-7xl mx-auto px-6 md:px-8 py-20 md:py-32">
        <Eyebrow n="§ 06" label={t('int.eyebrow')} />
        <div className="grid grid-cols-12 gap-8 mb-16">
          <Reveal className="col-span-12 md:col-span-8">
            <h2 className="font-display font-bold text-fg tracking-tighter leading-[0.98]" style={{ fontSize: 'clamp(2.5rem, 5.5vw, 4.75rem)' }}>
              {t('int.h1.a')}<br/>
              <span className="text-fg-subtle">{t('int.h1.b')}</span>
            </h2>
          </Reveal>
        </div>
        <Reveal>
          <div className="font-mono text-[10px] uppercase tracking-[0.22em] text-fg-subtle mb-4 border-t border-border pt-6">{t('int.erp')}</div>
          <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-7 gap-3">
            {erps.map(n => <LogoTile key={n} name={n}/>)}
          </div>
        </Reveal>
        <Reveal delay={100}>
          <div className="font-mono text-[10px] uppercase tracking-[0.22em] text-fg-subtle mb-4 mt-12 border-t border-border pt-6">{t('int.crm')}</div>
          <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
            {crms.map(n => <LogoTile key={n} name={n}/>)}
          </div>
        </Reveal>
        <Reveal delay={200}>
          <p className="mt-10 text-[14px] text-fg-subtle font-mono max-w-2xl">
            {t('int.foot')}
          </p>
        </Reveal>
      </div>
    </section>
  );
}

/* ------------ 8. CASE STUDY ------------ */
function CaseStudy() {
  const { t } = useT();
  return (
    <section id="case" className="relative border-t border-border bg-bg">
      <div className="max-w-7xl mx-auto px-6 md:px-8 py-20 md:py-32">
        <Eyebrow n="§ 07" label={t('case.eyebrow')} />
        <div className="grid grid-cols-12 gap-8 mb-16 md:mb-20">
          <Reveal className="col-span-12 md:col-span-9">
            <h2 className="font-display font-bold text-fg tracking-tighter leading-[0.96]" style={{ fontSize: 'clamp(2.5rem, 5.5vw, 4.75rem)' }}>
              {t('case.h1.a')}<br/>
              {t('case.h1.b')}<br/>
              <span className="text-fg-subtle">{t('case.h1.c')}</span>
            </h2>
          </Reveal>
        </div>
        <div className="grid grid-cols-12 gap-8 border-t border-border pt-12">
          <Reveal className="col-span-12 md:col-span-5">
            <div className="font-display font-bold text-fg leading-[0.9] tracking-tighter" style={{ fontSize: 'clamp(3.5rem, 7vw, 6rem)' }}>
              30<span className="text-fg-subtle"> {t('case.big')}</span>
            </div>
            <div className="mt-4 font-mono text-[11px] uppercase tracking-[0.22em] text-fg">{t('case.bigLabel')}</div>
            <div className="mt-1.5 font-mono text-[11px] text-fg-subtle">{t('case.bigSub')}</div>
          </Reveal>
          <Reveal className="col-span-12 md:col-span-7" delay={150}>
            <p className="text-[17px] md:text-[18px] text-fg leading-relaxed max-w-2xl whitespace-pre-line">
              {t('case.body')}
            </p>
            <div className="mt-6 flex flex-wrap gap-2 font-mono text-[10px] uppercase tracking-[0.18em]">
              {['DACH-live', 'BMD + Abacus', 'Multi-entity', 'Super-admin stand-in', 'Audit-verified'].map(x => (
                <span key={x} className="px-2.5 py-1 border border-border text-fg-muted rounded-[3px]">{x}</span>
              ))}
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

/* ------------ 9. NEXT STEPS ------------ */
function NextSteps() {
  const { t } = useT();
  const steps = [
    [t('next.s1.w'), t('next.s1.t'), t('next.s1.b')],
    [t('next.s2.w'), t('next.s2.t'), t('next.s2.b')],
    [t('next.s3.w'), t('next.s3.t'), t('next.s3.b')],
  ];
  return (
    <section id="next" className="relative border-t border-border bg-bg-sunken">
      <div className="max-w-7xl mx-auto px-6 md:px-8 py-20 md:py-32">
        <Eyebrow n="§ 08" label={t('next.eyebrow')} />
        <div className="grid grid-cols-12 gap-8 mb-16 md:mb-20">
          <Reveal className="col-span-12 md:col-span-8">
            <h2 className="font-display font-bold text-fg tracking-tighter leading-[0.96]" style={{ fontSize: 'clamp(2.5rem, 5.5vw, 4.75rem)' }}>
              {t('next.h1')}
            </h2>
          </Reveal>
        </div>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-0 md:divide-x divide-border border-t border-border">
          {steps.map(([w, title, d], i) => (
            <Reveal key={w} delay={i * 100}>
              <div className="py-10 md:px-10 first:md:pl-0 last:md:pr-0 border-b md:border-b-0 border-border">
                <div className="font-mono text-[11px] uppercase tracking-[0.22em] text-amber mb-6">{w}</div>
                <div className="font-display font-bold text-fg text-[28px] md:text-[32px] tracking-tighter leading-[1.05] mb-4">{title}</div>
                <p className="text-[14px] text-fg-muted leading-relaxed">{d}</p>
              </div>
            </Reveal>
          ))}
        </div>
        <Reveal delay={400}>
          <div className="mt-20 md:mt-28 max-w-3xl mx-auto">
            <div className="font-display font-bold text-fg tracking-tighter leading-[1] mb-10 text-center" style={{ fontSize: 'clamp(2rem, 4vw, 3.5rem)' }}>
              {t('next.formH.a')}<br/>
              <span className="text-fg-subtle">{t('next.formH.b')}</span>
            </div>
            <DemoForm />
            <div className="mt-6 font-mono text-[11px] uppercase tracking-[0.2em] text-fg-subtle text-center">
              {t('next.formOr')} <a href="mailto:hlid@nibelung.io" className="text-fg hover:text-amber transition-colors">hlid@nibelung.io</a>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* ------------ FOOTER ------------ */
function Footer() {
  const { t } = useT();
  return (
    <footer className="relative border-t border-border bg-bg">
      <div className="max-w-7xl mx-auto px-6 md:px-8 py-16">
        <div className="grid grid-cols-12 gap-8">
          <div className="col-span-12 md:col-span-5">
            <div className="flex items-center gap-2.5 mb-6">
              <img src="assets/logo-square.png" alt="HLiD" className="w-8 h-8 object-contain" />
              <span className="font-display font-bold text-[18px] tracking-tight">HLiD</span>
            </div>
            <p className="text-[14px] text-fg-muted leading-relaxed max-w-xs">
              {t('foot.tag')}
            </p>
            <div className="mt-6 font-mono text-[11px] text-fg-subtle">
              {t('foot.company')}
            </div>
          </div>
          {[
            [t('foot.Product'), [[t('nav.workflow'),'#workflow'],[t('nav.observability'),'#observability'],[t('nav.integrations'),'#integrations'],[t('foot.caseStudy'),'#case']]],
            [t('foot.Company'), [[t('foot.about'),'https://nibelung.io'],[t('foot.security'),'mailto:hlid@nibelung.io?subject=Security'],[t('foot.contact'),'mailto:hlid@nibelung.io']]],
            [t('foot.Legal'),   [[t('foot.impressum'),'impressum.html'],[t('foot.datenschutz'),'datenschutz.html']]],
          ].map(([title, items]) => (
            <div key={title} className="col-span-6 md:col-span-2 md:col-start-auto">
              <div className="font-mono text-[10px] uppercase tracking-[0.22em] text-fg-subtle mb-4">{title}</div>
              {items.map(([l, h]) => (
                <a key={l} href={h} className="block text-[13px] text-fg-muted hover:text-fg transition-colors mb-2">{l}</a>
              ))}
            </div>
          ))}
        </div>
        <div className="mt-16 pt-6 border-t border-border flex flex-col md:flex-row items-start md:items-center justify-between gap-3 font-mono text-[11px] text-fg-subtle">
          <div>{t('foot.productOf')} · <a href="https://nibelung.io" className="hover:text-fg transition-colors">nibelung.io</a></div>
          <div>{t('foot.copy')}</div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Workflow, Observability, Integrations, CaseStudy, NextSteps, Footer, ApprovalUIMock, FunnelDash, ApproverDash, VendorDash, AIQualityDash, DemoForm });