// Verticals hub — tabbed domain selector
const DOMAIN_ORDER = ['legal', 'realestate', 'accounting', 'assistant', 'restauration', 'transport', 'security', 'forensics'];

function VerticalsHub({ t }) {
  const [active, setActive] = useState('legal');
  const d = t.domains[active];

  return (
    <section id="verticals" style={{ padding: '110px 32px', background: 'color-mix(in oklch, var(--brand) 2.5%, var(--bg))', position: 'relative' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', maxWidth: 720, marginInline: 'auto' }}>
          <SectionHeader eyebrow={t.verticals_eyebrow} title={t.verticals_title} subtitle={t.verticals_sub} align="center"/>
        </div>

        {/* Domain selector — horizontal scroll pills */}
        <div className="verticals-tabs" style={{ marginTop: 44, position: 'relative' }}>
          {/* Fade edges */}
          <div style={{ position: 'absolute', left: 0, top: 0, bottom: 0, width: 40, background: 'linear-gradient(to right, color-mix(in oklch, var(--brand) 2.5%, var(--bg)), transparent)', zIndex: 2, pointerEvents: 'none', borderRadius: 'var(--radius-lg) 0 0 var(--radius-lg)' }}/>
          <div style={{ position: 'absolute', right: 0, top: 0, bottom: 0, width: 40, background: 'linear-gradient(to left, color-mix(in oklch, var(--brand) 2.5%, var(--bg)), transparent)', zIndex: 2, pointerEvents: 'none', borderRadius: '0 var(--radius-lg) var(--radius-lg) 0' }}/>
          <div role="tablist" style={{
            display: 'flex',
            gap: 8,
            padding: '10px 24px',
            overflowX: 'auto',
            scrollBehavior: 'smooth',
            WebkitOverflowScrolling: 'touch',
            scrollbarWidth: 'none',
            msOverflowStyle: 'none',
          }}>
            <style>{`[role="tablist"]::-webkit-scrollbar { display: none; }`}</style>
            {DOMAIN_ORDER.map(k => {
              const dom = t.domains[k];
              const on = active === k;
              return (
                <button
                  key={k}
                  role="tab"
                  aria-selected={on}
                  onClick={(e) => { setActive(k); e.currentTarget.scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'nearest' }); }}
                  style={{
                    appearance: 'none',
                    whiteSpace: 'nowrap',
                    flexShrink: 0,
                    border: '1px solid ' + (on ? 'var(--brand)' : 'var(--border)'),
                    background: on ? 'var(--brand)' : 'var(--bg-elev)',
                    color: on ? '#fff' : 'var(--ink)',
                    padding: '10px 20px',
                    borderRadius: 999,
                    cursor: 'pointer',
                    transition: 'all 200ms cubic-bezier(0.16, 1, 0.3, 1)',
                    display: 'flex',
                    alignItems: 'center',
                    gap: 8,
                    boxShadow: on ? '0 4px 16px color-mix(in oklch, var(--brand) 35%, transparent)' : '0 1px 3px rgba(0,0,0,0.06)',
                  }}
                  onMouseEnter={e => { if (!on) { e.currentTarget.style.borderColor = 'var(--brand)'; e.currentTarget.style.background = 'color-mix(in oklch, var(--brand) 6%, var(--bg-elev))'; } }}
                  onMouseLeave={e => { if (!on) { e.currentTarget.style.borderColor = 'var(--border)'; e.currentTarget.style.background = 'var(--bg-elev)'; } }}
                >
                  <span style={{ width: 6, height: 6, borderRadius: 999, background: on ? '#fff' : 'var(--brand)', flexShrink: 0, transition: 'background 200ms' }}/>
                  <span style={{ fontFamily: 'var(--font-display)', fontSize: 14, fontWeight: 600, letterSpacing: '-0.01em' }}>{dom.label}</span>
                </button>
              );
            })}
          </div>
        </div>

        {/* Content panel */}
        <div key={active} style={{ marginTop: 48, animation: 'fadeInUp 340ms ease-out' }}>
          <div className="vertical-split" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48, alignItems: 'center' }}>
            <div>
              <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '5px 10px', border: '1px solid var(--border)', borderRadius: 999, background: 'var(--bg-elev)', marginBottom: 18 }}>
                <Spark size={9} color="var(--brand)"/>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10.5, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--accent-ink)' }}>{d.label}</span>
              </div>
              <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(32px, 3vw, 44px)', lineHeight: 1.05, letterSpacing: '-0.03em', margin: 0, color: 'var(--ink)', fontWeight: 500, textWrap: 'balance' }}>{d.title}</h3>
              <p style={{ fontFamily: 'var(--font-ui)', fontSize: 17, lineHeight: 1.55, color: 'var(--ink-soft)', marginTop: 16, maxWidth: 520, textWrap: 'pretty' }}>{d.desc}</p>
              <div style={{ marginTop: 24, paddingLeft: 18, borderLeft: '2px solid var(--brand)', fontFamily: 'var(--font-display)', fontSize: 20, fontStyle: 'italic', color: 'var(--ink)', lineHeight: 1.35, maxWidth: 480, fontWeight: 500, letterSpacing: '-0.015em' }}>
                « {d.quote} »
              </div>
            </div>
            <DomainVisual kind={active} t={t}/>
          </div>

          {/* Features grid */}
          <div className="vertical-features" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0, marginTop: 56, border: '1px solid var(--border)', borderRadius: 'var(--radius-lg)', overflow: 'hidden', background: 'var(--bg-elev)' }}>
            {d.features.map((f, i) => (
              <FeatureBlock key={active + i} {...f}/>
            ))}
          </div>

          {/* Compliance bar */}
          <div style={{ marginTop: 32, padding: 24, border: '1px solid var(--border-strong)', borderRadius: 'var(--radius-lg)', background: 'var(--bg-elev)', display: 'flex', gap: 20, alignItems: 'center', flexWrap: 'wrap' }}>
            <div style={{ width: 42, height: 42, borderRadius: 11, background: 'color-mix(in oklch, var(--brand) 10%, transparent)', border: '1px solid color-mix(in oklch, var(--brand) 22%, transparent)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
              <IconGlyph name="shield"/>
            </div>
            <div style={{ flex: 1, minWidth: 260 }}>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.2em', color: 'var(--ink-faint)', marginBottom: 6, textTransform: 'uppercase' }}>{t.lang === 'fr' ? 'Conformité' : 'Compliance'}</div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--ink)', letterSpacing: '0.02em' }}>{d.compliance}</div>
            </div>
            <Button href="/contact" variant="primary" icon={<ArrowRight/>}>{t.cta_demo_v}</Button>
          </div>
        </div>
      </div>
    </section>
  );
}

