/* =====================================================
   PARAGMATIQ, Platform pages
   /platform (hub)
   /platform/understanding
   /platform/data-sovereignty
   /platform/security
   /platform/multi-site
   /platform/integrations
   ===================================================== */

/* =========================
   §10 UNDERSTANDING, six promises
   ========================= */

const PROMISES = [
  { n: '01', title: 'It speaks your industry.',
    body: 'Permit-to-work, lockout-tagout, hot work, confined-space, hazardous-substance vocabulary, recognised on day one across every supported language. The vocabulary of industrial safety is the language the system was built for.',
    outcome: 'Industry terminology works from the first transmission, across every supported language.',
    plate: 'permit-board' },
  { n: '02', title: 'It learns your company\u2019s vocabulary.',
    body: 'Your equipment IDs, your callsigns, your team names, your operator accents, the system adapts to how your site actually speaks. No manual tagging. No spreadsheets of synonyms. The longer it runs in your environment, the sharper it gets.',
    outcome: 'Your terminology, your callsigns, your accent, all recognised correctly, with no manual tagging required.',
    plate: 'equipment-tag' },
  { n: '03', title: 'Multilingual, automatically.',
    body: 'English, Arabic, Spanish, French, Dutch, German, detected automatically on every transmission. Channels can be pinned to specific crews when accents or noise demand it. Mixed-language utterances are handled natively.',
    outcome: 'Six languages today, more added without taking the system offline.',
    plate: 'waveform' },
  { n: '04', title: 'It corrects itself before it acts.',
    body: 'Industrial radio is messy: similar-sounding callsigns, accented vowels, broken transmissions, character ambiguity in Arabic and other non-Latin scripts. Paragmatiq cross-checks every interpretation against context, speaker, channel, procedure, recent traffic, and refuses to act on low-confidence reads.',
    outcome: 'Fewer false positives, higher confidence on the alerts you do see.',
    plate: 'concept-flow' },
  { n: '05', title: 'Grounded in what was actually said.',
    body: 'Every alert points back to the exact transmission that triggered it, speaker, channel, timestamp, audio, transcript. If the platform can\u2019t cite the moment, the alert doesn\u2019t fire. Supervisors can play back any decision in seconds.',
    outcome: 'No hallucinated incidents. Every alert backed by playable, citable evidence.',
    plate: 'evidence' },
  { n: '06', title: 'Every correction logged. Every review counts.',
    body: 'When a supervisor confirms, dismisses, or re-routes a detection, that decision feeds back into the system\u2019s precision for your site, auditable, attributed, and reversible. The platform that ships on day one is not the platform you run on day thirty.',
    outcome: 'You can audit what changed. The system gets sharper the longer it runs.',
    plate: 'stack' },
];

