/* =====================================================
   SOLUTIONS — hub + 7 detail pages
   Brief §15–§19
   Template: Hero · Problem · What Cortexa does · Modules · Industries · CTA
   ===================================================== */

/* --- Data: one entry per solution -----------------------------------*/
const SOLUTION_GROUPS = [
  {
    label: 'Safety & Compliance',
    accent: 'var(--coral)',
    slugs: ['permit-to-work', 'alarm-response', 'incident-detection'],
  },
  {
    label: 'Operations & Procedure',
    accent: 'var(--teal)',
    slugs: ['procedural-compliance', 'shift-handover'],
  },
  {
    label: 'Extensibility & Analytics',
    accent: 'var(--amber)',
    slugs: ['custom-detection', 'multilingual-operations'],
  },
];

const SOLUTIONS = {
  'permit-to-work': {
    n: '16', eyebrow: 'SOLUTION — PERMIT-TO-WORK & CONFINED-SPACE COMPLIANCE',
    title: 'Permit-to-work, verified in conversation.',
    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. Cortexa watches every one of them, confirms the right communications happened, and flags it the moment they didn’t.',
    problem: 'Permits live on paper or in your permit system. The actual safety happens on radio — and that’s where most breaches go unrecorded today. A watcher who wasn’t named, a confined-space entry that wasn’t acknowledged, a permit closure that was never radioed in — these are the gaps that drive incidents, and they’re 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: 'Cortexa 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)'],
    accent: 'var(--coral)',
    photoHero: 'assets/promise-01-permit.png',
    photoHeroCorner: ['', 'PERMIT BOARD'],
    photoDetail: null,
    photoDetailTag: 'GLOVED HAND · PERMIT + RADIO',
  },
  'procedural-compliance': {
    n: '17', eyebrow: 'SOLUTION — PROCEDURAL COMMUNICATION COMPLIANCE',
    title: 'The right words, in the right order, every time.',
    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. Cortexa verifies them — and tells you within minutes when they don’t.',
    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’t being followed on the radio, it’s already a quarterly trend — not an actionable signal. Cortexa 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: 'Cortexa Signal · optional', note: 'For custom procedure definitions' }],
    industries: ['energy', 'energy', 'aviation', 'mining'],
    industryLabels: ['Energy & Utilities', 'Oil & Gas', 'Aviation (ground handling, MRO)', 'Mining'],
    accent: 'var(--teal)',
    photoHero: 'assets/solution-procedural-hero.png',
    photoHeroCorner: ['', 'PROCEDURE BINDER'],
    photoDetail: null,
    photoDetailTag: 'CHECKLIST · LINE ILLUSTRATION',
  },
  'shift-handover': {
    n: '18', eyebrow: 'SOLUTION — SHIFT HANDOVER INTEGRITY',
    title: 'Nothing falls between shifts.',
    short: 'Structured, multilingual handover summaries generated from the actual radio record.',
    subhead: 'Cortexa 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’s 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’s conversations in plain language.' },
    ],
    modules: ['voice', 'ops'],
    industries: ['energy', 'energy', 'mining', 'emergency-services', 'defense'],
    industryLabels: ['Energy & Utilities', 'Oil & Gas', 'Mining', 'Emergency Services', 'Defense'],
    accent: 'var(--teal)',
    photoHero: 'assets/solution-handover-hero.png',
    photoHeroCorner: ['', 'SHIFT-CHANGE BOARD'],
    photoDetail: null,
    photoDetailTag: 'HANDOVER DOC + TABLET',
  },
  'alarm-response': {
    n: '19a', eyebrow: 'SOLUTION — GAS, FIRE & HAZARD ALARM RESPONSE',
    title: 'Every alarm acknowledged. Every response timed.',
    short: 'From the moment an alarm sounds to the moment it’s resolved — captured, timed, defensible.',
    subhead: 'When a gas, fire, or hazard alarm sounds, what happens next is a sequence of radio communications. Cortexa 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. Cortexa 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'],
    accent: 'var(--coral)',
    photoHero: 'assets/solution-alarm-hero.png',
    photoHeroCorner: ['', 'ALARM PANEL'],
    photoDetail: null,
    photoDetailTag: 'ALARM RESPONSE · STILL LIFE',
    v2: true,
  },
  'incident-detection': {
    n: '19b', eyebrow: 'SOLUTION — INCIDENT DETECTION & RECONSTRUCTION',
    title: 'Every incident, reconstructed end to end.',
    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. Cortexa 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. Cortexa 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'],
    accent: 'var(--coral)',
    photoHero: 'assets/solution-incident-hero.png',
    photoHeroCorner: ['', 'INCIDENT BOARD'],
    photoDetail: null,
    photoDetailTag: 'EVIDENCE FOLDER',
    v2: true,
  },
  'custom-detection': {
    n: '19c', eyebrow: 'SOLUTION — CUSTOM EVENT DETECTION',
    title: 'Watch for the events your operation has decided matter.',
    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. Cortexa 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’s 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'],
    accent: 'var(--amber)',
    photoHero: 'assets/solution-custom-hero.png',
    photoHeroCorner: ['', 'CONCEPTS BOARD'],
    photoDetail: null,
    photoDetailTag: 'WHITEBOARD CONCEPT',
    v2: true,
  },
  'multilingual-operations': {
    n: '19d', eyebrow: 'SOLUTION — MULTILINGUAL FIELD OPERATIONS',
    title: 'One operational record. Every language your crews speak.',
    short: 'English, Arabic, Spanish, French, Dutch, German — one platform, one record.',
    subhead: 'Field operations rarely happen in one language. Cortexa 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. Cortexa 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'],
    accent: 'var(--amber)',
    photoHero: 'assets/solution-multilingual-hero.png',
    photoHeroCorner: ['', 'MULTILINGUAL CREW'],
    photoDetail: null,
    photoDetailTag: 'EN · AR · ES · FR · NL · DE',
    v2: true,
  },
};