// Per-domain visual — right column of the active panel
function DomainVisual({ kind, t }) {
  if (kind === 'legal') return <CompareTable t={t}/>;
  if (kind === 'realestate') return <ConciergeMockup t={t}/>;
  if (kind === 'accounting') return <AccountingVisual t={t}/>;
  if (kind === 'assistant') return <AssistantVisual t={t}/>;
  if (kind === 'restauration') return <RestoVisual t={t}/>;
  if (kind === 'transport') return <TransportVisual t={t}/>;
  if (kind === 'security') return <SecurityVisual t={t}/>;
  if (kind === 'forensics') return <ForensicsVisual t={t}/>;
  return null;
}

// --- Domain visuals ---------------------------------------------------------

function VisualFrame({ children, label }) {
  return (
    <div style={{ border: '1px solid var(--border-strong)', borderRadius: 'var(--radius-lg)', overflow: 'hidden', background: 'var(--bg-elev)', boxShadow: '0 30px 70px -30px rgba(0,0,0,0.22)' }}>
      <div style={{ padding: '10px 14px', borderBottom: '1px solid var(--border)', background: 'color-mix(in oklch, var(--ink) 2.5%, transparent)', display: 'flex', alignItems: 'center', gap: 8 }}>
        <span style={{ width: 8, height: 8, borderRadius: 999, background: 'var(--brand)' }}/>
        <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--ink-faint)' }}>{label}</span>
      </div>
      {children}
    </div>
  );
}

