/* =====================================================
   INDUSTRIES — hub + 7 detail pages
   Brief §20–§25
   Template: Hero · Reality · Where Cortexa fits · Compliance · Module mix · CTA
   ===================================================== */

const INDUSTRIES = {
  'energy': {
    n: '21', name: 'Energy & Utilities', short: 'Refineries, upstream and downstream, power generation, transmission.',
    title: 'Voice intelligence built for the way energy operations actually run.',
    subhead: 'Refineries, upstream and downstream, power generation, transmission. Where permits, hot work, and procedural radio communications are the difference between an uneventful shift and a regulator visit.',
    reality: 'Energy operations are radio operations. From upstream field operators coordinating on PTT, to refinery board operators directing field hands, to transmission crews coordinating switching, the radio is the operational nervous system. And yet, almost no operator today has a structured record of what was actually said — let alone real-time verification that the right communications happened.',
    fits: [
      'permit-to-work',
      { label: 'Hot-work conflict detection', to: '/solutions/permit-to-work' },
      'procedural-compliance',
      'alarm-response',
      'shift-handover',
      'incident-detection',
    ],
    compliance: ['ISO 45001', 'API standards alignment', 'IOGP recommendations', 'OSHA PSM', 'HSE COMAH'],
    modules: 'Cortexa Voice (foundation) + Cortexa Safe (primary) + Cortexa Ops (rounds & switching) + optional Cortexa Signal for site-specific concepts.',
    photoHero: 'assets/industry-energy-hero.png',
    photoHeroCorner: ['', 'ENERGY / HERO'],
    photoDetail: 'assets/industry-oilgas.png',
    photoDetailTag: 'PERMIT BOARD + PTT · STILL LIFE',
    accent: 'var(--amber)',
  },
  'aviation': {
    n: '22', name: 'Aviation', short: 'Ramp, MRO, ground handling — coordinated by voice, verified by Cortexa.',
    title: 'Ramp, MRO, ground handling — coordinated by voice, verified by Cortexa.',
    subhead: 'Aviation ground operations run on radio. Cortexa monitors every channel — ramp coordination, FOD reporting, pushback communications, MRO handovers — and turns it into structured operational and safety intelligence.',
    reality: 'Aviation ground operations involve multilingual crews, multiple agencies on the same apron, and tight timing windows where missed communication directly affects on-time performance and safety. Today, most of this exists only as ephemeral radio traffic — gone the moment it’s transmitted.',
    fits: [
      'multilingual-operations',
      { label: 'FOD (foreign-object debris) reporting and tracking', to: '/solutions/custom-detection' },
      { label: 'Pushback and gate procedure compliance', to: '/solutions/procedural-compliance' },
      { label: 'MRO handover integrity', to: '/solutions/shift-handover' },
      { label: 'Ramp incident detection and reconstruction', to: '/solutions/incident-detection' },
      { label: 'Training and quality assurance review', to: '/solutions/incident-detection' },
    ],
    compliance: ['ICAO Annex 19 SMS alignment', 'IATA AHM', 'EASA / FAA ground handling standards'],
    modules: 'Cortexa Voice + Cortexa Ops + Cortexa Signal (for airline-specific procedures).',
    photoHero: 'assets/industry-aviation-hero.png',
    photoHeroCorner: ['', 'AVIATION / HERO'],
    photoDetail: null,
    photoDetailTag: 'RAMP RADIO · STILL LIFE',
    accent: 'var(--teal)',
  },
  'construction': {
    n: '23', name: 'Construction & Heavy Industry', short: 'For multi-site, multilingual, multi-crew operations.',
    title: 'For multi-site, multilingual, multi-crew operations.',
    subhead: 'Cortexa brings structured voice intelligence to construction sites — where crews change daily, languages vary, and the hazard profile shifts with the work.',
    reality: 'Construction is the industry most exposed to voice-based coordination — and the least likely to have a structured record of what was said. Multilingual crews, contractor turnover, and shifting hazard profiles make every site different and every shift different. Today most safety knowledge stays in the heads of supervisors. Cortexa makes it visible.',
    fits: [
      'permit-to-work',
      { label: 'Lift, lockout-tagout, hot-work supervision', to: '/solutions/permit-to-work' },
      { label: 'Contractor arrival / departure tracking', to: '/solutions/custom-detection' },
      'multilingual-operations',
      'incident-detection',
      { label: 'Tool / equipment handover', to: '/solutions/shift-handover' },
    ],
    compliance: ['OSHA', 'HSE CDM Regulations', 'ISO 45001'],
    modules: 'Cortexa Voice + Cortexa Safe + Cortexa Signal.',
    photoHero: 'assets/industry-construction.png',
    photoHeroCorner: ['', 'CONSTRUCTION / HERO'],
    photoDetail: null,
    photoDetailTag: 'DAILY SAFETY BRIEFING',
    accent: 'var(--amber)',
  },
  'emergency-services': {
    n: '24', name: 'Emergency Services', short: 'Multi-agency communications, structured.',
    title: 'Multi-agency communications, structured.',
    subhead: 'Fire, EMS, dispatch, police coordination, and emergency operations centres run on radio. Cortexa structures every transmission, supports multi-agency review, and produces post-incident records with full conversation chains.',
    reality: 'Multi-agency response generates more voice traffic than any other operational environment. Today, post-incident review depends on manually reconstructing audio across multiple talk-groups. Cortexa turns the entire incident into a structured, searchable, multilingual record — automatically.',
    fits: [
      'incident-detection',
      { label: 'Multi-agency communication review', to: '/solutions/incident-detection' },
      { label: 'Dispatch quality assurance', to: '/solutions/incident-detection' },
      { label: 'Training and procedure compliance', to: '/solutions/procedural-compliance' },
      'shift-handover',
    ],
    compliance: ['NENA standards alignment (US)', 'APCO P25 environments supported', 'GDPR for European deployments'],
    modules: 'Cortexa Voice + Cortexa Ops + Cortexa Signal.',
    photoHero: 'assets/industry-emergency-hero.png',
    photoHeroCorner: ['', 'EMERGENCY / HERO'],
    photoDetail: null,
    photoDetailTag: 'DISPATCH CONSOLE · NIGHT',
    accent: 'var(--coral)',
  },
  'mining': {
    n: '25a', name: 'Mining', short: 'Surface and underground operations, structured.',
    title: 'Surface and underground operations, structured.',
    subhead: 'Cortexa brings structured voice intelligence to mining operations — both surface and underground — where radio is often the only reliable channel between operators, supervisors, and surface control.',
    reality: 'Underground mining is among the most radio-dependent industrial environments in the world. Crew handovers, blast clearances, equipment movements, and emergency communications all happen on talk-groups that operate in noisy, low-bandwidth conditions. Cortexa is designed for that reality.',
    fits: [
      'permit-to-work',
      { label: 'Blast clearance and exclusion-zone tracking', to: '/solutions/custom-detection' },
      'procedural-compliance',
      'shift-handover',
      'incident-detection',
      'multilingual-operations',
    ],
    compliance: ['ISO 45001', 'MSHA alignment (US)', 'ICMM safety standards', 'Local mining safety regulations per jurisdiction'],
    modules: 'Cortexa Voice + Cortexa Safe + Cortexa Ops.',
    photoHero: 'assets/industry-mining-hero.png',
    photoHeroCorner: ['', 'MINING / HERO'],
    photoDetail: null,
    photoDetailTag: 'UNDERGROUND CREW',
    accent: 'var(--amber)',
    v2: true,
  },
  'defense': {
    n: '25b', name: 'Defense', short: 'Multi-agency operations, training facilities, base security.',
    title: 'Multi-agency operations, training facilities, base security.',
    subhead: 'Cortexa runs in defense and security environments where multilingual coordination, training compliance, and incident reconstruction are operational requirements — on infrastructure under the customer’s sole control.',
    reality: 'Defense communications are radio-heavy, multilingual, and operationally sensitive. The requirement to keep every byte of voice traffic inside the customer’s perimeter is non-negotiable. Cortexa is built for that posture by design — no external AI providers, no third-party data egress, fully on-premise deployment.',
    fits: [
      'incident-detection',
      { label: 'Multi-agency training exercises', to: '/solutions/incident-detection' },
      { label: 'Base security radio monitoring', to: '/solutions/custom-detection' },
      'procedural-compliance',
      'multilingual-operations',
    ],
    compliance: ['NIST 800-53 alignment', 'ITAR-compatible deployment options', 'Customer-controlled infrastructure throughout'],
    modules: 'Cortexa Voice + Cortexa Safe + Cortexa Signal.',
    photoHero: 'assets/industry-defense-hero.png',
    photoHeroCorner: ['', 'DEFENSE / HERO'],
    photoDetail: null,
    photoDetailTag: 'MULTI-AGENCY · TRAINING',
    accent: 'var(--coral)',
    v2: true,
  },
  'logistics': {
    n: '25c', name: 'Logistics & Ports', short: 'Terminal control, cargo handling, ramp operations.',
    title: 'Terminal control, cargo handling, ramp operations.',
    subhead: 'Container terminals, ports, and large logistics yards run on radio coordination between yard control, equipment operators, and external carriers. Cortexa structures it.',
    reality: 'Port and terminal operations involve multilingual crews, multiple operating companies on the same yard, and continuous radio coordination between yard control, crane and reach-stacker operators, gate staff, and external truckers. The operational picture is fragmented today. Cortexa makes it coherent.',
    fits: [
      'multilingual-operations',
      'procedural-compliance',
      { label: 'Equipment movement coordination', to: '/solutions/custom-detection' },
      'shift-handover',
      'incident-detection',
    ],
    compliance: ['ISO 28000 supply chain security alignment', 'ISPS Code compatibility', 'Local port authority compliance'],
    modules: 'Cortexa Voice + Cortexa Ops + Cortexa Signal.',
    photoHero: 'assets/industry-logistics-hero.png',
    photoHeroCorner: ['', 'LOGISTICS / HERO'],
    photoDetail: null,
    photoDetailTag: 'TERMINAL · YARD CONTROL',
    accent: 'var(--teal)',
    v2: true,
  },
};