function UnderstandingPage() {
  useReveal();
  return (
    <>
      {/* HERO */}
      <section className="on-navy hero-page">
        <div className="container">
          <div className="eyebrow on-dark"><span>THE INTELLIGENCE LAYER · PARAGMATIQ UNDERSTANDING</span></div>
          <h1>How Paragmatiq <span style={{ color: 'var(--gold)' }}>Understands</span>.</h1>
          <p className="subhead">
            The intelligence behind every Paragmatiq module, Voice, Safe, Ops, and Signal. Most voice-AI products fail in the field for the same reasons: accents, jargon, equipment names the system has never heard, multilingual crews, noisy channels, and casual phrasing. Paragmatiq Understanding is the intelligence layer beneath every module, and it is what makes them work in your environment, not in a lab.
          </p>
          <div className="hero-meta">
            <div className="hero-meta-cell"><span className="label">PROMISES</span><span className="value gold">6 · published</span></div>
            <div className="hero-meta-cell"><span className="label">HALLUCINATION RATE</span><span className="value">0 · grounded</span></div>
            <div className="hero-meta-cell"><span className="label">LANGUAGES</span><span className="value">EN · AR · ES · FR · NL · DE</span></div>
            <div className="hero-meta-cell"><span className="label">CONFIGURE</span><span className="value">Nothing · runs by default</span></div>
          </div>

          <div style={{ marginTop: 64, paddingBottom: 32 }}>
            <Plate kind="control-room" ratio="21/9" tag="WHAT THE PLATFORM LISTENS TO" corner={['DWG-U-101', 'UNDERSTANDING / HERO']} />
          </div>

          {/* Index strip, six promises, anchored */}
          <div className="index-strip" style={{ marginBottom: 64 }}>
            {PROMISES.map((p) => (
              <a key={p.n} href={`#promise-${p.n}`} className="index-strip-cell">
                <span className="index-title">{p.title.replace('.','')}</span>
              </a>
            ))}
          </div>
        </div>
      </section>

      {/* The six promises */}
      <section className="on-bone">
        {PROMISES.map((p, i) => (
          <div key={p.n} id={`promise-${p.n}`} className="promise-row" style={{ background: i % 2 === 0 ? 'var(--bone)' : 'var(--paper)' }}>
            <div className="container">
              <div className={'promise-grid ' + (i % 2 === 1 ? 'reverse' : '')}>
                <div className="promise-copy reveal">
                  <h2>{p.title}</h2>
                  <p>{p.body}</p>
                  <div className="outcome-card">
                    <span className="font-mono outcome-label">OUTCOME</span>
                    <p className="outcome-body">{p.outcome}</p>
                  </div>
                </div>
                <div className="promise-visual reveal">
                  <Plate kind={p.plate} ratio="4/3" light={i % 2 === 1} tag={p.title.toUpperCase().replace(/[.,]/g,'')} corner={['', 'UNDERSTANDING']} />
                </div>
              </div>
            </div>
          </div>
        ))}
        <style>{`
          .promise-row { padding-block: 96px; border-top: 1px solid rgba(10,31,68,0.14); }
          .promise-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 80px; align-items: center; }
          .promise-grid.reverse { grid-template-columns: 1fr 1.05fr; }
          .promise-grid.reverse .promise-copy { order: 2; }
          .promise-copy h2 {
            font-size: clamp(34px, 4vw, 52px);
            margin-top: 0;
            max-width: 16ch;
            letter-spacing: -0.035em;
            font-weight: 800;
            line-height: 1.0;
          }
          .promise-copy > p {
            margin-top: 24px;
            font-size: 17px;
            color: var(--ink-2);
            max-width: 50ch;
            line-height: 1.6;
          }
          .outcome-card {
            margin-top: 32px;
            padding: 22px 24px;
            border-left: 3px solid var(--gold);
            background: rgba(201,161,74,0.08);
            max-width: 56ch;
          }
          .outcome-label { font-size: 11px; color: var(--ink-4); letter-spacing: 0.16em; }
          .outcome-body { margin-top: 6px; font-family: var(--font-serif); font-style: italic; font-size: 17px; color: var(--ink); line-height: 1.5; }
          @media (max-width: 980px) {
            .promise-grid, .promise-grid.reverse { grid-template-columns: 1fr; gap: 40px; }
            .promise-grid.reverse .promise-copy { order: 0; }
            .promise-row { padding-block: 64px; }
          }
        `}</style>
      </section>

      {/* CLOSING, modules underneath */}
      <section className="section on-navy">
        <div className="container" style={{ textAlign: 'center', maxWidth: 880, marginInline: 'auto' }}>
          <SectionEyebrow text="UNDERNEATH EVERY MODULE" onDark />
          <h2 style={{ fontSize: 'clamp(34px, 4.4vw, 56px)', color: 'var(--paper)', marginTop: 20, maxWidth: '22ch', marginInline: 'auto', fontWeight: 800 }}>
            Paragmatiq Understanding runs underneath every module.
          </h2>
          <p style={{ marginTop: 24, fontSize: 17, color: 'var(--bone-3)', maxWidth: '64ch', marginInline: 'auto', lineHeight: 1.6 }}>
            You don't configure it. You don't buy it separately. It's the engine that makes the platform work in your environment from day one.
          </p>
          <div style={{ marginTop: 56, display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 1, background: 'var(--navy-line-2)' }}>
            {[
              { name: 'Paragmatiq Voice', to: '/products/voice' },
              { name: 'Paragmatiq Safe', to: '/products/safe' },
              { name: 'Paragmatiq Ops', to: '/products/ops' },
              { name: 'Paragmatiq Signal', to: '/products/signal' },
            ].map((m) => (
              <Link key={m.name} to={m.to} className="under-mod">
                <span>{m.name}</span>
                <span style={{ color: 'var(--gold)' }}>→</span>
              </Link>
            ))}
          </div>
        </div>
        <style>{`
          .under-mod {
            background: var(--navy);
            padding: 28px 24px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-family: var(--font-display);
            font-weight: 700;
            font-size: 16px;
            color: var(--paper);
            text-transform: uppercase;
            letter-spacing: 0.04em;
            transition: background 0.15s;
          }
          .under-mod:hover { background: var(--navy-2); }
          @media (max-width: 720px) {
            section.on-navy.section .under-mod { font-size: 14px; }
            section.on-navy.section [style*="grid-template-columns: repeat(4"] { grid-template-columns: 1fr 1fr !important; }
          }
        `}</style>
      </section>

      <ClosingCTA
        headline="Put Paragmatiq Understanding to work."
        subhead="Bring a recording from your operation. We'll show you what the platform recognises on day one, in your vocabulary, in your languages, at your accent."
        primary={{ label: 'Request a Pilot', to: '/demo' }}
        secondary={{ label: 'Talk to the team', to: '/contact' }}
      />
    </>
  );
}

