/* =====================================================
   PARAGMATIQ, Solutions pages
   /solutions hub + 7 detail pages
   ===================================================== */

const SOLUTION_GROUPS = [
  { label: 'Safety & Compliance',       accent: 'var(--red)',  slugs: ['permit-to-work', 'alarm-response', 'incident-detection'] },
  { label: 'Operations & Procedure',    accent: 'var(--gold)', slugs: ['procedural-compliance', 'shift-handover'] },
  { label: 'Extensibility & Analytics', accent: 'var(--gold)', slugs: ['custom-detection', 'multilingual-operations'] },
];

const SOLUTIONS = {
  'permit-to-work': {
    eyebrow: 'SOLUTION, PERMIT-TO-WORK & CONFINED-SPACE COMPLIANCE',
    title: <>Permit-to-work, <span style={{ color: 'var(--gold)' }}>verified in conversation</span>.</>,
    short: 'Every permit communication watched, every breach surfaced with playable evidence.',
    subhead: 'Every permit-to-work and confined-space entry generates a sequence of radio communications, issuance, watcher confirmation, status updates, closure. Paragmatiq watches every one of them, confirms the right communications happened, and flags it the moment they didn\u2019t.',
    problem: 'Permits live on paper or in your permit system. The actual safety happens on radio, and that\u2019s where most breaches go unrecorded today. A watcher who wasn\u2019t named, a confined-space entry that wasn\u2019t acknowledged, a permit closure that was never radioed in, these are the gaps that drive incidents, and they\u2019re invisible to your current systems.',
    outcomes: [
      { t: 'Detects every permit-to-work issuance', b: 'spoken on radio, in any supported language, and links it to the relevant permit record.' },
      { t: 'Verifies the named watcher', b: 'is acknowledged on the channel.' },
      { t: 'Flags conflicting permits', b: '— hot work near a permit-to-work area, simultaneous confined-space entries on the same channel without correct handover.' },
      { t: 'Tracks closure', b: '— open permits with no closure communication by end of shift are flagged automatically.' },
      { t: 'Produces audit-ready records', b: '— every detection, every supervisor decision, every closure, with the original audio and transcripts.' },
    ],
    modules: ['voice', 'safe', { slug: 'signal', label: 'Paragmatiq Signal · optional', note: 'For site-specific permit variants' }],
    industries: ['energy', 'energy', 'mining', 'construction', 'aviation'],
    industryLabels: ['Energy & Utilities', 'Oil & Gas', 'Mining', 'Construction & Heavy Industry', 'Aviation (FOD permits, ramp area control)'],
    plate: 'permit-board',
    meta: [
      { label: 'WATCHES', value: 'Permits · watchers · closure', gold: true },
      { label: 'LATENCY', value: '< 5s typical' },
      { label: 'EVIDENCE', value: 'Audio · transcript · entity' },
      { label: 'INDUSTRIES', value: '5 verticals' },
    ],
  },
  'procedural-compliance': {
    eyebrow: 'SOLUTION, PROCEDURAL COMMUNICATION COMPLIANCE',
    title: <>The right words, in the right order, <span style={{ color: 'var(--gold)' }}>every time</span>.</>,
    short: 'Real-time verification of procedural radio communication, not quarterly audit.',
    subhead: 'Operator rounds, startup and shutdown procedures, switching, and emergency drills depend on specific communications happening in a specific order. Paragmatiq verifies them, and tells you within minutes when they don\u2019t.',
    problem: 'Procedural compliance is measured by audit, not by observation. By the time a regulator or internal auditor notices that operator rounds are slipping or that startup checklists aren\u2019t being followed on the radio, it\u2019s already a quarterly trend, not an actionable signal. Paragmatiq moves this from quarterly audit to real-time verification.',
    outcomes: [
      { t: 'A structured checklist', b: 'of expected communications, defined once for any monitored procedure.' },
      { t: 'Automatic activation', b: 'on trigger phrases, "starting Unit 4", "beginning rounds", "switching to position 2".' },
      { t: 'Checkpoint-level verification', b: 'against the actual transmission, what was said, by whom, in what order.' },
      { t: 'Substantiated, not just claimed', b: '— the system grounds every confirmation in playable evidence.' },
      { t: 'Pass / partial / not-completed verdict', b: 'with attached transcripts and a structured record for audit.' },
    ],
    modules: ['voice', 'ops', { slug: 'signal', label: 'Paragmatiq Signal · optional', note: 'For custom procedure definitions' }],
    industries: ['energy', 'energy', 'aviation', 'mining'],
    industryLabels: ['Energy & Utilities', 'Oil & Gas', 'Aviation (ground handling, MRO)', 'Mining'],
    plate: 'procedure',
    meta: [
      { label: 'VERIFIES', value: 'Rounds · startup · switching', gold: true },
      { label: 'VERDICT', value: 'Pass / partial / not-completed' },
      { label: 'CADENCE', value: 'Real-time, per procedure' },
      { label: 'OUTPUT', value: 'Audit-ready records' },
    ],
  },
  'shift-handover': {
    eyebrow: 'SOLUTION, SHIFT HANDOVER INTEGRITY',
    title: <>Nothing falls <span style={{ color: 'var(--gold)' }}>between shifts</span>.</>,
    short: 'Structured, multilingual handover summaries generated from the actual radio record.',
    subhead: 'Paragmatiq generates a structured handover summary at the end of every shift, open permits, in-progress work, unresolved incidents, equipment under maintenance, and verifies the incoming crew acknowledged it. In their own language.',
    problem: 'Shift handovers are where operational state is most likely to be lost. A near-miss reported but not formally closed; an open permit nobody mentioned; equipment isolated but never returned to service. Most operations rely on a paper logbook and a brief verbal handover, neither of which captures the actual radio traffic from the outgoing shift.',
    outcomes: [
      { t: 'Automatic structured handover', b: 'generated from the full conversation record of the outgoing shift.' },
      { t: 'Prioritised by what matters', b: '— safety events, unresolved incidents, open permits, and procedural slippages first.' },
      { t: 'Delivered in each crew\u2019s language', b: '— English, Arabic, Spanish, French, Dutch, German.' },
      { t: 'Acknowledgement tracked', b: '— the incoming shift confirms receipt; open items not addressed by next shift are escalated.' },
      { t: 'Searchable across shifts', b: '— the incoming crew can query the outgoing shift\u2019s conversations in plain language.' },
    ],
    modules: ['voice', 'ops'],
    industries: ['energy', 'energy', 'mining', 'emergency-services', 'defense'],
    industryLabels: ['Energy & Utilities', 'Oil & Gas', 'Mining', 'Emergency Services', 'Defense'],
    plate: 'shift-board',
    meta: [
      { label: 'GENERATED', value: 'End of every shift', gold: true },
      { label: 'LANGUAGES', value: 'Each crew, natively' },
      { label: 'TRACKING', value: 'Ack + escalation' },
      { label: 'SEARCH', value: 'Across outgoing shift' },
    ],
  },
  'alarm-response': {
    eyebrow: 'SOLUTION, GAS, FIRE & HAZARD ALARM RESPONSE',
    title: <>Every alarm acknowledged. <span style={{ color: 'var(--red)' }}>Every response timed.</span></>,
    short: 'From the moment an alarm sounds to the moment it\u2019s resolved, captured, timed, defensible.',
    subhead: 'When a gas, fire, or hazard alarm sounds, what happens next is a sequence of radio communications. Paragmatiq watches every one of them, times the response, captures the acknowledgement chain, and produces a structured record of the entire event.',
    problem: 'Today, post-event review of an alarm response is reconstructed from manual notes and partial audio logs. By the time the timeline is assembled, sometimes days later, the operational lesson has already faded. Paragmatiq makes the timeline available as the event happens.',
    outcomes: [
      { t: 'Alarm-mention detection', b: 'across every channel, in every supported language.' },
      { t: 'Acknowledgement timing', b: '— how long before the right operator acknowledged on the right channel.' },
      { t: 'Response sequence capture', b: '— who was dispatched, who confirmed arrival, when the all-clear was given.' },
      { t: 'Cross-channel correlation', b: '— a single event reconstructed across multiple talk-groups.' },
      { t: 'Audit-ready records', b: 'with playable audio, transcripts, and a defensible timeline.' },
    ],
    modules: ['voice', 'safe'],
    industries: ['energy', 'energy', 'mining', 'emergency-services'],
    industryLabels: ['Energy & Utilities', 'Oil & Gas', 'Mining', 'Emergency Services'],
    plate: 'alarm-timeline',
    meta: [
      { label: 'TIMING', value: 'Every event, second-level', gold: true },
      { label: 'CORRELATION', value: 'Cross-channel' },
      { label: 'OUTPUT', value: 'Defensible timeline' },
      { label: 'LANGUAGES', value: '6 · auto' },
    ],
    v2: true,
  },
  'incident-detection': {
    eyebrow: 'SOLUTION, INCIDENT DETECTION & RECONSTRUCTION',
    title: <>Every incident, <span style={{ color: 'var(--red)' }}>reconstructed end to end</span>.</>,
    short: 'From the first radio transmission to the all-clear, in a single searchable record.',
    subhead: 'An incident is rarely contained to one channel or one conversation. Paragmatiq detects incidents from the language of the radio traffic, links every related transmission across channels and crews, and produces a single chronologically-ordered record ready for post-incident review.',
    problem: 'Post-incident review depends on supervisors manually reconstructing what happened from partial audio recordings, paper logs, and witness recollection. The reconstruction is slow, incomplete, and frequently disputed. Paragmatiq removes the manual work and the disputes.',
    outcomes: [
      { t: 'Automatic incident detection', b: 'from operational language, "I need medical", "shut down the line", "evacuate", and dozens of site-specific signals.' },
      { t: 'Cross-channel linking', b: '— every related transmission across every talk-group, in the order they happened.' },
      { t: 'Multilingual reconstruction', b: '— Arabic, Spanish, French, Dutch, German transmissions transcribed and translated alongside the English.' },
      { t: 'Roles and entities identified', b: '— who said what, on which channel, about which equipment.' },
      { t: 'Exportable evidence-grade record', b: 'in your incident report templates, with verbatim transcript citations.' },
    ],
    modules: ['voice', 'safe', 'ops'],
    industries: ['emergency-services', 'energy', 'mining', 'defense'],
    industryLabels: ['Emergency Services', 'Energy & Utilities', 'Mining', 'Defense'],
    plate: 'evidence',
    meta: [
      { label: 'DETECTION', value: 'Auto · operational language', gold: true },
      { label: 'LINKAGE', value: 'Cross-channel · ordered' },
      { label: 'LANGUAGES', value: '6 · transcribed + translated' },
      { label: 'EXPORT', value: 'Your incident templates' },
    ],
    v2: true,
  },
  'custom-detection': {
    eyebrow: 'SOLUTION, CUSTOM EVENT DETECTION',
    title: <>Watch for the events your operation has <span style={{ color: 'var(--gold)' }}>decided matter</span>.</>,
    short: 'Anything your team manually reviews today, defined once, watched continuously.',
    subhead: 'Your operation has events it cares about that no off-the-shelf product can predict. Paragmatiq Signal lets your team define those events in plain language, evaluate them against your historical traffic, and put them into continuous monitoring with verifiable evidence.',
    problem: 'Bespoke operational signals, contractor arrivals, FOD reports, tool handovers, specific equipment-state phrases, are exactly the things that get reviewed manually today because no platform knows about them. Manual review is slow, inconsistent, and impossible to scale.',
    outcomes: [
      { t: 'Plain-language concept definition', b: '— anchors, confirmations, exclusions. No code.' },
      { t: 'Live evaluation', b: 'against your historical conversations before any concept goes live.' },
      { t: 'Precision and recall visible', b: 'before save, adjust until it\u2019s right for your operation.' },
      { t: 'Continuous tuning', b: '— every supervisor review of a concept-driven detection sharpens its precision automatically.' },
      { t: 'No retraining cycles', b: '— concepts evolve without taking the system offline.' },
    ],
    modules: ['voice', 'signal'],
    industries: ['aviation', 'energy', 'construction', 'emergency-services'],
    industryLabels: ['Aviation', 'Energy & Utilities', 'Construction & Heavy Industry', 'Emergency Services'],
    plate: 'concept-flow',
    meta: [
      { label: 'DEFINE', value: 'Plain language · no code', gold: true },
      { label: 'EVAL', value: 'Against your history' },
      { label: 'TUNING', value: 'Continuous · supervised' },
      { label: 'RETRAIN', value: 'No cycles · live' },
    ],
    v2: true,
  },
  'multilingual-operations': {
    eyebrow: 'SOLUTION, MULTILINGUAL FIELD OPERATIONS',
    title: <>One operational record. <span style={{ color: 'var(--gold)' }}>Every language</span> your crews speak.</>,
    short: 'English, Arabic, Spanish, French, Dutch, German, one platform, one record.',
    subhead: 'Field operations rarely happen in one language. Paragmatiq transcribes and structures every transmission in the language it was spoken, links related conversations across crews and shifts, and gives supervisors a single operational record they can search and act on.',
    problem: 'Multilingual operations today rely on translators, bilingual supervisors, or post-hoc translation of audio recordings. The result is operational blind spots that grow with every new crew. Paragmatiq removes the language barrier from the platform, not from the workforce.',
    outcomes: [
      { t: 'Six languages, auto-detected', b: 'on every transmission. Channels pinnable to specific crews when accents or noise demand it.' },
      { t: 'Native handling of mixed-language utterances', b: '— a Spanish operator speaking English equipment IDs is handled correctly.' },
      { t: 'One record per operation', b: '— search across every language in the language you speak.' },
      { t: 'Multilingual alerts and summaries', b: '— supervisors and operators receive content in their own language.' },
      { t: 'New languages added', b: 'without taking the system offline.' },
    ],
    modules: ['voice'],
    industries: ['aviation', 'construction', 'energy', 'emergency-services'],
    industryLabels: ['Aviation', 'Construction & Heavy Industry', 'Energy & Utilities', 'Emergency Services'],
    plate: 'waveform',
    meta: [
      { label: 'LANGUAGES', value: 'EN · AR · ES · FR · NL · DE', gold: true },
      { label: 'MIXED', value: 'Native handling' },
      { label: 'RECORD', value: 'One · cross-language' },
      { label: 'ALERTS', value: 'In recipient\u2019s language' },
    ],
    v2: true,
  },
};

