/* global React */
// Shared on window: Link, FadeIn, SectionHead, ClosingCTA

function PageCapabilities() {
  return (
    <>
      <CapHero />
      <ProductFamilyMLM />
      <ProductFamilySmoke />
      <ProductFamilyTraining />
      <CapComponentry />
      <CapInDevelopment />
      <PlatformSection />
      <CapClosing />
    </>
  );
}

/* Placeholder product visual - clean monochrome card with product code,
   used when a transparent product render is pending. */
function ProductImagePending({ code }) {
  return (
    <div style={{
      width: '100%', height: '100%',
      display: 'flex',
      flexDirection: 'column',
      alignItems: 'center',
      justifyContent: 'center',
      gap: 10,
      background: 'transparent',
    }}>
      <div style={{
        fontFamily: 'ui-monospace, "SF Mono", Menlo, monospace',
        fontSize: 32,
        fontWeight: 600,
        letterSpacing: '0.02em',
        color: 'var(--text-3)',
      }}>{code}</div>
      <div style={{
        fontSize: 9.5,
        letterSpacing: '0.24em',
        textTransform: 'uppercase',
        color: 'var(--text-3)',
        fontWeight: 500,
      }}>
        Photography Pending
      </div>
    </div>
  );
}

/* ============================================================
   2.1  HERO - military operational photography, dark
   ============================================================ */
function CapHero() {
  return (
    <section className="hero hero--page" data-screen-label="01 Capabilities Hero">
      <div className="hero__bg" style={{ backgroundImage: `url(${window.A('photo-troops-respirator-green.jpg')})` }}></div>
      <div className="hero__grain"></div>
      <p className="crown-credit crown-credit--left">© His Majesty the King in Right of Canada, Canadian Armed Forces, Combat Camera</p>
      <div className="wrap hero__content">
        <div className="eyebrow">What We Make</div>
        <h1 className="h-display">
          Military pyrotechnics.<br/>
          In service across allied<br/>defence forces.
        </h1>
        <p className="hero__sub" style={{ maxWidth: 640 }}>
          HFI manufactures military pyrotechnic products for Canada's
          Department of National Defence, the United States Navy, and allied
          militaries across NATO and partner nations. Every product is manufactured to
          defence specification, on contract, in Canada.
        </p>
      </div>
    </section>
  );
}

/* ============================================================
   Generic two-column product-family section
   ============================================================ */
function FamilySection({
  variant,            // 'light' | 'dark' | 'darker'
  eyebrow, title, intro,
  products,           // array of {name, desc, image, badges}
  supportingImage, supportingImageAlt, supportingCaption,
  index,
  screenLabel,
}) {
  const klass =
    variant === 'light' ? 'section section--light' :
    variant === 'darker' ? 'section section--alt' :
    'section';

  return (
    <section className={klass} data-screen-label={screenLabel}>
      <div className="wrap">
        <div style={{
          display: 'grid',
          gridTemplateColumns: '1fr 1.15fr',
          gap: 80,
          alignItems: 'start',
        }} className="fam-head">
          <div>
            <div className="eyebrow">{eyebrow}</div>
            <h2 className="h-1">{title}</h2>
          </div>
          <div className="body body-lg" style={{ paddingTop: 6 }}>
            {intro.map((p, i) => <p key={i} style={{ marginBottom: i < intro.length - 1 ? '1em' : 0 }}>{p}</p>)}
          </div>
        </div>

        <div className="product-grid" style={{ marginTop: 70 }}>
          {products.map((p, i) => {
            const openLead = (e) => { e.preventDefault(); window.__leadProduct = p.name; window.location.hash = '/contact'; };
            return (
            <article className="product" key={p.name}>
              <a
                href="#/contact"
                className="product__media product__media--link"
                onClick={openLead}
                aria-label={`Request details about ${p.name}`}
              >
                {p.image
                  ? <img src={p.image} alt={p.name} />
                  : <ProductImagePending code={p.code} />}
                <span className="product__media-hint">Request details <span>→</span></span>
              </a>
              <div className="product__body">
                <div className="product__num">{`PRODUCT 0${i + 1} · ${p.familyTag || ''}`}</div>
                <h3 className="product__name">{p.name}</h3>
                <p className="product__desc">{p.desc}</p>
                {p.badges && (
                  <div className="product__meta">
                    {p.badges.map(b => (
                      <span key={b} className="tag"><span className="dot"></span>{b}</span>
                    ))}
                  </div>
                )}
                <a
                  href="#/contact"
                  className="product__cta"
                  onClick={openLead}
                >
                  Request details <span>→</span>
                </a>
              </div>
            </article>
            );
          })}
        </div>

        {supportingImage && (
          <figure style={{ marginTop: 70, margin: '70px 0 0' }}>
            <div className="ds-wide-media" style={{
              aspectRatio: '21/9',
              overflow: 'hidden',
              position: 'relative',
              border: variant === 'light' ? '1px solid var(--light-rule)' : '1px solid var(--rule)',
            }}>
              <img src={supportingImage} alt={supportingImageAlt}
                style={{ width: '100%', height: '100%', objectFit: 'cover', filter: 'saturate(1.04) contrast(1.04)' }} />
            </div>
            {supportingCaption && (
              <figcaption className="label" style={{ marginTop: 16, color: 'var(--text-3)' }}>
                {supportingCaption}
              </figcaption>
            )}
          </figure>
        )}
      </div>
      <style>{`
        @media (max-width: 880px) {
          .fam-head { grid-template-columns: 1fr !important; gap: 24px !important; }
        }
      `}</style>
    </section>
  );
}