const INDUSTRY_HUB_ORDER = ['energy', 'aviation', 'construction', 'emergency-services', 'mining', 'defense', 'logistics'];

/* --- Industry detail template -----------------------------------*/
function IndustryPage({ slug }) {
  useReveal();
  const ind = INDUSTRIES[slug];
  if (!ind) return <StubPage path={'/industries/' + 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 className="container" style={{ position: 'relative', paddingBlock: 64 }}>
          <div className="eyebrow on-dark">INDUSTRY · {ind.name.toUpperCase()}</div>
          {ind.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 }}>
            {ind.title}
          </h1>
          <p style={{ marginTop: 28, fontSize: 18, color: 'var(--slate-200)', maxWidth: '64ch', lineHeight: 1.6 }}>
            {ind.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="/industries" className="btn btn-ghost-dark">All industries <span className="arrow">→</span></Link>
          </div>
          <div style={{ marginTop: 64 }}>
            <PhotoSlot ratio="21/9" src={ind.photoHero} tag={'INDUSTRY · ' + ind.name.toUpperCase()} corner={ind.photoHeroCorner} objectPosition="center 40%" />
          </div>
        </div>
      </section>

      {/* REALITY */}
      <section className="section" style={{ background: 'var(--warm-white)' }}>
        <div className="container" style={{ display: 'grid', gridTemplateColumns: '1fr 1.6fr', gap: 80 }}>
          <div>
            <SectionEyebrow num={ind.n + '.2'} text="THE REALITY" />
            <h2 style={{ fontSize: 'clamp(28px, 3vw, 40px)', marginTop: 18, maxWidth: '14ch' }}>How it actually runs.</h2>
          </div>
          <p style={{ fontSize: 19, lineHeight: 1.65, color: 'var(--ink-2)', maxWidth: '64ch' }}>{ind.reality}</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>

      {/* WHERE CORTEXA FITS — solution chips */}
      <section className="section" style={{ background: 'var(--warm-white-2)', borderTop: '1px solid rgba(27,35,48,0.10)' }}>
        <div className="container">
          <SectionHead
            num={ind.n + '.3'}
            eyebrow="WHERE CORTEXA FITS"
            headline={<>The Cortexa solutions most relevant in {ind.name}.</>}
            sideNote="Each links to its detail page. The platform composes the modules underneath — Voice always, plus the others as the solution needs them."
          />
          <ul className="fit-list">
            {ind.fits.map((f, i) => {
              const isSlug = typeof f === 'string';
              const to = isSlug ? '/solutions/' + f : f.to;
              const label = isSlug ? SOLUTION_LABEL[f] : f.label;
              return (
                <li key={i} className="reveal">
                  <Link to={to} className="fit-row">
                    <span className="font-mono">{String(i+1).padStart(2,'0')}</span>
                    <span className="fit-label">{label}</span>
                    <span className="fit-arrow" style={{ color: ind.accent }}>→</span>
                  </Link>
                </li>
              );
            })}
          </ul>
        </div>
        <style>{`
          .fit-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid rgba(27,35,48,0.16); }
          .fit-list li { border-bottom: 1px solid rgba(27,35,48,0.12); }
          .fit-row {
            display: grid;
            grid-template-columns: 56px 1fr 32px;
            gap: 24px;
            align-items: center;
            padding: 24px 0;
            color: var(--ink);
            transition: padding 0.15s ease, background 0.15s ease;
          }
          .fit-row:hover { padding-left: 16px; background: var(--warm-white); }
          .fit-row .font-mono { font-size: 11px; color: var(--ink-4); letter-spacing: 0.14em; }
          .fit-label {
            font-family: var(--font-display);
            font-weight: 500;
            font-size: clamp(20px, 2.2vw, 26px);
            letter-spacing: -0.015em;
          }
          .fit-arrow { font-family: var(--font-mono); font-size: 18px; text-align: right; }
        `}</style>
      </section>

      {/* COMPLIANCE + MODULE MIX */}
      <section className="section-sm" style={{ background: 'var(--warm-white)', borderTop: '1px solid rgba(27,35,48,0.10)' }}>
        <div className="container" style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 64 }}>
          <div>
            <SectionEyebrow num={ind.n + '.4'} text="COMPLIANCE & STANDARDS" />
            <h3 style={{ fontSize: 24, marginTop: 14, marginBottom: 24, maxWidth: '20ch' }}>Standards the platform aligns with in {ind.name}.</h3>
            <ul className="standards-list">
              {ind.compliance.map((c, i) => <li key={i}><span style={{ color: ind.accent }}>›</span>{c}</li>)}
            </ul>
            <p style={{ marginTop: 18, fontSize: 12.5, color: 'var(--ink-4)', maxWidth: '50ch', lineHeight: 1.55 }}>
              Standards alignment is described conservatively. Specific certifications, where held, are documented in pilot scoping conversations.
            </p>
          </div>
          <div>
            <SectionEyebrow num={ind.n + '.5'} text="TYPICAL MODULE MIX" />
            <h3 style={{ fontSize: 24, marginTop: 14, marginBottom: 24, maxWidth: '20ch' }}>How {ind.name} customers compose Cortexa.</h3>
            <p style={{ fontSize: 17, lineHeight: 1.65, color: 'var(--ink-2)', maxWidth: '40ch' }}>{ind.modules}</p>
            <div style={{ marginTop: 28, display: 'flex', flexWrap: 'wrap', gap: 8 }}>
              {[
                { l: 'Voice', to: '/products/voice' },
                { l: 'Safe', to: '/products/safe' },
                { l: 'Ops', to: '/products/ops' },
                { l: 'Signal', to: '/products/signal' },
              ].filter((m) => ind.modules.toLowerCase().includes(m.l.toLowerCase())).map((m) => (
                <Link key={m.l} to={m.to} className="chip-light" style={{ borderColor: ind.accent }}>Cortexa {m.l} <span>→</span></Link>
              ))}
            </div>
          </div>
        </div>
        <style>{`
          .standards-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
          .standards-list li {
            display: grid;
            grid-template-columns: 18px 1fr;
            gap: 10px;
            font-size: 15.5px;
            color: var(--ink-2);
            line-height: 1.55;
            padding: 8px 0;
            border-bottom: 1px solid rgba(27,35,48,0.10);
          }
          .standards-list li span { font-family: var(--font-mono); }
          @media (max-width: 920px) {
            section.section-sm .container[style*="grid-template-columns: 1.1fr 1fr"] {
              grid-template-columns: 1fr !important; gap: 48px !important;
            }
          }
        `}</style>
      </section>

      <ClosingCTA
        headline={'Cortexa in your ' + ind.name + ' operation.'}
        subhead={'A scoped pilot on one of your sites, with success criteria agreed up front. Typically 60 to 90 days, on your infrastructure.'}
        primary={{ label: 'Request a Pilot', to: '/demo' }}
        secondary={{ label: 'Talk to the team', to: '/contact' }}
      />
    </>
  );
}

