/* global React */
const { useEffect, useState } = React;
// Shared: Link, FadeIn, SectionHead, ClosingCTA already on window

function PageHome() {
  return (
    <>
      <HomeHero />
      <HomePillars />
      <HomeFieldStrip />
      <HomeStatement />
      <HomeFacilityFeature />
      <HomeDevelopment />
      <HomeHeritage />
      <window.ClosingCTA
        headline="Serious defence work requires a serious partner."
        body="If your requirement demands sovereign, licensed Canadian capability, we want to hear from you."
        ctaText="Start the Conversation" />
      
    </>);

}

/* =========================================================
   1.1  HERO - aerial flyover video.
   ========================================================= */
function HomeHero() {
  return (
    <section className="hero hero--cinematic" data-screen-label="01 Home Hero">
      <video
        className="hero__video"
        autoPlay
        muted
        loop
        playsInline
        preload="auto"
        poster={window.A('photo-aerial-hero.jpg')}>
        
        <source src={window.A('hfi-aerial.mp4')} type="video/mp4" />
      </video>
      <div className="hero__scrim"></div>
      <div className="hero__grain"></div>

      <div className="wrap hero__content">
        <div className="eyebrow">Est. 1873 · Prescott, Ontario</div>
        <h1 className="h-display">
          Defence pyrotechnics,<br />
          made in Canada.
        </h1>
        <p className="hero__sub">
          <strong>Marine markers. Smoke signals. Training pyrotechnics.</strong>
          {' '}In service with the Canadian Armed Forces, the United States Navy, and allied militaries across NATO and partner nations.
        </p>
        <div className="hero__cta">
          <window.Link to="/capabilities" className="btn btn--primary">Our Capabilities <span className="arr">→</span></window.Link>
        </div>
      </div>

      {/* Aerial flyover indicator */}
      <div style={{
        position: 'absolute',
        top: '50%', right: '40px',
        transform: 'translateY(-50%)',
        zIndex: 3,
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'flex-end',
        gap: 10
      }} className="hero__corner">
        <div style={{
          width: 8, height: 8,
          background: 'var(--red)',
          animation: 'hero-pulse 2s ease-in-out infinite'
        }}></div>
        <div style={{
          writingMode: 'vertical-rl',
          fontSize: 10,
          letterSpacing: '0.32em',
          textTransform: 'uppercase',
          color: 'var(--text-2)',
          fontWeight: 500
        }}>
Aerial · HFI Site · ON
        </div>
      </div>

      <div className="hero__strap">
        <div className="wrap hero__strap-inner">
          <div className="hero__strap-item">
            <div className="num">1873</div>
            <div className="lbl">Founded</div>
          </div>
          <div className="hero__strap-item">
            <div className="num">~3,000</div>
            <div className="lbl">ACRES</div>
          </div>
          <div className="hero__strap-item">
            <div className="num">NATO</div>
            <div className="lbl">Allied Programs</div>
          </div>
          <div className="hero__strap-item">
            <div className="num">Innovation</div>
            <div className="lbl">Active Programmes</div>
          </div>
        </div>
      </div>
    </section>);

}

/* =========================================================
   1.2  POSITIONING STATEMENT
   ========================================================= */
function HomeStatement() {
  return (
    <section className="statement statement--light" data-screen-label="04 Positioning">
      <div className="wrap statement__inner">
        <window.FadeIn>
          <p>
            Built for the soldiers, sailors, aircrew, and search-and-rescue teams whose
            lives can turn on whether a marker ignites, a signal sustains, or a flare
            illuminates on demand. And for the Canadian government and allied
            procurement authorities that stand behind them.
          </p>
        </window.FadeIn>
      </div>
    </section>);

}

/* =========================================================
   1.3  PILLARS
   ========================================================= */
