/* =====================================================
   WAVE 3 — Products hub · Platform hub & 3 details · Legal stubs
   Brief §4, §9, §12, §13, §14, §30
   ===================================================== */

/* =========================================
   §4 — PRODUCTS HUB
   ========================================= */

const PRODUCT_CARDS = [
  {
    slug: 'voice',
    name: 'Cortexa Voice',
    tagline: 'The foundation module.',
    body: 'Captures every PTT and PMR transmission across every channel, transcribes it in the language being spoken, threads fragmented messages into coherent conversations, and recognises the operators, equipment, and procedures being referred to.',
    outcomes: [
      'Structured radio data, in your languages.',
      'Conversation threading across fragmented PTT bursts.',
      'Entity recognition — operators, equipment, procedures.',
    ],
    bestFor: 'Digital-transformation, IT, control-room supervisors.',
    accent: 'var(--slate-100)',
    accentBg: 'rgba(229,232,236,0.10)',
    n: '01',
  },
  {
    slug: 'safe',
    name: 'Cortexa Safe',
    tagline: 'Safety intelligence.',
    body: 'Listens to every transmission for the safety events that matter — permit-to-work breaches, confined-space risks, hot-work conflicts, gas and fire mentions, hazard escalations, near-misses, incidents in progress. Every alert backed by playable evidence.',
    outcomes: [
      'Permit-to-work and hazard detection across every channel.',
      'Audit-ready activity records with playable audio.',
      'Continuous precision tuning to your site.',
    ],
    bestFor: 'HSE managers, safety directors, compliance officers.',
    accent: 'var(--coral)',
    accentBg: 'rgba(217,83,79,0.10)',
    n: '02',
  },
  {
    slug: 'ops',
    name: 'Cortexa Ops',
    tagline: 'Operational intelligence.',
    body: 'Verifies operator rounds, startup and shutdown procedures, equipment handovers, and shift transitions — and tells you the moment they slip. Moves procedural compliance from quarterly audit to real-time verification.',
    outcomes: [
      'Procedural compliance: pass / partial / not-completed.',
      'Automatic shift-handover summaries in each crew’s language.',
      'Pattern analysis across shifts and sites.',
    ],
    bestFor: 'Operations directors, plant managers, control-room supervisors.',
    accent: 'var(--teal)',
    accentBg: 'rgba(46,125,122,0.10)',
    n: '03',
  },
  {
    slug: 'signal',
    name: 'Cortexa Signal',
    tagline: 'Custom intelligence.',
    body: 'Lets your operations team define any concept your business cares about — in plain language — and have it detected across every conversation, in any supported language, with verifiable evidence and continuous tuning. No engineering work.',
    outcomes: [
      'Plain-language concept definition.',
      'Precision and recall visible before you save.',
      'Continuous tuning from supervisor reviews.',
    ],
    bestFor: 'Operations leads, AI champions, sophisticated customers.',
    accent: 'var(--amber)',
    accentBg: 'rgba(242,160,75,0.10)',
    n: '04',
  },
];

const COMPARE_ROWS = [
  ['Captures and structures every transmission', 'full', 'incl', 'incl', 'incl'],
  ['Recognises operators, equipment, procedures', 'full', 'full', 'full', 'full'],
  ['Detects safety events and compliance breaches', '', 'full', '', ''],
  ['Verifies procedural communications', '', '', 'full', ''],
  ['Detects custom-defined concepts', '', '', '', 'full'],
  ['Generates tasks with evidence', 'incl', 'full', 'full', 'full'],
  ['Retrospective analysis and reporting', 'incl', 'incl', 'incl', 'incl'],
  ['Local infrastructure, no external cloud AI', 'full', 'full', 'full', 'full'],
  ['Six languages, automatic detection', 'full', 'full', 'full', 'full'],
];

const CROSS_SERVICES = [
  'Retrospective analysis across history',
  'Templated reporting in your format',
  'Tasks with evidence chains',
  'Unified activity feed',
  'Supervisor review queue',
  'Multi-site management',
];