const MODULE_META = {
  voice:  { label: 'Paragmatiq Voice',  to: '/products/voice',  note: 'Foundation, capture, threading, transcription, entities.', accent: 'var(--bone)' },
  safe:   { label: 'Paragmatiq Safe',   to: '/products/safe',   note: 'Safety event detection.',                                   accent: 'var(--red)'  },
  ops:    { label: 'Paragmatiq Ops',    to: '/products/ops',    note: 'Procedural verification.',                                  accent: 'var(--gold)' },
  signal: { label: 'Paragmatiq Signal', to: '/products/signal', note: 'Custom concept definition.',                                accent: 'var(--gold)' },
};

const SOLUTION_LABEL = {
  'permit-to-work': 'Permit-to-Work & Confined-Space Compliance',
  'procedural-compliance': 'Procedural Communication Compliance',
  'shift-handover': 'Shift Handover Integrity',
  'alarm-response': 'Gas, Fire & Hazard Alarm Response',
  'incident-detection': 'Incident Detection & Reconstruction',
  'custom-detection': 'Custom Event Detection',
  'multilingual-operations': 'Multilingual Field Operations',
};

function SolutionPage({ slug }) {
  useReveal();
  const s = SOLUTIONS[slug];
  if (!s) return <StubPage path={'/solutions/' + slug} />;

  return (
    <>
      {/* HERO */}
      <section className="on-navy hero-page">
        <div className="container">
          <div className="eyebrow on-dark">
            <span>{s.eyebrow}</span>
            {s.v2 && <span style={{ marginLeft: 14, fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.16em', color: 'var(--ink-5)', border: '1px solid var(--navy-line-2)', padding: '3px 8px' }}>V2 DETAIL</span>}
          </div>
          <h1>{s.title}</h1>
          <p className="subhead">{s.subhead}</p>
          <div style={{ marginTop: 40, display: 'flex', gap: 16, flexWrap: 'wrap' }}>
            <Link to="/demo" className="btn btn-primary">Request a Pilot <span className="arrow">→</span></Link>
            <Link to="/solutions" className="btn btn-ghost-dark">All solutions <span className="arrow">→</span></Link>
          </div>
          <div className="hero-meta">
            {s.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: 56, paddingBottom: 64 }}>
            <Plate kind={s.plate} ratio="21/9" tag={s.eyebrow.split('—')[1] ? s.eyebrow.split('—')[1].trim() : 'SOLUTION'} corner={['DWG-X-101', 'SOLUTION']} />
          </div>
        </div>
      </section>

      {/* PROBLEM */}
      <section className="section on-bone">
        <div className="container" style={{ display: 'grid', gridTemplateColumns: '1fr 1.6fr', gap: 80 }}>
          <div>
            <SectionEyebrow text="THE PROBLEM" />
            <h2 style={{ fontSize: 'clamp(32px, 3.6vw, 48px)', marginTop: 18, maxWidth: '14ch', fontWeight: 800, letterSpacing: '-0.03em', lineHeight: 1.0 }}>What\u2019s missing today.</h2>
          </div>
          <p style={{ fontSize: 19, lineHeight: 1.65, color: 'var(--ink-2)', maxWidth: '64ch' }}>{s.problem}</p>
        </div>
        <style>{`
          @media (max-width: 920px) {
            section.section > .container[style*="grid-template-columns: 1fr 1.6fr"] {
              grid-template-columns: 1fr !important; gap: 32px !important;
            }
          }
        `}</style>
      </section>

      {/* WHAT WE DO, outcome bullets */}
      <section className="section on-paper">
        <div className="container">
          <SectionHead
            eyebrow="WHAT PARAGMATIQ DOES"
            headline={<>Five things this solution does <span style={{ color: 'var(--ink-3)' }}>the moment it goes live</span>.</>}
            sideNote={s.short}
          />
          <ol className="outcome-list">
            {s.outcomes.map((o, i) => (
              <li key={i} className="reveal">
                <div>
                  <h4><strong style={{ color: 'var(--ink)' }}>{o.t}</strong>{' '}<span style={{ color: 'var(--ink-3)' }}>{o.b}</span></h4>
                </div>
              </li>
            ))}
          </ol>
        </div>
        <style>{`
          .outcome-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; border-top: 1px solid rgba(10,31,68,0.18); }
          .outcome-list li {
            display: block;
            padding: 28px 0;
            border-bottom: 1px solid rgba(10,31,68,0.14);
          }
          .outcome-list li h4 {
            font-family: var(--font-display);
            font-weight: 700;
            font-size: clamp(20px, 2.2vw, 26px);
            letter-spacing: -0.02em;
            line-height: 1.3;
          }
        `}</style>
      </section>

      {/* MODULES */}
      <section className="section-sm on-bone" style={{ borderTop: '1px solid rgba(10,31,68,0.14)' }}>
        <div className="container">
          <SectionEyebrow text="MODULES THAT POWER THIS SOLUTION" />
          <h2 style={{ fontSize: 'clamp(28px, 3vw, 38px)', marginTop: 14, marginBottom: 36, maxWidth: '24ch', fontWeight: 700 }}>
            How it composes from the Paragmatiq modules.
          </h2>
          <div className="module-row">
            {s.modules.map((m, i) => {
              const key = typeof m === 'string' ? m : m.slug;
              const meta = MODULE_META[key];
              const label = typeof m === 'object' ? m.label : meta.label;
              const note  = typeof m === 'object' ? (m.note || meta.note) : meta.note;
              return (
                <Link key={i} to={meta.to} className="module-card">
                  <h3>{label} <span style={{ color: meta.accent }}>→</span></h3>
                  <p>{note}</p>
                </Link>
              );
            })}
          </div>
        </div>
        <style>{`
          .module-row {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
            gap: 1px;
            background: rgba(10,31,68,0.14);
            border: 1px solid rgba(10,31,68,0.14);
          }
          .module-card {
            background: var(--paper);
            padding: 28px 28px 32px;
            display: flex;
            flex-direction: column;
            gap: 8px;
            color: var(--ink);
            transition: background 0.15s ease;
          }
          .module-card:hover { background: var(--bone-2); }
          .module-card h3 { font-size: 22px; letter-spacing: -0.015em; margin-top: 6px; }
          .module-card p { font-size: 14px; color: var(--ink-3); line-height: 1.55; }
        `}</style>
      </section>

      {/* INDUSTRIES */}
      <section className="section-sm on-paper" style={{ borderTop: '1px solid rgba(10,31,68,0.14)' }}>
        <div className="container">
          <SectionEyebrow text="INDUSTRIES" />
          <h2 style={{ fontSize: 'clamp(28px, 3vw, 38px)', marginTop: 14, marginBottom: 36, maxWidth: '26ch', fontWeight: 700 }}>
            Where this solution applies most directly.
          </h2>
          <ul className="industry-chips">
            {s.industryLabels.map((label, i) => {
              const indSlug = s.industries[i];
              return (
                <li key={i}>
                  <Link to={'/industries/' + indSlug} className="industry-chip">
                    <span>{label}</span>
                    <span style={{ color: 'var(--gold)' }}>→</span>
                  </Link>
                </li>
              );
            })}
          </ul>
        </div>
        <style>{`
          .industry-chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
          .industry-chip {
            display: inline-flex; align-items: center; gap: 12px;
            padding: 12px 18px;
            border: 1px solid rgba(10,31,68,0.20);
            background: var(--paper);
            font-family: var(--font-display);
            font-weight: 600;
            font-size: 14px;
            color: var(--ink);
            transition: all 0.15s ease;
          }
          .industry-chip:hover { border-color: var(--gold); background: var(--bone-2); }
        `}</style>
      </section>

      <ClosingCTA
        headline="See it run on your radios."
        subhead="Bring 30 days of channel audio. We'll show you what this solution would have caught in your operation last month, with playable evidence behind every detection."
        primary={{ label: 'Request a Pilot', to: '/demo' }}
        secondary={{ label: 'Talk to the team', to: '/contact' }}
      />
    </>
  );
}

/* Solutions hub */
function SolutionsHubPage() {
  useReveal();
  return (
    <>
      <section className="on-navy hero-page">
        <div className="container">
          <div className="eyebrow on-dark"><span>SOLUTIONS · BY BUYER CONCERN</span></div>
          <h1>Solutions for the problems your operation <span style={{ color: 'var(--gold)' }}>actually has</span>.</h1>
          <p className="subhead">
            Paragmatiq's modules combine to solve specific operational and safety problems. Each solution below names the problem in your language, the outcome you'll get, and the modules that power it.
          </p>
          <div className="hero-meta">
            <div className="hero-meta-cell"><span className="label">SOLUTIONS</span><span className="value gold">7 · published</span></div>
            <div className="hero-meta-cell"><span className="label">GROUPS</span><span className="value">3 · by buyer concern</span></div>
            <div className="hero-meta-cell"><span className="label">MODULES</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 infrastructure</span></div>
          </div>
          <div style={{ marginTop: 64, paddingBottom: 64 }}>
            <Plate kind="site-map" ratio="21/9" tag="OPERATIONAL CONCERNS · MAPPED" corner={['DWG-X-100', 'SOLUTIONS / HUB']} />
          </div>
        </div>
      </section>

      <section className="section on-bone">
        <div className="container" style={{ display: 'flex', flexDirection: 'column', gap: 80 }}>
          {SOLUTION_GROUPS.map((group, gi) => (
            <div key={gi} className="reveal">
              <div className="solutions-group-head">
                <h2>
                  <span style={{ width: 12, height: 12, background: group.accent, display: 'inline-block', marginRight: 14, verticalAlign: 'middle' }} />
                  {group.label}
                </h2>
                <span className="font-mono">{group.slugs.length} {group.slugs.length === 1 ? 'SOLUTION' : 'SOLUTIONS'}</span>
              </div>
              <div className="solution-grid">
                {group.slugs.map((slug) => {
                  const sol = SOLUTIONS[slug];
                  return (
                    <Link key={slug} to={'/solutions/' + slug} className="solution-card">
                      <div className="solution-card-plate">
                        <Plate kind={sol.plate} ratio="16/9" tag={SOLUTION_LABEL[slug].toUpperCase()} corner={['', '']} />
                      </div>
                      <div className="solution-card-copy">
                        <h3>{SOLUTION_LABEL[slug]}</h3>
                        <p>{sol.short}</p>
                        <span className="solution-link" style={{ color: group.accent }}>Read solution →</span>
                      </div>
                    </Link>
                  );
                })}
              </div>
            </div>
          ))}
        </div>
        <style>{`
          .solutions-group-head {
            display: flex; align-items: baseline; justify-content: space-between;
            flex-wrap: wrap; gap: 12px;
            padding-bottom: 18px; border-bottom: 1px solid rgba(10,31,68,0.20);
          }
          .solutions-group-head h2 {
            font-size: clamp(28px, 3vw, 40px);
            font-weight: 800; letter-spacing: -0.025em;
          }
          .solutions-group-head .font-mono { font-size: 11px; color: var(--ink-4); letter-spacing: 0.18em; }
          .solution-grid {
            margin-top: 28px;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 1px;
            background: rgba(10,31,68,0.14);
            border: 1px solid rgba(10,31,68,0.14);
          }
          .solution-card {
            background: var(--paper);
            display: flex; flex-direction: column;
            color: var(--ink);
            transition: background 0.18s ease;
          }
          .solution-card:hover { background: var(--bone-2); }
          .solution-card-plate { padding: 20px 20px 0; }
          .solution-card-copy { padding: 22px 24px 28px; display: flex; flex-direction: column; gap: 10px; }
          .solution-card h3 { font-size: 22px; letter-spacing: -0.015em; line-height: 1.15; max-width: 22ch; }
          .solution-card p { font-size: 14.5px; color: var(--ink-3); line-height: 1.55; flex: 1; min-height: 3em; }
          .solution-link { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; margin-top: 4px; }
        `}</style>
      </section>

      <ClosingCTA
        headline="Don't see your use case?"
        subhead="Paragmatiq Signal lets your team define any concept your operation cares about, and have it detected across every conversation, with verifiable evidence."
        primary={{ label: 'Request a Pilot', to: '/demo' }}
        secondary={{ label: 'See Paragmatiq Signal', to: '/products/signal' }}
      />
    </>
  );
}

Object.assign(window, { SolutionPage, SolutionsHubPage, SOLUTIONS, SOLUTION_LABEL });