function AccountingVisual({ t }) {
  const rows = t.lang === 'fr' ? [
    ['Loyer reçu · Unité 204', '+1 450,00', 'Revenus location', 'classé'],
    ['Rona · matériaux', '−328,47', 'Entretien immeuble', 'classé'],
    ['Facture Hydro · 2340 St-Denis', '−612,30', 'Services publics', 'à valider'],
    ['Dépôt Desjardins', '+3 400,00', 'Revenus location', 'classé'],
    ['Repas client · Europea', '−147,82', 'Représentation (50%)', 'classé'],
  ] : [
    ['Rent received · Unit 204', '+1,450.00', 'Rental income', 'posted'],
    ['Rona · materials', '−328.47', 'Building maintenance', 'posted'],
    ['Hydro bill · 2340 St-Denis', '−612.30', 'Utilities', 'review'],
    ['Desjardins deposit', '+3,400.00', 'Rental income', 'posted'],
    ['Client meal · Europea', '−147.82', 'Meals (50%)', 'posted'],
  ];
  return (
    <VisualFrame label={t.lang === 'fr' ? 'livre journal · avril 2026' : 'ledger · april 2026'}>
      <div>
        {rows.map((r, i) => (
          <div key={i} style={{ display: 'grid', gridTemplateColumns: '1.4fr 0.8fr 1.2fr auto', gap: 12, padding: '12px 14px', borderTop: i ? '1px solid var(--border)' : 'none', alignItems: 'center', fontFamily: 'var(--font-ui)', fontSize: 12.5 }}>
            <span style={{ color: 'var(--ink)' }}>{r[0]}</span>
            <span style={{ fontFamily: 'var(--font-mono)', color: r[1].startsWith('+') ? '#2B8C52' : 'var(--ink-soft)', fontVariantNumeric: 'tabular-nums' }}>{r[1]}</span>
            <span style={{ color: 'var(--ink-soft)' }}>{r[2]}</span>
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: 9.5, letterSpacing: '0.14em', textTransform: 'uppercase', padding: '3px 8px', borderRadius: 999, background: r[3].includes('valider') || r[3] === 'review' ? 'color-mix(in oklch, #E0B83A 18%, transparent)' : 'color-mix(in oklch, var(--brand) 10%, transparent)', color: r[3].includes('valider') || r[3] === 'review' ? '#946E12' : 'var(--brand)' }}>{r[3]}</span>
          </div>
        ))}
        <div style={{ padding: 14, borderTop: '1px solid var(--border)', background: 'color-mix(in oklch, var(--brand) 3%, transparent)', display: 'flex', justifyContent: 'space-between', fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--ink-soft)' }}>
          <span>{t.lang === 'fr' ? '142 transactions · 3 à valider' : '142 transactions · 3 to review'}</span>
          <span>{t.lang === 'fr' ? 'TPS/TVQ prêt' : 'GST/QST ready'}</span>
        </div>
      </div>
    </VisualFrame>
  );
}

function AssistantVisual({ t }) {
  const briefing = t.lang === 'fr' ? {
    label: 'briefing · mardi 14 avril',
    weather: 'Montréal · 7°C · ciel dégagé',
    items: [
      { time: '09:00', title: 'Revue stratégie Q2', who: 'Salle Rosemont · 45 min', status: 'confirmé' },
      { time: '11:30', title: 'Appel J.-F. Bouchard', who: 'relance 3e · priorité', status: 'à préparer' },
      { time: '12:30', title: 'Lunch · Europea', who: 'rés. pour 3 · préféré 2023', status: 'réservé' },
      { time: '15:00', title: 'Signature bail commercial', who: 'Me Tremblay · Zoom', status: 'docs prêts' },
    ],
    followups: '3 suivis aujourd’hui · 1 urgent',
  } : {
    label: 'briefing · tuesday, april 14',
    weather: 'Montréal · 7°C · clear',
    items: [
      { time: '09:00', title: 'Q2 strategy review', who: 'Rosemont room · 45 min', status: 'confirmed' },
      { time: '11:30', title: 'Call J.-F. Bouchard', who: '3rd follow-up · priority', status: 'prep needed' },
      { time: '12:30', title: 'Lunch · Europea', who: 'table for 3 · favorite 2023', status: 'booked' },
      { time: '15:00', title: 'Sign commercial lease', who: 'Me Tremblay · Zoom', status: 'docs ready' },
    ],
    followups: '3 follow-ups today · 1 urgent',
  };
  return (
    <VisualFrame label={briefing.label}>
      <div style={{ padding: '14px 16px 4px', borderBottom: '1px solid var(--border)' }}>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10.5, color: 'var(--ink-faint)', letterSpacing: '0.1em' }}>{briefing.weather}</div>
      </div>
      <div>
        {briefing.items.map((it, i) => (
          <div key={i} style={{ display: 'grid', gridTemplateColumns: '56px 1fr auto', gap: 12, padding: '14px 16px', borderTop: i ? '1px solid var(--border)' : 'none', alignItems: 'center' }}>
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--brand)', letterSpacing: '0.05em' }}>{it.time}</span>
            <div>
              <div style={{ fontFamily: 'var(--font-display)', fontSize: 14.5, fontWeight: 600, color: 'var(--ink)', letterSpacing: '-0.01em' }}>{it.title}</div>
              <div style={{ fontFamily: 'var(--font-ui)', fontSize: 12, color: 'var(--ink-soft)', marginTop: 2 }}>{it.who}</div>
            </div>
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: 9.5, letterSpacing: '0.14em', textTransform: 'uppercase', padding: '3px 8px', borderRadius: 999, background: 'color-mix(in oklch, var(--brand) 10%, transparent)', color: 'var(--brand)' }}>{it.status}</span>
          </div>
        ))}
      </div>
      <div style={{ padding: 14, borderTop: '1px solid var(--border)', background: 'color-mix(in oklch, var(--brand) 3%, transparent)', fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--ink-soft)' }}>{briefing.followups}</div>
    </VisualFrame>
  );
}