/* ============================================================
   2.2  Marine Location Markers - LIGHT
   ============================================================ */
function ProductFamilyMLM() {
  return (
    <FamilySection
      variant="light"
      screenLabel="02 Marine Location Markers"
      eyebrow="Marine Location Markers"
      title="Marking position. In any sea state."
      intro={[
        'Marine Location Markers are pyrotechnic signalling devices deployed in search and rescue, man-overboard recovery, and naval operations, producing sustained smoke and light signals on water contact in any visibility condition.',
        'HFI is the sole-source Canadian manufacturer of Marine Location Markers for the United States Navy. We also supply the Royal Canadian Navy and allied naval forces across NATO.',
      ]}
      products={[
        {
          name: 'SC-25 Marine Location Marker',
          familyTag: 'MLM',
          image: window.A('product-sc25.png'),
          desc: 'Hand-deployed marine signalling device producing white smoke and light signals on water contact. Used in search and rescue and man-overboard recovery operations. Qualified to military specification and in active service with the United States Navy and Canadian Armed Forces.',
          badges: ['Hand-deployed', 'NATO-qualified'],
        },
        {
          name: 'SC-58 Marine Location Marker',
          familyTag: 'MLM',
          image: window.A('product-sc58-tx.png'),
          desc: 'Larger-format marine signalling device producing sustained white smoke and light output for extended marking duration. Designed for open-water naval operations requiring extended visibility. Qualified to military specification.',
          badges: ['Extended duration', 'Naval ops', 'NATO-qualified'],
        },
        {
          name: 'Diver Recall (SC-810)',
          familyTag: 'Naval',
          image: window.A('product-diver-recall.png'),
          desc: 'Dropped from the surface, the SC-810 sinks at a controlled rate before producing a loud underwater report (100-130 dB at 15 m) and a visible flash. Used to recall submerged dive teams when other communications fail. Friction-match ignition with a 6 to 8 second delay.',
          badges: ['Underwater report + flash', '100-130 dB', 'Friction-match ignition'],
        },
      ]}
      supportingImage={window.A('photo-mlm-sc25-functioning.jpg')}
      supportingImageAlt="SC-25 marine location markers functioning on open water, producing white smoke and flame"
      supportingCaption="SC-25 marine location markers functioning on open water · white smoke and flame signalling"
    />
  );
}

/* ============================================================
   2.3  Smoke Signals - DARK CHARCOAL
   ============================================================ */
