/* =====================================================
   HOMEPAGE — Cortexa Labs Ltd
   ===================================================== */

/* ---------- Live activity feed mockup (decorative HUD) ---------- */
const FEED_EVENTS = [
  { id: 1, ts: '02:14:08', ch: 'CH-07', lang: 'EN', kind: 'safe', severity: 'high',
    title: 'Gas mention · Tank Farm B',
    speaker: 'OP-414 · Field',
    text: '"Strong smell of gas near tank farm B, north side."',
    chips: ['H2S?', 'PERMIT-LINK 8841', 'EVIDENCE'] },
  { id: 2, ts: '02:14:11', ch: 'CH-02', lang: 'ES', kind: 'voice', severity: 'info',
    title: 'Conversation threaded',
    speaker: 'SUP-02 · Control Room',
    text: '"Confirmado. Voy a pausar el permiso de trabajo en caliente."',
    chips: ['ES → EN', 'THREAD #02-1183'] },
  { id: 3, ts: '02:14:12', ch: 'CH-07', lang: 'EN', kind: 'ops', severity: 'medium',
    title: 'Hot-work permit paused',
    speaker: 'SUP-02 → OP-411',
    text: '"All hot work on Unit 4 paused pending investigation."',
    chips: ['PROCEDURE: HW-04', 'TASK CREATED'] },
  { id: 4, ts: '02:14:34', ch: 'CH-01', lang: 'EN', kind: 'signal', severity: 'info',
    title: 'Custom: watcher named',
    speaker: 'OP-218 · Confined-space',
    text: '"Watcher on station, this is Jacobs, copy."',
    chips: ['CONCEPT: WATCHER-NAMED', 'PERMIT 8839'] },
  { id: 5, ts: '02:15:02', ch: 'CH-07', lang: 'AR', kind: 'safe', severity: 'medium',
    title: 'Two additional crew dispatched',
    speaker: 'OP-309 · Field',
    text: '"\u062a\u0645 \u0625\u0631\u0633\u0627\u0644 \u0641\u0631\u064a\u0642\u064a\u0646 \u0625\u0644\u0649 \u0627\u0644\u0645\u0648\u0642\u0639."',
    chips: ['AR → EN', 'RESPONSE 00:54'] },
];

function severityColor(s) {
  return s === 'high' ? 'var(--coral)' : s === 'medium' ? 'var(--amber)' : 'var(--teal)';
}

