/* =====================================================
   PARAGMATIQ, Industries pages
   /industries hub + 7 detail pages
   ===================================================== */

const INDUSTRIES = {
  'energy': {
    name: 'Energy & Utilities',
    short: 'Refineries, upstream and downstream, power generation, transmission.',
    title: <>Voice intelligence built for the way energy operations <span style={{ color: 'var(--gold)' }}>actually run</span>.</>,
    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', 'NERC CIP'],
    modules: 'Paragmatiq Voice (foundation) + Paragmatiq Safe (primary) + Paragmatiq Ops (rounds & switching) + optional Paragmatiq Signal for site-specific concepts.',
    plate: 'refinery',
    meta: [
      { label: 'PRIMARY USE', value: 'Permits · hot-work · rounds', gold: true },
      { label: 'CHANNELS', value: 'PTT · TETRA · DMR' },
      { label: 'COMPLIANCE', value: 'OSHA PSM · ISO 45001' },
      { label: 'MIX', value: 'Voice + Safe + Ops' },
    ],
  },
  'aviation': {
    name: 'Aviation',
    short: 'Ramp, MRO, ground handling, coordinated by voice, verified by Paragmatiq.',
    title: <>Ramp, MRO, ground handling, coordinated by voice, <span style={{ color: 'var(--gold)' }}>verified by Paragmatiq</span>.</>,
    subhead: 'Aviation ground operations run on radio. Paragmatiq 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\u2019s 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', 'FAA ground handling standards'],
    modules: 'Paragmatiq Voice + Paragmatiq Ops + Paragmatiq Signal (for airline-specific procedures).',
    plate: 'aircraft-ramp',
    meta: [
      { label: 'PRIMARY USE', value: 'Ramp · FOD · pushback', gold: true },
      { label: 'CHANNELS', value: 'VHF · UHF · LMR' },
      { label: 'COMPLIANCE', value: 'ICAO Annex 19 · FAA' },
      { label: 'MIX', value: 'Voice + Ops + Signal' },
    ],
  },
  'construction': {
    name: 'Construction & Heavy Industry',
    short: 'For multi-site, multilingual, multi-crew operations.',
    title: <>For multi-site, multilingual, <span style={{ color: 'var(--gold)' }}>multi-crew</span> operations.</>,
    subhead: 'Paragmatiq 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. Paragmatiq 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', 'OSHA Construction', 'ISO 45001', 'ANSI/ASSP Z10'],
    modules: 'Paragmatiq Voice + Paragmatiq Safe + Paragmatiq Signal.',
    plate: 'site-map',
    meta: [
      { label: 'PRIMARY USE', value: 'Permits · LOTO · briefings', gold: true },
      { label: 'CREWS', value: 'Multilingual · rotating' },
      { label: 'COMPLIANCE', value: 'OSHA · ISO 45001' },
      { label: 'MIX', value: 'Voice + Safe + Signal' },
    ],
  },
  'emergency-services': {
    name: 'Emergency Services',
    short: 'Multi-agency communications, structured.',
    title: <>Multi-agency communications, <span style={{ color: 'var(--red)' }}>structured</span>.</>,
    subhead: 'Fire, EMS, dispatch, police coordination, and emergency operations centres run on radio. Paragmatiq 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. Paragmatiq 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', 'APCO P25 environments supported', 'CJIS-compatible deployment'],
    modules: 'Paragmatiq Voice + Paragmatiq Ops + Paragmatiq Signal.',
    plate: 'dispatch-console',
    meta: [
      { label: 'PRIMARY USE', value: 'Multi-agency · review · QA', gold: true },
      { label: 'NETWORKS', value: 'P25 · NENA · CAD-integrated' },
      { label: 'COMPLIANCE', value: 'CJIS · NENA' },
      { label: 'MIX', value: 'Voice + Ops + Signal' },
    ],
  },
  'mining': {
    name: 'Mining',
    short: 'Surface and underground operations, structured.',
    title: <>Surface and underground operations, <span style={{ color: 'var(--gold)' }}>structured</span>.</>,
    subhead: 'Paragmatiq 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. Paragmatiq 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', 'ICMM safety standards', 'Local mining safety regulations per jurisdiction'],
    modules: 'Paragmatiq Voice + Paragmatiq Safe + Paragmatiq Ops.',
    plate: 'mine-tunnel',
    meta: [
      { label: 'PRIMARY USE', value: 'Blast · clearance · handover', gold: true },
      { label: 'CHANNELS', value: 'UG-PMR · leaky feeder' },
      { label: 'COMPLIANCE', value: 'MSHA · ISO 45001' },
      { label: 'MIX', value: 'Voice + Safe + Ops' },
    ],
    v2: true,
  },
  'defense': {
    name: 'Defense',
    short: 'Multi-agency operations, training facilities, base security.',
    title: <>Multi-agency operations, training facilities, <span style={{ color: 'var(--red)' }}>base security</span>.</>,
    subhead: 'Paragmatiq runs in defense and security environments where multilingual coordination, training compliance, and incident reconstruction are operational requirements, on infrastructure under the customer\u2019s sole control.',
    reality: 'Defense communications are radio-heavy, multilingual, and operationally sensitive. The requirement to keep every byte of voice traffic inside the customer\u2019s perimeter is non-negotiable. Paragmatiq 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', 'FedRAMP-aligned on-prem posture'],
    modules: 'Paragmatiq Voice + Paragmatiq Safe + Paragmatiq Signal.',
    plate: 'topology',
    meta: [
      { label: 'PRIMARY USE', value: 'Training · base · multi-agency', gold: true },
      { label: 'POSTURE', value: 'On-prem · customer-controlled' },
      { label: 'COMPLIANCE', value: 'NIST 800-53 · ITAR-ready' },
      { label: 'MIX', value: 'Voice + Safe + Signal' },
    ],
    v2: true,
  },
  'logistics': {
    name: 'Logistics & Ports',
    short: 'Terminal control, cargo handling, ramp operations.',
    title: <>Terminal control, cargo handling, <span style={{ color: 'var(--gold)' }}>ramp operations</span>.</>,
    subhead: 'Container terminals, ports, and large logistics yards run on radio coordination between yard control, equipment operators, and external carriers. Paragmatiq 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. Paragmatiq 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: 'Paragmatiq Voice + Paragmatiq Ops + Paragmatiq Signal.',
    plate: 'site-map',
    meta: [
      { label: 'PRIMARY USE', value: 'Yard · cargo · multilingual', gold: true },
      { label: 'CHANNELS', value: 'UHF · LTE-PTT' },
      { label: 'COMPLIANCE', value: 'ISPS · ISO 28000' },
      { label: 'MIX', value: 'Voice + Ops + Signal' },
    ],
    v2: true,
  },
};

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

