/* =====================================================
   PRODUCT PAGES — Safe, Ops, Signal (leaner builds)
   Reuse ProductHero / PhotoSlot / CrossLinkBand / ClosingCTA
   ===================================================== */

/* --- Shared hero that accepts a custom photo src (the one in voice.jsx
       hard-codes the Voice photo). --- */
function ModuleHero({ eyebrow, accent, headline, subhead, ctaPrimary, ctaSecondary, photoSrc, photoAlt, photoTag, photoCorner }) {
  return (
    <section className="on-dark" style={{ paddingTop: 64, 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.5 }} />
      <div style={{ position: 'absolute', inset: 0, background: `radial-gradient(50% 60% at 80% 20%, ${accent}1A, transparent 70%)`, pointerEvents: 'none' }} />
      <div className="container" style={{ position: 'relative', paddingBlock: 64 }}>
        <div className="eyebrow on-dark" style={{ color: accent }}>{eyebrow}</div>
        <h1 style={{ fontSize: 'clamp(44px, 6vw, 88px)', color: '#fff', marginTop: 24, maxWidth: '14ch', letterSpacing: '-0.03em', lineHeight: 1.0 }}>
          {headline}
        </h1>
        <p style={{ marginTop: 32, fontSize: 18, color: 'var(--slate-200)', maxWidth: '64ch', lineHeight: 1.55 }}>
          {subhead}
        </p>
        <div style={{ marginTop: 36, display: 'flex', gap: 14, 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>
        <div style={{ marginTop: 72 }}>
          <PhotoSlot ratio="21/9" src={photoSrc} alt={photoAlt} tag={photoTag} corner={photoCorner} />
        </div>
      </div>
    </section>
  );
}

/* --- Single-weight line icons for capability grids. Monochrome. --- */
function LineIcon({ kind, color = 'var(--slate-200)' }) {
  const stroke = { stroke: color, strokeWidth: 1.4, fill: 'none', strokeLinecap: 'round', strokeLinejoin: 'round' };
  const ic = {
    permit: <g {...stroke}><rect x="10" y="8" width="28" height="34"/><path d="M16 16h16M16 22h16M16 28h10M16 34h12"/><path d="M30 36l4 4 8-10"/></g>,
    confined: <g {...stroke}><circle cx="24" cy="24" r="14"/><circle cx="24" cy="24" r="7"/><path d="M24 10v6M24 32v6M10 24h6M32 24h6"/></g>,
    hotwork: <g {...stroke}><path d="M24 8c-3 6 4 8 4 14a8 8 0 1 1-16 0c0-3 1-5 3-7-1 4 2 5 2 8 0-7 4-9 7-15z"/><path d="M18 38h12"/></g>,
    hazard: <g {...stroke}><path d="M24 8 L42 40 L6 40 Z"/><path d="M24 18v12M24 34v2"/></g>,
    incident: <g {...stroke}><path d="M8 38h32M14 38 24 14l10 24"/><path d="M24 22v8M24 32v2"/></g>,
    nearmiss: <g {...stroke}><circle cx="20" cy="28" r="8"/><path d="M28 28h14M38 24l4 4-4 4"/><path d="M20 20v-6"/></g>,
    rounds: <g {...stroke}><circle cx="24" cy="24" r="14"/><path d="M24 14v10l6 4"/></g>,
    switching: <g {...stroke}><rect x="8" y="14" width="14" height="20"/><rect x="26" y="14" width="14" height="20"/><path d="M22 24h4"/><circle cx="15" cy="24" r="2.5"/><circle cx="33" cy="24" r="2.5"/></g>,
    handover: <g {...stroke}><path d="M8 24h12l4-4 4 4 4-4 4 4h4"/><path d="M14 30h6M28 30h6"/></g>,
    define: <g {...stroke}><path d="M10 38V14a2 2 0 0 1 2-2h20l8 8v18a2 2 0 0 1-2 2H12a2 2 0 0 1-2-2z"/><path d="M32 12v8h8"/><path d="M16 24h12M16 30h10"/></g>,
    evaluate: <g {...stroke}><path d="M8 38h32M12 32l6-10 6 6 8-14 6 10"/></g>,
    improve: <g {...stroke}><path d="M8 30c4-8 12-12 20-10s14 10 12 18"/><path d="M40 32l-2 6 6 2"/><circle cx="14" cy="32" r="1.5"/><circle cx="24" cy="22" r="1.5"/><circle cx="34" cy="28" r="1.5"/></g>,
  };
  return <svg viewBox="0 0 48 48" style={{ width: 36, height: 36 }}>{ic[kind] || ic.permit}</svg>;
}

/* --- Scenario band (faint photo behind, single paragraph) --- */
function ScenarioBand({ eyebrow, headline, body, photoSrc, photoAlt, photoCorner }) {
  return (
    <section className="on-dark" style={{ position: 'relative', overflow: 'hidden', borderTop: '1px solid rgba(255,255,255,0.06)' }}>
      <div style={{ position: 'absolute', inset: 0, opacity: 0.25 }}>
        <PhotoSlot ratio="auto" src={photoSrc} alt={photoAlt} tag="SCENARIO BACKDROP" corner={photoCorner} style={{ height: '100%', aspectRatio: 'auto' }} />
      </div>
      <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(14,23,38,0.78), rgba(14,23,38,0.92))' }} />
      <div className="container" style={{ position: 'relative', paddingBlock: 112, maxWidth: 980 }}>
        <SectionEyebrow text={eyebrow} onDark />
        <h2 style={{ fontSize: 'clamp(30px, 3.6vw, 44px)', color: '#fff', marginTop: 18, maxWidth: '22ch', letterSpacing: '-0.02em' }}>{headline}</h2>
        <p style={{ marginTop: 28, fontSize: 18, lineHeight: 1.7, color: 'var(--slate-200)', maxWidth: '64ch' }}>{body}</p>
      </div>
    </section>
  );
}

/* --- Outcome columns (3 across) --- */
function OutcomeColumns({ num, eyebrow, headline, items }) {
  return (
    <section className="section-sm" style={{ background: 'var(--warm-white)', borderTop: '1px solid rgba(27,35,48,0.10)' }}>
      <div className="container">
        <SectionEyebrow num={num} text={eyebrow} />
        <h2 style={{ fontSize: 'clamp(28px, 3.4vw, 44px)', marginTop: 18, marginBottom: 48, maxWidth: '28ch' }}>{headline}</h2>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 1, background: 'rgba(27,35,48,0.10)', borderBlock: '1px solid rgba(27,35,48,0.12)' }}>
          {items.map((it, i) => (
            <div key={i} className="reveal" style={{ background: 'var(--warm-white)', padding: '36px 32px', display: 'flex', flexDirection: 'column', gap: 14 }}>
              <span className="font-mono" style={{ fontSize: 11, color: 'var(--teal)', letterSpacing: '0.14em' }}>{String(i+1).padStart(2,'0')} / {String(items.length).padStart(2,'0')}</span>
              <h3 style={{ fontSize: 22, letterSpacing: '-0.015em', maxWidth: '20ch' }}>{it.title}</h3>
              <p style={{ fontSize: 14.5, color: 'var(--ink-2)', lineHeight: 1.6 }}>{it.body}</p>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 920px) {
          section.section-sm [style*="grid-template-columns: repeat(3, 1fr)"] { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

/* =====================================================
   §6 — CORTEXA SAFE
   ===================================================== */

const SAFE_CAPABILITIES = [
  { icon: 'permit', title: 'Permit-to-Work compliance', body: 'Detects when permits are issued, modified, or breached in radio traffic; flags missing watchers, conflicting permits, or violations.' },
  { icon: 'confined', title: 'Confined-space risk', body: 'Recognises confined-space entry mentions and verifies the required communications were made.' },
  { icon: 'hotwork', title: 'Hot work & ignition risk', body: 'Detects hot-work activity adjacent to flammable operations or unauthorised areas.' },
  { icon: 'hazard', title: 'Hazardous-substance mentions', body: 'H₂S, hydrogen sulfide, chlorine, ammonia, and other hazard keywords trigger immediate escalation.' },
  { icon: 'incident', 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.' },
  { icon: 'nearmiss', title: 'Near-misses', body: 'Captures and structures the conversational signals of near-misses that today often go unreported.' },
];

function SafePage() {
  useReveal();
  return (
    <>
      <ModuleHero
        eyebrow="CORTEXA SAFE — SAFETY INTELLIGENCE"
        accent="#D9534F"
        headline={<>Every conversation, watched for the things that put your people at <em style={{ fontStyle: 'normal', color: 'var(--coral)' }}>risk</em>.</>}
        subhead="Cortexa 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' }}
        photoSrc="assets/safe-hero.png"
        photoAlt="Refinery operator in full PPE walking a process unit at golden hour, radio in hand."
        photoTag="HERO · REFINERY WALK, GOLDEN HOUR"
        photoCorner={['', 'SAFE / HERO']}
      />

      {/* §6.2 — Capability grid 2×3 */}
      <section className="section" style={{ background: 'var(--warm-white)' }}>
        <div className="container">
          <SectionHead
            num="6.2"
            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">
                <div className="cap-icon"><LineIcon kind={c.icon} color="var(--coral)" /></div>
                <span className="font-mono" style={{ fontSize: 10.5, color: 'var(--ink-4)', letterSpacing: '0.14em' }}>{String(i+1).padStart(2,'0')}</span>
                <h3>{c.title}</h3>
                <p>{c.body}</p>
              </div>
            ))}
          </div>
        </div>
        <style>{`
          .cap-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1px;
            background: rgba(27,35,48,0.10);
            border: 1px solid rgba(27,35,48,0.10);
          }
          .cap-card {
            background: var(--warm-white);
            padding: 36px 32px;
            display: flex;
            flex-direction: column;
            gap: 14px;
            min-height: 260px;
          }
          .cap-card .cap-icon {
            width: 52px; height: 52px;
            background: var(--slate-800);
            display: flex; align-items: center; justify-content: center;
            margin-bottom: 8px;
          }
          .cap-card h3 { font-size: 20px; letter-spacing: -0.015em; max-width: 22ch; }
          .cap-card p { font-size: 14.5px; color: var(--ink-2); line-height: 1.6; }
          @media (max-width: 920px) {
            .cap-grid { grid-template-columns: 1fr 1fr; }
          }
          @media (max-width: 620px) {
            .cap-grid { grid-template-columns: 1fr; }
          }
        `}</style>
      </section>

      {/* §6.3 — Scenario */}
      <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, Cortexa 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.</>}
        photoSrc="assets/safe-scenario.png"
        photoAlt="Tank farm at night, low ambient light, faint cooling tower silhouettes."
        photoCorner={['', 'SCENARIO']}
      />

      {/* §6.4 — Outputs */}
      <OutcomeColumns
        num="6.4"
        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 Cortexa 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: 'Cortexa Understanding', to: '/platform/understanding' },
          { label: 'Cortexa Voice', to: '/products/voice' },
          { label: 'Cortexa Ops', to: '/products/ops' },
          { label: 'Cortexa 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' }}
      />
    </>
  );
}