function ProductsHubPage() {
  useReveal();
  return (
    <>
      <section className="on-dark" style={{ paddingTop: 96, paddingBottom: 96, borderBottom: '1px solid rgba(255,255,255,0.06)', position: 'relative', overflow: 'hidden' }}>
        <div className="bg-grid" style={{ position: 'absolute', inset: 0, opacity: 0.4 }} />
        <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(60% 70% at 80% 30%, rgba(242,160,75,0.12), transparent 70%)' }} />
        <div className="container" style={{ position: 'relative' }}>
          <SectionEyebrow num="4" text="PRODUCTS" onDark />
          <h1 style={{ fontSize: 'clamp(48px, 7vw, 96px)', color: '#fff', marginTop: 26, maxWidth: '14ch', letterSpacing: '-0.035em', lineHeight: 1.0 }}>
            Four modules. <span style={{ color: 'var(--amber)' }}>One platform.</span>
          </h1>
          <p style={{ marginTop: 32, fontSize: 18, color: 'var(--slate-200)', maxWidth: '64ch', lineHeight: 1.6 }}>
            Cortexa is a portfolio. Each module solves a specific problem — Voice gives you structured radio data, Safe finds the safety events that matter, Ops verifies your procedures, Signal lets you define and detect anything else. Buy what you need today; everything else slots in cleanly when you’re ready.
          </p>
          <div style={{ marginTop: 56 }}>
            <PhotoSlot ratio="16/9" src="assets/products-hub-hero.png" alt="Top-down quadrant still life on a slate-grey surface — a PTT handset (Voice), a hi-vis hard hat (Safe), a procedure clipboard (Ops), and a pair of binoculars (Signal)." tag="QUADRANT · VOICE · SAFE · OPS · SIGNAL" corner={['', 'PRODUCTS / HERO']} />
          </div>
        </div>
      </section>

      {/* §4.2 module grid */}
      <section className="section" style={{ background: 'var(--warm-white)' }}>
        <div className="container">
          <SectionHead num="4.2" eyebrow="MODULE GRID" headline={<>Four modules, four jobs. Read in any order.</>} sideNote="Every module includes the cross-module services listed below. Voice is the foundation — the others stack on top." />
          <div className="products-hub-grid">
            {PRODUCT_CARDS.map((p) => (
              <Link key={p.slug} to={'/products/' + p.slug} className="product-hub-card reveal" style={{ background: p.accentBg }}>
                <div className="product-hub-card-head">
                  <span className="font-mono" style={{ fontSize: 11, color: 'var(--ink-4)', letterSpacing: '0.14em' }}>{p.n}</span>
                  <span style={{ width: 8, height: 8, background: p.accent, display: 'inline-block' }} />
                </div>
                <h3>{p.name}</h3>
                <div className="product-tagline" style={{ color: 'var(--ink-3)' }}>{p.tagline}</div>
                <p>{p.body}</p>
                <div className="product-outcomes">
                  <span className="font-mono" style={{ fontSize: 10.5, color: 'var(--ink-4)', letterSpacing: '0.14em' }}>OUTCOMES</span>
                  <ul>
                    {p.outcomes.map((o) => <li key={o}><span style={{ color: p.accent }}>›</span>{o}</li>)}
                  </ul>
                </div>
                <div className="product-best">
                  <span className="font-mono">BEST FOR</span> {p.bestFor}
                </div>
                <span className="product-cta" style={{ color: p.accent }}>Read {p.name} →</span>
              </Link>
            ))}
          </div>
        </div>
        <style>{`
          .products-hub-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(27,35,48,0.10); border: 1px solid rgba(27,35,48,0.10); }
          .product-hub-card {
            padding: 36px 36px 40px;
            display: flex; flex-direction: column; gap: 14px;
            color: var(--ink);
            transition: filter 0.18s ease;
          }
          .product-hub-card:hover { filter: brightness(0.99); }
          .product-hub-card-head { display: flex; justify-content: space-between; align-items: center; }
          .product-hub-card h3 { font-size: clamp(28px, 3vw, 38px); letter-spacing: -0.02em; }
          .product-hub-card .product-tagline { font-family: var(--font-display); font-size: 17px; margin-top: -6px; }
          .product-hub-card > p { font-size: 15px; color: var(--ink-2); line-height: 1.6; max-width: 56ch; }
          .product-outcomes { padding-top: 14px; border-top: 1px solid rgba(27,35,48,0.10); display: flex; flex-direction: column; gap: 10px; }
          .product-outcomes ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
          .product-outcomes li { display: grid; grid-template-columns: 16px 1fr; gap: 8px; font-size: 14px; color: var(--ink-2); line-height: 1.5; }
          .product-outcomes li span { font-family: var(--font-mono); }
          .product-best { font-size: 13px; color: var(--ink-3); margin-top: 4px; }
          .product-best .font-mono { font-size: 10.5px; color: var(--ink-4); letter-spacing: 0.14em; margin-right: 8px; }
          .product-cta { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; margin-top: 6px; }
          @media (max-width: 880px) { .products-hub-grid { grid-template-columns: 1fr; } }
        `}</style>
      </section>

      {/* §4.3 Compare modules */}
      <section className="section" style={{ background: 'var(--warm-white-2)', borderTop: '1px solid rgba(27,35,48,0.10)' }}>
        <div className="container">
          <SectionHead num="4.3" eyebrow="COMPARE MODULES" headline={<>Outcomes, side by side.</>} sideNote="Filled dots are the module’s primary capability. Open dots are cross-module services included with every module." />
          <div className="compare-wrap">
            <table className="compare-table">
              <thead>
                <tr>
                  <th></th>
                  {PRODUCT_CARDS.map((p) => (
                    <th key={p.slug} style={{ color: p.accent }}>
                      <Link to={'/products/' + p.slug}>
                        <div style={{ marginTop: 6 }}>{p.name.replace('Cortexa ', '')}</div>
                      </Link>
                    </th>
                  ))}
                </tr>
              </thead>
              <tbody>
                {COMPARE_ROWS.map((row, i) => (
                  <tr key={i}>
                    <td className="compare-cap">{row[0]}</td>
                    {row.slice(1).map((cell, j) => (
                      <td key={j} className={'compare-cell ' + cell}>
                        {cell === 'full' && <span className="dot dot-full" style={{ background: PRODUCT_CARDS[j].accent }} />}
                        {cell === 'incl' && <span className="dot dot-open" style={{ borderColor: PRODUCT_CARDS[j].accent }} />}
                      </td>
                    ))}
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
        <style>{`
          .compare-wrap { overflow-x: auto; }
          .compare-table {
            width: 100%; min-width: 720px;
            border-collapse: collapse;
            font-family: var(--font-body);
          }
          .compare-table th, .compare-table td {
            padding: 16px 18px;
            border-bottom: 1px solid rgba(27,35,48,0.10);
            vertical-align: middle;
          }
          .compare-table thead th {
            text-align: left;
            font-family: var(--font-display);
            font-size: 18px;
            font-weight: 500;
            letter-spacing: -0.015em;
            border-bottom: 1px solid rgba(27,35,48,0.20);
            padding: 14px 18px 18px;
          }
          .compare-table thead th a { color: var(--ink); }
          .compare-table thead th a:hover { color: var(--teal); }
          .compare-table thead th:first-child { width: 50%; }
          .compare-cap { font-size: 14.5px; color: var(--ink-2); }
          .compare-cell { text-align: center; }
          .dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; }
          .dot-open { background: transparent; border: 1.4px solid; }
        `}</style>
      </section>

      {/* §4.4 cross services */}
      <section className="section-sm" style={{ background: 'var(--warm-white)', borderTop: '1px solid rgba(27,35,48,0.10)' }}>
        <div className="container" style={{ display: 'grid', gridTemplateColumns: '1fr 1.6fr', gap: 64 }}>
          <div>
            <SectionEyebrow num="4.4" text="INCLUDED WITH EVERY MODULE" />
            <h2 style={{ fontSize: 'clamp(24px, 2.8vw, 34px)', marginTop: 14, maxWidth: '18ch' }}>Cross-module services, always included.</h2>
            <p style={{ marginTop: 18, fontSize: 14.5, color: 'var(--ink-3)', lineHeight: 1.6 }}>
              Whichever modules you start with, the platform layer is the same — and so are the services that come with it.
            </p>
            <Link to="/platform" className="btn-link accent-teal" style={{ marginTop: 24 }}>Explore the platform layer <span>→</span></Link>
          </div>
          <ul className="cross-list">
            {CROSS_SERVICES.map((s, i) => (
              <li key={s}>
                <span className="font-mono">{String(i+1).padStart(2,'0')}</span>
                <span>{s}</span>
              </li>
            ))}
          </ul>
        </div>
        <style>{`
          .cross-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(27,35,48,0.10); border: 1px solid rgba(27,35,48,0.10); }
          .cross-list li {
            background: var(--warm-white);
            padding: 22px 24px;
            display: grid; grid-template-columns: 40px 1fr; gap: 14px;
            font-size: 16px;
            color: var(--ink);
            align-items: baseline;
          }
          .cross-list li .font-mono { font-size: 11px; color: var(--ink-4); letter-spacing: 0.14em; }
          @media (max-width: 920px) {
            section.section-sm .container[style*="grid-template-columns: 1fr 1.6fr"] {
              grid-template-columns: 1fr !important; gap: 36px !important;
            }
            .cross-list { grid-template-columns: 1fr; }
          }
        `}</style>
      </section>

      <ClosingCTA
        headline="Start with one module. Add the others when you’re ready."
        subhead="Most customers begin with Voice + one of the intelligence modules. The platform composes cleanly as your operation grows."
        primary={{ label: 'Request a Pilot', to: '/demo' }}
        secondary={{ label: 'Explore the platform', to: '/platform' }}
      />
    </>
  );
}

/* =========================================
   §9 — PLATFORM HUB
   ========================================= */

const PLATFORM_BANDS = [
  {
    n: '01', name: 'Cortexa Understanding', to: '/platform/understanding',
    eyebrow: 'THE INTELLIGENCE LAYER',
    line: 'How the platform learns your industry, your vocabulary, your languages, and refuses to make things up.',
    accent: 'var(--teal)',
    builtOut: true,
  },
  {
    n: '02', name: 'Data Sovereignty & Local AI', to: '/platform/data-sovereignty',
    eyebrow: 'YOUR INFRASTRUCTURE',
    line: 'Why every Cortexa deployment runs entirely on your own infrastructure, with no external AI providers.',
    accent: 'var(--amber)',
    builtOut: true,
  },
  {
    n: '03', name: 'Security & Compliance', to: '/platform/security',
    eyebrow: 'REGULATED ENVIRONMENTS',
    line: 'How Cortexa is engineered for regulated environments — role-based access, audit logging, standards alignment.',
    accent: 'var(--coral)',
    builtOut: true,
  },
  {
    n: '04', name: 'Multi-Site & Multi-Channel', to: '/platform/multi-site',
    eyebrow: 'EVERY SITE, EVERY CHANNEL',
    line: 'How the same platform runs across multiple sites and channels under unified management.',
    accent: 'var(--slate-100)',
    builtOut: true,
  },
  {
    n: '05', name: 'Integrations', to: '/platform/integrations',
    eyebrow: 'CONNECTS TO WHAT YOU RUN',
    line: 'How Cortexa connects to your existing PTT/PMR infrastructure, identity systems, and operational tools.',
    accent: 'var(--teal)',
    builtOut: true,
  },
];

function PlatformHubPage() {
  useReveal();
  return (
    <>
      <section className="on-dark" style={{ paddingTop: 80, paddingBottom: 0, borderBottom: '1px solid rgba(255,255,255,0.06)', position: 'relative', overflow: 'hidden' }}>
        <div className="bg-grid" style={{ position: 'absolute', inset: 0, opacity: 0.4 }} />
        <div className="container" style={{ position: 'relative', paddingBlock: 64 }}>
          <SectionEyebrow num="9" text="PLATFORM" onDark />
          <h1 style={{ fontSize: 'clamp(48px, 7vw, 96px)', color: '#fff', marginTop: 26, maxWidth: '16ch', letterSpacing: '-0.035em', lineHeight: 1.0 }}>
            The platform underneath <em style={{ fontStyle: 'normal', color: 'var(--amber)' }}>every</em> Cortexa module.
          </h1>
          <p style={{ marginTop: 32, fontSize: 18, color: 'var(--slate-200)', maxWidth: '64ch', lineHeight: 1.6 }}>
            Cortexa is built on a single platform layer that every product module inherits. Six languages. Local infrastructure. Per-company vocabulary. Evidence-backed decisions. Multi-site management. Everything below is built once and works everywhere.
          </p>
          <div style={{ marginTop: 56 }}>
            <PhotoSlot ratio="21/9" src="assets/platform-hub-hero.png" alt="Network rack in an equipment room with a Mac Studio on a wall shelf beside it, single ethernet cable connecting the two. One appliance per site." tag="NETWORK RACK + MAC STUDIO — APPLIANCE-PER-SITE" corner={['', 'PLATFORM / HERO']} />
          </div>
        </div>
      </section>

      {/* §9.2 — five capability bands */}
      <section style={{ background: 'var(--warm-white)' }}>
        <div className="container" style={{ padding: '0 var(--gutter)' }}>
          <SectionHead num="9.2" eyebrow="FIVE CAPABILITY BANDS" headline={<>What the platform does, before any module is enabled.</>} />
        </div>
        <ul className="platform-bands">
          {PLATFORM_BANDS.map((b, i) => (
            <li key={b.n}>
              <Link to={b.to} className="platform-band reveal">
                <div className="container">
                  <div className="platform-band-inner">
                    <div className="platform-band-num">
                      <span style={{ fontFamily: 'var(--font-display)', fontSize: 96, color: b.accent, lineHeight: 0.85, letterSpacing: '-0.03em', opacity: 0.7 }}>{b.n}</span>
                    </div>
                    <div className="platform-band-body">
                      <span className="font-mono" style={{ fontSize: 11, color: 'var(--ink-4)', letterSpacing: '0.14em' }}>{b.eyebrow}</span>
                      <h2>{b.name}</h2>
                      <p>{b.line}</p>
                    </div>
                    <div className="platform-band-cta">
                      <span style={{ color: b.accent }}>Read this band →</span>
                    </div>
                  </div>
                </div>
              </Link>
            </li>
          ))}
        </ul>
        <style>{`
          .platform-bands { list-style: none; padding: 0; margin: 0; border-top: 1px solid rgba(27,35,48,0.16); }
          .platform-bands li { border-bottom: 1px solid rgba(27,35,48,0.10); }
          .platform-band { display: block; color: var(--ink); padding: 56px 0; transition: background 0.18s ease; }
          .platform-band:hover { background: var(--warm-white-2); }
          .platform-band-inner { display: grid; grid-template-columns: 120px 1fr auto; gap: 56px; align-items: center; }
          .platform-band-body h2 { font-size: clamp(28px, 3.4vw, 44px); letter-spacing: -0.02em; margin-top: 10px; max-width: 22ch; }
          .platform-band-body p { font-size: 16.5px; color: var(--ink-2); margin-top: 14px; max-width: 60ch; line-height: 1.6; }
          .platform-band-cta { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; }
          @media (max-width: 920px) {
            .platform-band-inner { grid-template-columns: 80px 1fr; }
            .platform-band-cta { grid-column: 1 / -1; padding-left: 96px; }
            .platform-band-num span { font-size: 64px !important; }
          }
        `}</style>
      </section>

      <ClosingCTA
        headline="See it run on your infrastructure."
        subhead="A 30-minute call covers the full platform stack — what runs locally, how it integrates, what you control."
        primary={{ label: 'Request a Pilot', to: '/demo' }}
        secondary={{ label: 'Talk to the team', to: '/contact' }}
      />
    </>
  );
}

/* =========================================
   Platform detail template — used for security, multi-site, integrations
   ========================================= */

function PlatformDetailPage({ data }) {
  useReveal();
  const d = data;
  return (
    <>
      {/* HERO */}
      <section className="on-dark" style={{ paddingTop: 80, paddingBottom: 0, borderBottom: '1px solid rgba(255,255,255,0.06)', position: 'relative', overflow: 'hidden' }}>
        <div className="bg-grid" style={{ position: 'absolute', inset: 0, opacity: 0.4 }} />
        <div style={{ position: 'absolute', inset: 0, background: `radial-gradient(50% 60% at 80% 20%, ${d.accent.replace('var(','').replace(')','')}22, transparent 70%)` }} />
        <div className="container" style={{ position: 'relative', paddingBlock: 64 }}>
          <div className="eyebrow on-dark">PLATFORM · {d.eyebrow}</div>
          <h1 style={{ fontSize: 'clamp(40px, 5.6vw, 80px)', color: '#fff', marginTop: 24, maxWidth: '16ch', letterSpacing: '-0.03em', lineHeight: 1.0 }}>
            {d.title}
          </h1>
          <p style={{ marginTop: 28, fontSize: 18, color: 'var(--slate-200)', maxWidth: '64ch', lineHeight: 1.6 }}>
            {d.subhead}
          </p>
          <div style={{ marginTop: 36, display: 'flex', gap: 14, flexWrap: 'wrap' }}>
            <Link to="/demo" className="btn btn-primary">Request a Pilot <span className="arrow">→</span></Link>
            <Link to="/platform" className="btn btn-ghost-dark">All platform bands <span className="arrow">→</span></Link>
          </div>
          <div style={{ marginTop: 64 }}>
            <PhotoSlot ratio="21/9" src={d.heroPhotoSrc} tag={d.heroPhotoTag} corner={[``, d.eyebrow.split(' ')[0]]} />
          </div>
        </div>
      </section>

      {/* CAPABILITIES */}
      <section className="section" style={{ background: 'var(--warm-white)' }}>
        <div className="container">
          <SectionHead
            num={d.n + '.2'}
            eyebrow={d.capsEyebrow}
            headline={d.capsHeadline}
            sideNote={d.capsSideNote}
          />
          <div className={'platform-caps ' + (d.caps.length === 3 ? 'three' : 'four')}>
            {d.caps.map((c, i) => (
              <div key={i} className="platform-cap reveal">
                <div className="platform-cap-head">
                  <span className="font-mono" style={{ fontSize: 10.5, color: 'var(--ink-4)', letterSpacing: '0.14em' }}>{String(i+1).padStart(2,'0')}</span>
                  <span style={{ width: 24, height: 2, background: d.accent }} />
                </div>
                <h3>{c.title}</h3>
                <p>{c.body}</p>
              </div>
            ))}
          </div>
        </div>
        <style>{`
          .platform-caps { display: grid; gap: 1px; background: rgba(27,35,48,0.10); border: 1px solid rgba(27,35,48,0.10); }
          .platform-caps.three { grid-template-columns: repeat(3, 1fr); }
          .platform-caps.four { grid-template-columns: repeat(2, 1fr); }
          .platform-cap { background: var(--warm-white); padding: 36px 32px 40px; display: flex; flex-direction: column; gap: 16px; }
          .platform-cap-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 4px; }
          .platform-cap h3 { font-size: 24px; letter-spacing: -0.015em; max-width: 22ch; line-height: 1.2; }
          .platform-cap p { font-size: 15px; color: var(--ink-2); line-height: 1.65; max-width: 52ch; }
          @media (max-width: 920px) {
            .platform-caps.three, .platform-caps.four { grid-template-columns: 1fr; }
          }
        `}</style>
      </section>

      {d.tailEyebrow && (
        <section className="section-sm" style={{ background: 'var(--warm-white-2)', borderTop: '1px solid rgba(27,35,48,0.10)' }}>
          <div className="container" style={{ display: 'grid', gridTemplateColumns: '1fr 1.6fr', gap: 64 }}>
            <div>
              <SectionEyebrow num={d.n + '.3'} text={d.tailEyebrow} />
              <h2 style={{ fontSize: 'clamp(24px, 2.6vw, 32px)', marginTop: 14, maxWidth: '14ch' }}>{d.tailHeadline}</h2>
            </div>
            <p style={{ fontSize: 17, lineHeight: 1.7, color: 'var(--ink-2)', maxWidth: '64ch' }}>{d.tailBody}</p>
          </div>
          <style>{`
            @media (max-width: 920px) {
              section.section-sm .container[style*="grid-template-columns: 1fr 1.6fr"] {
                grid-template-columns: 1fr !important; gap: 32px !important;
              }
            }
          `}</style>
        </section>
      )}

      <ClosingCTA
        headline={d.ctaHeadline}
        subhead={d.ctaSubhead}
        primary={{ label: 'Request a Pilot', to: '/demo' }}
        secondary={{ label: 'Talk to the team', to: '/contact' }}
      />
    </>
  );
}

/* §12 — Security & Compliance */
const SECURITY_DATA = {
  n: '12',
  eyebrow: 'SECURITY & COMPLIANCE',
  title: 'Engineered for regulated environments.',
  subhead: 'Cortexa runs in operations where security and compliance posture is not optional. The platform is built with the access controls, audit trails, and segregation that regulated industries require.',
  heroPhotoTag: 'SECURE-AREA SIGN ON A STEEL DOOR',
  heroPhotoSrc: 'assets/platform-security-hero.png',
  accent: 'var(--coral)',
  capsEyebrow: 'CAPABILITIES',
  capsHeadline: <>Four controls every regulated environment expects.</>,
  capsSideNote: 'Cortexa is engineered to drop into a customer’s existing identity, audit, and access posture — not to ask them to change theirs.',
  caps: [
    { title: 'Role-based access control.', body: 'Every user is assigned to specific modules, risk domains, and sites. Field supervisors see only the events relevant to their crews; safety leads see only the hazard categories relevant to their function. Administrators see everything.' },
    { title: 'Per-domain segregation.', body: 'High-volume environments are partitioned so that detections from one operation never surface to users managing another. Each site, each business unit, each risk domain is isolated.' },
    { title: 'Audit logging.', body: 'Every detection, every supervisor decision, every system correction is logged with timestamps, identifiers, and full context. Audit trails are exportable in standard formats.' },
    { title: 'Identity integration.', body: 'Cortexa integrates with your existing identity provider (Active Directory / SSO / SAML / OIDC) so user lifecycle follows your organisation’s standard.' },
  ],
  tailEyebrow: 'OPERATIONAL SECURITY',
  tailHeadline: 'How we run, in plain language.',
  tailBody: 'Encrypted at rest, encrypted in transit. Segregated keys per site. No shared credentials across customers. No remote support without explicit per-incident authorisation. The platform you deploy is the platform you control — no operational backdoor, no telemetry, no model improvement loop that exports your data.',
  ctaHeadline: 'See the security posture in detail.',
  ctaSubhead: 'A 30-minute call covers RBAC, audit logging, identity integration, and the operational security posture for regulated deployments.',
};

/* §13 — Multi-Site & Multi-Channel */
const MULTISITE_DATA = {
  n: '13',
  eyebrow: 'MULTI-SITE & MULTI-CHANNEL',
  title: 'One platform. Every site. Every channel.',
  subhead: 'Cortexa is designed for organisations that run multiple operational sites, each with its own radio infrastructure, languages, and procedures — managed under a single unified control plane.',
  heroPhotoTag: 'INDUSTRIAL SITE MAP · ANNOTATED ON A WORKBENCH',
  heroPhotoSrc: 'assets/platform-multisite-hero.png',
  accent: 'var(--slate-100)',
  capsEyebrow: 'CAPABILITIES',
  capsHeadline: <>Three capabilities for organisations with more than one site.</>,
  capsSideNote: 'Per-site sovereignty stays intact. The control plane gives headquarters a single view without breaking the data boundary at any individual site.',
  caps: [
    { title: 'Per-site deployment, central management.', body: 'Each operational site runs its own self-contained Cortexa appliance, ensuring data sovereignty and uninterrupted operation if a network link drops. A unified control plane gives headquarters visibility across every site, with per-site role separation preserved.' },
    { title: 'Per-channel configuration.', body: 'Every radio channel can be configured independently — language pinning, crew assignment, monitoring rules, alert routing — so the platform reflects the way your operation actually runs.' },
    { title: 'Cross-site insight.', body: 'Retrospective analysis and reporting can run across sites, surfacing patterns — recurring hazard categories, procedural slips by shift, multilingual handover issues — that aren’t visible from a single site alone.' },
  ],
  tailEyebrow: null,
  ctaHeadline: 'Plan a multi-site rollout.',
  ctaSubhead: 'Most multi-site customers start with one site, prove the platform, and roll out the control plane in phase two.',
};

/* §14 — Integrations */
const INTEGRATIONS_DATA = {
  n: '14',
  eyebrow: 'INTEGRATIONS',
  title: 'Connects to the radio, identity, and operational systems you already run.',
  subhead: 'Cortexa is designed to slot into existing operational technology — your PTT/PMR network, your identity provider, your reporting stack, your operational tools. No rip-and-replace.',
  heroPhotoTag: 'RADIO RACK + NETWORK SWITCH · OPERATIONS CABINET',
  heroPhotoSrc: 'assets/platform-integrations-hero.png',
  accent: 'var(--teal)',
  capsEyebrow: 'INTEGRATION CATEGORIES',
  capsHeadline: <>Four categories. Customer-language only.</>,
  capsSideNote: 'Specific protocols, equipment compatibility, and certification levels are documented in pilot scoping conversations — not on the marketing page.',
  caps: [
    { title: 'PTT & PMR radio networks.', body: 'Cortexa connects to TETRA, DMR, P25, LTE-PTT, and broadband-PTT networks from the major equipment providers — Hytera, Sepura, Motorola, and others — to ingest channel audio at the network or device level.' },
    { title: 'Identity providers.', body: 'Cortexa integrates with your Active Directory, SAML, or OIDC identity provider so users, roles, and lifecycle are managed in your existing tooling.' },
    { title: 'Reporting & data warehousing.', body: 'Cortexa outputs structured detections, activity records, and audit trails in formats that drop into your existing reporting stack — BI tools, data warehouses, document management.' },
    { title: 'Notifications & messaging.', body: 'Alerts can be routed to email, SMS, in-app, or your existing operational messaging platform.' },
  ],
  tailEyebrow: null,
  ctaHeadline: 'Bring your stack. We’ll show you how it slots in.',
  ctaSubhead: 'Tell us what you run — radios, identity, reporting — and we’ll walk through exactly where Cortexa fits.',
};

function SecurityPage()     { return <PlatformDetailPage data={SECURITY_DATA} />; }
function MultiSitePage()    { return <PlatformDetailPage data={MULTISITE_DATA} />; }
function IntegrationsPage() { return <PlatformDetailPage data={INTEGRATIONS_DATA} />; }

/* =========================================
   §30 — LEGAL STUBS
   ========================================= */

const LEGAL = {
  privacy: {
    n: '30.1',
    eyebrow: 'LEGAL · PRIVACY',
    title: 'Privacy.',
    intro: 'How Cortexa handles personal data, in compact form. Full policy is issued by the contracting entity.',
    sections: [
      { h: 'What we collect.', p: 'Account information you provide when contacting us or initiating a pilot — name, work email, company, country, industry. Cortexa’s product processes operational voice data inside your perimeter; that data never reaches us.' },
      { h: 'Where it lives.', p: 'Marketing and contact data is held in our CRM, hosted in the contracting entity’s jurisdiction. Product operational data stays on your infrastructure under your control.' },
      { h: 'What we don’t do.', p: 'We don’t sell your data. We don’t use it to train external models. We don’t ship telemetry from your product deployment back to us.' },
      { h: 'Your rights.', p: 'Access, correction, deletion, and export — as granted by GDPR, CCPA, and equivalent regimes in your jurisdiction. Email the contracting entity below.' },
    ],
  },
  terms: {
    n: '30.2',
    eyebrow: 'LEGAL · TERMS',
    title: 'Terms.',
    intro: 'Terms of service issued by the contracting entity. Full versions provided at the time of pilot agreement or commercial contract.',
    sections: [
      { h: 'Who you are contracting with.', p: 'All customers contract with Cortexa Labs Ltd, registered in England and Wales and governed by the laws of England and Wales.' },
      { h: 'What we provide.', p: 'Access to the Cortexa platform and the modules you have licensed, deployed on infrastructure you control. Support during agreed hours.' },
      { h: 'Your responsibilities.', p: 'Operate the deployed system within applicable laws and regulations. Maintain access controls. Notify us of suspected security incidents.' },
      { h: 'Liability and termination.', p: 'Detailed in the full agreement at the time of contract.' },
    ],
  },
  cookies: {
    n: '30.3',
    eyebrow: 'LEGAL · COOKIES',
    title: 'Cookies.',
    intro: 'How this website handles cookies. The Cortexa product itself does not run in a browser session and uses no cookies.',
    sections: [
      { h: 'Strictly necessary.', p: 'A small number of cookies are used to maintain session state. These cannot be disabled.' },
      { h: 'Analytics.', p: 'We use a privacy-preserving analytics tool (Plausible or Fathom) that does not set tracking cookies. No third-party trackers are loaded.' },
      { h: 'Marketing.', p: 'No marketing cookies. No retargeting. No ad networks.' },
      { h: 'Changes.', p: 'If this changes, the policy here changes first and the cookie consent banner appears before any new cookie is set.' },
    ],
  },
};

function LegalPage({ slug }) {
  useReveal();
  const l = LEGAL[slug];
  if (!l) return <StubPage path={'/legal/' + slug} />;

  return (
    <>
      <section className="on-dark" style={{ paddingTop: 96, paddingBottom: 96, borderBottom: '1px solid rgba(255,255,255,0.06)' }}>
        <div className="container">
          <div className="eyebrow on-dark">{l.eyebrow}</div>
          <h1 style={{ fontSize: 'clamp(48px, 7vw, 88px)', color: '#fff', marginTop: 24, letterSpacing: '-0.035em' }}>
            {l.title}
          </h1>
          <p style={{ marginTop: 24, fontSize: 17, color: 'var(--slate-200)', maxWidth: '60ch', lineHeight: 1.6 }}>{l.intro}</p>
          <div style={{ marginTop: 40, padding: '20px 28px', border: '1px solid rgba(255,255,255,0.10)', maxWidth: 720, display: 'grid', gridTemplateColumns: 'auto 1fr', gap: '10px 24px', fontFamily: 'var(--font-mono)', fontSize: 12.5, color: 'var(--slate-100)' }}>
            <span style={{ color: 'var(--slate-400)', letterSpacing: '0.14em' }}>ISSUED BY</span>
            <span>Cortexa Labs Ltd</span>
            <span style={{ color: 'var(--slate-400)', letterSpacing: '0.14em' }}>GOVERNED BY</span>
            <span>Laws of England and Wales</span>
            <span style={{ color: 'var(--slate-400)', letterSpacing: '0.14em' }}>CONTACT</span>
            <span>hello@cortexalabs.uk</span>
          </div>
        </div>
      </section>

      <section className="section" style={{ background: 'var(--warm-white)' }}>
        <div className="container" style={{ maxWidth: 880 }}>
          {l.sections.map((s, i) => (
            <div key={i} className="reveal" style={{ paddingBlock: 36, borderBottom: i < l.sections.length - 1 ? '1px solid rgba(27,35,48,0.12)' : 'none' }}>
              <span className="font-mono" style={{ fontSize: 11, color: 'var(--ink-4)', letterSpacing: '0.14em' }}>{String(i+1).padStart(2,'0')}</span>
              <h2 style={{ fontSize: 28, marginTop: 10, marginBottom: 14, letterSpacing: '-0.02em' }}>{s.h}</h2>
              <p style={{ fontSize: 16.5, color: 'var(--ink-2)', lineHeight: 1.7, maxWidth: '64ch' }}>{s.p}</p>
            </div>
          ))}
          <p style={{ marginTop: 48, fontSize: 12.5, color: 'var(--ink-4)', fontFamily: 'var(--font-mono)', letterSpacing: '0.08em' }}>
            STUB POLICY · LAST UPDATED 2026-05-19 · FULL POLICY ISSUED BY THE CONTRACTING ENTITY ON COMMERCIAL ENGAGEMENT.
          </p>
        </div>
      </section>
    </>
  );
}

Object.assign(window, {
  ProductsHubPage,
  PlatformHubPage,
  SecurityPage, MultiSitePage, IntegrationsPage,
  LegalPage,
});