const MODULE_META = {
  voice:  { label: 'Cortexa Voice',  to: '/products/voice',  note: 'Foundation — capture, threading, transcription, entities.', accent: 'var(--slate-100)' },
  safe:   { label: 'Cortexa Safe',   to: '/products/safe',   note: 'Safety event detection.',                                    accent: 'var(--coral)' },
  ops:    { label: 'Cortexa Ops',    to: '/products/ops',    note: 'Procedural verification.',                                   accent: 'var(--teal)' },
  signal: { label: 'Cortexa Signal', to: '/products/signal', note: 'Custom concept definition.',                                 accent: 'var(--amber)' },
};

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

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

  return (
    <>
      {/* HERO */}
      <section className="on-dark" style={{ paddingTop: 80, paddingBottom: 0, borderBottom: '1px solid rgba(255,255,255,0.06)', position: 'relative', overflow: 'hidden' }}>
        <div className="bg-grid" style={{ position: 'absolute', inset: 0, opacity: 0.4 }} />
        <div style={{ position: 'absolute', inset: 0, background: `radial-gradient(50% 60% at 80% 20%, ${s.accent.replace('var(','').replace(')','')}22, transparent 70%)`, pointerEvents: 'none' }} />
        <div className="container" style={{ position: 'relative', paddingBlock: 64 }}>
          <div className="eyebrow on-dark">{s.eyebrow}</div>
          {s.v2 && <span style={{ display: 'inline-block', marginLeft: 14, fontFamily: 'var(--font-mono)', fontSize: 10.5, letterSpacing: '0.14em', color: 'var(--slate-400)', border: '1px solid rgba(255,255,255,0.18)', padding: '3px 8px' }}>V2 DETAIL</span>}
          <h1 style={{ fontSize: 'clamp(40px, 5.6vw, 80px)', color: '#fff', marginTop: 24, maxWidth: '18ch', letterSpacing: '-0.03em', lineHeight: 1.0 }}>
            {s.title}
          </h1>
          <p style={{ marginTop: 28, fontSize: 18, color: 'var(--slate-200)', maxWidth: '64ch', lineHeight: 1.6 }}>
            {s.subhead}
          </p>
          <div style={{ marginTop: 36, display: 'flex', gap: 14, flexWrap: 'wrap' }}>
            <Link to="/demo" className="btn btn-primary">Request a Pilot <span className="arrow">→</span></Link>
            <Link to="/solutions" className="btn btn-ghost-dark">All solutions <span className="arrow">→</span></Link>
          </div>
          <div style={{ marginTop: 64 }}>
            <PhotoSlot ratio="21/9" src={s.photoHero} tag={s.eyebrow.split(' — ')[1] || 'SOLUTION'} corner={s.photoHeroCorner} />
          </div>
        </div>
      </section>

      {/* PROBLEM */}
      <section className="section" style={{ background: 'var(--warm-white)' }}>
        <div className="container" style={{ display: 'grid', gridTemplateColumns: '1fr 1.6fr', gap: 80 }}>
          <div>
            <SectionEyebrow num={s.n + '.2'} text="THE PROBLEM" />
            <h2 style={{ fontSize: 'clamp(28px, 3vw, 40px)', marginTop: 18, maxWidth: '14ch' }}>What’s 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 CORTEXA DOES — outcome bullets */}
      <section className="section" style={{ background: 'var(--warm-white-2)', borderTop: '1px solid rgba(27,35,48,0.10)' }}>
        <div className="container">
          <SectionHead
            num={s.n + '.3'}
            eyebrow="WHAT CORTEXA DOES"
            headline={<>Five things this solution does the moment it goes live.</>}
            sideNote={s.short}
          />
          <ol className="outcome-list">
            {s.outcomes.map((o, i) => (
              <li key={i} className="reveal">
                <span className="outcome-n font-mono">{String(i+1).padStart(2,'0')}</span>
                <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(27,35,48,0.12); }
          .outcome-list li {
            display: grid;
            grid-template-columns: 56px 1fr;
            gap: 32px;
            padding: 28px 0;
            border-bottom: 1px solid rgba(27,35,48,0.12);
            align-items: baseline;
          }
          .outcome-list li .outcome-n {
            font-size: 11px;
            color: var(--amber);
            letter-spacing: 0.14em;
            padding-top: 6px;
          }
          .outcome-list li h4 {
            font-family: var(--font-display);
            font-weight: 500;
            font-size: clamp(20px, 2.2vw, 26px);
            letter-spacing: -0.015em;
            line-height: 1.3;
          }
        `}</style>
      </section>

      {/* MODULES */}
      <section className="section-sm" style={{ background: 'var(--warm-white)', borderTop: '1px solid rgba(27,35,48,0.10)' }}>
        <div className="container">
          <SectionEyebrow num={s.n + '.4'} text="MODULES THAT POWER THIS SOLUTION" />
          <h2 style={{ fontSize: 'clamp(26px, 2.8vw, 36px)', marginTop: 14, marginBottom: 36, maxWidth: '24ch' }}>
            How it composes from the Cortexa 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">
                  <span className="font-mono" style={{ fontSize: 10.5, color: 'var(--ink-4)', letterSpacing: '0.14em' }}>{String(i+1).padStart(2,'0')} / {String(s.modules.length).padStart(2,'0')}</span>
                  <h3 style={{ marginTop: 10, fontSize: 22, letterSpacing: '-0.015em' }}>{label} <span style={{ color: meta.accent }}>→</span></h3>
                  <p style={{ marginTop: 8, fontSize: 14, color: 'var(--ink-3)', lineHeight: 1.55 }}>{note}</p>
                </Link>
              );
            })}
          </div>
        </div>
        <style>{`
          .module-row {
            display: grid;
            grid-template-columns: repeat(${'auto-fit'}, minmax(220px, 1fr));
            gap: 1px;
            background: rgba(27,35,48,0.12);
            border: 1px solid rgba(27,35,48,0.12);
          }
          .module-card {
            background: var(--warm-white);
            padding: 24px 24px 26px;
            display: flex;
            flex-direction: column;
            color: var(--ink);
            transition: background 0.15s ease;
          }
          .module-card:hover { background: var(--warm-white-2); }
        `}</style>
      </section>

      {/* INDUSTRIES */}
      <section className="section-sm" style={{ background: 'var(--warm-white-2)', borderTop: '1px solid rgba(27,35,48,0.10)' }}>
        <div className="container">
          <SectionEyebrow num={s.n + '.5'} text="INDUSTRIES" />
          <h2 style={{ fontSize: 'clamp(26px, 2.8vw, 36px)', marginTop: 14, marginBottom: 36, maxWidth: '26ch' }}>
            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="chip-light">{label} <span>→</span></Link></li>
              );
            })}
          </ul>
        </div>
        <style>{`
          .industry-chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
          .chip-light {
            display: inline-flex; align-items: center; gap: 10px;
            padding: 10px 16px;
            border: 1px solid rgba(27,35,48,0.18);
            background: var(--warm-white);
            font-size: 14px;
            color: var(--ink);
            transition: all 0.15s ease;
          }
          .chip-light span { color: var(--teal); font-family: var(--font-mono); }
          .chip-light:hover { border-color: var(--ink); background: var(--warm-white); }
        `}</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-dark" style={{ paddingTop: 96, paddingBottom: 96, borderBottom: '1px solid rgba(255,255,255,0.06)', position: 'relative', overflow: 'hidden' }}>
        <div className="bg-grid" style={{ position: 'absolute', inset: 0, opacity: 0.4 }} />
        <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(60% 70% at 80% 30%, rgba(217,83,79,0.12), transparent 70%)' }} />
        <div className="container" style={{ position: 'relative' }}>
          <SectionEyebrow num="15" text="SOLUTIONS" onDark />
          <h1 style={{ fontSize: 'clamp(48px, 7vw, 96px)', color: '#fff', marginTop: 26, maxWidth: '18ch', letterSpacing: '-0.035em', lineHeight: 1.0 }}>
            Solutions for the problems your operation <em style={{ fontStyle: 'normal', color: 'var(--amber)' }}>actually has</em>.
          </h1>
          <p style={{ marginTop: 32, fontSize: 18, color: 'var(--slate-200)', maxWidth: '60ch', lineHeight: 1.6 }}>
            Cortexa’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 style={{ marginTop: 56 }}>
            <PhotoSlot ratio="21/9" src="assets/solutions-hub-hero.png" alt="Industrial site at dusk with comms antennas and refinery silhouettes against an amber sky." tag="INDUSTRIAL BACKBONE · DUSK" corner={['', 'SOLUTIONS / HERO']} />
          </div>
        </div>
      </section>

      <section className="section" style={{ background: 'var(--warm-white)' }}>
        <div className="container" style={{ display: 'flex', flexDirection: 'column', gap: 72 }}>
          {SOLUTION_GROUPS.map((group, gi) => (
            <div key={gi} className="reveal">
              <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', flexWrap: 'wrap', gap: 12, paddingBottom: 18, borderBottom: '1px solid rgba(27,35,48,0.16)' }}>
                <h2 style={{ fontSize: 'clamp(24px, 2.6vw, 32px)', letterSpacing: '-0.015em', display: 'flex', alignItems: 'center', gap: 14 }}>
                  <span style={{ width: 10, height: 10, background: group.accent, display: 'inline-block' }} />
                  {group.label}
                </h2>
                <span className="font-mono" style={{ fontSize: 11, color: 'var(--ink-4)', letterSpacing: '0.14em' }}>{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">
                      <h3>{SOLUTION_LABEL[slug]}</h3>
                      <p>{sol.short}</p>
                      <span className="solution-link" style={{ color: group.accent }}>Read solution →</span>
                    </Link>
                  );
                })}
              </div>
            </div>
          ))}
        </div>
        <style>{`
          .solution-grid { margin-top: 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1px; background: rgba(27,35,48,0.10); border: 1px solid rgba(27,35,48,0.10); }
          .solution-card {
            background: var(--warm-white);
            padding: 28px 28px 30px;
            display: flex; flex-direction: column; gap: 12px;
            color: var(--ink);
            transition: background 0.18s ease;
            min-height: 200px;
          }
          .solution-card:hover { background: var(--warm-white-2); }
          .solution-card h3 { font-size: 22px; letter-spacing: -0.015em; line-height: 1.2; max-width: 22ch; }
          .solution-card p { font-size: 14.5px; color: var(--ink-3); line-height: 1.55; flex: 1; }
          .solution-link { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; }
        `}</style>
      </section>

      <ClosingCTA
        headline="Don’t see your use case?"
        subhead="Cortexa 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 Cortexa Signal', to: '/products/signal' }}
      />
    </>
  );
}

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