/* =========================
   §11 DATA SOVEREIGNTY
   ========================= */

const SOV_GUARANTEES = [
  { n: '01', glyph: 'lock',       title: 'No external AI providers.',
    body: 'Every model, transcription, language understanding, detection, decision-making, runs locally on dedicated hardware you control. Paragmatiq does not call out to any third-party model API at any point in its pipeline.' },
  { n: '02', glyph: 'perimeter',  title: 'No data leaves your perimeter.',
    body: 'Voices, transcripts, detections, reports, audit trails, all of it stays inside your network boundary by design. There is no Paragmatiq cloud, no telemetry, no model improvement loop that exports your data.' },
  { n: '03', glyph: 'appliance',  title: 'One self-contained appliance per site.',
    body: 'A single dedicated host (Apple Mac Studio class) runs the full stack, transcription, intelligence layer, detection, storage, reporting. Multi-site deployments are managed from a unified control plane.' },
  { n: '04', glyph: 'export-no',  title: 'You own your data, end to end.',
    body: 'Storage retention, deletion policy, export rights, and access control are all yours to configure. Paragmatiq never retains a copy.' },
];

function GuaranteeGlyph({ kind }) {
  const c = 'var(--gold)';
  if (kind === 'lock') return (
    <svg width="48" height="48" viewBox="0 0 48 48" fill="none">
      <rect x="10" y="22" width="28" height="20" stroke={c} strokeWidth="1.4" />
      <path d="M 15 22 V 16 a 9 9 0 0 1 18 0 V 22" stroke={c} strokeWidth="1.4" />
      <circle cx="24" cy="32" r="2" fill={c} />
    </svg>
  );
  if (kind === 'perimeter') return (
    <svg width="48" height="48" viewBox="0 0 48 48" fill="none">
      <rect x="6" y="6" width="36" height="36" stroke={c} strokeWidth="1.4" strokeDasharray="4 4" />
      <circle cx="24" cy="24" r="6" stroke={c} strokeWidth="1.4" />
      <line x1="24" y1="18" x2="24" y2="6" stroke={c} strokeWidth="1.4" />
      <line x1="24" y1="30" x2="24" y2="42" stroke={c} strokeWidth="1.4" />
      <line x1="18" y1="24" x2="6" y2="24" stroke={c} strokeWidth="1.4" />
      <line x1="30" y1="24" x2="42" y2="24" stroke={c} strokeWidth="1.4" />
    </svg>
  );
  if (kind === 'appliance') return (
    <svg width="48" height="48" viewBox="0 0 48 48" fill="none">
      <rect x="6" y="14" width="36" height="20" stroke={c} strokeWidth="1.4" />
      <line x1="6" y1="22" x2="42" y2="22" stroke={c} strokeWidth="0.8" />
      {[0,1,2,3,4,5,6,7,8,9].map(i => <circle key={i} cx={10 + i*3.4} cy="18" r="0.9" fill={c} />)}
      <circle cx="38" cy="29" r="1.4" fill={c} />
    </svg>
  );
  if (kind === 'export-no') return (
    <svg width="48" height="48" viewBox="0 0 48 48" fill="none">
      <path d="M 18 24 H 38 L 32 18 M 38 24 L 32 30" stroke={c} strokeWidth="1.4" />
      <line x1="6" y1="6" x2="42" y2="42" stroke={c} strokeWidth="2" />
      <rect x="6" y="10" width="14" height="28" stroke={c} strokeWidth="1.4" />
    </svg>
  );
  return null;
}