function IndustryPage({ slug }) {
  useReveal();
  const ind = INDUSTRIES[slug];
  if (!ind) return <StubPage path={'/industries/' + slug} />;

  return (
    <>
      {/* HERO */}
      <section className="on-navy hero-page">
        <div className="container">
          <div className="eyebrow on-dark">
            <span>INDUSTRY · {ind.name.toUpperCase()}</span>
            {ind.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>{ind.title}</h1>
          <p className="subhead">{ind.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="/industries" className="btn btn-ghost-dark">All industries <span className="arrow">→</span></Link>
          </div>
          {ind.meta && (
            <div className="hero-meta">
              {ind.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={ind.plate} ratio="21/9" tag={ind.name.toUpperCase()} corner={['DWG-I-101', 'INDUSTRY / HERO']} />
          </div>
        </div>
      </section>

      {/* REALITY */}
      <section className="section on-bone">
        <div className="container" style={{ display: 'grid', gridTemplateColumns: '1fr 1.6fr', gap: 80 }}>
          <div>
            <SectionEyebrow text="THE REALITY" />
            <h2 style={{ fontSize: 'clamp(32px, 3.6vw, 48px)', marginTop: 18, maxWidth: '14ch', fontWeight: 800, letterSpacing: '-0.03em', lineHeight: 1.0 }}>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 PARAGMATIQ FITS, solution rows */}
      <section className="section on-paper">
        <div className="container">
          <SectionHead
            eyebrow="WHERE PARAGMATIQ FITS"
            headline={<>The Paragmatiq 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 ? (window.SOLUTION_LABEL ? window.SOLUTION_LABEL[f] : f) : f.label;
              return (
                <li key={i} className="reveal">
                  <Link to={to} className="fit-row">
                    <span className="fit-label">{label}</span>
                    <span className="fit-arrow">→</span>
                  </Link>
                </li>
              );
            })}
          </ul>
        </div>
        <style>{`
          .fit-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid rgba(10,31,68,0.18); }
          .fit-list li { border-bottom: 1px solid rgba(10,31,68,0.14); }
          .fit-row {
            display: grid;
            grid-template-columns: 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(--bone-2); }
          .fit-label {
            font-family: var(--font-display);
            font-weight: 700;
            font-size: clamp(20px, 2.2vw, 28px);
            letter-spacing: -0.02em;
          }
          .fit-arrow { font-family: var(--font-mono); font-size: 18px; color: var(--gold); text-align: right; }
        `}</style>
      </section>

      {/* COMPLIANCE + MODULE MIX */}
      <section className="section-sm on-bone" style={{ borderTop: '1px solid rgba(10,31,68,0.14)' }}>
        <div className="container" style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 64 }}>
          <div>
            <SectionEyebrow text="COMPLIANCE & STANDARDS" />
            <h3 style={{ fontSize: 26, marginTop: 14, marginBottom: 24, maxWidth: '20ch', fontWeight: 700 }}>Standards the platform aligns with in {ind.name}.</h3>
            <ul className="standards-list-light">
              {ind.compliance.map((c, i) => <li key={i}><span>›</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 text="TYPICAL MODULE MIX" />
            <h3 style={{ fontSize: 26, marginTop: 14, marginBottom: 24, maxWidth: '20ch', fontWeight: 700 }}>How {ind.name} customers compose Paragmatiq.</h3>
            <p style={{ fontSize: 17, lineHeight: 1.65, color: 'var(--ink-2)', maxWidth: '40ch' }}>{ind.modules}</p>
            <div style={{ marginTop: 24, 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="industry-chip">
                  <span>Paragmatiq {m.l}</span>
                  <span style={{ color: 'var(--gold)' }}>→</span>
                </Link>
              ))}
            </div>
          </div>
        </div>
        <style>{`
          .standards-list-light { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0; }
          .standards-list-light li {
            display: grid;
            grid-template-columns: 18px 1fr;
            gap: 10px;
            font-size: 15.5px;
            color: var(--ink-2);
            line-height: 1.55;
            padding: 12px 0;
            border-bottom: 1px solid rgba(10,31,68,0.14);
          }
          .standards-list-light li span { font-family: var(--font-mono); color: var(--gold); }
          .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); }
          @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={'Paragmatiq 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' }}
      />
    </>
  );
}

function IndustriesHubPage() {
  useReveal();
  return (
    <>
      <section className="on-navy hero-page">
        <div className="container">
          <div className="eyebrow on-dark"><span>INDUSTRIES · SEVEN VERTICALS</span></div>
          <h1>Built for environments where <span style={{ color: 'var(--gold)' }}>radio</span> is the backbone of operations.</h1>
          <p className="subhead">
            Paragmatiq 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 className="hero-meta">
            <div className="hero-meta-cell"><span className="label">VERTICALS</span><span className="value gold">7 · published</span></div>
            <div className="hero-meta-cell"><span className="label">REGION</span><span className="value">Global · operator-led</span></div>
            <div className="hero-meta-cell"><span className="label">SUPPORT</span><span className="value">Business hours</span></div>
            <div className="hero-meta-cell"><span className="label">DEPLOYMENT</span><span className="value">On your hardware</span></div>
          </div>
          <div style={{ marginTop: 64, paddingBottom: 64 }}>
            <Plate kind="site-map" ratio="21/9" tag="VERTICAL COVERAGE · GLOBAL OPERATIONS" corner={['DWG-I-100', 'INDUSTRIES / HUB']} />
          </div>
        </div>
      </section>

      <section className="section on-bone">
        <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-plate">
                    <Plate kind={ind.plate} ratio="4/3" 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">Read industry view →</span>
                  </div>
                </Link>
              );
            })}
          </div>
        </div>
        <style>{`
          .industries-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
            gap: 1px;
            background: rgba(10,31,68,0.14);
            border: 1px solid rgba(10,31,68,0.14);
          }
          .industry-card {
            background: var(--paper);
            display: flex; flex-direction: column;
            color: var(--ink);
            transition: background 0.18s ease;
          }
          .industry-card:hover { background: var(--bone-2); }
          .industry-card-plate { padding: 20px 20px 0; }
          .industry-card-copy { padding: 22px 24px 30px; display: flex; flex-direction: column; gap: 10px; }
          .industry-card h3 { font-size: 24px; letter-spacing: -0.02em; }
          .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.16em; text-transform: uppercase; color: var(--gold-3); }
        `}</style>
      </section>

      <ClosingCTA
        headline="Not seeing your industry?"
        subhead="If radio is the medium of coordination in your operation, Paragmatiq 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 });