function ProductFamilySmoke() {
  return (
    <section className="section section--alt" data-screen-label="03 Smoke Signals">
      <div className="wrap">
        <div style={{
          display: 'grid',
          gridTemplateColumns: '1.1fr 1fr',
          gap: 80,
          alignItems: 'center',
        }} className="smoke-grid">
          <div>
            <div className="eyebrow">Smoke Signals</div>
            <h2 className="h-1" style={{ marginBottom: 32 }}>
              Tactical smoke. Multiple colours. Standard issue.
            </h2>
            <div className="body body-lg" style={{ marginBottom: 40 }}>
              <p>
                HFI's smoke products are used by Canadian and allied military
                forces for ground marking, landing zone designation, observation post
                signalling, and training scenarios. Available in multiple colours for
                operational flexibility and deconfliction in the field.
              </p>
            </div>

            <article style={{
              border: '1px solid var(--rule)',
              borderLeft: '3px solid var(--red)',
              padding: '28px 32px',
              background: 'var(--bg)',
            }}>
              <div className="product__num">Product · Smoke</div>
              <h3 className="product__name" style={{ marginBottom: 12 }}>C8 Smoke Grenade</h3>
              <p className="product__desc">
                Hand-thrown smoke grenade producing dense, sustained smoke output.
                Available in multiple colours for deconfliction in the field. Used
                across Canadian Armed Forces and allied military training and
                operational programs. Manufactured to defence specification.
              </p>
              <div className="product__meta">
                {['Red', 'Yellow', 'Green', 'Violet'].map((c, i) => {
                  const fills = { Green: '#2C8F4F', Violet: '#9450B5', Red: '#C8312E', Yellow: '#E8C634' };
                  return (
                    <span key={c} className="tag">
                      <span className="dot" style={{ background: fills[c] }}></span>{c}
                    </span>
                  );
                })}
              </div>
            </article>
          </div>

          <div style={{ position: 'relative', aspectRatio: '5/6', overflow: 'hidden' }}>
            <img
              src={window.A('photo-c8-smoke.jpg')}
              alt="C8 smoke grenades deployed across an open field, multiple colours"
              style={{ width: '100%', height: '100%', objectFit: 'cover', filter: 'saturate(0.92) contrast(1.06)' }}
            />
            <div style={{
              position: 'absolute',
              bottom: 0, left: 0,
              padding: '16px 22px',
              background: 'rgba(8,9,12,.85)',
              backdropFilter: 'blur(6px)',
              borderTop: '1px solid var(--rule)',
              borderRight: '1px solid var(--rule)',
            }}>
              <div className="label" style={{ color: 'var(--red)' }}>Field Deployment</div>
              <div style={{ fontSize: 13, color: 'var(--white)', marginTop: 6 }}>Combined-arms training exercise</div>
            </div>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 920px) {
          .smoke-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
        }
      `}</style>
    </section>
  );
}

/* ============================================================
   2.4  Training Pyrotechnics - LIGHT
   ============================================================ */
function ProductFamilyTraining() {
  return (
    <FamilySection
      variant="light"
      screenLabel="04 Training Pyrotechnics"
      eyebrow="Training Pyrotechnics"
      title="Realistic training. Safe, controlled, and repeatable."
      intro={[
        'Effective military training requires realistic simulation of combat conditions: explosive effects, perimeter alerts, and noise and light stimuli that prepare soldiers for operational environments. HFI manufactures training pyrotechnics in active use by Canadian and allied forces.',
      ]}
      products={[
        {
          name: 'Thunderflash SC-809',
          familyTag: 'Training',
          image: window.A('product-thunderflash.png'),
          desc: 'Simulated grenade producing a sharp report and flash effect without fragmentation. Used in infantry and special forces training to simulate grenade deployment in close-quarter and field scenarios. Canadian Armed Forces standard issue.',
          badges: ['Report + flash', 'No fragmentation', 'CAF'],
        },
        {
          name: 'Simulator Projectile Ground Burst SC-115',
          familyTag: 'Training',
          image: window.A('product-spgb.png'),
          desc: 'Hand-thrown, pull-cord initiated device producing a realistic explosive report and ground-burst effect. Used in field training and scenario simulation to replicate explosive effects at ground level. Manufactured to defence specification.',
          badges: ['Hand-thrown', 'Pull-cord initiated', 'CAF'],
        },
      ]}
    />
  );
}

/* ============================================================
   2.4a  Contract Manufacturing / Componentry - LIGHT accent band.
   Introduces the idea that HFI builds component-level work to
   specification, not just finished products. Bridges the product
   catalogue into the In Development / co-development beat.
   Content drawn from HFI capability spec sheets.
   ============================================================ */
function CapComponentry() {
  const caps = [
    {
      label: 'Compositions & Transfers',
      body: 'Mixing and forming, precision pressing (pneumatic and hydraulic), and extrusion of high-viscosity compositions, including C8 smoke, delay elements, whistles, and ignition systems.',
      chips: ['Pressing', 'Extrusion', 'Delay elements'],
    },
    {
      label: 'Initiators',
      body: 'Percussion primers and electrically-initiated systems: bridge-wire coating, precision soldering, fuse cutting, and intricate assembly held to exacting inspection.',
      chips: ['Percussion primers', 'Electric ignitors', 'Bridge-wire'],
    },
    {
      label: 'Inert Assembly',
      body: 'Sealing, seaming, stamping, tube rolling, and roll & die crimping, engineered for repeatability from low-volume specialty runs to high-volume production.',
      chips: ['Sealing & seaming', 'Crimping', 'Labeling'],
    },
    {
      label: 'In-House Testing',
      body: 'Vibration and acoustic, particle-size, spectroscopy, thermal analysis, burn-rate, and leak testing; performance validated under defence standards before it leaves the site.',
      chips: ['Burn rate', 'Thermal', 'Leak testing'],
    },
  ];
  return (
    <section
      className="section section--tight cap-comp"
      data-screen-label="04a Contract Manufacturing"
      style={{
        background: 'var(--light-surface)',
        color: 'var(--light-text)',
        borderTop: '3px solid var(--red)',
      }}
    >
      <div className="wrap">
        <div className="cap-comp__head">
          <div>
            <div className="eyebrow" style={{ color: 'var(--red)' }}>Contract Manufacturing</div>
            <h2 className="h-1" style={{ color: 'var(--light-text)', margin: '14px 0 0' }}>
              We build componentry,<br />not just finished products.
            </h2>
          </div>
          <p className="body body-lg cap-comp__lede" style={{ color: 'var(--light-text-2)', margin: 0 }}>
            Behind every HFI product is a deep manufacturing base: composition chemistry,
            initiators, inert assembly, and validation testing. We put it to work for primes
            and allied programs: bring us a specification, a component, or a subsystem, and
            we build it to standard.
          </p>
        </div>

        <div className="cap-comp__gallery">
          <figure className="cap-comp__shot">
            <img src={window.A('photo-candle-pressing.jpg')}
              alt="Gloved hands loading a composition candle into a hydraulic press during precision pressing" />
            <figcaption className="cap-comp__cap">
              <span className="cap-comp__cap-n">01</span> Compositions &amp; Transfers · precision candle pressing
            </figcaption>
          </figure>
          <figure className="cap-comp__shot">
            <img src={window.A('photo-squibs.jpg')}
              alt="Electric squib initiators with bridge-wire bead and lead wires, close detail" />
            <figcaption className="cap-comp__cap">
              <span className="cap-comp__cap-n">02</span> Initiators · electric squibs, bridge-wire detail
            </figcaption>
          </figure>
          <figure className="cap-comp__shot">
            <img src={window.A('photo-labeling.jpg')}
              alt="SC-25 Marine Location Marker on the labeling line with NSN and marking labels applied" />
            <figcaption className="cap-comp__cap">
              <span className="cap-comp__cap-n">03</span> Inert Assembly · labeling &amp; marking, SC-25 line
            </figcaption>
          </figure>
          <figure className="cap-comp__shot">
            <img src={window.A('photo-c8-test.jpg')}
              alt="C8 coloured smoke functioning on HFI's test range during a controlled performance test" />
            <figcaption className="cap-comp__cap">
              <span className="cap-comp__cap-n">04</span> In-House Testing · C8 smoke, functional range test
            </figcaption>
          </figure>
        </div>

        <div className="cap-comp__grid">
          {caps.map((c, i) => (
            <window.FadeIn key={c.label} delay={i * 80} className="cap-comp__cell">
              <div className="cap-comp__num">0{i + 1}</div>
              <h3 className="cap-comp__label">{c.label}</h3>
              <p className="cap-comp__body">{c.body}</p>
              <div className="cap-comp__chips">
                {c.chips.map(ch => <span key={ch} className="cap-comp__chip">{ch}</span>)}
              </div>
            </window.FadeIn>
          ))}
        </div>

        <div className="cap-comp__cta">
          <window.Link to="/partnerships" className="link-arrow">Develop with HFI <span>→</span></window.Link>
        </div>
      </div>

      <style>{`
        .cap-comp__head {
          display: grid; grid-template-columns: 1fr 1fr; gap: 60px;
          align-items: end; margin-bottom: 48px;
        }
        .cap-comp__lede { max-width: 520px; }
        .cap-comp__gallery {
          display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px;
          margin-bottom: 56px;
        }
        .cap-comp__shot { margin: 0; }
        .cap-comp__shot img {
          width: 100%; height: 360px; object-fit: cover; object-position: center 42%;
          display: block; border: 1px solid var(--light-rule);
          filter: saturate(1.04) contrast(1.03);
        }
        .cap-comp__cap {
          margin-top: 14px; font-size: 12px; letter-spacing: 0.06em;
          color: var(--light-text-2); text-transform: uppercase;
          font-family: ui-monospace, 'SF Mono', Menlo, monospace;
          display: flex; align-items: baseline; gap: 10px;
        }
        .cap-comp__cap-n { color: var(--red); font-weight: 700; }
        .cap-comp__grid {
          display: grid; grid-template-columns: repeat(4, 1fr);
          gap: 0;
          border-top: 1px solid var(--light-rule);
        }
        .cap-comp__cell {
          padding: 34px 30px 36px 0;
          border-right: 1px solid var(--light-rule);
        }
        .cap-comp__cell:last-child { border-right: none; padding-right: 0; }
        .cap-comp__cell:not(:first-child) { padding-left: 30px; }
        .cap-comp__num {
          font-family: ui-monospace, 'SF Mono', Menlo, monospace;
          font-size: 12px; letter-spacing: 0.14em; color: var(--red); font-weight: 600;
          margin-bottom: 16px;
        }
        .cap-comp__label {
          font-size: 18px; font-weight: 600; letter-spacing: -0.01em;
          color: var(--light-text); margin: 0 0 14px; text-transform: none; line-height: 1.2;
        }
        .cap-comp__body { font-size: 14px; line-height: 1.62; color: var(--light-text-2); margin: 0 0 18px; }
        .cap-comp__chips { display: flex; flex-wrap: wrap; gap: 7px; }
        .cap-comp__chip {
          font-size: 11px; letter-spacing: 0.04em; color: var(--light-text-2);
          padding: 5px 10px; border: 1px solid var(--light-rule); border-radius: 2px;
          background: rgba(255,255,255,.35);
        }
        .cap-comp__cta { margin-top: 44px; }
        .cap-comp__cta .link-arrow { color: var(--red); border-color: var(--red); }
        .cap-comp__cta .link-arrow:hover { color: var(--light-text); border-color: var(--light-text); }
        @media (max-width: 920px) {
          .cap-comp__head { grid-template-columns: 1fr; gap: 18px; align-items: start; }
          .cap-comp__shot img { height: 300px; }
          .cap-comp__grid { grid-template-columns: 1fr 1fr; }
          .cap-comp__cell:nth-child(2) { border-right: none; padding-right: 0; }
          .cap-comp__cell:nth-child(3), .cap-comp__cell:nth-child(4) { border-top: 1px solid var(--light-rule); }
          .cap-comp__cell:nth-child(odd) { padding-left: 0; }
          .cap-comp__cell:nth-child(even) { padding-left: 30px; }
        }
        @media (max-width: 560px) {
          .cap-comp__gallery { grid-template-columns: 1fr; }
          .cap-comp__shot img { height: 280px; }
          .cap-comp__grid { grid-template-columns: 1fr; }
          .cap-comp__cell { border-right: none !important; padding: 28px 0 !important;
            border-top: 1px solid var(--light-rule); }
        }
      `}</style>
    </section>
  );
}

/* ============================================================
   2.4b  In Development - dark, mirrors Facility's three-pillar
   rhythm so the site reads as a single rhetorical system.
   Speaks to the Innovating beat without naming a strategy.
   ============================================================ */
function CapInDevelopment() {
  const tracks = [
    {
      title: 'Refining the line',
      tag: 'PROVEN & REFINED',
      body: 'Next-generation versions of the marine markers, smoke products, and training pyrotechnics already in service with Canadian and allied forces. Each generation builds on field feedback, tighter specifications, and the production discipline over 150 years of regulated operation teaches.',
    },
    {
      title: 'Building what doesn\u2019t exist',
      tag: 'CONCEPT TO LAUNCH',
      body: 'Products that do not yet exist \u2014 built from HFI\u2019s core pyrotechnic chemistry to address how the battlefield is changing. Designed in close engagement with the forces that will eventually carry them.',
    },
    {
      title: 'Customer-led & co-development',
      tag: 'CUSTOMER-DRIVEN',
      body: 'Portfolio work that exists because allied forces and prime contractors approached HFI specifically \u2014 including energetic componentry developed into larger systems. When a requirement demands what only HFI\u2019s regulated chemistry and manufacturing depth can deliver, we take it on alongside the customer who needs it.',
    },
  ];
  return (
    <section className="section section--alt" data-screen-label="04b Innovation">
      <div className="wrap">
        <window.SectionHead
          eyebrow="Innovation"
          title="Innovation, engineered for defence."
          lede="HFI’s innovation builds on a century and a half of regulated pyrotechnic expertise, aligned to emerging Canadian defence needs and grounded in safety, compliance, and performance. We move the products in service forward, develop what doesn’t yet exist, and take customer-driven requirements from concept to launch."
        />
        <div className="pillars">
          {tracks.map((t, i) => (
            <window.FadeIn key={t.title} delay={i * 100} className="pillar">
              <div className="pillar__num">0{i + 1}  ·  {t.tag}</div>
              <h3 style={{ fontSize: 22, textTransform: 'none', letterSpacing: '-0.01em' }}>{t.title}</h3>
              <p style={{ marginTop: 18 }}>{t.body}</p>
            </window.FadeIn>
          ))}
        </div>

        <figure className="cap-test" style={{ margin: '70px 0 0' }}>
          <div className="cap-test__seq">
            <div className="cap-test__step">
              <div className="cap-test__media">
                <img src={window.A('photo-test-survivability.jpg')}
                  alt="Survivability test against an instrumented torso form on HFI's test range" />
              </div>
              <div className="cap-test__cap">
                <span className="cap-test__n">01</span> Survivability &amp; effects · instrumented test
              </div>
            </div>
            <div className="cap-test__arrow" aria-hidden="true">→</div>
            <div className="cap-test__step">
              <div className="cap-test__media">
                <img src={window.A('photo-test-burn.jpg')}
                  alt="Controlled burn test of a pressed composition in an instrumented chamber" />
              </div>
              <div className="cap-test__cap">
                <span className="cap-test__n">02</span> Burn-rate · instrumented chamber
              </div>
            </div>
            <div className="cap-test__arrow" aria-hidden="true">→</div>
            <div className="cap-test__step">
              <div className="cap-test__media">
                <img src={window.A('photo-test-thermal.jpg')}
                  alt="Thermal imaging of an energetic plume with a calibrated temperature scale" />
              </div>
              <div className="cap-test__cap">
                <span className="cap-test__n">03</span> Thermal analysis · calibrated imaging
              </div>
            </div>
          </div>
          <figcaption className="label" style={{ marginTop: 22, color: 'var(--text-3)' }}>
            Effects, burn-rate, and thermal characterization · controlled test range, eastern Ontario
          </figcaption>
          <style>{`
            .cap-test__seq {
              display: grid; grid-template-columns: 1fr auto 1fr auto 1fr;
              align-items: start; gap: 18px;
            }
            .cap-test__media {
              aspect-ratio: 4 / 3; overflow: hidden; position: relative;
              border: 1px solid var(--rule); background: #000;
            }
            .cap-test__media img {
              width: 100%; height: 100%; object-fit: cover; object-position: center;
              filter: saturate(1.05) contrast(1.04);
            }
            .cap-test__cap {
              margin-top: 14px; font-size: 12px; letter-spacing: 0.05em;
              color: var(--text-2); text-transform: uppercase;
              font-family: ui-monospace, 'SF Mono', Menlo, monospace; line-height: 1.5;
            }
            .cap-test__n { color: var(--red); font-weight: 700; margin-right: 6px; }
            .cap-test__arrow {
              align-self: center; color: var(--text-3); font-size: 20px;
              padding-bottom: 28px;
            }
            @media (max-width: 760px) {
              .cap-test__seq { grid-template-columns: 1fr; gap: 6px; }
              .cap-test__arrow { display: none; }
              .cap-test__cap { margin-bottom: 8px; }
            }
          `}</style>
        </figure>
      </div>
    </section>
  );
}

/* ============================================================
   2.5  Why HFI \u2014 atmospheric dark
   ============================================================ */
function PlatformSection() {
  const highlights = [
    "Designated manufacturer · Canada's Munitions Supply Program",
    'Canadian DND-funded innovation programs · active',
    'In service · CAF, United States Navy, and NATO allies',
  ];
  return (
    <section className="section" style={{ position: 'relative', padding: '140px 0', overflow: 'hidden' }} data-screen-label="05 Why HFI">
      {/* atmospheric red glow */}
      <div style={{
        position: 'absolute',
        top: '-30%', left: '50%',
        width: '70vw', height: '70vw',
        maxWidth: 900, maxHeight: 900,
        transform: 'translateX(-50%)',
        background: 'radial-gradient(circle, rgba(212,30,27,.10), transparent 60%)',
        pointerEvents: 'none',
      }}></div>
      <div className="wrap wrap--narrow" style={{ position: 'relative' }}>
        <div style={{ textAlign: 'center', maxWidth: 760, margin: '0 auto' }}>
          <div className="eyebrow">Why HFI</div>
          <h2 className="h-display" style={{ fontSize: 'clamp(36px,4.6vw,64px)' }}>
            Canada's sovereign pyrotechnic capability.<br/>
            <span style={{ color: 'var(--text-2)', fontWeight: 600 }}>Built for what comes next.</span>
          </h2>
          <div className="body body-lg" style={{ marginTop: 40, textAlign: 'left' }}>
            <p>
              HFI is Canada's only designated manufacturer of military
              pyrotechnics, a position supported by overlapping regulatory
              designations, generations of compliant licensed operation, and a
              continuous record of qualification and delivery to Canadian and allied
              forces.
            </p>
            <p>
              Active programs underway include Canadian Department of National
              Defence-funded research and new product
              development, infrastructure expansion for regulated defence material
              storage, and new product qualification for Canadian and allied
              requirements. These are not plans. They are in progress.
            </p>
          </div>

          <div className="highlights">
            {highlights.map((h, i) => (
              <div className="highlights__item" key={i}>
                <div className="dot"></div>
                <div className="txt">{h}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   2.6  Closing CTA - dark
   ============================================================ */
function CapClosing() {
  return (
    <window.ClosingCTA
      headline="If your program requires Canadian defence-energetics capability, the conversation starts here."
      ctaText="Request a Capability Briefing"
    />
  );
}

window.PageCapabilities = PageCapabilities;