function HomePillars() {
  const t = React.useContext(window.TweaksContext) || {};
  const layout = t.pillarsLayout || 'mosaic';
  const items = [
  {
    n: '01',
    eyebrow: 'Capabilities',
    label: 'Canada\'s pyrotechnic source.',
    body: 'Over 150 years of continuous operation. Pyrotechnic products in active service with Canada\'s Department of National Defence, the United States Navy, and allied militaries across NATO and partner nations.',
    image: window.A('photo-soldier-fall-purple.jpg'),
    to: '/capabilities',
    crown: true
  },
  {
    n: '02',
    eyebrow: 'Facility',
    label: 'Over 3,000 acres.',
    body: 'A defence site at a scale built only by over 150 years of regulated operation. Active capital programs underway.',
    image: window.A('photo-aerial-3.jpg'),
    to: '/facility'
  },
  {
    n: '03',
    eyebrow: 'Partnerships',
    label: 'In service with Canada\'s DND, US Navy, NATO & Five Eyes.',
    body: 'Sole-source MLM supplier to the United States Navy. Qualified to allied specifications. Delivered on contract.',
    image: window.A('photo-sar-mlm.jpg'),
    to: '/partnerships'
  }];


  const Tile = ({ p, variant }) =>
  <window.Link to={p.to} className={'tile' + (variant ? ' tile--' + variant : '')}>
      <div className="tile__img" style={{ backgroundImage: `url(${p.image})` }}></div>
      <div className="tile__overlay"></div>
      <div className="tile__rule"></div>
      <div className="tile__num">{p.n}</div>
      {p.crown && (
        <p className="crown-credit">© His Majesty the King in Right of Canada, Canadian Armed Forces, Combat Camera</p>
      )}
      <div className="tile__body">
        <div className="tile__eyebrow">{p.eyebrow}</div>
        <h3 className="tile__title">{p.label}</h3>
        {variant !== 'compact' && <p className="tile__desc">{p.body}</p>}
        <span className="tile__arrow">Explore <span>→</span></span>
      </div>
    </window.Link>;


  let grid;
  if (layout === 'grid') {
    grid =
    <div className="tile-grid">
        {items.map((p) => <Tile key={p.n} p={p} />)}
      </div>;

  } else if (layout === 'editorial') {
    grid =
    <div className="pillars-editorial">
        {items.map((p) =>
      <window.Link key={p.n} to={p.to} className="ped-row">
            <div className="ped-media">
              <div className="ped-img" style={{ backgroundImage: `url(${p.image})` }}></div>
              {p.crown && (
                <p className="crown-credit">© His Majesty the King in Right of Canada, Canadian Armed Forces, Combat Camera</p>
              )}
            </div>
            <div className="ped-text">
              <div className="ped-num">{p.n} / 03</div>
              <div className="tile__eyebrow" style={{ marginBottom: 14 }}>{p.eyebrow}</div>
              <h3 className="ped-title">{p.label}</h3>
              <p className="ped-desc">{p.body}</p>
              <span className="link-arrow">Explore <span>→</span></span>
            </div>
          </window.Link>
      )}
      </div>;

  } else {
    // mosaic - default: one tall feature + two stacked
    grid =
    <div className="pillars-mosaic">
        <Tile p={items[0]} variant="feature" />
        <div className="pm-right">
          <Tile p={items[1]} variant="compact" />
          <Tile p={items[2]} variant="compact" />
        </div>
      </div>;

  }

  return (
    <section className="section section--light" data-screen-label="02 Pillars">
      <div className="wrap">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr auto', gap: 60, alignItems: 'end', marginBottom: 60 }} className="pl-head">
          <div>
            <div className="eyebrow">What We Do</div>
            <h2 className="h-1">What we make. Where we make it.<br />Who relies on it.</h2>
          </div>
          <window.Link to="/capabilities" className="link-arrow" style={{ flexShrink: 0 }}>
            All Capabilities <span>→</span>
          </window.Link>
        </div>
        {grid}
      </div>
      <style>{`
        @media (max-width: 740px) { .pl-head { grid-template-columns: 1fr !important; gap: 16px !important; align-items: start !important; } }
      `}</style>
    </section>);

}