const SOV_STANDARDS = [
  'ISO 27001 information security alignment (certification roadmap).',
  'GDPR by-design data handling for EU deployments.',
  'CCPA alignment for US deployments via Paragmatiq Systems Ltd.',
  'NIST cybersecurity framework alignment.',
  'ISO 45001 occupational health & safety alignment in product detection model.',
];

function SovereigntyPage() {
  useReveal();
  return (
    <>
      <section className="on-navy hero-page">
        <div className="container">
          <div className="eyebrow on-dark"><span>YOUR INFRASTRUCTURE · DATA SOVEREIGNTY</span></div>
          <h1>Your data stays where your <span style={{ color: 'var(--gold)' }}>operation</span> is.</h1>
          <p className="subhead">
            Paragmatiq is engineered for sovereign deployment from the ground up. Every model runs on your infrastructure. No external AI providers. No third-party data egress. No exceptions.
          </p>
          <div className="hero-meta">
            <div className="hero-meta-cell"><span className="label">EXTERNAL AI</span><span className="value gold">None. Ever.</span></div>
            <div className="hero-meta-cell"><span className="label">DEPLOYMENT</span><span className="value">Per-site appliance</span></div>
            <div className="hero-meta-cell"><span className="label">DATA EGRESS</span><span className="value">Zero</span></div>
            <div className="hero-meta-cell"><span className="label">OWNERSHIP</span><span className="value">Yours · end-to-end</span></div>
          </div>
          <div style={{ marginTop: 64, paddingBottom: 64 }}>
            <Plate kind="appliance" ratio="21/9" tag="APPLIANCE PER SITE · NO EGRESS" corner={['DWG-D-101', 'SOVEREIGNTY / HERO']} />
          </div>
        </div>
      </section>

      {/* Four guarantees */}
      <section className="section on-bone">
        <div className="container">
          <SectionHead
            eyebrow="THE FOUR GUARANTEES"
            headline={<>Four lines a procurement team can defend.</>}
            sideNote="The trust statement converts to a defensible procurement narrative. Each guarantee is a question your security team can audit against."
          />
          <div className="guarantee-grid">
            {SOV_GUARANTEES.map((g) => (
              <div key={g.n} className="guarantee-card reveal">
                <div className="guarantee-head">
                  <GuaranteeGlyph kind={g.glyph} />
                </div>
                <h3>{g.title}</h3>
                <p>{g.body}</p>
              </div>
            ))}
          </div>
        </div>
        <style>{`
          .guarantee-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 0;
            border-top: 1px solid rgba(10,31,68,0.18);
            border-bottom: 1px solid rgba(10,31,68,0.18);
          }
          .guarantee-card {
            background: var(--paper);
            padding: 40px 36px 48px;
            display: flex; flex-direction: column; gap: 14px;
            border-right: 1px solid rgba(10,31,68,0.14);
            border-bottom: 1px solid rgba(10,31,68,0.14);
          }
          .guarantee-card:nth-child(2n) { border-right: none; }
          .guarantee-card:nth-last-child(-n+2) { border-bottom: none; }
          .guarantee-head { display: flex; justify-content: flex-end; align-items: center; padding-bottom: 14px; border-bottom: 1px solid rgba(10,31,68,0.14); }
          .guarantee-card h3 { font-size: 26px; letter-spacing: -0.02em; max-width: 18ch; line-height: 1.1; }
          .guarantee-card p { font-size: 15px; color: var(--ink-3); line-height: 1.65; max-width: 52ch; }
          @media (max-width: 760px) {
            .guarantee-grid { grid-template-columns: 1fr; }
            .guarantee-card { border-right: none !important; border-bottom: 1px solid rgba(10,31,68,0.14) !important; }
            .guarantee-card:last-child { border-bottom: none !important; }
          }
        `}</style>
      </section>

      {/* Why this matters */}
      <section className="section on-paper">
        <div className="container" style={{ maxWidth: 920, marginInline: 'auto' }}>
          <SectionEyebrow text="WHY THIS MATTERS" />
          <h2 style={{ fontSize: 'clamp(28px, 3.4vw, 42px)', marginTop: 20, maxWidth: '24ch', fontWeight: 700, letterSpacing: '-0.025em' }}>
            Voice traffic is among the most sensitive data your operation produces.
          </h2>
          <p style={{ marginTop: 28, fontSize: 18, lineHeight: 1.65, color: 'var(--ink-2)' }}>
            It contains operator identities, equipment status, security-relevant communications, and, in regulated industries, material subject to specific data-residency laws. Any voice-AI product that routes this data through a third-party AI provider exposes you to that provider's contracts, breaches, and policy changes. Paragmatiq removes that exposure by design.
          </p>
        </div>
      </section>

      {/* Standards */}
      <section className="section-sm on-navy">
        <div className="container">
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', gap: 24, flexWrap: 'wrap' }}>
            <div>
              <SectionEyebrow text="STANDARDS & ALIGNMENT" onDark />
              <h2 style={{ fontSize: 'clamp(28px, 3.4vw, 42px)', color: 'var(--paper)', marginTop: 18, maxWidth: '20ch', fontWeight: 700 }}>
                Plain alignments. No over-claims.
              </h2>
            </div>
            <span className="font-mono" style={{ fontSize: 11, color: 'var(--ink-5)', letterSpacing: '0.16em' }}>{SOV_STANDARDS.length} ITEMS · NO INVENTED CERTIFICATIONS</span>
          </div>
          <ul className="standards-list">
            {SOV_STANDARDS.map((s, i) => (
              <li key={s} className="reveal">
                <span>{s}</span>
              </li>
            ))}
          </ul>
        </div>
        <style>{`
          .standards-list { list-style: none; padding: 0; margin: 40px 0 0; border-top: 1px solid var(--navy-line); }
          .standards-list li {
            display: block;
            padding: 22px 0;
            border-bottom: 1px solid var(--navy-line);
            font-size: 17px;
            color: var(--bone);
            align-items: baseline;
          }
        `}</style>
      </section>

      <ClosingCTA
        headline="Bring sovereign voice intelligence to your operation."
        subhead="A 30-minute call covers the full sovereignty posture, what runs locally, what doesn't leave your network, and what you control."
        primary={{ label: 'Request a Pilot', to: '/demo' }}
        secondary={{ label: 'Talk to the team', to: '/contact' }}
      />
    </>
  );
}