function RestoVisual({ t }) {
  const fr = t.lang === 'fr';
  const bookings = fr ? [
    { t: '18:30', p: 2, n: 'Leblanc', tag: 'régulier' },
    { t: '19:00', p: 4, n: 'Gagnon', tag: 'anniv.' },
    { t: '19:15', p: 6, n: 'Desjardins corp.', tag: 'VIP' },
    { t: '19:45', p: 2, n: 'Tremblay', tag: 'nouveau' },
    { t: '20:00', p: 3, n: 'Martin', tag: 'rappelé' },
  ] : [
    { t: '18:30', p: 2, n: 'Leblanc', tag: 'regular' },
    { t: '19:00', p: 4, n: 'Gagnon', tag: 'birthday' },
    { t: '19:15', p: 6, n: 'Desjardins corp.', tag: 'VIP' },
    { t: '19:45', p: 2, n: 'Tremblay', tag: 'new' },
    { t: '20:00', p: 3, n: 'Martin', tag: 'confirmed' },
  ];
  return (
    <VisualFrame label={fr ? 'service du soir · ce soir' : 'tonight’s service'}>
      <div>
        {bookings.map((b, i) => (
          <div key={i} style={{ display: 'grid', gridTemplateColumns: '52px 40px 1fr auto', gap: 12, padding: '12px 16px', borderTop: i ? '1px solid var(--border)' : 'none', alignItems: 'center' }}>
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--brand)', letterSpacing: '0.05em' }}>{b.t}</span>
            <span style={{ fontFamily: 'var(--font-display)', fontSize: 20, fontWeight: 500, color: 'var(--ink)', letterSpacing: '-0.02em' }}>{b.p}</span>
            <span style={{ fontFamily: 'var(--font-ui)', fontSize: 13, color: 'var(--ink)' }}>{b.n}</span>
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: 9.5, letterSpacing: '0.14em', textTransform: 'uppercase', padding: '3px 8px', borderRadius: 999, background: 'color-mix(in oklch, var(--ink) 4%, transparent)', color: 'var(--ink-soft)' }}>{b.tag}</span>
          </div>
        ))}
        <div style={{ padding: 14, borderTop: '1px solid var(--border)', background: 'color-mix(in oklch, var(--brand) 3%, transparent)', fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--ink-soft)', display: 'flex', justifyContent: 'space-between' }}>
          <span>{fr ? '42 couverts · 5 relances envoyées' : '42 covers · 5 reminders sent'}</span>
          <span>{fr ? '2 no-show rebookés' : '2 no-shows rebooked'}</span>
        </div>
      </div>
    </VisualFrame>
  );
}