/* =========================================================
   1.4  FACILITY FEATURE - full-bleed image w/ overlay
   ========================================================= */
function HomeFacilityFeature() {
  const t = React.useContext(window.TweaksContext) || {};
  const mood = t.homeMood || 'light';
  return (
    <section className={'bleed' + (mood !== 'balanced' ? ' bleed--light' : '')} data-screen-label="05 Facility Feature">
      <div className="bleed__bg">
<img src={window.A('photo-aerial-2.jpg')} alt="Aerial view of HFI site" />
      </div>
      <div className="wrap bleed__content">
        <div className="bleed__box">
<div className="eyebrow">The Site</div>
          <h2 className="h-1" style={{ marginBottom: 28 }}>
            A defence property built at national scale.
          </h2>
          <p className="body body-lg" style={{ marginBottom: 40 }}>
            Our site in eastern Ontario spans over 3,000 acres, licensed,
            purpose-built defence property among the largest privately held in
            Canada. The footprint supports manufacturing, storage, research, and
            future capability that Canada's defence posture increasingly demands.
          </p>
          <window.Link to="/facility" className="link-arrow">
            Explore the Facility <span>→</span>
          </window.Link>
        </div>
      </div>
    </section>);

}

/* =========================================================
   1.45  DEVELOPMENT & COLLABORATION - "a home for development"
   Colour-forward alternating rows. Speaks to the inbound
   interest in co-development & componentry, not products.
   ========================================================= */
function HomeDevelopment() {
  const rows = [
  {
    tag: 'Co-development',
    title: 'Built with you, not just sold to you.',
    body: 'We work alongside primes and allied forces to develop energetic componentry into larger systems: signalling, effects, and subsystems where only regulated chemistry and manufacturing depth will do. The relationship is long-term contribution, not parts on a purchase order.',
    image: window.A('photo-fuse-sparks.jpg'),
    glow: 'rgba(212, 90, 30, 0.30)'
  },
  {
    tag: 'New Product Development',
    title: 'A place to build what doesn\u2019t exist yet.',
    body: 'New product development from concept to launch \u2014 applied research and rapid prototyping under controlled, compliant conditions, in close engagement with the forces that will field the result. If your requirement demands something that isn\u2019t on a shelf, this is where it gets made.',
    image: window.A('photo-thermal-plume.jpg'),
    glow: 'rgba(60, 120, 220, 0.28)'
  }];

  const t = React.useContext(window.TweaksContext) || {};
  const mood = t.homeMood || 'light';

  return (
    <section className={'section home-dev' + (mood !== 'balanced' ? ' home-dev--light' : '')} data-screen-label="05b Development">
      <div className="wrap">
        <div className="home-dev__head">
          <div>
            <div className="eyebrow">Innovation &amp; Collaboration</div>
            <h2 className="h-1">A home for innovation.</h2>
          </div>
          <p className="body body-lg home-dev__lede">
            Beyond the catalogue, HFI is where new defence pyrotechnics get built.
            We bring regulated chemistry, a licensed manufacturing base, and over 150 years
            of hands-on knowledge to the table, and we innovate alongside our customers.
          </p>
        </div>

        <div className="home-dev__rows">
          {rows.map((r, i) =>
          <div className="hd-row" key={r.tag}>
              <div className="hd-media">
                <div className="hd-glow" style={{ background: `radial-gradient(60% 70% at 50% 45%, ${r.glow}, transparent 72%)` }}></div>
                <div className="hd-img" style={{ backgroundImage: `url(${r.image})` }}></div>
              </div>
              <div className="hd-text">
                <div className="hd-tag"><span className="hd-tag__dot"></span>{r.tag}</div>
                <h3 className="hd-title">{r.title}</h3>
                <p className="hd-body">{r.body}</p>
              </div>
            </div>
          )}
        </div>

        <div className="home-dev__cta">
          <window.Link to="/capabilities" className="link-arrow">See what we're building <span>→</span></window.Link>
          <span aria-hidden="true" className="home-dev__div"></span>
          <window.Link to="/partnerships" className="link-arrow">Develop with HFI <span>→</span></window.Link>
        </div>
      </div>

      <style>{`
        .home-dev { position: relative; overflow: hidden; }
        .home-dev__head {
          display: grid; grid-template-columns: 1fr 1fr; gap: 60px;
          align-items: end; margin-bottom: 64px;
        }
        .home-dev__lede { margin: 0; max-width: 520px; }
        .home-dev__rows { display: flex; flex-direction: column; gap: 6px; }
        .hd-row {
          display: grid; grid-template-columns: 1fr 1fr; gap: 0;
          background: var(--bg-2); border: 1px solid var(--rule);
          isolation: isolate; overflow: hidden;
        }
        .hd-row:nth-child(even) .hd-media { order: 2; }
        .hd-media { position: relative; min-height: 360px; overflow: hidden; }
        .hd-glow { position: absolute; inset: 0; z-index: 2; mix-blend-mode: screen; pointer-events: none; }
        .hd-img {
          position: absolute; inset: 0; z-index: 1;
          background-size: cover; background-position: center;
          filter: saturate(1.08) contrast(1.05);
          transition: transform 1400ms cubic-bezier(.2,0,.2,1);
        }
        .hd-row:hover .hd-img { transform: scale(1.045); }
        .hd-text {
          padding: clamp(36px, 4vw, 64px);
          display: flex; flex-direction: column; justify-content: center;
        }
        .hd-tag {
          display: inline-flex; align-items: center; gap: 10px;
          font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
          color: var(--red); font-weight: 600; margin-bottom: 22px;
        }
        .hd-tag__dot { width: 7px; height: 7px; background: var(--red); display: inline-block; }
        .hd-title {
          font-size: clamp(26px, 2.5vw, 38px); font-weight: 600;
          letter-spacing: -0.02em; line-height: 1.12; margin: 0 0 20px;
          color: var(--white);
        }
        .hd-body { font-size: 16px; line-height: 1.68; color: var(--text-2); margin: 0; max-width: 520px; }
        .home-dev__cta {
          display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
          margin-top: 44px;
        }
        .home-dev__div { width: 1px; height: 18px; background: var(--rule); display: inline-block; }
        @media (max-width: 860px) {
          .home-dev__head { grid-template-columns: 1fr; gap: 18px; align-items: start; }
          .hd-row { grid-template-columns: 1fr; }
          .hd-row:nth-child(even) .hd-media { order: 0; }
          .hd-media { min-height: 0; aspect-ratio: 16 / 10; }
        }
      `}</style>
    </section>);

}