/* =====================================================
   §7 — CORTEXA OPS
   ===================================================== */

const OPS_CAPABILITIES = [
  {
    icon: 'rounds', n: '01', title: 'Operator rounds.',
    body: 'Define what should be said at each checkpoint of a round — equipment IDs, observations, value thresholds. Cortexa Ops verifies each checkpoint was visited, what was observed, and whether anything fell outside the expected range.',
    tag: 'OPERATOR ON A UNIT WALK', src: 'assets/ops-cap-round.png',
  },
  {
    icon: 'switching', 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.',
    tag: 'CONTROL-PANEL SWITCHOVER', src: 'assets/ops-cap-switch.png',
  },
  {
    icon: 'handover', n: '03', title: 'Shift handover integrity.',
    body: "Cortexa 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.",
    tag: 'SHIFT-CHANGE BOARD', src: 'assets/ops-cap-handover.png',
  },
];

function OpsPage() {
  useReveal();
  return (
    <>
      <ModuleHero
        eyebrow="CORTEXA OPS — OPERATIONAL INTELLIGENCE"
        accent="#2E7D7A"
        headline={<>The right communications, in the right order, at the <em style={{ fontStyle: 'normal', color: 'var(--teal)' }}>right time</em>.</>}
        subhead="Cortexa 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' }}
        photoSrc="assets/ops-hero.png"
        photoAlt="Control-room supervisor reviewing a paper procedure binder, wall of screens behind showing abstracted operations dashboards."
        photoTag="HERO · CONTROL ROOM, PROCEDURE BINDER"
        photoCorner={['', 'OPS / HERO']}
      />

      {/* §7.2 — Three capability blocks (text + small photo each) */}
      <section className="section" style={{ background: 'var(--warm-white)' }}>
        <div className="container">
          <SectionHead
            num="7.2"
            eyebrow="WHAT OPS VERIFIES"
            headline={<>Three procedural moments where slips matter most.</>}
            sideNote="Define the procedure once. Cortexa watches every instance of it across every channel, in every supported language."
          />
          <div className="ops-blocks">
            {OPS_CAPABILITIES.map((c, i) => (
              <div key={i} className="ops-block reveal">
                <div className="ops-photo">
                  <PhotoSlot ratio="4/3" src={c.src} alt={c.title} tag={c.tag} corner={['', c.n + ' / 03']} />
                </div>
                <div className="ops-copy">
                  <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
                    <div style={{ width: 44, height: 44, background: 'var(--slate-800)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><LineIcon kind={c.icon} color="var(--teal)" /></div>
                    <span className="font-mono" style={{ fontSize: 11, color: 'var(--teal)', letterSpacing: '0.14em' }}>{c.n}</span>
                  </div>
                  <h3>{c.title}</h3>
                  <p>{c.body}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
        <style>{`
          .ops-blocks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
          .ops-block { display: flex; flex-direction: column; gap: 20px; }
          .ops-copy h3 { font-size: 22px; margin-top: 16px; max-width: 18ch; letter-spacing: -0.015em; }
          .ops-copy p { font-size: 15px; color: var(--ink-2); 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, Cortexa 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.</>}
        photoSrc="assets/ops-scenario.png"
        photoAlt="Dawn-shift industrial unit in low light, low opacity."
        photoCorner={['', 'SCENARIO']}
      />

      <OutcomeColumns
        num="7.4"
        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 Cortexa 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: 'Cortexa Understanding', to: '/platform/understanding' },
          { label: 'Cortexa Voice', to: '/products/voice' },
          { label: 'Cortexa Safe', to: '/products/safe' },
          { label: 'Cortexa 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' }}
      />
    </>
  );
}

/* =====================================================
   §8 — CORTEXA SIGNAL
   ===================================================== */

const SIGNAL_STEPS = [
  {
    icon: 'define', 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.',
  },
  {
    icon: 'evaluate', 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.",
  },
  {
    icon: 'improve', 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 (
    <>
      <ModuleHero
        eyebrow="CORTEXA SIGNAL — CUSTOM INTELLIGENCE"
        accent="#F2A04B"
        headline={<>You define what matters. <em style={{ fontStyle: 'normal', color: 'var(--amber)' }}>Cortexa finds it.</em></>}
        subhead={<>Cortexa Signal lets your team define any concept your operation cares about — <em>"permit-to-work issuance"</em>, <em>"watcher named"</em>, <em>"gas alarm acknowledged"</em>, <em>"foreign-object debris reported"</em>, <em>"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' }}
        photoSrc="assets/signal-hero.png"
        photoAlt="Operations engineer and HSE manager at a whiteboard with hand-drawn flow diagrams of an operational procedure."
        photoTag="HERO · WHITEBOARD WORKING SESSION"
        photoCorner={['', 'SIGNAL / HERO']}
      />

      {/* §8.2 — Three steps */}
      <section className="section" style={{ background: 'var(--warm-white)' }}>
        <div className="container">
          <SectionHead
            num="8.2"
            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, i) => (
              <div key={i} className="signal-step reveal">
                <div className="signal-step-head">
                  <div className="signal-icon"><LineIcon kind={s.icon} color="var(--amber)" /></div>
                  <span className="font-mono" style={{ fontSize: 11, color: 'var(--amber)', letterSpacing: '0.14em' }}>{s.n}</span>
                </div>
                <h3>{s.title}</h3>
                <p>{s.body}</p>
              </div>
            ))}
          </div>
        </div>
        <style>{`
          .signal-steps {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1px;
            background: rgba(27,35,48,0.10);
            border: 1px solid rgba(27,35,48,0.10);
          }
          .signal-step {
            background: var(--warm-white);
            padding: 40px 32px;
            display: flex;
            flex-direction: column;
            gap: 16px;
          }
          .signal-step-head { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
          .signal-icon { width: 48px; height: 48px; background: var(--slate-800); display: flex; align-items: center; justify-content: center; }
          .signal-step h3 { font-size: 22px; letter-spacing: -0.015em; max-width: 18ch; line-height: 1.2; }
          .signal-step p { font-size: 14.5px; color: var(--ink-2); line-height: 1.65; }
          @media (max-width: 920px) { .signal-steps { grid-template-columns: 1fr; } }
        `}</style>
      </section>

      {/* §8.3 — Use cases list */}
      <section className="section-sm" style={{ background: 'var(--warm-white-2)', borderTop: '1px solid rgba(27,35,48,0.10)' }}>
        <div className="container">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 64, alignItems: 'start' }}>
            <div>
              <SectionEyebrow num="8.3" text="WHAT CUSTOMERS USE SIGNAL FOR" />
              <h2 style={{ fontSize: 'clamp(28px, 3.2vw, 40px)', marginTop: 18, maxWidth: '16ch' }}>
                The shape of what teams have asked it to watch for.
              </h2>
              <div style={{ marginTop: 28 }}>
                <PhotoSlot ratio="4/3" src="assets/signal-noticeboard.png" alt="Printed list of monitored concepts pinned to a noticeboard in an operations centre." tag="CONCEPTS NOTICEBOARD" light corner={['', 'STILL LIFE']} />
              </div>
            </div>
            <ul className="signal-list">
              {SIGNAL_USECASES.map((u, i) => (
                <li key={i} className="reveal">
                  <span className="font-mono" style={{ fontSize: 11, color: 'var(--ink-4)', letterSpacing: '0.14em' }}>{String(i+1).padStart(2,'0')}</span>
                  <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: grid;
            grid-template-columns: 40px 1fr;
            gap: 20px;
            align-items: baseline;
            padding: 22px 0;
            border-top: 1px solid rgba(27,35,48,0.12);
            font-size: 17px;
            color: var(--ink);
            line-height: 1.5;
          }
          .signal-list li:last-child { border-bottom: 1px solid rgba(27,35,48,0.12); }
          @media (max-width: 920px) {
            section.section-sm [style*="grid-template-columns: 1fr 1.4fr"] { grid-template-columns: 1fr !important; gap: 40px !important; }
          }
        `}</style>
      </section>

      <CrossLinkBand
        title="Signal is built on Cortexa 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: 'Cortexa Understanding', to: '/platform/understanding' },
          { label: 'Cortexa Voice', to: '/products/voice' },
          { label: 'Cortexa Safe', to: '/products/safe' },
          { label: 'Cortexa 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' }}
      />
    </>
  );
}

Object.assign(window, { SafePage, OpsPage, SignalPage, ModuleHero, LineIcon, ScenarioBand, OutcomeColumns });