function TransportVisual({ t }) {
  const fr = t.lang === 'fr';
  const trips = fr ? [
    { id: 'TR-1182', from: 'Laval', to: 'Québec', truck: 'T-07', status: 'en route', eta: '14:42' },
    { id: 'TR-1183', from: 'Montréal', to: 'Sherbrooke', truck: 'T-03', status: 'chargement', eta: '—' },
    { id: 'TR-1184', from: 'Longueuil', to: 'Trois-Rivières', truck: 'T-11', status: 'assigné', eta: '15:10' },
    { id: 'TR-1185', from: 'Mirabel', to: 'Gatineau', truck: 'T-05', status: 'livré', eta: '13:58' },
  ] : [
    { id: 'TR-1182', from: 'Laval', to: 'Québec', truck: 'T-07', status: 'en route', eta: '2:42 pm' },
    { id: 'TR-1183', from: 'Montréal', to: 'Sherbrooke', truck: 'T-03', status: 'loading', eta: '—' },
    { id: 'TR-1184', from: 'Longueuil', to: 'Trois-Rivières', truck: 'T-11', status: 'assigned', eta: '3:10 pm' },
    { id: 'TR-1185', from: 'Mirabel', to: 'Gatineau', truck: 'T-05', status: 'delivered', eta: '1:58 pm' },
  ];
  return (
    <VisualFrame label={fr ? 'répartition · aujourd’hui' : 'dispatch · today'}>
      <div>
        {trips.map((tr, i) => (
          <div key={i} style={{ display: 'grid', gridTemplateColumns: '72px 1fr auto auto', gap: 12, padding: '12px 16px', borderTop: i ? '1px solid var(--border)' : 'none', alignItems: 'center' }}>
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--ink-soft)', letterSpacing: '0.04em' }}>{tr.id}</span>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontFamily: 'var(--font-ui)', fontSize: 12.5, color: 'var(--ink)' }}>
              <span>{tr.from}</span>
              <span style={{ color: 'var(--ink-faint)' }}>→</span>
              <span>{tr.to}</span>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10.5, color: 'var(--accent-ink)', marginLeft: 6 }}>{tr.truck}</span>
            </div>
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: 9.5, letterSpacing: '0.14em', textTransform: 'uppercase', padding: '3px 8px', borderRadius: 999, background: tr.status === 'livré' || tr.status === 'delivered' ? 'color-mix(in oklch, var(--brand) 14%, transparent)' : 'color-mix(in oklch, var(--ink) 4%, transparent)', color: tr.status === 'livré' || tr.status === 'delivered' ? 'var(--brand)' : 'var(--ink-soft)' }}>{tr.status}</span>
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--ink)', fontVariantNumeric: 'tabular-nums' }}>{tr.eta}</span>
          </div>
        ))}
        <div style={{ padding: 14, borderTop: '1px solid var(--border)', background: 'color-mix(in oklch, var(--brand) 3%, transparent)', fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--ink-soft)', display: 'flex', justifyContent: 'space-between' }}>
          <span>{fr ? '12 camions actifs · 4 en attente' : '12 trucks active · 4 idle'}</span>
          <span>{fr ? 'SAAQ · à jour' : 'SAAQ · current'}</span>
        </div>
      </div>
    </VisualFrame>
  );
}

function SecurityVisual({ t }) {
  const fr = t.lang === 'fr';
  const events = fr ? [
    { time: '14:02:03', type: 'scan', desc: 'Scan adversariel lancé · modèle GPT-4o', status: 'en cours' },
    { time: '14:02:11', type: 'alert', desc: 'Injection de prompt détectée · bloquée', status: 'bloqué' },
    { time: '14:02:18', type: 'scan', desc: 'Test jailbreak #47 · résistance confirmée', status: 'ok' },
    { time: '14:02:24', type: 'alert', desc: 'Fuite de données PII · garde-fou actif', status: 'bloqué' },
    { time: '14:02:31', type: 'scan', desc: 'Audit guardrails terminé · 12/12 passés', status: 'ok' },
  ] : [
    { time: '2:02:03pm', type: 'scan', desc: 'Adversarial scan started · GPT-4o model', status: 'running' },
    { time: '2:02:11pm', type: 'alert', desc: 'Prompt injection detected · blocked', status: 'blocked' },
    { time: '2:02:18pm', type: 'scan', desc: 'Jailbreak test #47 · resistance confirmed', status: 'ok' },
    { time: '2:02:24pm', type: 'alert', desc: 'PII data leak attempt · guardrail active', status: 'blocked' },
    { time: '2:02:31pm', type: 'scan', desc: 'Guardrail audit complete · 12/12 passed', status: 'ok' },
  ];
  return (
    <VisualFrame label={fr ? 'red-team · session active' : 'red-team · live session'}>
      <div>
        {events.map((ev, i) => (
          <div key={i} style={{ display: 'grid', gridTemplateColumns: '80px 1fr auto', gap: 12, padding: '12px 16px', borderTop: i ? '1px solid var(--border)' : 'none', alignItems: 'center' }}>
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10.5, color: 'var(--ink-faint)', letterSpacing: '0.04em' }}>{ev.time}</span>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <span style={{ width: 7, height: 7, borderRadius: 999, background: ev.type === 'alert' ? '#E04444' : 'var(--brand)', flexShrink: 0 }}/>
              <span style={{ fontFamily: 'var(--font-ui)', fontSize: 12.5, color: 'var(--ink)' }}>{ev.desc}</span>
            </div>
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: 9.5, letterSpacing: '0.14em', textTransform: 'uppercase', padding: '3px 8px', borderRadius: 999,
              background: ev.status === 'ok' ? 'color-mix(in oklch, var(--brand) 14%, transparent)' : ev.status.includes('bloqu') || ev.status === 'blocked' ? 'color-mix(in oklch, #E04444 14%, transparent)' : 'color-mix(in oklch, var(--ink) 4%, transparent)',
              color: ev.status === 'ok' ? 'var(--brand)' : ev.status.includes('bloqu') || ev.status === 'blocked' ? '#E04444' : 'var(--ink-soft)',
            }}>{ev.status}</span>
          </div>
        ))}
        <div style={{ padding: 14, borderTop: '1px solid var(--border)', background: 'color-mix(in oklch, var(--brand) 3%, transparent)', fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--ink-soft)', display: 'flex', justifyContent: 'space-between' }}>
          <span>{fr ? '47 tests · 2 menaces bloquées' : '47 tests · 2 threats blocked'}</span>
          <span>{fr ? 'score: 96/100' : 'score: 96/100'}</span>
        </div>
      </div>
    </VisualFrame>
  );
}