function ActivityFeed() {
  const [tick, setTick] = useState(0);
  useEffect(() => {
    const id = setInterval(() => setTick((t) => t + 1), 2800);
    return () => clearInterval(id);
  }, []);

  const visible = FEED_EVENTS.slice(0, ((tick % FEED_EVENTS.length) + 1));

  return (
    <div className="activity-panel">
      <div className="activity-head">
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <span className="live-dot" />
          <span className="font-mono" style={{ fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--slate-200)' }}>
            Live activity · Site A · Tank Farm B
          </span>
        </div>
        <span className="font-mono" style={{ fontSize: 11, color: 'var(--slate-400)' }}>
          02:14:08 — 02:15:02 GMT
        </span>
      </div>

      <div className="activity-list">
        {FEED_EVENTS.map((ev, i) => {
          const isOn = i < visible.length;
          return (
            <div key={ev.id} className={'activity-row ' + (isOn ? 'on' : 'off')}>
              <div className="row-bar" style={{ background: severityColor(ev.severity) }} />
              <div className="row-meta">
                <div className="font-mono row-ts">{ev.ts}</div>
                <div className="row-channels">
                  <span className="chip" style={{ borderColor: 'rgba(255,255,255,0.18)', padding: '3px 8px', fontSize: 9.5 }}>{ev.ch}</span>
                  <span className="chip" style={{ borderColor: 'rgba(255,255,255,0.18)', padding: '3px 8px', fontSize: 9.5 }}>{ev.lang}</span>
                </div>
              </div>
              <div className="row-body">
                <div style={{ display: 'flex', justifyContent: 'space-between', gap: 12 }}>
                  <div className="row-title">{ev.title}</div>
                  <div className="row-module">{ev.kind.toUpperCase()}</div>
                </div>
                <div className="row-speaker font-mono">{ev.speaker}</div>
                <div className="row-text">{ev.text}</div>
                <div className="row-chips">
                  {ev.chips.map((c) => (
                    <span key={c} className="chip chip-solid" style={{ padding: '3px 8px', fontSize: 9.5, color: 'var(--slate-200)' }}>{c}</span>
                  ))}
                </div>
              </div>
            </div>
          );
        })}
      </div>

      <div className="activity-foot">
        <span className="font-mono" style={{ fontSize: 11, color: 'var(--slate-400)' }}>
          5 detections · 0 hallucinations · Evidence chain complete
        </span>
        <span className="font-mono" style={{ fontSize: 11, color: 'var(--teal)' }}>
          ↗ open in supervisor review
        </span>
      </div>
    </div>
  );
}

/* ---------- HERO ---------- */
function HomeHero() {
  const { region } = useRouter();
  const headline = region === 'US'
    ? <>If your North American teams talk on radio, <em style={{ fontStyle: 'normal', color: 'var(--amber)' }}>Cortexa turns every transmission into structured safety and operational intelligence.</em></>
    : <>If your teams talk on radio, <em style={{ fontStyle: 'normal', color: 'var(--amber)' }}>Cortexa turns every transmission into structured safety and operational intelligence.</em></>;

  return (
    <section className="hero on-dark">
      {/* Subtle data grid backdrop */}
      <div className="bg-grid" style={{ position: 'absolute', inset: 0, opacity: 0.6 }} />
      {/* Faint horizon glow */}
      <div style={{
        position: 'absolute',
        inset: 0,
        background: 'radial-gradient(60% 60% at 80% 30%, rgba(242,160,75,0.10), transparent 70%), radial-gradient(50% 50% at 12% 80%, rgba(46,125,122,0.10), transparent 70%)',
        pointerEvents: 'none',
      }} />

      <div className="container-wide hero-grid">
        <div className="hero-copy">
          <div className="eyebrow on-dark" style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
            <span className="live-dot" />
            <span>CORTEXA — INDUSTRIAL VOICE INTELLIGENCE</span>
          </div>

          <h1 className="hero-headline">{headline}</h1>

          <p className="hero-sub">
            Built for the messy reality of industrial communications — accents, jargon, multilingual crews,
            noisy channels. Runs entirely on your own infrastructure, in six languages, with every alert
            backed by playable evidence.
          </p>

          <div className="hero-ctas">
            <Link to="/demo" className="btn btn-primary">Request a Pilot <span className="arrow">→</span></Link>
            <Link to="/platform/understanding" className="btn btn-ghost-dark">
              See how Cortexa understands <span className="arrow">→</span>
            </Link>
          </div>

          <div className="hero-langs">
            <span className="font-mono" style={{ fontSize: 11, color: 'var(--slate-400)', letterSpacing: '0.14em', textTransform: 'uppercase' }}>Languages</span>
            <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
              {['EN','AR','ES','FR','NL','DE'].map((l) => (
                <span key={l} className="chip" style={{ color: 'var(--slate-200)', borderColor: 'rgba(255,255,255,0.18)' }}>{l}</span>
              ))}
            </div>
          </div>
        </div>

        <div className="hero-visual">
          <ActivityFeed />
          <div className="hero-photo">
            <PhotoSlot
              ratio="21/9"
              src="assets/hero-control-room.png"
              alt="Control-room operator on night shift in a refinery operations centre, headset on, mid-conversation, soft cool fluorescent light with warm desk lamp."
              tag="HERO · CONTROL ROOM, NIGHT SHIFT"
              corner={['', 'CORTEXA / HERO']}
            />
          </div>
        </div>
      </div>

      <div className="hero-strap container-wide">
        <span className="font-mono">RUNS LOCALLY · NO EXTERNAL AI · EVIDENCE-BACKED</span>
        <span className="font-mono">{region === 'US' ? 'PARAGMATIQ SYSTEMS LTD · US DELIVERY' : 'CORTEXA LABS LTD · UK / GLOBAL'}</span>
        <span className="font-mono">v1.0 · 2026</span>
      </div>

      <style>{`
        .hero {
          padding-top: 64px;
          padding-bottom: 0;
          position: relative;
          overflow: hidden;
          border-bottom: 1px solid rgba(255,255,255,0.06);
        }
        .hero-grid {
          display: grid;
          grid-template-columns: 1.05fr 1fr;
          gap: 64px;
          padding-block: 24px 0;
          position: relative;
          z-index: 1;
        }
        .hero-copy { padding-top: 24px; padding-bottom: 96px; max-width: 640px; }
        .hero-headline {
          font-size: clamp(40px, 5.2vw, 76px);
          font-weight: 500;
          color: #fff;
          margin-top: 24px;
          letter-spacing: -0.03em;
          line-height: 1.02;
        }
        .hero-sub {
          margin-top: 28px;
          font-size: 18px;
          color: var(--slate-200);
          max-width: 56ch;
          line-height: 1.55;
        }
        .hero-ctas {
          margin-top: 36px;
          display: flex;
          gap: 14px;
          flex-wrap: wrap;
        }
        .hero-langs {
          margin-top: 56px;
          display: flex;
          flex-direction: column;
          gap: 14px;
          padding-top: 24px;
          border-top: 1px solid rgba(255,255,255,0.08);
          max-width: 480px;
        }
        .hero-visual {
          display: flex;
          flex-direction: column;
          gap: 24px;
          padding-block: 24px;
        }
        .hero-photo { width: 100%; }
        .hero-strap {
          padding-block: 18px;
          border-top: 1px solid rgba(255,255,255,0.06);
          display: flex;
          justify-content: space-between;
          gap: 24px;
          flex-wrap: wrap;
          font-size: 10.5px;
          letter-spacing: 0.14em;
          text-transform: uppercase;
          color: var(--slate-400);
        }

        /* Activity panel */
        .activity-panel {
          background: rgba(255,255,255,0.025);
          border: 1px solid rgba(255,255,255,0.08);
          backdrop-filter: blur(6px);
          color: var(--slate-100);
          position: relative;
        }
        .activity-head {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 12px 16px;
          border-bottom: 1px solid rgba(255,255,255,0.08);
          background: linear-gradient(180deg, rgba(255,255,255,0.04), transparent);
        }
        .live-dot {
          width: 8px; height: 8px; border-radius: 50%;
          background: var(--amber);
          box-shadow: 0 0 0 4px rgba(242,160,75,0.18);
          animation: pulse 1.6s ease-in-out infinite;
        }
        @keyframes pulse {
          0%, 100% { opacity: 1; }
          50% { opacity: 0.5; }
        }
        .activity-list { max-height: 460px; overflow: hidden; }
        .activity-row {
          display: grid;
          grid-template-columns: 4px 84px 1fr;
          gap: 14px;
          padding: 14px 16px;
          border-bottom: 1px solid rgba(255,255,255,0.05);
          opacity: 0;
          transform: translateY(8px);
          transition: opacity 0.6s ease, transform 0.6s ease;
        }
        .activity-row.on { opacity: 1; transform: translateY(0); }
        .row-bar { width: 3px; border-radius: 1px; }
        .row-ts { font-size: 11px; color: var(--slate-300); }
        .row-channels { display: flex; gap: 4px; margin-top: 8px; flex-direction: column; align-items: flex-start; }
        .row-title { font-family: var(--font-display); font-size: 15px; color: #fff; letter-spacing: -0.01em; }
        .row-module { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.14em; color: var(--slate-400); padding-top: 2px; }
        .row-speaker { font-size: 10.5px; color: var(--slate-400); margin-top: 4px; letter-spacing: 0.04em; text-transform: uppercase; }
        .row-text { font-size: 13.5px; color: var(--slate-200); margin-top: 8px; font-style: italic; line-height: 1.45; }
        .row-chips { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
        .activity-foot {
          padding: 12px 16px;
          border-top: 1px solid rgba(255,255,255,0.08);
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap;
          gap: 8px;
        }

        @media (max-width: 1080px) {
          .hero-grid { grid-template-columns: 1fr; gap: 40px; }
          .hero-copy { padding-bottom: 32px; }
          .activity-list { max-height: 380px; }
        }
      `}</style>
    </section>
  );
}

/* ---------- §3.2 — Pillars ---------- */
function PillarsSection() {
  const pillars = [
    {
      num: '01',
      glyph: 'wave',
      title: 'Understand',
      body: 'Captures every radio transmission, transcribes it in the language being spoken, threads fragmented messages into the conversations they belong to, and recognises the people, equipment, and procedures being referred to.',
      link: { label: 'See Cortexa Voice', to: '/products/voice' },
    },
    {
      num: '02',
      glyph: 'scan',
      title: 'Detect',
      body: 'Identifies safety incidents, procedural breaches, hazard mentions, and any custom concept your team defines — backed by verifiable evidence from the transcript itself.',
      link: { label: 'Safe · Ops · Signal', to: '/products' },
    },
    {
      num: '03',
      glyph: 'act',
      title: 'Act',
      body: 'Turns every detection into a task with an owner, a deadline, and a playable evidence trail. Generates shift handovers, audit-ready reports, and retrospective analyses on demand.',
      link: { label: 'See how Cortexa works', to: '/platform' },
    },
  ];

  return (
    <section className="section" style={{ background: 'var(--warm-white)' }}>
      <div className="container">
        <SectionHead
          num="3.2"
          eyebrow="WHAT CORTEXA DOES"
          headline={<>One platform. Three jobs. <span style={{ color: 'var(--ink-3)' }}>Done continuously, in every language your crews speak.</span></>}
          sideNote="Every module on the platform combines these three jobs into a different operational outcome — safety, procedure, or custom intelligence."
        />

        <div className="pillars-grid">
          {pillars.map((p) => (
            <div key={p.num} className="pillar-card reveal">
              <div className="pillar-head">
                <PillarGlyph kind={p.glyph} />
              </div>
              <h3>{p.title}</h3>
              <p>{p.body}</p>
              <Link to={p.link.to} className="btn-link accent-teal" style={{ marginTop: 24 }}>
                {p.link.label} →
              </Link>
            </div>
          ))}
        </div>
      </div>

      <style>{`
        .pillars-grid {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          border-top: 1px solid rgba(27,35,48,0.12);
        }
        .pillar-card {
          padding: 48px 32px 48px 0;
          border-right: 1px solid rgba(27,35,48,0.12);
          display: flex;
          flex-direction: column;
        }
        .pillar-card:not(:first-child) { padding-left: 32px; }
        .pillar-card:last-child { border-right: none; padding-right: 0; }
        .pillar-card h3 {
          font-size: 36px;
          margin-top: 32px;
          margin-bottom: 18px;
          font-weight: 500;
          letter-spacing: -0.02em;
        }
        .pillar-card p {
          font-size: 15.5px;
          color: var(--ink-2);
          max-width: 38ch;
          line-height: 1.6;
        }
        .pillar-head {
          display: flex;
          justify-content: space-between;
          align-items: flex-start;
          gap: 24px;
        }
        @media (max-width: 920px) {
          .pillars-grid { grid-template-columns: 1fr; }
          .pillar-card { border-right: none; border-bottom: 1px solid rgba(27,35,48,0.12); padding: 36px 0; }
          .pillar-card:not(:first-child) { padding-left: 0; }
        }
      `}</style>
    </section>
  );
}

function PillarGlyph({ kind }) {
  if (kind === 'wave') {
    return (
      <svg width="64" height="64" viewBox="0 0 64 64" fill="none">
        <line x1="6" y1="32" x2="58" y2="32" stroke="#1B2330" strokeWidth="1"/>
        <path d="M6 32 Q 12 16 18 32 Q 24 48 30 32 Q 36 16 42 32 Q 48 48 58 32" stroke="#2E7D7A" strokeWidth="1.4" fill="none"/>
      </svg>
    );
  }
  if (kind === 'scan') {
    return (
      <svg width="64" height="64" viewBox="0 0 64 64" fill="none">
        {[14, 22, 30, 38, 46].map((y, i) => (
          <line key={y} x1="6" y1={y} x2={i % 2 === 0 ? 58 : 44} y2={y} stroke="#1B2330" strokeWidth="1"/>
        ))}
        <circle cx="42" cy="34" r="12" stroke="#F2A04B" strokeWidth="1.4" fill="none"/>
        <line x1="52" y1="44" x2="60" y2="52" stroke="#F2A04B" strokeWidth="1.4"/>
      </svg>
    );
  }
  // act
  return (
    <svg width="64" height="64" viewBox="0 0 64 64" fill="none">
      <rect x="8" y="22" width="22" height="22" stroke="#1B2330" strokeWidth="1.2" fill="none"/>
      <path d="M14 33 L20 39 L26 27" stroke="#2E7D7A" strokeWidth="1.6" fill="none" strokeLinecap="square"/>
      <line x1="32" y1="33" x2="58" y2="33" stroke="#1B2330" strokeWidth="1"/>
      <path d="M52 27 L58 33 L52 39" stroke="#F2A04B" strokeWidth="1.4" fill="none"/>
    </svg>
  );
}

/* ---------- §3.3 — Understanding band ---------- */
function UnderstandingBand() {
  const tiles = [
    {
      n: '01',
      head: 'Trained for industrial reality.',
      body: 'Permit-to-work, lockout-tagout, hot work, confined space, hazardous-substance vocabulary — recognised on day one, and adapted to your company’s own equipment IDs, callsigns, and procedures as the system runs in your environment.',
    },
    {
      n: '02',
      head: 'Multilingual by default.',
      body: 'Six languages out of the box, with automatic detection on every transmission. Channels can be pinned to specific crews, and mixed-language utterances are handled natively — without manual setup or missed transmissions.',
    },
    {
      n: '03',
      head: 'Backed by evidence, not guesses.',
      body: 'Every alert is anchored in what was actually said, by whom, at what moment. When confidence is low, the event goes to a supervisor for review rather than triggering a false alarm. No hallucinated incidents, ever.',
    },
  ];
  return (
    <section className="on-dark section" style={{ overflow: 'hidden' }}>
      <div className="bg-grid" style={{ position: 'absolute', inset: 0, opacity: 0.5 }} />
      <div className="container" style={{ position: 'relative' }}>
        <SectionHead
          num="3.3"
          eyebrow="THE INTELLIGENCE LAYER"
          headline={<>Yes, it actually understands your radios.</>}
          sideNote="Underneath every module is an intelligence layer that learns how your operation speaks — in the languages your crews actually use — and refuses to act on anything it can't verify."
          onDark
        />

        <div className="understand-grid">
          {tiles.map((t) => (
            <div key={t.n} className="understand-tile reveal">
              <h4>{t.head}</h4>
              <p>{t.body}</p>
            </div>
          ))}
        </div>

        <div style={{ marginTop: 56, display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 24, flexWrap: 'wrap', paddingTop: 32, borderTop: '1px solid rgba(255,255,255,0.08)' }}>
          <span className="font-mono" style={{ fontSize: 12, color: 'var(--slate-300)', letterSpacing: '0.14em', textTransform: 'uppercase' }}>
            Six promises behind Cortexa Understanding
          </span>
          <Link to="/platform/understanding" className="btn btn-ghost-dark">
            See all six promises <span className="arrow">→</span>
          </Link>
        </div>
      </div>

      <style>{`
        .understand-grid {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 0;
          border-top: 1px solid rgba(255,255,255,0.08);
        }
        .understand-tile {
          padding: 48px 32px 32px 0;
          border-right: 1px solid rgba(255,255,255,0.08);
        }
        .understand-tile:not(:first-child) { padding-left: 32px; }
        .understand-tile:last-child { border-right: none; padding-right: 0; }
        .tile-num { font-size: 11px; color: var(--amber); letter-spacing: 0.14em; }
        .understand-tile h4 {
          font-family: var(--font-display);
          font-size: 26px;
          font-weight: 500;
          color: #fff;
          margin-top: 18px;
          margin-bottom: 16px;
          letter-spacing: -0.02em;
          max-width: 18ch;
          line-height: 1.15;
        }
        .understand-tile p {
          font-size: 15px;
          color: var(--slate-200);
          line-height: 1.6;
          max-width: 40ch;
        }
        @media (max-width: 920px) {
          .understand-grid { grid-template-columns: 1fr; }
          .understand-tile { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.08); padding: 32px 0; }
          .understand-tile:not(:first-child) { padding-left: 0; }
        }
      `}</style>
    </section>
  );
}

/* ---------- §3.4 — Products band ---------- */
function ProductsBand() {
  const products = [
    { id: 'voice',  num: '01', accent: 'var(--slate-100)', name: 'Cortexa Voice',
      tagline: 'The foundation. Your radios become structured data.',
      body: 'Captures, transcribes, threads, and structures every PTT and PMR transmission across every channel, in every language your crews speak.',
      to: '/products/voice', glyph: 'voice' },
    { id: 'safe',   num: '02', accent: 'var(--coral)', name: 'Cortexa Safe',
      tagline: 'Safety intelligence that doesn’t miss what was said.',
      body: 'Detects permit-to-work breaches, confined-space risks, gas and fire mentions, and incidents in progress — with evidence you can play back.',
      to: '/products/safe', glyph: 'safe' },
    { id: 'ops',    num: '03', accent: 'var(--teal)', name: 'Cortexa Ops',
      tagline: 'The right communications, in the right order, at the right time.',
      body: 'Verifies that operator rounds, startup/shutdown procedures, and shift handovers happen the way they’re supposed to — and flags it when they don’t.',
      to: '/products/ops', glyph: 'ops' },
    { id: 'signal', num: '04', accent: 'var(--amber)', name: 'Cortexa Signal',
      tagline: 'You define what matters. Cortexa finds it.',
      body: 'Define your own concepts and Cortexa will detect them across every conversation — automatically, with verifiable evidence and continuous tuning.',
      to: '/products/signal', glyph: 'signal' },
  ];
  return (
    <section className="section" style={{ background: 'var(--warm-white-2)' }}>
      <div className="container">
        <SectionHead
          num="3.4"
          eyebrow="THE PORTFOLIO"
          headline={<>Four modules. <span style={{ color: 'var(--ink-3)' }}>One platform. Buy what you need today; expand when you’re ready.</span></>}
          sideNote="Every module runs on the same underlying intelligence layer and the same data sovereignty model. Start with the one that fits your most urgent need; the others slot in cleanly."
        />

        <div className="products-grid">
          {products.map((p) => (
            <Link key={p.id} to={p.to} className="product-card reveal">
              <div className="product-head">
                <span className="font-mono product-num">{p.num}</span>
                <ProductGlyph kind={p.glyph} color={p.accent} />
              </div>
              <h3 className="product-name">{p.name}</h3>
              <p className="product-tagline">{p.tagline}</p>
              <p className="product-body">{p.body}</p>
              <div className="product-foot">
                <span style={{ color: p.accent }}>Explore {p.name.split(' ')[1]} →</span>
                <span className="font-mono product-strip">— {p.num} / 04</span>
              </div>
              <div className="product-accent-line" style={{ background: p.accent }} />
            </Link>
          ))}
        </div>
      </div>

      <style>{`
        .products-grid {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 24px;
        }
        .product-card {
          position: relative;
          background: var(--warm-white);
          border: 1px solid rgba(27,35,48,0.10);
          padding: 36px 36px 32px;
          display: flex;
          flex-direction: column;
          overflow: hidden;
          transition: border-color 0.18s, transform 0.18s ease;
        }
        .product-card:hover {
          border-color: rgba(27,35,48,0.4);
          transform: translateY(-2px);
        }
        .product-accent-line {
          position: absolute;
          left: 0; top: 0; bottom: 0;
          width: 3px;
          opacity: 0;
          transition: opacity 0.18s ease;
        }
        .product-card:hover .product-accent-line { opacity: 1; }
        .product-head {
          display: flex;
          justify-content: space-between;
          align-items: flex-start;
        }
        .product-num { font-size: 11px; color: var(--ink-4); letter-spacing: 0.14em; }
        .product-name {
          font-size: 30px;
          font-weight: 500;
          margin-top: 28px;
          letter-spacing: -0.02em;
        }
        .product-tagline {
          margin-top: 12px;
          font-size: 16px;
          color: var(--ink);
          font-style: italic;
          font-weight: 400;
          max-width: 38ch;
        }
        .product-body {
          margin-top: 16px;
          font-size: 14.5px;
          color: var(--ink-3);
          max-width: 44ch;
          line-height: 1.55;
        }
        .product-foot {
          margin-top: 36px;
          padding-top: 16px;
          border-top: 1px solid rgba(27,35,48,0.10);
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 13.5px;
          font-weight: 500;
        }
        .product-strip {
          font-size: 11px;
          color: var(--ink-4);
          letter-spacing: 0.14em;
        }
        @media (max-width: 820px) { .products-grid { grid-template-columns: 1fr; } }
      `}</style>
    </section>
  );
}

function ProductGlyph({ kind, color }) {
  const s = { width: 56, height: 56, viewBox: '0 0 56 56', fill: 'none' };
  if (kind === 'voice') return (
    <svg {...s}><line x1="4" y1="28" x2="52" y2="28" stroke="#1B2330" strokeWidth="0.8"/>
      <path d="M4 28 Q 10 12 16 28 Q 22 44 28 28 Q 34 12 40 28 Q 46 44 52 28" stroke={color} strokeWidth="1.4" fill="none"/></svg>
  );
  if (kind === 'safe') return (
    <svg {...s}><path d="M28 6 L46 14 V28 C46 40 28 50 28 50 C28 50 10 40 10 28 V14 Z" stroke="#1B2330" strokeWidth="1" fill="none"/>
      <path d="M20 27 L26 33 L36 22" stroke={color} strokeWidth="1.6" fill="none"/></svg>
  );
  if (kind === 'ops') return (
    <svg {...s}>
      <circle cx="12" cy="40" r="4" stroke="#1B2330" strokeWidth="1" fill="none"/>
      <circle cx="28" cy="16" r="4" stroke="#1B2330" strokeWidth="1" fill={color === 'var(--teal)' ? color : 'none'}/>
      <circle cx="44" cy="40" r="4" stroke="#1B2330" strokeWidth="1" fill="none"/>
      <line x1="16" y1="38" x2="24" y2="20" stroke={color} strokeWidth="1.2"/>
      <line x1="32" y1="20" x2="40" y2="38" stroke={color} strokeWidth="1.2"/>
    </svg>
  );
  // signal
  return (
    <svg {...s}>
      <circle cx="28" cy="28" r="2" fill={color}/>
      <circle cx="28" cy="28" r="8"  stroke={color} strokeWidth="1" fill="none" opacity="0.8"/>
      <circle cx="28" cy="28" r="16" stroke={color} strokeWidth="1" fill="none" opacity="0.5"/>
      <circle cx="28" cy="28" r="24" stroke={color} strokeWidth="1" fill="none" opacity="0.25"/>
    </svg>
  );
}

/* ---------- §3.5 — Industries band ---------- */
function IndustriesBand() {
  const { region } = useRouter();
  const industries = region === 'US'
    ? [
        { name: 'Oil & Gas', line: 'Upstream, midstream, refining. OSHA-aligned safety and procedural compliance.',  tag: 'OIL-GAS · UPSTREAM',     to: '/industries/energy', src: 'assets/industry-oilgas.png' },
        { name: 'Construction & Heavy Industry', line: 'Multi-site, multilingual crews, evolving hazard profiles.',  tag: 'CONSTRUCTION · GOLDEN',  to: '/industries/construction', src: 'assets/industry-construction.png' },
        { name: 'Utilities', line: 'Power, water, gas distribution. Storm response, switching, NERC-relevant comms.', tag: 'UTILITIES · LINEWORK',   to: '/industries/energy', src: 'assets/industry-utilities.png' },
        { name: 'Emergency Services', line: '911, dispatch, fire, EMS coordination.',                                  tag: 'EMERGENCY · DISPATCH',   to: '/industries/emergency-services', src: 'assets/industry-emergency.png' },
      ]
    : [
        { name: 'Energy & Utilities', line: 'Refineries, upstream, downstream, power generation. Where permits and hot-work are non-negotiable.', tag: 'ENERGY · REFINERY DAWN', to: '/industries/energy', src: 'assets/industry-energy.png' },
        { name: 'Aviation', line: 'Ground handling, ramp operations, MRO. Multilingual crews on the apron.',                                   tag: 'AVIATION · RAMP, BLUE HOUR', to: '/industries/aviation', src: 'assets/industry-aviation.png' },
        { name: 'Mining', line: 'Surface and underground. Where handover and incident reconstruction shape safety outcomes.',                    tag: 'MINING · UNDERGROUND',       to: '/industries/mining', src: 'assets/industry-mining.png' },
        { name: 'Defense & Emergency', line: 'Multi-agency operations, training facilities, base security.',                                     tag: 'DEFENSE · COORDINATION',     to: '/industries/defense', src: 'assets/industry-defense.png' },
      ];

  return (
    <section className="section" style={{ background: 'var(--warm-white)' }}>
      <div className="container">
        <SectionHead
          num="3.5"
          eyebrow="WHERE CORTEXA WORKS"
          headline={region === 'US'
            ? <>Trusted by North American operators in regulated, high-risk environments.</>
            : <>Built for environments where radio communication is the operational backbone.</>}
          sideNote="The industries below reflect how the platform shows up in context. Each detail page names the use cases, compliance regimes, and typical module mix."
        />

        <div className="industries-grid">
          {industries.map((ind, i) => (
            <Link key={ind.name} to={ind.to} className="industry-tile reveal">
              <PhotoSlot
                ratio="1/1"
                src={ind.src}
                tag={ind.tag}
                corner={['', String(i + 1).padStart(2,'0') + ' / 04']}
              />
              <div className="industry-meta">
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                  <h4>{ind.name}</h4>
                  <span style={{ color: 'var(--teal)', fontSize: 18 }}>→</span>
                </div>
                <p>{ind.line}</p>
              </div>
            </Link>
          ))}
        </div>

        <div style={{ marginTop: 48, display: 'flex', justifyContent: 'center' }}>
          <Link to="/industries" className="btn btn-ghost-light">
            See all industries <span className="arrow">→</span>
          </Link>
        </div>
      </div>

      <style>{`
        .industries-grid {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 24px;
        }
        .industry-tile {
          display: flex;
          flex-direction: column;
          gap: 16px;
          color: inherit;
          transition: transform 0.18s;
        }
        .industry-tile:hover { transform: translateY(-2px); }
        .industry-meta h4 {
          font-family: var(--font-display);
          font-size: 20px;
          font-weight: 500;
          letter-spacing: -0.01em;
        }
        .industry-meta p {
          font-size: 13.5px;
          color: var(--ink-3);
          margin-top: 6px;
          line-height: 1.5;
        }
        @media (max-width: 1080px) { .industries-grid { grid-template-columns: 1fr 1fr; } }
        @media (max-width: 560px)  { .industries-grid { grid-template-columns: 1fr; } }
      `}</style>
    </section>
  );
}

/* ---------- §3.6 — Proof band ---------- */
function ProofBand() {
  const partners = ['AIRBUS', 'BECHTEL', 'HYTERA', 'SEPURA', 'ENTECH'];
  return (
    <section className="on-dark section-sm" style={{ borderTop: '1px solid rgba(255,255,255,0.06)', borderBottom: '1px solid rgba(255,255,255,0.06)' }}>
      <div className="container" style={{ textAlign: 'center' }}>
        <SectionEyebrow text="VALIDATED IN INDUSTRY" onDark />
        <h3 style={{ fontSize: 'clamp(24px, 3vw, 34px)', marginTop: 16, color: '#fff', maxWidth: '60ch', marginInline: 'auto' }}>
          Validated with industry partners across aviation, energy, and critical communications.
        </h3>
        <p style={{ marginTop: 20, maxWidth: '64ch', marginInline: 'auto', color: 'var(--slate-300)' }}>
          Developed alongside leading industrial radio manufacturers and major operators. Specific deployments and references available under NDA on request.
        </p>

        <div style={{ marginTop: 48, display: 'flex', justifyContent: 'center', alignItems: 'center', flexWrap: 'wrap', gap: 0, borderTop: '1px solid rgba(255,255,255,0.08)', borderBottom: '1px solid rgba(255,255,255,0.08)' }}>
          {partners.map((p, i) => (
            <div key={p} style={{
              flex: 1,
              minWidth: 140,
              padding: '36px 16px',
              fontFamily: 'var(--font-display)',
              fontSize: 18,
              letterSpacing: '0.12em',
              color: 'var(--slate-300)',
              textAlign: 'center',
              borderRight: i < partners.length - 1 ? '1px solid rgba(255,255,255,0.08)' : 'none',
            }}>{p}</div>
          ))}
        </div>

        <div style={{ marginTop: 36 }}>
          <Link to="/contact?topic=reference" className="btn-link accent-amber">
            Request a reference call →
          </Link>
        </div>
      </div>
    </section>
  );
}

/* ---------- §3.7 — Data sovereignty band ---------- */
function SovereigntyBand() {
  return (
    <section className="section" style={{ background: 'var(--warm-white-2)' }}>
      <div className="container">
        <div className="sov-grid">
          <div>
            <SectionEyebrow num="3.7" text="RUNS WHERE YOU RUN" />
            <h2 style={{ fontSize: 'clamp(36px, 4.4vw, 56px)', marginTop: 20, maxWidth: '14ch' }}>
              Your data stays where your operation is.
            </h2>
            <p style={{ marginTop: 28, fontSize: 16.5, color: 'var(--ink-2)', maxWidth: '48ch' }}>
              Cortexa runs entirely on your own infrastructure — your hardware, your network, your control.
              No external cloud LLMs, no third-party data egress, no model providers between your radios and your insights.
              The platform is engineered for sovereign deployment from the ground up.
            </p>
            <div style={{ marginTop: 36 }}>
              <Link to="/platform/data-sovereignty" className="btn btn-ghost-light">
                Read about data sovereignty <span className="arrow">→</span>
              </Link>
            </div>
          </div>

          <div>
            <PhotoSlot
              ratio="4/3"
              src="assets/sovereignty-appliance.png"
              alt="Mac Studio on a brushed-steel desk with a single ethernet cable, slate-grey backdrop. One appliance per site."
              tag="MAC STUDIO · ONE PER SITE"
              corner={['', 'APPLIANCE / 01']}
            />
            <div className="sov-points">
              {[
                { h: 'No external AI providers.', b: 'Every model — transcription, language understanding, detection — runs locally on dedicated hardware you control.' },
                { h: 'No data leaves your perimeter.', b: 'Voices, transcripts, detections, reports — all of it stays inside your network boundary by design.' },
                { h: 'One Mac Studio per site.', b: 'A single, self-contained appliance per site runs the full stack. Multi-site environments are managed from a unified control plane.' },
              ].map((pt, i) => (
                <div key={pt.h} className="sov-point reveal">
                  <span className="font-mono" style={{ fontSize: 11, color: 'var(--teal)', letterSpacing: '0.14em' }}>{String(i+1).padStart(2,'0')}</span>
                  <div>
                    <strong style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 17, color: 'var(--ink)' }}>{pt.h}</strong>
                    <p style={{ fontSize: 14, color: 'var(--ink-3)', marginTop: 6 }}>{pt.b}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

      <style>{`
        .sov-grid {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 80px;
          align-items: start;
        }
        .sov-points {
          margin-top: 32px;
          display: flex;
          flex-direction: column;
        }
        .sov-point {
          display: grid;
          grid-template-columns: 32px 1fr;
          gap: 20px;
          padding: 24px 0;
          border-top: 1px solid rgba(27,35,48,0.12);
        }
        .sov-point:last-child { border-bottom: 1px solid rgba(27,35,48,0.12); }
        @media (max-width: 980px) { .sov-grid { grid-template-columns: 1fr; gap: 48px; } }
      `}</style>
    </section>
  );
}

/* ---------- COMPOSE HOMEPAGE ---------- */
function HomePage() {
  useReveal();
  return (
    <>
      <HomeHero />
      <PillarsSection />
      <UnderstandingBand />
      <ProductsBand />
      <IndustriesBand />
      <ProofBand />
      <SovereigntyBand />
      <ClosingCTA
        headline="Bring Cortexa to your operation."
        subhead="Start with a scoped pilot on a single site. We'll evaluate your radio environment, your languages, and your vocabulary together, and define success criteria before any commitment."
        primary={{ label: 'Request a Pilot', to: '/demo' }}
        secondary={{ label: 'Talk to the team', to: '/contact' }}
      />
    </>
  );
}

Object.assign(window, { HomePage });
