/* =====================================================
   PARAGMATIQ, Product detail pages + hub
   Voice · Safe · Ops · Signal · /products
   ===================================================== */

/* ---- Shared product hero ---- */
function ProductHero({ eyebrow, headline, subhead, ctaPrimary, ctaSecondary, plateKind, plateTag, plateCorner, meta }) {
  return (
    <section className="on-navy hero-page" style={{ position: 'relative', overflow: 'hidden' }}>
      <div className="container">
        <div className="eyebrow on-dark"><span>{eyebrow}</span></div>
        <h1>{headline}</h1>
        <p className="subhead">{subhead}</p>
        <div style={{ marginTop: 40, display: 'flex', gap: 16, flexWrap: 'wrap' }}>
          <Link to={ctaPrimary.to} className="btn btn-primary">{ctaPrimary.label} <span className="arrow">→</span></Link>
          <Link to={ctaSecondary.to} className="btn btn-ghost-dark">{ctaSecondary.label} <span className="arrow">→</span></Link>
        </div>
        {meta && (
          <div className="hero-meta">
            {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={plateKind} ratio="21/9" tag={plateTag} corner={plateCorner} />
        </div>
      </div>
    </section>
  );
}

/* ---- Scenario band, navy backdrop, text-led ---- */
function ScenarioBand({ eyebrow, headline, body, plateKind, plateCorner }) {
  return (
    <section className="on-navy" style={{ position: 'relative', overflow: 'hidden', borderTop: '1px solid var(--navy-line)' }}>
      <div style={{ position: 'absolute', inset: 0, opacity: 0.18 }}>
        <Plate kind={plateKind} ratio="auto" tag="" corner={['', '']} style={{ height: '100%', aspectRatio: 'auto', border: 'none' }} />
      </div>
      <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(10,31,68,0.82), rgba(10,31,68,0.96))' }} />
      <div className="container" style={{ position: 'relative', paddingBlock: 112, maxWidth: 1000 }}>
        <SectionEyebrow text={eyebrow} onDark />
        <h2 style={{ fontSize: 'clamp(32px, 4vw, 52px)', marginTop: 18, color: 'var(--paper)', maxWidth: '22ch', fontWeight: 700, letterSpacing: '-0.025em' }}>{headline}</h2>
        <p style={{ marginTop: 28, fontSize: 18.5, lineHeight: 1.7, color: 'var(--bone-3)', maxWidth: '64ch' }}>{body}</p>
      </div>
    </section>
  );
}

/* ---- Outcome columns (3 across, paper bg) ---- */
function OutcomeColumns({ eyebrow, headline, items }) {
  return (
    <section className="section-sm on-paper" style={{ borderTop: '1px solid rgba(10,31,68,0.14)' }}>
      <div className="container">
        <SectionEyebrow text={eyebrow} />
        <h2 style={{ fontSize: 'clamp(28px, 3.4vw, 44px)', marginTop: 18, marginBottom: 48, maxWidth: '28ch', fontWeight: 700 }}>{headline}</h2>
        <div className="outcome-grid">
          {items.map((it, i) => (
            <div key={i} className="reveal outcome-cell">
              <h3>{it.title}</h3>
              <p>{it.body}</p>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        .outcome-grid {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 0;
          border-top: 1px solid rgba(10,31,68,0.18);
          border-bottom: 1px solid rgba(10,31,68,0.18);
        }
        .outcome-cell {
          padding: 36px 32px;
          border-right: 1px solid rgba(10,31,68,0.14);
          display: flex;
          flex-direction: column;
          gap: 14px;
        }
        .outcome-cell:last-child { border-right: none; }
        .outcome-cell h3 { font-size: 22px; letter-spacing: -0.015em; max-width: 22ch; line-height: 1.15; }
        .outcome-cell p { font-size: 14.5px; color: var(--ink-3); line-height: 1.65; }
        @media (max-width: 920px) {
          .outcome-grid { grid-template-columns: 1fr; }
          .outcome-cell { border-right: none; border-bottom: 1px solid rgba(10,31,68,0.14); }
          .outcome-cell:last-child { border-bottom: none; }
        }
      `}</style>
    </section>
  );
}

/* =====================================================
   VOICE, foundation module
   ===================================================== */

function VoicePage() {
  useReveal();
  const blocks = [
    {
      n: '01', title: 'Live operations view.',
      body: 'A real-time view of every active channel, who is talking, in which language, and what monitors are watching. Control-room operators get the operational picture without leaving the page.',
      kind: 'control-room',
    },
    {
      n: '02', title: 'Conversation threading.',
      body: 'Fragmented PTT transmissions are automatically grouped into the conversations they belong to, by speaker, channel, and timing, so safety and operations teams see coherent operational events instead of disconnected clips.',
      kind: 'evidence',
    },
    {
      n: '03', title: 'Multilingual transcription.',
      body: 'Every transmission is transcribed in the language being spoken, with automatic detection across six languages. Channels can be pinned to specific crews when accents or noise demand it.',
      kind: 'waveform',
    },
    {
      n: '04', title: 'Knowledge & entity recognition.',
      body: 'Equipment names, procedures, and team callsigns are recognised in context. Voice connects what people say to what they are talking about, the asset, the location, the procedure, so every conversation arrives with meaning, not just words.',
      kind: 'equipment-tag',
    },
  ];

  return (
    <>
      <ProductHero
        eyebrow="PARAGMATIQ VOICE, THE FOUNDATION MODULE"
        headline={<>Your radios become <span style={{ color: 'var(--gold)' }}>structured data</span>.</>}
        subhead="Paragmatiq Voice 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. It is the foundation every other Paragmatiq module stands on."
        ctaPrimary={{ label: 'Request a Pilot', to: '/demo' }}
        ctaSecondary={{ label: 'See Paragmatiq Understanding', to: '/platform/understanding' }}
        plateKind="control-room"
        plateTag="CONTROL ROOM · MULTI-CHANNEL"
        plateCorner={['DWG-V-101', 'VOICE / HERO']}
        meta={[
          { label: 'CHANNELS', value: 'PTT · PMR · TETRA · DMR', gold: true },
          { label: 'LANGUAGES', value: '6 · Auto-detect' },
          { label: 'OUTPUT', value: 'Structured records' },
          { label: 'FOUNDATION FOR', value: 'Safe · Ops · Signal' },
        ]}
      />

      {/* What Voice does, 4 alternating capability blocks */}
      <section className="section on-bone">
        <div className="container">
          <SectionHead
            eyebrow="WHAT VOICE DOES"
            headline={<>Captured. Threaded. Translated. <span style={{ color: 'var(--ink-3)' }}>Understood.</span></>}
            sideNote="Four foundation capabilities run continuously on every channel. Everything else in the Paragmatiq portfolio is built on top."
          />
          <div className="voice-blocks">
            {blocks.map((b, i) => (
              <div key={b.n} className={'voice-block reveal ' + (i % 2 === 1 ? 'reverse' : '')}>
                <div className="voice-block-copy">
                  <h3>{b.title}</h3>
                  <p>{b.body}</p>
                </div>
                <div className="voice-block-visual">
                  <Plate kind={b.kind} ratio="4/3" tag={b.title.toUpperCase().replace('.', '')} corner={['', 'VOICE']} />
                </div>
              </div>
            ))}
          </div>
        </div>
        <style>{`
          .voice-blocks { display: flex; flex-direction: column; gap: 96px; }
          .voice-block {
            display: grid;
            grid-template-columns: 1fr 1.1fr;
            gap: 72px;
            align-items: center;
          }
          .voice-block.reverse { grid-template-columns: 1.1fr 1fr; }
          .voice-block.reverse .voice-block-copy { order: 2; }
          .voice-block-copy h3 {
            font-size: clamp(28px, 3.2vw, 42px);
            font-weight: 800;
            letter-spacing: -0.03em;
            margin-top: 18px;
            margin-bottom: 22px;
            max-width: 18ch;
            line-height: 1.05;
          }
          .voice-block-copy p {
            font-size: 16px;
            color: var(--ink-2);
            max-width: 48ch;
            line-height: 1.6;
          }
          @media (max-width: 980px) {
            .voice-block, .voice-block.reverse { grid-template-columns: 1fr; gap: 32px; }
            .voice-block.reverse .voice-block-copy { order: 0; }
          }
        `}</style>
      </section>

      <section className="section-sm on-paper" style={{ borderTop: '1px solid rgba(10,31,68,0.14)' }}>
        <div className="container">
          <SectionEyebrow text="WHAT YOU CAN DO WITH VOICE" />
          <h2 style={{ fontSize: 'clamp(28px, 3.4vw, 44px)', marginTop: 18, marginBottom: 48, maxWidth: '28ch', fontWeight: 700 }}>
            Three outcomes most teams discover in the first month.
          </h2>
          <div className="usecase-list">
            {[
              { head: 'Search every conversation that ever happened on your radios.', to: '/solutions/multilingual-operations', label: 'Multilingual Field Operations' },
              { head: 'Reconstruct any incident, end to end.', to: '/solutions/incident-detection', label: 'Incident Detection & Reconstruction' },
              { head: 'One operational record of truth across multilingual crews.', to: '/solutions/multilingual-operations', label: 'Multilingual Field Operations' },
            ].map((u, i) => (
              <Link key={i} to={u.to} className="usecase-row reveal">
                <h4>{u.head}</h4>
                <span className="usecase-link">{u.label} →</span>
              </Link>
            ))}
          </div>
        </div>
        <style>{`
          .usecase-list { display: flex; flex-direction: column; border-top: 1px solid rgba(10,31,68,0.18); }
          .usecase-row {
            display: grid;
            grid-template-columns: 1fr auto;
            gap: 32px;
            align-items: center;
            padding: 32px 0;
            border-bottom: 1px solid rgba(10,31,68,0.14);
            transition: padding 0.18s ease, background 0.18s ease;
            color: var(--ink);
          }
          .usecase-row:hover { padding-left: 16px; background: rgba(201,161,74,0.06); }
          .usecase-row h4 {
            font-family: var(--font-display);
            font-size: clamp(20px, 2.2vw, 28px);
            font-weight: 700;
            letter-spacing: -0.02em;
            line-height: 1.2;
          }
          .usecase-link {
            font-size: 11px;
            color: var(--gold-3);
            font-family: var(--font-mono);
            letter-spacing: 0.16em;
            text-transform: uppercase;
          }
          @media (max-width: 720px) {
            .usecase-row { grid-template-columns: 1fr; gap: 8px; }
          }
        `}</style>
      </section>

      <CrossLinkBand
        title="Voice is built on Paragmatiq Understanding."
        body="The intelligence layer that handles your industry vocabulary, your company-specific terms, six languages, and the messy reality of radio noise. Six promises behind every alert."
        links={[
          { label: 'Paragmatiq Understanding', to: '/platform/understanding' },
          { label: 'Paragmatiq Safe', to: '/products/safe' },
          { label: 'Paragmatiq Ops', to: '/products/ops' },
          { label: 'Paragmatiq Signal', to: '/products/signal' },
        ]}
      />

      <ClosingCTA
        headline="Make your radios speak in structured data."
        subhead="Start with a scoped pilot on a single site. We'll meet your radio environment, your languages, and your vocabulary where they are."
        primary={{ label: 'Request a Pilot', to: '/demo' }}
        secondary={{ label: 'Talk to the team', to: '/contact' }}
      />
    </>
  );
}

/* =====================================================
   SAFE, safety intelligence
   ===================================================== */

const SAFE_CAPABILITIES = [
  { title: 'Permit-to-Work compliance', body: 'Detects when permits are issued, modified, or breached in radio traffic; flags missing watchers, conflicting permits, or violations.' },
  { title: 'Confined-space risk',       body: 'Recognises confined-space entry mentions and verifies the required communications were made.' },
  { title: 'Hot work & ignition risk',  body: 'Detects hot-work activity adjacent to flammable operations or unauthorised areas.' },
  { title: 'Hazardous-substance mentions', body: 'H₂S, hydrogen sulfide, chlorine, ammonia, and other hazard keywords trigger immediate escalation.' },
  { title: 'Incidents in progress',     body: 'Identifies the language of an incident as it unfolds, "I need medical", "shut down the line", "evacuate", and routes it.' },
  { title: 'Near-misses',               body: 'Captures and structures the conversational signals of near-misses that today often go unreported.' },
];

function SafePage() {
  useReveal();
  return (
    <>
      <ProductHero
        eyebrow="PARAGMATIQ SAFE, SAFETY INTELLIGENCE"
        headline={<>Every conversation, watched for the things that put your people at <span style={{ color: 'var(--red)' }}>risk</span>.</>}
        subhead="Paragmatiq Safe listens to every radio transmission, every PTT exchange, every submitted report, and flags 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 is backed by playable evidence and routed to the right person within seconds."
        ctaPrimary={{ label: 'Request a Pilot', to: '/demo' }}
        ctaSecondary={{ label: 'See use cases', to: '/solutions/permit-to-work' }}
        plateKind="refinery"
        plateTag="REFINERY · HAZARD MONITORING"
        plateCorner={['DWG-S-101', 'SAFE / HERO']}
        meta={[
          { label: 'CATEGORIES', value: '6 · safety event types', gold: true },
          { label: 'ALERT LATENCY', value: '< 5s typical' },
          { label: 'EVIDENCE', value: 'Audio · transcript · entity' },
          { label: 'TUNING', value: 'Continuous · per-site' },
        ]}
      />

      <section className="section on-bone">
        <div className="container">
          <SectionHead
            eyebrow="WHAT SAFE DETECTS"
            headline={<>Six categories of safety event, watched continuously, across every channel.</>}
            sideNote="Each category arrives with the audio, transcript, entities involved, and a precision score tuned to your site over time."
          />
          <div className="cap-grid">
            {SAFE_CAPABILITIES.map((c, i) => (
              <div key={i} className="cap-card reveal">
                <h3>{c.title}</h3>
                <p>{c.body}</p>
              </div>
            ))}
          </div>
        </div>
        <style>{`
          .cap-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 0;
            border-top: 1px solid rgba(10,31,68,0.18);
            border-bottom: 1px solid rgba(10,31,68,0.18);
          }
          .cap-card {
            padding: 36px 32px;
            display: flex;
            flex-direction: column;
            gap: 12px;
            min-height: 260px;
            background: var(--paper);
            border-right: 1px solid rgba(10,31,68,0.14);
            border-bottom: 1px solid rgba(10,31,68,0.14);
          }
          .cap-card:nth-child(3n) { border-right: none; }
          .cap-card:nth-last-child(-n+3) { border-bottom: none; }
          .cap-card h3 { font-size: 22px; letter-spacing: -0.015em; max-width: 20ch; line-height: 1.15; }
          .cap-card p { font-size: 14.5px; color: var(--ink-3); line-height: 1.6; }
          @media (max-width: 920px) {
            .cap-grid { grid-template-columns: 1fr 1fr; }
            .cap-card:nth-child(3n) { border-right: 1px solid rgba(10,31,68,0.14); }
            .cap-card:nth-child(2n) { border-right: none; }
          }
          @media (max-width: 620px) {
            .cap-grid { grid-template-columns: 1fr; }
            .cap-card { border-right: none !important; border-bottom: 1px solid rgba(10,31,68,0.14) !important; }
            .cap-card:last-child { border-bottom: none !important; }
          }
        `}</style>
      </section>

      <ScenarioBand
        eyebrow="HOW SAFE SHOWS UP ON SHIFT"
        headline="02:14 in the morning. Channel 7."
        body={<>A field operator on Channel 7 mentions a strong smell of gas near tank farm B. Within four seconds, Paragmatiq Safe has flagged the transmission, identified Tank Farm B as a known asset, paired it to the live permit-to-work record showing that hot work is in progress 80 metres away, and pushed an alert to the night supervisor's screen with the original audio and a transcribed and translated summary. By 02:14:12, the supervisor has paused the hot-work permit. By 02:15, two additional team members have been dispatched to investigate. The system files an activity record with full evidence chain for the post-shift review.</>}
        plateKind="alarm-timeline"
        plateCorner={['DWG-S-103', 'SCENARIO']}
      />

      <OutcomeColumns
        eyebrow="OUTPUTS YOU CAN DEFEND"
        headline="Three artefacts your safety team can take to an audit."
        items={[
          { title: 'Audit-ready activity records.', body: 'Every detection writes a structured record with the original audio, the transcript, the entities involved, the supervisor decisions, and the resulting tasks.' },
          { title: 'Evidence-grade incident reports.', body: 'Generated in your reporting templates, in any supported language, including verbatim transcript citations.' },
          { title: 'Continuous improvement.', body: 'Every review your supervisors run sharpens precision for your site. The system gets better the longer it runs.' },
        ]}
      />

      <CrossLinkBand
        title="Safe is built on Paragmatiq Understanding."
        body="The intelligence layer that handles your industry vocabulary, your company-specific terms, six languages, and the messy reality of radio noise. Six promises behind every alert."
        links={[
          { label: 'Paragmatiq Understanding', to: '/platform/understanding' },
          { label: 'Paragmatiq Voice', to: '/products/voice' },
          { label: 'Paragmatiq Ops', to: '/products/ops' },
          { label: 'Paragmatiq Signal', to: '/products/signal' },
        ]}
      />

      <ClosingCTA
        headline="See what Safe would have caught in your operation last month."
        subhead="Bring us 30 days of radio. We'll show you the safety events the system flags, with playable evidence behind every one."
        primary={{ label: 'Request a Pilot', to: '/demo' }}
        secondary={{ label: 'Talk to the team', to: '/contact' }}
      />
    </>
  );
}

/* =====================================================
   OPS, operational intelligence
   ===================================================== */

const OPS_CAPABILITIES = [
  {
    n: '01', title: 'Operator rounds.',
    body: 'Define what should be said at each checkpoint of a round, equipment IDs, observations, value thresholds. Paragmatiq Ops verifies each checkpoint was visited, what was observed, and whether anything fell outside the expected range.',
    kind: 'equipment-tag',
  },
  {
    n: '02', title: 'Startup / shutdown procedures.',
    body: 'Verify the required communications happen in the required order during plant or equipment startup, shutdown, switching, and emergency drills. Closure produces a pass / partial / not-completed verdict with attached transcripts.',
    kind: 'procedure',
  },
  {
    n: '03', title: 'Shift handover integrity.',
    body: "Paragmatiq Ops generates a structured handover summary at the end of each shift, open permits, in-progress work, unresolved incidents, and verifies the incoming crew acknowledged it. Nothing falls between shifts.",
    kind: 'shift-board',
  },
];

function OpsPage() {
  useReveal();
  return (
    <>
      <ProductHero
        eyebrow="PARAGMATIQ OPS, OPERATIONAL INTELLIGENCE"
        headline={<>The right communications, in the right order, at the <span style={{ color: 'var(--gold)' }}>right time</span>.</>}
        subhead="Paragmatiq Ops verifies that operator rounds, startup and shutdown procedures, equipment handovers, and shift transitions actually happen the way your operating procedures say they should. When they don't, you know within minutes, not at the end of the quarter."
        ctaPrimary={{ label: 'Request a Pilot', to: '/demo' }}
        ctaSecondary={{ label: 'See use cases', to: '/solutions/procedural-compliance' }}
        plateKind="procedure"
        plateTag="OPERATOR ROUND · CHECKPOINTS"
        plateCorner={['DWG-O-101', 'OPS / HERO']}
        meta={[
          { label: 'PROCEDURES', value: 'Rounds · Startup · Handover', gold: true },
          { label: 'VERDICT', value: 'Pass / Partial / Not-completed' },
          { label: 'LATENCY', value: 'Minutes, not quarters' },
          { label: 'AUDIT', value: 'Full transcript chain' },
        ]}
      />

      <section className="section on-bone">
        <div className="container">
          <SectionHead
            eyebrow="WHAT OPS VERIFIES"
            headline={<>Three procedural moments where slips matter most.</>}
            sideNote="Define the procedure once. Paragmatiq watches every instance of it across every channel, in every supported language."
          />
          <div className="ops-blocks">
            {OPS_CAPABILITIES.map((c) => (
              <div key={c.n} className="ops-block reveal">
                <div className="ops-photo">
                  <Plate kind={c.kind} ratio="4/3" tag={c.title.toUpperCase()} corner={['', 'OPS']} />
                </div>
                <div className="ops-copy">
                  <h3>{c.title}</h3>
                  <p>{c.body}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
        <style>{`
          .ops-blocks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; }
          .ops-block { display: flex; flex-direction: column; gap: 24px; }
          .ops-copy h3 { font-size: 24px; max-width: 18ch; letter-spacing: -0.015em; line-height: 1.15; }
          .ops-copy p { font-size: 15px; color: var(--ink-3); line-height: 1.6; margin-top: 12px; }
          @media (max-width: 920px) { .ops-blocks { grid-template-columns: 1fr; } }
        `}</style>
      </section>

      <ScenarioBand
        eyebrow="HOW OPS SHOWS UP ON SHIFT"
        headline="06:35. Unit 4. One checkpoint missing."
        body={<>A daily operator round on Unit 4 is scheduled for 06:00. By 06:35, Paragmatiq Ops sees that the operator on Channel 3 has acknowledged seven of the eight required checkpoints, but Pump P-406 has not been mentioned. Ops opens a partial-completion record, attaches the call audio that did happen, and notifies the day-shift supervisor before the round closes. The supervisor either confirms the operator visited P-406 silently (manual override, logged) or dispatches them back. Either way, the audit trail is complete.</>}
        plateKind="procedure"
        plateCorner={['DWG-O-103', 'SCENARIO']}
      />

      <OutcomeColumns
        eyebrow="OUTPUTS"
        headline="Three artefacts that go straight into your operational record."
        items={[
          { title: 'Procedural compliance records.', body: 'A structured pass / partial / not-completed result for every monitored procedure, with attached transcripts.' },
          { title: 'Shift handover summaries.', body: 'Generated automatically at end of shift, in the language each crew speaks, acknowledging open work and unresolved items.' },
          { title: 'Pattern reports.', body: 'Retrospective analysis of which procedures slip most often, on which shifts, in which conditions, feeding directly into your operational improvement programme.' },
        ]}
      />

      <CrossLinkBand
        title="Ops is built on Paragmatiq Understanding."
        body="The intelligence layer that handles your industry vocabulary, your company-specific terms, six languages, and the messy reality of radio noise."
        links={[
          { label: 'Paragmatiq Understanding', to: '/platform/understanding' },
          { label: 'Paragmatiq Voice', to: '/products/voice' },
          { label: 'Paragmatiq Safe', to: '/products/safe' },
          { label: 'Paragmatiq Signal', to: '/products/signal' },
        ]}
      />

      <ClosingCTA
        headline="See where your procedures actually slip."
        subhead="Pick one procedure. We'll show you, across 30 days of your radio traffic, how often it completed, where it slipped, and on which shifts."
        primary={{ label: 'Request a Pilot', to: '/demo' }}
        secondary={{ label: 'Talk to the team', to: '/contact' }}
      />
    </>
  );
}

/* =====================================================
   SIGNAL, custom intelligence
   ===================================================== */

const SIGNAL_STEPS = [
  { n: '01', title: 'Define a concept the way you describe it.',
    body: 'Operators tell the system, in plain language, what they want to detect, the words that anchor it, the signals that confirm it, the things that should rule it out. No code, no model training, no data science team.' },
  { n: '02', title: 'See precision and recall before you save.',
    body: "Every concept is evaluated live against your historical conversations so your team can see how often it would have fired, on what, and how confidently, before it goes live. Adjust until it's right." },
  { n: '03', title: 'Improve it continuously.',
    body: "Every supervisor review of a Signal-driven detection tunes the precision automatically. A concept that's noisy on day one is sharp on day thirty." },
];

const SIGNAL_USECASES = [
  'Detecting every permit-to-work issuance and verifying the named watcher.',
  'Tracking contractor arrival and departure on radio across multi-tenant sites.',
  'Flagging foreign-object-debris reports on aviation ramps.',
  'Identifying gas-alarm acknowledgement delays across upstream facilities.',
  'Capturing tool-and-equipment handovers between shifts on construction sites.',
  'Detecting any operational event for which your team has a clear definition and an existing manual review process.',
];

function SignalPage() {
  useReveal();
  return (
    <>
      <ProductHero
        eyebrow="PARAGMATIQ SIGNAL, CUSTOM INTELLIGENCE"
        headline={<>You define what matters. <span style={{ color: 'var(--gold)' }}>Paragmatiq finds it.</span></>}
        subhead={<>Paragmatiq Signal lets your team define any concept your operation cares about, <em style={{ fontFamily: 'var(--font-serif)' }}>"permit-to-work issuance"</em>, <em style={{ fontFamily: 'var(--font-serif)' }}>"watcher named"</em>, <em style={{ fontFamily: 'var(--font-serif)' }}>"gas alarm acknowledged"</em>, <em style={{ fontFamily: 'var(--font-serif)' }}>"foreign-object debris reported"</em>, <em style={{ fontFamily: 'var(--font-serif)' }}>"contractor arrival"</em>, and have it detected across every conversation, in any supported language, with verifiable evidence and continuous tuning. No engineering work. No retraining cycles.</>}
        ctaPrimary={{ label: 'Request a Pilot', to: '/demo' }}
        ctaSecondary={{ label: 'See use cases', to: '/solutions/custom-detection' }}
        plateKind="concept-flow"
        plateTag="CONCEPT DEFINITION · EVAL · IMPROVE"
        plateCorner={['DWG-G-101', 'SIGNAL / HERO']}
        meta={[
          { label: 'AUTHORING', value: 'Plain language · no code', gold: true },
          { label: 'EVAL', value: 'Against your history' },
          { label: 'METRICS', value: 'Precision · Recall' },
          { label: 'TUNING', value: 'Continuous · supervised' },
        ]}
      />

      {/* Three steps */}
      <section className="section on-bone">
        <div className="container">
          <SectionHead
            eyebrow="HOW SIGNAL EXTENDS THE PLATFORM"
            headline={<>Three steps. No engineering work.</>}
            sideNote="The same workflow you'd use to brief a new analyst. Signal is built so your operations team, not ours, defines what gets watched for."
          />
          <div className="signal-steps">
            {SIGNAL_STEPS.map((s) => (
              <div key={s.n} className="signal-step reveal">
                <h3>{s.title}</h3>
                <p>{s.body}</p>
              </div>
            ))}
          </div>
        </div>
        <style>{`
          .signal-steps {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 0;
            border-top: 1px solid rgba(10,31,68,0.18);
            border-bottom: 1px solid rgba(10,31,68,0.18);
          }
          .signal-step {
            background: var(--paper);
            padding: 40px 32px;
            display: flex;
            flex-direction: column;
            gap: 16px;
            border-right: 1px solid rgba(10,31,68,0.14);
          }
          .signal-step:last-child { border-right: none; }
          .signal-step h3 { font-size: 24px; letter-spacing: -0.02em; max-width: 18ch; line-height: 1.15; }
          .signal-step p { font-size: 14.5px; color: var(--ink-3); line-height: 1.65; }
          @media (max-width: 920px) {
            .signal-steps { grid-template-columns: 1fr; }
            .signal-step { border-right: none; border-bottom: 1px solid rgba(10,31,68,0.14); }
            .signal-step:last-child { border-bottom: none; }
          }
        `}</style>
      </section>

      {/* Use cases */}
      <section className="section-sm on-paper" style={{ borderTop: '1px solid rgba(10,31,68,0.14)' }}>
        <div className="container">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 64, alignItems: 'start' }}>
            <div>
              <SectionEyebrow text="WHAT CUSTOMERS USE SIGNAL FOR" />
              <h2 style={{ fontSize: 'clamp(28px, 3.2vw, 40px)', marginTop: 18, maxWidth: '16ch', fontWeight: 700 }}>
                The shape of what teams have asked it to watch for.
              </h2>
              <div style={{ marginTop: 28 }}>
                <Plate kind="noticeboard" ratio="4/3" light tag="CONCEPTS WATCHED" corner={['', 'SIGNAL']} />
              </div>
            </div>
            <ul className="signal-list">
              {SIGNAL_USECASES.map((u, i) => (
                <li key={i} className="reveal">
                  <span>{u}</span>
                </li>
              ))}
            </ul>
          </div>
        </div>
        <style>{`
          .signal-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
          .signal-list li {
            display: block;
            align-items: baseline;
            padding: 22px 0;
            border-top: 1px solid rgba(10,31,68,0.16);
            font-size: 17px;
            color: var(--ink);
            line-height: 1.55;
          }
          .signal-list li:last-child { border-bottom: 1px solid rgba(10,31,68,0.16); }
          @media (max-width: 920px) {
            section.section-sm .container > div[style*="grid-template-columns: 1fr 1.4fr"] { grid-template-columns: 1fr !important; gap: 40px !important; }
          }
        `}</style>
      </section>

      <CrossLinkBand
        title="Signal is built on Paragmatiq Understanding."
        body="The intelligence layer that handles your industry vocabulary, your company-specific terms, six languages, and the messy reality of radio noise."
        links={[
          { label: 'Paragmatiq Understanding', to: '/platform/understanding' },
          { label: 'Paragmatiq Voice', to: '/products/voice' },
          { label: 'Paragmatiq Safe', to: '/products/safe' },
          { label: 'Paragmatiq Ops', to: '/products/ops' },
        ]}
      />

      <ClosingCTA
        headline="Define one concept. See how it would have fired."
        subhead="Bring us a concept your team already reviews manually. We'll evaluate it against your historical conversations and show you precision and recall before you commit."
        primary={{ label: 'Request a Pilot', to: '/demo' }}
        secondary={{ label: 'Talk to the team', to: '/contact' }}
      />
    </>
  );
}

/* =====================================================
   PRODUCTS HUB, /products
   ===================================================== */

const PRODUCT_CARDS = [
  { slug: 'voice',  n: '01', name: 'Paragmatiq 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(--bone-2)', kind: 'control-room',
  },
  { slug: 'safe',   n: '02', name: 'Paragmatiq 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(--red)', kind: 'refinery',
  },
  { slug: 'ops',    n: '03', name: 'Paragmatiq 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\u2019s language.', 'Pattern analysis across shifts and sites.'],
    bestFor: 'Operations directors, plant managers, control-room supervisors.',
    accent: 'var(--gold)', kind: 'procedure',
  },
  { slug: 'signal', n: '04', name: 'Paragmatiq 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(--gold)', kind: 'concept-flow',
  },
];

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'],
];

function ProductsHubPage() {
  useReveal();
  return (
    <>
      <section className="on-navy hero-page">
        <div className="container">
          <div className="eyebrow on-dark"><span>THE PORTFOLIO · FOUR MODULES</span></div>
          <h1>Four modules. <span style={{ color: 'var(--gold)' }}>One platform.</span></h1>
          <p className="subhead">
            Paragmatiq 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 className="hero-meta">
            <div className="hero-meta-cell"><span className="label">VOICE</span><span className="value gold">Foundation</span></div>
            <div className="hero-meta-cell"><span className="label">SAFE</span><span className="value">Safety</span></div>
            <div className="hero-meta-cell"><span className="label">OPS</span><span className="value">Procedural</span></div>
            <div className="hero-meta-cell"><span className="label">SIGNAL</span><span className="value">Custom</span></div>
          </div>
          <div style={{ marginTop: 64, paddingBottom: 64 }}>
            <Plate kind="quadrant" ratio="16/9" tag="PORTFOLIO · MODULES" corner={['DWG-A-100', 'PRODUCTS / HUB']} />
          </div>
        </div>
      </section>

      {/* Module grid */}
      <section className="section on-bone">
        <div className="container">
          <SectionHead
            eyebrow="MODULE GRID"
            headline={<>Four modules, four jobs. <span style={{ color: 'var(--ink-3)' }}>Read in any order.</span></>}
            sideNote="Every module includes the same cross-module services, retrospective analysis, templated reporting, supervisor review queue, multi-site management. Voice is the foundation."
          />
          <div className="products-hub-grid">
            {PRODUCT_CARDS.map((p) => (
              <Link key={p.slug} to={'/products/' + p.slug} className="product-hub-card reveal">
                <div className="product-hub-plate">
                  <Plate kind={p.kind} ratio="16/9" tag={p.name.toUpperCase()} corner={['', 'PMQ']} />
                </div>
                <div className="product-hub-card-head">
                  <span style={{ width: 8, height: 8, background: p.accent, display: 'inline-block' }} />
                </div>
                <h3>{p.name}</h3>
                <div className="product-tagline">{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.18em' }}>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">Read {p.name} →</span>
              </Link>
            ))}
          </div>
        </div>
        <style>{`
          .products-hub-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(10,31,68,0.14); border: 1px solid rgba(10,31,68,0.14); }
          .product-hub-card {
            background: var(--paper);
            padding: 0 0 40px;
            display: flex; flex-direction: column; gap: 14px;
            color: var(--ink);
            transition: background 0.18s ease;
          }
          .product-hub-card:hover { background: var(--bone-2); }
          .product-hub-plate { padding: 20px 20px 0; }
          .product-hub-card-head { padding: 0 28px; display: flex; justify-content: flex-end; align-items: center; margin-top: 8px; }
          .product-hub-card h3 { font-size: clamp(28px, 3vw, 38px); letter-spacing: -0.025em; padding: 0 28px; }
          .product-hub-card .product-tagline { font-family: var(--font-display); font-size: 17px; padding: 0 28px; color: var(--ink-3); margin-top: -8px; }
          .product-hub-card > p { font-size: 15px; color: var(--ink-2); line-height: 1.6; max-width: 56ch; padding: 0 28px; }
          .product-outcomes { padding: 14px 28px 0; margin: 0 28px; border-top: 1px solid rgba(10,31,68,0.14); display: flex; flex-direction: column; gap: 10px; padding: 14px 0 0; margin: 0 28px; }
          .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 { padding: 0 28px; font-size: 13px; color: var(--ink-3); margin-top: 4px; }
          .product-best .font-mono { font-size: 10px; color: var(--ink-4); letter-spacing: 0.18em; margin-right: 8px; }
          .product-cta { padding: 0 28px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-3); margin-top: 8px; }
          @media (max-width: 880px) { .products-hub-grid { grid-template-columns: 1fr; } }
        `}</style>
      </section>

      {/* Compare modules table */}
      <section className="section on-paper" style={{ borderTop: '1px solid rgba(10,31,68,0.14)' }}>
        <div className="container">
          <SectionHead
            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 style={{ overflowX: 'auto' }}>
            <table className="data-table compare">
              <thead>
                <tr>
                  <th></th>
                  {PRODUCT_CARDS.map((p) => (
                    <th key={p.slug}><Link to={'/products/' + p.slug}>{p.name.replace('Paragmatiq ', '')}</Link></th>
                  ))}
                </tr>
              </thead>
              <tbody>
                {COMPARE_ROWS.map((row, i) => (
                  <tr key={i}>
                    <td>{row[0]}</td>
                    {row.slice(1).map((cell, j) => (
                      <td key={j} style={{ textAlign: 'center' }}>
                        {cell === 'full' && <span style={{ display: 'inline-block', width: 12, height: 12, borderRadius: '50%', background: 'var(--gold)' }} />}
                        {cell === 'incl' && <span style={{ display: 'inline-block', width: 12, height: 12, borderRadius: '50%', border: '1.4px solid var(--gold)' }} />}
                      </td>
                    ))}
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
        <style>{`
          .compare thead th { font-family: var(--font-display); font-size: 16px; font-weight: 800; color: var(--ink); text-transform: uppercase; letter-spacing: 0.02em; }
          .compare thead th:first-child { width: 50%; }
          .compare thead th a { color: var(--ink); }
          .compare thead th a:hover { color: var(--gold-3); }
        `}</style>
      </section>

      <section className="section-sm on-bone" 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="INCLUDED WITH EVERY MODULE" />
            <h2 style={{ fontSize: 'clamp(24px, 2.8vw, 34px)', marginTop: 14, maxWidth: '18ch', fontWeight: 700 }}>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" style={{ marginTop: 24, display: 'inline-flex' }}>Explore the platform layer →</Link>
          </div>
          <ul className="cross-list">
            {['Retrospective analysis across history','Templated reporting in your format','Tasks with evidence chains','Unified activity feed','Supervisor review queue','Multi-site management'].map((s, i) => (
              <li key={s}>
                <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(10,31,68,0.14); border: 1px solid rgba(10,31,68,0.14); }
          .cross-list li {
            background: var(--paper);
            padding: 22px 24px;
            font-size: 15px;
            color: var(--ink);
          }
          @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' }}
      />
    </>
  );
}

Object.assign(window, { VoicePage, SafePage, OpsPage, SignalPage, ProductsHubPage, ProductHero, ScenarioBand, OutcomeColumns });