function ForensicsVisual({ t }) {
  const fr = t.lang === 'fr';
  const items = fr ? [
    { id: 'DOC-0014', type: 'Courriel', source: 'Exchange', entities: 12, status: 'analysé' },
    { id: 'DOC-0015', type: 'PDF contrat', source: 'SharePoint', entities: 34, status: 'analysé' },
    { id: 'DOC-0016', type: 'Relevé bancaire', source: 'OSINT', entities: 8, status: 'en cours' },
    { id: 'DOC-0017', type: 'Image EXIF', source: 'Forensique', entities: 3, status: 'analysé' },
    { id: 'DOC-0018', type: 'Chat Slack', source: 'Export', entities: 21, status: 'en file' },
  ] : [
    { id: 'DOC-0014', type: 'Email', source: 'Exchange', entities: 12, status: 'analyzed' },
    { id: 'DOC-0015', type: 'Contract PDF', source: 'SharePoint', entities: 34, status: 'analyzed' },
    { id: 'DOC-0016', type: 'Bank statement', source: 'OSINT', entities: 8, status: 'running' },
    { id: 'DOC-0017', type: 'Image EXIF', source: 'Forensic', entities: 3, status: 'analyzed' },
    { id: 'DOC-0018', type: 'Slack chat', source: 'Export', entities: 21, status: 'queued' },
  ];
  return (
    <VisualFrame label={fr ? 'investigation · dossier #FR-2026-041' : 'investigation · case #FR-2026-041'}>
      <div>
        {items.map((it, i) => (
          <div key={i} style={{ display: 'grid', gridTemplateColumns: '72px 1fr 70px auto', gap: 12, padding: '12px 16px', borderTop: i ? '1px solid var(--border)' : 'none', alignItems: 'center' }}>
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10.5, color: 'var(--ink-soft)', letterSpacing: '0.04em' }}>{it.id}</span>
            <div>
              <div style={{ fontFamily: 'var(--font-ui)', fontSize: 12.5, color: 'var(--ink)' }}>{it.type}</div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--ink-faint)' }}>{it.source}</div>
            </div>
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--brand)', textAlign: 'right' }}>{it.entities} {fr ? 'entités' : 'entities'}</span>
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: 9.5, letterSpacing: '0.14em', textTransform: 'uppercase', padding: '3px 8px', borderRadius: 999,
              background: it.status === 'analysé' || it.status === 'analyzed' ? 'color-mix(in oklch, var(--brand) 14%, transparent)' : 'color-mix(in oklch, var(--ink) 4%, transparent)',
              color: it.status === 'analysé' || it.status === 'analyzed' ? 'var(--brand)' : 'var(--ink-soft)',
            }}>{it.status}</span>
          </div>
        ))}
        <div style={{ padding: 14, borderTop: '1px solid var(--border)', background: 'color-mix(in oklch, var(--brand) 3%, transparent)', fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--ink-soft)', display: 'flex', justifyContent: 'space-between' }}>
          <span>{fr ? '1 204 documents · 78 entités extraites' : '1,204 documents · 78 entities extracted'}</span>
          <span>{fr ? 'custody: vérifié' : 'custody: verified'}</span>
        </div>
      </div>
    </VisualFrame>
  );
}

function FeatureBlock({ tag, title, desc, first }) {
  const [hov, setHov] = useState(false);
  return (
    <div
      onMouseEnter={() => setHov(true)} onMouseLeave={() => setHov(false)}
      style={{
        padding: '30px 26px',
        borderRight: '1px solid var(--border)',
        borderBottom: '1px solid var(--border)',
        background: hov ? 'color-mix(in oklch, var(--brand) 2.5%, var(--bg-elev))' : 'var(--bg-elev)',
        transition: 'background 150ms',
      }}>
      <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9.5, letterSpacing: '0.22em', color: 'var(--accent-ink)', marginBottom: 14 }}>{tag}</div>
      <div style={{ fontFamily: 'var(--font-display)', fontSize: 19, fontWeight: 600, color: 'var(--ink)', marginBottom: 8, letterSpacing: '-0.015em', lineHeight: 1.15 }}>{title}</div>
      <div style={{ fontFamily: 'var(--font-ui)', fontSize: 13.5, color: 'var(--ink-soft)', lineHeight: 1.55, textWrap: 'pretty' }}>{desc}</div>
    </div>
  );
}