/* =========================================================
   1.5  HERITAGE BAR
   ========================================================= */
function HomeHeritage() {
  return (
    <section className="heritage heritage--light" data-screen-label="06 Heritage">
      <div className="heritage__year">1873</div>
      <div className="wrap heritage__inner">
        <window.FadeIn>
          <div className="eyebrow">Heritage · Trajectory</div>
          <h2 className="h-1">
            Founded in 1873.<br />
            The most significant chapter is now.
          </h2>
        </window.FadeIn>
        <window.FadeIn delay={120}>
          <p className="body body-lg" style={{ marginTop: 0 }}>
            Since 1873, HFI has operated continuously as Canada's pyrotechnic
            manufacturer through every major conflict, every generation of procurement
            policy, and every technological shift in the energetics domain. We are not
            a new entrant. We are the foundation, and we are rebuilding for what
            Canada's defence strategy demands next.
          </p>
        </window.FadeIn>
      </div>
    </section>);

}

/* =========================================================
   1.6  (Removed) Capability Glimpse - redundant after restructure
   ========================================================= */

/* =========================================================
   1.5b  FIELD OPERATIONS STRIP - image-rich operational gallery
   ========================================================= */
function HomeFieldStrip() {
  const t = React.useContext(window.TweaksContext) || {};
  const layout = t.fieldLayout || 'cinema';
  const mood = t.homeMood || 'light';
  const cells = [
  {
    num: '01',
    lbl: 'Search & rescue signalling',
    sub: 'Marine Location Markers · deployed from the air',
    img: window.A('photo-mlm-flight-test.jpg'),
    pos: 'center 38%',
    kbx: '-2.5%', kby: '2.5%',
    to: '/capabilities'
  },
  {
    num: '02',
    lbl: 'Field deployment',
    sub: 'C8 smoke · hand-thrown signalling',
    img: window.A('photo-sar-tech-red-smoke.jpg'),
    pos: '74% center',
    kbx: '4%', kby: '-1%',
    to: '/capabilities',
    crown: true
  },
  {
    num: '03',
    lbl: 'Training & simulation',
    sub: 'Smoke, screening, and effects · field exercises',
    img: window.A('photo-troops-smoke.jpg'),
    pos: '54% center',
    kbx: '-4%', kby: '2%',
    to: '/capabilities',
    crown: true
  }];


  const Cell = ({ c, hero }) =>
  <window.Link to={c.to || '/capabilities'} className={'strip__cell' + (hero ? ' fc-hero' : '')}>
      <div className="strip__img" style={{ backgroundImage: `url(${c.img})`, backgroundPosition: c.pos || 'center', '--kbx': c.kbx || '0%', '--kby': c.kby || '0%' }}></div>
      {c.crown && (
        <p className="crown-credit">© His Majesty the King in Right of Canada, Canadian Armed Forces, Combat Camera</p>
      )}
      <div className="strip__caption">
        <span className="num">{c.num}</span>
        <span className="lbl">{c.lbl}</span>
        <span className="sub">{c.sub}</span>
        <span className="strip__cta">View capability →</span>
      </div>
    </window.Link>;


  let gallery;
  if (layout === 'grid') {
    gallery =
    <div className="strip strip--home3">
        {cells.map((c) =>
      <window.Link key={c.num} to={c.to || '/capabilities'} className="strip__cell">
            <div className="strip__img" style={{ backgroundImage: `url(${c.img})`, backgroundPosition: c.pos || 'center', '--kbx': c.kbx || '0%', '--kby': c.kby || '0%' }}></div>
            {c.crown && (
              <p className="crown-credit">© His Majesty the King in Right of Canada, Canadian Armed Forces, Combat Camera</p>
            )}
            <div className="strip__caption">
              <span className="num">{c.num}</span>
              <span className="lbl">{c.lbl}</span>
              <span className="sub">{c.sub}</span>
              <span className="strip__cta">View capability →</span>
            </div>
          </window.Link>
      )}
      </div>;

  } else if (layout === 'triptych') {
    gallery =
    <div className="field-triptych">
        {cells.map((c) => <Cell key={c.num} c={c} />)}
      </div>;

  } else {
    // cinema - default: wide hero banner + supporting pair
    gallery =
    <div className="field-cinema">
        <Cell c={cells[0]} hero />
        <div className="fc-pair">
          <Cell c={cells[1]} />
          <Cell c={cells[2]} />
        </div>
      </div>;

  }

  return (
    <section className={'section ' + (mood === 'balanced' ? 'section--alt' : 'section--light')} data-screen-label="03 Field Operations">
      <div className="wrap" style={{ marginBottom: 50 }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr auto', gap: 50, alignItems: 'end' }} className="fs-head">
          <div>
            <div className="eyebrow">Operational Set</div>
            <h2 className="h-1">From open ocean to training ranges.</h2>
          </div>
          <p className="body" style={{ maxWidth: 380, margin: 0, paddingBottom: 6 }}>
            Issued, deployed, and trained on by Canadian and allied forces.
            across every domain they operate in.
          </p>
        </div>
      </div>
      <div className="wrap" style={{ maxWidth: '100%', padding: '0 24px' }}>
        {gallery}
      </div>
      <style>{`
        @media (max-width: 740px) { .fs-head { grid-template-columns: 1fr !important; gap: 16px !important; align-items: start !important; } }
      `}</style>
    </section>);

}

window.PageHome = PageHome;