/* =========================
   PLATFORM HUB
   ========================= */

const PLATFORM_BANDS = [
  { n: '01', name: 'Paragmatiq 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.' },
  { n: '02', name: 'Data Sovereignty & Local AI', to: '/platform/data-sovereignty',
    eyebrow: 'YOUR INFRASTRUCTURE',
    line: 'Why every Paragmatiq deployment runs entirely on your own infrastructure, with no external AI providers.' },
  { n: '03', name: 'Security & Compliance', to: '/platform/security',
    eyebrow: 'REGULATED ENVIRONMENTS',
    line: 'How Paragmatiq is engineered for regulated environments, role-based access, audit logging, standards alignment.' },
  { 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.' },
  { n: '05', name: 'Integrations', to: '/platform/integrations',
    eyebrow: 'CONNECTS TO WHAT YOU RUN',
    line: 'How Paragmatiq connects to your existing PTT/PMR infrastructure, identity systems, and operational tools.' },
];

function PlatformHubPage() {
  useReveal();
  return (
    <>
      <section className="on-navy hero-page">
        <div className="container">
          <div className="eyebrow on-dark"><span>PLATFORM · FIVE CAPABILITY BANDS</span></div>
          <h1>The platform underneath <span style={{ color: 'var(--gold)' }}>every</span> Paragmatiq module.</h1>
          <p className="subhead">
            Paragmatiq 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 className="hero-meta">
            <div className="hero-meta-cell"><span className="label">BANDS</span><span className="value gold">5</span></div>
            <div className="hero-meta-cell"><span className="label">INHERITED BY</span><span className="value">Voice · Safe · Ops · Signal</span></div>
            <div className="hero-meta-cell"><span className="label">DEPLOYMENT</span><span className="value">On your hardware</span></div>
            <div className="hero-meta-cell"><span className="label">CONFIGURED</span><span className="value">Per channel · per site</span></div>
          </div>
          <div style={{ marginTop: 64, paddingBottom: 64 }}>
            <Plate kind="stack" ratio="21/9" tag="PLATFORM STACK" corner={['DWG-P-100', 'PLATFORM / HUB']} />
          </div>
        </div>
      </section>

      {/* Bands as full-width rows */}
      <section className="on-bone" style={{ paddingTop: 0 }}>
        <div className="container" style={{ padding: '80px var(--gutter) 0' }}>
          <SectionHead
            eyebrow="FIVE CAPABILITY BANDS"
            headline={<>What the platform does, before any module is enabled.</>}
          />
        </div>
        <ul className="platform-bands">
          {PLATFORM_BANDS.map((b) => (
            <li key={b.n}>
              <Link to={b.to} className="platform-band reveal">
                <div className="container">
                  <div className="platform-band-inner">
                    <div className="platform-band-body">
                      <span className="font-mono" style={{ fontSize: 11, color: 'var(--gold-3)', letterSpacing: '0.18em' }}>{b.eyebrow}</span>
                      <h2>{b.name}</h2>
                      <p>{b.line}</p>
                    </div>
                    <div className="platform-band-cta">
                      <span style={{ color: 'var(--gold)' }}>Read this band →</span>
                    </div>
                  </div>
                </div>
              </Link>
            </li>
          ))}
        </ul>
        <style>{`
          .platform-bands { list-style: none; padding: 0; margin: 40px 0 0; border-top: 1px solid rgba(10,31,68,0.18); }
          .platform-bands li { border-bottom: 1px solid rgba(10,31,68,0.14); }
          .platform-band { display: block; color: var(--ink); padding: 56px 0; transition: background 0.18s ease; }
          .platform-band:hover { background: var(--bone-2); }
          .platform-band-inner { display: grid; grid-template-columns: 1fr auto; gap: 56px; align-items: center; }
          .platform-band-body h2 { font-size: clamp(32px, 4vw, 52px); letter-spacing: -0.03em; margin-top: 10px; max-width: 22ch; font-weight: 800; }
          .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.18em; text-transform: uppercase; }
          @media (max-width: 920px) {
            .platform-band-inner { grid-template-columns: 1fr; }
            .platform-band-cta { grid-column: 1 / -1; }
          }
        `}</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' }}
      />
    </>
  );
}

/* =========================
   Shared template for Security / Multi-site / Integrations
   ========================= */

function PlatformDetailPage({ data }) {
  useReveal();
  const d = data;
  return (
    <>
      <section className="on-navy hero-page">
        <div className="container">
          <div className="eyebrow on-dark"><span>PLATFORM · {d.eyebrow}</span></div>
          <h1>{d.title}</h1>
          <p className="subhead">{d.subhead}</p>
          {d.meta && (
            <div className="hero-meta">
              {d.meta.map((m, i) => (
                <div key={i} className="hero-meta-cell"><span className="label">{m.label}</span><span className={'value ' + (m.gold ? 'gold' : '')}>{m.value}</span></div>
              ))}
            </div>
          )}
          <div style={{ marginTop: 64, paddingBottom: 64 }}>
            <Plate kind={d.plateKind || 'topology'} ratio="21/9" tag={d.heroPlateTag || d.eyebrow} corner={[d.heroPlateCorner || ('DWG-P-' + (d.n || '101')), d.eyebrow]} />
          </div>
        </div>
      </section>

      <section className="section on-bone">
        <div className="container">
          <SectionHead
            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 style={{ width: 24, height: 2, background: 'var(--gold)' }} />
                </div>
                <h3>{c.title}</h3>
                <p>{c.body}</p>
              </div>
            ))}
          </div>
        </div>
        <style>{`
          .platform-caps { display: grid; gap: 0; border-top: 1px solid rgba(10,31,68,0.18); border-bottom: 1px solid rgba(10,31,68,0.18); }
          .platform-caps.three { grid-template-columns: repeat(3, 1fr); }
          .platform-caps.four { grid-template-columns: repeat(2, 1fr); }
          .platform-cap {
            background: var(--paper);
            padding: 40px 36px 48px;
            display: flex; flex-direction: column; gap: 16px;
            border-right: 1px solid rgba(10,31,68,0.14);
            border-bottom: 1px solid rgba(10,31,68,0.14);
          }
          .platform-caps.three .platform-cap:nth-child(3n) { border-right: none; }
          .platform-caps.four .platform-cap:nth-child(2n) { border-right: none; }
          .platform-caps.three .platform-cap:nth-last-child(-n+3) { border-bottom: none; }
          .platform-caps.four .platform-cap:nth-last-child(-n+2) { border-bottom: none; }
          .platform-cap-head { padding-bottom: 4px; }
          .platform-cap h3 { font-size: 24px; letter-spacing: -0.02em; max-width: 22ch; line-height: 1.15; }
          .platform-cap p { font-size: 15px; color: var(--ink-3); line-height: 1.65; max-width: 52ch; }
          @media (max-width: 920px) {
            .platform-caps.three, .platform-caps.four { grid-template-columns: 1fr; }
            .platform-cap { border-right: none !important; }
          }
        `}</style>
      </section>

      {d.tailEyebrow && (
        <section className="section-sm on-paper" style={{ borderTop: '1px solid rgba(10,31,68,0.14)' }}>
          <div className="container" style={{ display: 'grid', gridTemplateColumns: '1fr 1.6fr', gap: 64 }}>
            <div>
              <SectionEyebrow text={d.tailEyebrow} />
              <h2 style={{ fontSize: 'clamp(24px, 2.8vw, 34px)', marginTop: 14, maxWidth: '14ch', fontWeight: 700 }}>{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 <span style={{ color: 'var(--gold)' }}>regulated</span> environments.</>,
  subhead: 'Paragmatiq 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.',
  meta: [
    { label: 'ACCESS', value: 'RBAC · per site · per domain', gold: true },
    { label: 'AUDIT', value: 'Every decision logged' },
    { label: 'IDENTITY', value: 'AD / SAML / OIDC' },
    { label: 'OPS SECURITY', value: 'Per-incident authorisation' },
  ],
  plateKind: 'topology',
  heroPlateTag: 'ROLE-BASED ACCESS · PER-DOMAIN SEGREGATION',
  capsEyebrow: 'CAPABILITIES',
  capsHeadline: <>Four controls every regulated environment expects.</>,
  capsSideNote: 'Paragmatiq is engineered to drop into a customer\u2019s 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: 'Paragmatiq integrates with your existing identity provider (Active Directory / SSO / SAML / OIDC) so user lifecycle follows your organisation\u2019s 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. <span style={{ color: 'var(--gold)' }}>Every</span> site. Every channel.</>,
  subhead: 'Paragmatiq 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.',
  meta: [
    { label: 'PER SITE', value: 'Self-contained appliance', gold: true },
    { label: 'CONTROL PLANE', value: 'Unified · cross-site' },
    { label: 'CHANNELS', value: 'Per-channel config' },
    { label: 'NETWORK DROP', value: 'Each site stays up' },
  ],
  plateKind: 'topology',
  heroPlateTag: 'MULTI-SITE TOPOLOGY · CONTROL PLANE',
  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 Paragmatiq 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\u2019t 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 systems you <span style={{ color: 'var(--gold)' }}>already run</span>.</>,
  subhead: 'Paragmatiq 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.',
  meta: [
    { label: 'PTT / PMR', value: 'TETRA · DMR · P25 · LTE-PTT', gold: true },
    { label: 'IDENTITY', value: 'AD · SAML · OIDC' },
    { label: 'REPORTING', value: 'BI · warehouse · DM' },
    { label: 'ALERTS', value: 'Email · SMS · in-app' },
  ],
  plateKind: 'topology',
  heroPlateTag: 'INTEGRATIONS · OPS CABINET',
  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: 'Paragmatiq 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: 'Paragmatiq 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: 'Paragmatiq 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\u2019ll show you how it slots in.',
  ctaSubhead: 'Tell us what you run, radios, identity, reporting, and we\u2019ll walk through exactly where Paragmatiq fits.',
};

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

Object.assign(window, {
  UnderstandingPage,
  SovereigntyPage,
  PlatformHubPage,
  SecurityPage, MultiSitePage, IntegrationsPage,
  PlatformDetailPage,
});