function CompareTable({ t }) {
  return (
    <div style={{ border: '1px solid var(--border-strong)', borderRadius: 'var(--radius-lg)', overflow: 'hidden', background: 'var(--bg-elev)', boxShadow: '0 20px 60px -30px rgba(0,0,0,0.2)' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr' }}>
        <div style={{ padding: '14px 18px', background: 'color-mix(in oklch, var(--ink) 3%, transparent)', borderRight: '1px solid var(--border)', fontFamily: 'var(--font-mono)', fontSize: 10.5, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--ink-faint)' }}>{t.compare_them}</div>
        <div style={{ padding: '14px 18px', background: 'color-mix(in oklch, var(--brand) 8%, transparent)', fontFamily: 'var(--font-mono)', fontSize: 10.5, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--brand)', display: 'flex', alignItems: 'center', gap: 6 }}>
          <Spark size={10} color="var(--brand)"/> CASTOR
        </div>
      </div>
      {t.compare_rows.map((row, i) => (
        <div key={i} style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', borderTop: '1px solid var(--border)' }}>
          <div style={{ padding: 16, borderRight: '1px solid var(--border)', fontFamily: 'var(--font-ui)', fontSize: 13, color: 'var(--ink-faint)', display: 'flex', alignItems: 'flex-start', gap: 8 }}>
            <XMark size={13} color="#B9382E"/> <span>{row[0]}</span>
          </div>
          <div style={{ padding: 16, fontFamily: 'var(--font-ui)', fontSize: 13, color: 'var(--ink)', display: 'flex', alignItems: 'flex-start', gap: 8 }}>
            <Check size={13} color="#2B8C52"/> <span>{row[1]}</span>
          </div>
        </div>
      ))}
    </div>
  );
}

function ConciergeMockup({ t }) {
  return (
    <div style={{ position: 'relative', display: 'flex', justifyContent: 'center' }}>
      <PhoneFrame>
        <div style={{ padding: 16, background: '#F2F4F8', height: '100%', display: 'flex', flexDirection: 'column', gap: 8 }}>
          <div style={{ textAlign: 'center', fontFamily: 'var(--font-ui)', fontSize: 12, color: '#6B7280', marginBottom: 8 }}>Concierge Castor</div>
          <ChatBubble role="user" text={t.concierge[0]}/>
          <ChatBubble role="agent" text={t.concierge[1]}/>
          <ChatBubble role="user" text={t.concierge[2]}/>
          <ChatBubble role="agent" text={t.concierge[3]} meta={t.concierge_meta}/>
        </div>
      </PhoneFrame>
      <div className="concierge-float" style={{ position: 'absolute', top: 40, right: 0, padding: 14, background: 'var(--bg-elev)', border: '1px solid var(--border-strong)', borderRadius: 12, boxShadow: '0 20px 50px -12px rgba(0,0,0,0.25)', width: 220, transform: 'rotate(2deg)', animation: 'floaty 5s ease-in-out infinite' }}>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9.5, letterSpacing: '0.18em', color: 'var(--accent-ink)', marginBottom: 6 }}>BON DE TRAVAIL · #4821</div>
        <div style={{ fontFamily: 'var(--font-display)', fontSize: 14, fontWeight: 600, color: 'var(--ink)', letterSpacing: '-0.01em' }}>Fuite · Unité 304</div>
        <div style={{ fontFamily: 'var(--font-ui)', fontSize: 12, color: 'var(--ink-soft)', marginTop: 4 }}>Plombier Tremblay · demain 9h</div>
        <div style={{ marginTop: 10, height: 3, borderRadius: 4, background: 'var(--border)', overflow: 'hidden' }}>
          <div style={{ width: '70%', height: '100%', background: 'var(--brand)' }}/>
        </div>
      </div>
    </div>
  );
}

function PhoneFrame({ children }) {
  return (
    <div className="phone-frame" style={{
      width: 280, height: 520, borderRadius: 36, padding: 10,
      background: '#0A0D14',
      boxShadow: '0 40px 80px -20px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.05) inset',
      position: 'relative',
    }}>
      <div style={{ position: 'absolute', top: 14, left: '50%', transform: 'translateX(-50%)', width: 90, height: 22, borderRadius: 14, background: '#000', zIndex: 2 }}/>
      <div style={{ height: '100%', borderRadius: 28, overflow: 'hidden', background: 'white', paddingTop: 32 }}>
        {children}
      </div>
    </div>
  );
}

function CTA({ t }) {
  return (
    <section id="contact" style={{ padding: '120px 32px', position: 'relative', overflow: 'hidden' }}>
      <HeroAura/>
      <div style={{ maxWidth: 900, margin: '0 auto', textAlign: 'center', position: 'relative', zIndex: 1 }}>
        <Pill tone="brand" icon={<Spark size={10} color="var(--brand)"/>}>{t.cta_pill}</Pill>
        <h2 style={{
          fontFamily: 'var(--font-display)',
          fontSize: 'clamp(42px, 4.8vw, 68px)',
          lineHeight: 1.0,
          letterSpacing: '-0.035em',
          margin: '20px 0 0',
          color: 'var(--ink)',
          fontWeight: 500,
          textWrap: 'balance',
        }}>{t.cta_title_1} <span className="gradient-text">{t.cta_title_2}</span></h2>
        <p style={{ fontFamily: 'var(--font-ui)', fontSize: 18, color: 'var(--ink-soft)', marginTop: 20, maxWidth: 600, marginInline: 'auto', lineHeight: 1.5 }}>{t.cta_sub}</p>
        <div style={{ marginTop: 32, display: 'flex', gap: 10, justifyContent: 'center', flexWrap: 'wrap' }}>
          <Button href="/contact" variant="primary" size="lg" icon={<ArrowRight/>}>{t.cta_btn}</Button>
          <Button href="/#verticals" variant="secondary" size="lg">{t.cta_demo}</Button>
        </div>
        <div style={{ display: 'flex', gap: 24, justifyContent: 'center', marginTop: 32, flexWrap: 'wrap', color: 'var(--ink-faint)', fontSize: 12, fontFamily: 'var(--font-mono)', letterSpacing: '0.02em' }}>
          {t.cta_pills.map((p, i) => (
            <span key={i} style={{ display: 'inline-flex', gap: 6, alignItems: 'center' }}><Check size={12} color="var(--brand)"/> {p}</span>
          ))}
        </div>
      </div>
    </section>
  );
}

function Footer({ t }) {
  return (
    <footer style={{ padding: '60px 32px 32px', borderTop: '1px solid var(--border)', background: 'color-mix(in oklch, var(--ink) 2%, var(--bg))' }}>
      <div className="footer-grid" style={{ maxWidth: 1280, margin: '0 auto', display: 'grid', gridTemplateColumns: '1.5fr 1fr 1fr 1fr', gap: 32 }}>
        <div>
          <Wordmark/>
          <p style={{ fontFamily: 'var(--font-ui)', fontSize: 13, color: 'var(--ink-soft)', marginTop: 16, maxWidth: 280, lineHeight: 1.55 }}>{t.footer_tag}</p>
          <div style={{ marginTop: 18, display: 'inline-flex', gap: 6, alignItems: 'center', padding: '5px 10px', border: '1px solid var(--border)', borderRadius: 999 }}>
            <FleurDot size={10}/>
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10.5, color: 'var(--accent-ink)', letterSpacing: '0.12em' }}>{t.footer_made}</span>
          </div>
        </div>
        {t.footer_cols.map((col, i) => (
          <div key={i}>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--ink-faint)', marginBottom: 16 }}>{col.title}</div>
            {col.items.map((it, j) => {
              const item = typeof it === 'string' ? { label: it, href: '/contact' } : it;
              return (
                <a key={j} href={item.href} style={{ display: 'block', fontFamily: 'var(--font-ui)', fontSize: 13.5, color: 'var(--ink)', textDecoration: 'none', marginBottom: 10, opacity: 0.8, transition: 'opacity 120ms' }} onMouseEnter={e => e.target.style.opacity = '1'} onMouseLeave={e => e.target.style.opacity = '0.8'}>{item.label}</a>
              );
            })}
          </div>
        ))}
      </div>
      <div style={{ maxWidth: 1280, margin: '44px auto 0', paddingTop: 20, borderTop: '1px solid var(--border)', display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 12, fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--ink-faint)', letterSpacing: '0.02em' }}>
        <span>© 2026 Castor IA · {t.footer_location}</span>
        <span>{t.footer_legal}</span>
      </div>
    </footer>
  );
}

Object.assign(window, { VerticalsHub, CTA, Footer, PhoneFrame, FeatureBlock, CompareTable, ConciergeMockup, DomainVisual, AccountingVisual, AssistantVisual, RestoVisual, TransportVisual, SecurityVisual, ForensicsVisual });