/* --- Industries hub -----------------------------------*/
function IndustriesHubPage() {
  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 75% 30%, rgba(242,160,75,0.12), transparent 70%)' }} />
        <div className="container" style={{ position: 'relative' }}>
          <SectionEyebrow num="20" text="INDUSTRIES" onDark />
          <h1 style={{ fontSize: 'clamp(48px, 7vw, 96px)', color: '#fff', marginTop: 26, maxWidth: '18ch', letterSpacing: '-0.035em', lineHeight: 1.0 }}>
            Built for environments where <em style={{ fontStyle: 'normal', color: 'var(--amber)' }}>radio</em> is the backbone of operations.
          </h1>
          <p style={{ marginTop: 32, fontSize: 18, color: 'var(--slate-200)', maxWidth: '64ch', lineHeight: 1.6 }}>
            Cortexa runs in industries where field teams coordinate by voice, where safety is regulated, and where the cost of missed communication is operational. Each industry below reflects how the platform shows up in that context.
          </p>
          <div style={{ marginTop: 56 }}>
            <PhotoSlot ratio="21/9" src="assets/industries-hub-hero.png" alt="Container port at blue hour, gantry cranes silhouetted against a deep blue sky with comms antennas." tag="INDUSTRIAL BACKBONE · LAST LIGHT" corner={['', 'INDUSTRIES / HERO']} />
          </div>
        </div>
      </section>

      <section className="section" style={{ background: 'var(--warm-white)' }}>
        <div className="container">
          <div className="industries-grid">
            {INDUSTRY_HUB_ORDER.map((slug) => {
              const ind = INDUSTRIES[slug];
              return (
                <Link key={slug} to={'/industries/' + slug} className="industry-card reveal">
                  <div className="industry-card-photo">
                    <PhotoSlot ratio="4/3" src={ind.photoHero} tag={ind.name.toUpperCase()} corner={['', ind.v2 ? 'V2' : 'V1']} />
                  </div>
                  <div className="industry-card-copy">
                    <h3>{ind.name}</h3>
                    <p>{ind.short}</p>
                    <span className="industry-link" style={{ color: ind.accent }}>Read industry view →</span>
                  </div>
                </Link>
              );
            })}
          </div>
        </div>
        <style>{`
          .industries-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1px; background: rgba(27,35,48,0.10); border: 1px solid rgba(27,35,48,0.10); }
          .industry-card {
            background: var(--warm-white);
            display: flex; flex-direction: column;
            color: var(--ink);
            transition: background 0.18s ease;
          }
          .industry-card:hover { background: var(--warm-white-2); }
          .industry-card-copy { padding: 22px 22px 26px; display: flex; flex-direction: column; gap: 10px; }
          .industry-card h3 { font-size: 24px; letter-spacing: -0.015em; }
          .industry-card p { font-size: 14.5px; color: var(--ink-3); line-height: 1.55; flex: 1; min-height: 3.2em; }
          .industry-link { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; }
        `}</style>
      </section>

      <ClosingCTA
        headline="Not seeing your industry?"
        subhead="If radio is the medium of coordination in your operation, Cortexa probably fits. Tell us about your environment and we'll be honest about whether we're the right match."
        primary={{ label: 'Request a Pilot', to: '/demo' }}
        secondary={{ label: 'Talk to the team', to: '/contact' }}
      />
    </>
  );
}

Object.assign(window, { IndustryPage, IndustriesHubPage, INDUSTRIES });
