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

/* ============================================================
   News content, replicated from the legacy hfipyrotechnics.ca
   /news index. Operational notices (weather closure, COVID
   masks) intentionally omitted. Newest first.
   body: array of paragraph strings. fullText: true once the
   complete article has been brought over natively.
   ============================================================ */
const NEWS = [
  {
    slug: 'site-expansion-3000-acres',
    date: 'Recent',
    author: 'HFI Pyrotechnics',
    eyebrow: 'Site',
    title: 'HFI grows eastern Ontario site to over 3,000 acres',
    image: window.A('photo-aerial-3.jpg'),
    summary: "HFI has completed land acquisition bringing its licensed defence property to over 3,000 acres in the Township of Edwardsburgh Cardinal.",
    body: [
      "HFI has completed land acquisition bringing its licensed defence property to over 3,000 acres in the Township of Edwardsburgh Cardinal.",
      "The expanded site supports active capital programs in manufacturing, storage, and defence infrastructure, securing room to grow Canada's sovereign pyrotechnic capability for decades to come.",
    ],
    fullText: true,
  },
  {
    slug: 'infrastructure-development-program',
    date: 'Recent',
    author: 'HFI Pyrotechnics',
    eyebrow: 'Infrastructure',
    title: 'HFI launches infrastructure development program',
    image: window.A('photo-aerial-2.jpg'),
    summary: "HFI has commenced a major infrastructure development program on its eastern Ontario site, advancing sovereign defence storage and manufacturing capability.",
    body: [
      "HFI has commenced a major infrastructure development program on its eastern Ontario site, advancing sovereign defence storage and manufacturing capability.",
      "The program is supported by Government of Canada funding and underpins HFI's role in the Munitions Supply Program and its long-term partnerships with allied forces.",
    ],
    fullText: true,
  },
  {
    slug: 'female-coo-aggressive-growth-strategy',
    date: 'February 4, 2022',
    author: 'Jenikka Bow',
    eyebrow: 'In the News',
    title: "Female COO leading aggressive growth strategy for Ontario's HFI Pyrotechnics",
    image: window.A('photo-aerial-2.jpg'),
    summary: "HFI shows its colours: our Chief Operating Officer is profiled in the press, leading an aggressive growth strategy for one of Ontario's few defence pyrotechnic manufacturers.",
    body: [
      "We're in the news, HFI showing its colours.",
      "A feature profile spotlights our Chief Operating Officer leading an aggressive growth strategy for HFI Pyrotechnics, one of very few defence pyrotechnic manufacturers in Ontario, advancing investment, capability, and capacity at the Prescott site.",
    ],
    fullText: false,
  },
  {
    slug: 'dsei-london',
    date: 'October 6, 2021',
    author: 'Jenikka Bow',
    eyebrow: 'Events',
    title: 'Great to be at the DSEI event in London',
    image: window.A('product-sc58-tx.png'),
    summary: "HFI exhibited at DSEI in London, one of the world's leading defence and security events, connecting with allied forces and partners.",
    body: [
      "Great to be at the DSEI event in London.",
      "DSEI is one of the world's leading defence and security exhibitions, and it was a valuable opportunity to connect with allied militaries, prime contractors, and international partners, and to show HFI's pyrotechnic capability on the world stage.",
    ],
    fullText: false,
  },
  {
    slug: 'top-100-defence-companies',
    date: 'June 30, 2021',
    author: 'Jenikka Bow',
    eyebrow: 'Recognition',
    title: 'HFI Pyrotechnics in "Canada\'s Top 100 Defence Companies"',
    image: window.A('photo-aerial-3.jpg'),
    summary: "HFI Pyrotechnics has been named among Canada's Top 100 Defence Companies, recognition of our role in the country's sovereign defence industrial base.",
    body: [
      "HFI Pyrotechnics has been named among Canada's Top 100 Defence Companies.",
      "The recognition reflects HFI's standing as Canada's centre of excellence for pyrotechnics and its role in the country's sovereign defence industrial base.",
    ],
    fullText: false,
  },
  {
    slug: 'stuff-made-built-eastern-ontario',
    date: 'December 10, 2020',
    author: 'Jenikka Bow',
    eyebrow: 'Recognition',
    title: 'Stuff Made & Built in Eastern Ontario recognizing HFI',
    image: window.A('photo-aerial-hero.jpg'),
    summary: "HFI has been recognized as one of the 35 Coolest Things Made in Eastern Ontario.",
    body: [
      "We have been recognized as one of the 35 Coolest Things Made in Eastern Ontario.",
      "It's a point of pride to be acknowledged alongside the region's makers and manufacturers, for products built in Prescott and relied on by forces around the world.",
    ],
    fullText: false,
  },
  {
    slug: 'celebrating-our-employees',
    date: 'September 23, 2020',
    author: 'Jenikka Bow',
    eyebrow: 'Our People',
    title: 'Celebrating our employees',
    image: window.A('photo-hfi-team-150.jpg'),
    summary: "The people of HFI are the foundation of 150 years of continuous manufacture. A note celebrating the team behind the work.",
    body: [
      "The people of HFI are the foundation of more than 150 years of continuous manufacture.",
      "From the line to engineering, quality, and operations, our team is what keeps Canada's pyrotechnic capability running, and we take every opportunity to celebrate them.",
    ],
    fullText: false,
  },
  {
    slug: 'how-we-do-what-we-do',
    date: 'August 25, 2020',
    author: 'Jenikka Bow',
    eyebrow: 'Inside HFI',
    title: 'How we do what we do',
    image: window.A('photo-candle-pressing.jpg'),
    summary: "A look behind the scenes at HFI's regulated manufacturing, from composition chemistry to assembly and test.",
    body: [
      "A look behind the scenes at how HFI does what it does.",
      "Our work spans composition chemistry, precision pressing and extrusion, initiators, inert assembly, and in-house testing, all carried out under federal licence on a regulated site in eastern Ontario.",
    ],
    fullText: false,
  },
  {
    slug: 'msp-canadas-first-new-addition',
    date: 'July 29, 2020',
    author: 'Jenikka Bow',
    eyebrow: 'Milestone',
    title: "Canada's first new addition in nearly four decades",
    image: window.A('photo-mlm-sc25-functioning.jpg'),
    summary: "HFI Pyrotechnics, Canada's Centre of Excellence for pyrotechnics, has been selected for the Munitions Supply Program (MSP), Canada's first new addition in nearly four decades.",
    body: [
      "HFI Pyrotechnics, Canada's Centre of Excellence for pyrotechnics, has been selected for the Munitions Supply Program (MSP).",
      "This is Canada's first new addition to the MSP in nearly four decades, a significant milestone that recognizes HFI's role in Canada's sovereign munitions supply and secures long-term partnership in the country's defence industrial base.",
    ],
    fullText: false,
  },
  {
    slug: 'a-brief-history',
    date: 'June 30, 2020',
    author: 'Jenikka Bow',
    eyebrow: 'Heritage',
    title: 'A brief history of how we became to be',
    image: window.A('photo-aerial-3.jpg'),
    summary: "From origins stretching back over 150 years to Canada's centre of excellence for pyrotechnics, a brief history of HFI.",
    body: [
      "A brief history of how we became to be.",
      "HFI Pyrotechnics traces its roots back more than 150 years of continuous pyrotechnic manufacture, growing from those origins into Canada's centre of excellence for pyrotechnics and the world's largest manufacturer of military search and rescue markers.",
    ],
    fullText: false,
  },
  {
    slug: 'us-navy-8m-contract',
    date: 'April 20, 2016',
    author: 'John Witherspoon',
    eyebrow: 'Contract Award',
    title: 'HFI Pyrotechnics announces USD 8M contract with US Navy',
    image: window.A('photo-mlm-flight-test.jpg'),
    summary: "An $8 million USD award from the US Navy as part of a five-year contract for the MK 25 MOD 4/5 marine location marker, the first time the product is produced outside US Navy-owned facilities.",
    body: [
      "Edwardsburg/Cardinal, Ontario \u2013 HFI Pyrotechnics announces an $8 Million USD award from the US Navy as part of a five-year contract for the MK 25 MOD 4/5 for the US Navy and US Air Force.",
      "The MK 25 MOD 4/5 is the latest advanced Marker, Location Marine search and rescue product used by the US Navy and other branches of the Department of Defense. Search and rescue crews use this product by releasing it from a variety of both fixed and rotary wing aircraft; upon hitting the water, the marker ignites and burns to provide a bright flame and smoke, assisting rescue crews in tracing the movement of a stranded vessel in the ocean. This award is the first time this product is produced outside of the US Navy-owned manufacturing facilities.",
      "HFI Pyrotechnics' President and CEO, John Witherspoon, stated: \u201cWe are extremely pleased with the confidence and trust the US Navy continues to express in our manufacturing team and the quality and product performance in the field, especially with this product. I would also like to acknowledge the continued hard work that both our engineering and operations teams have performed to bring HFI from a small Canadian supplier to the world's largest manufacturer of search and rescue markers. Lastly, I would like to thank the Canadian Commercial Corporation (CCC) for their assistance in the contractual process, providing the supportive role that allows small and medium enterprises to compete on an equal footing with larger multi-national corporations in the international marketplace.\u201d",
      "Countries around the world use HFI Pyrotechnics' products as a critical tool in their search and rescue efforts. HFI Pyrotechnics is a market-leading manufacturer supplying pyrotechnic products to over twenty countries around the world, with a diverse portfolio predominantly used for obscuring countermeasure (smoke), signalling (coloured smoke and flame), and training (battlefield simulation).",
    ],
    fullText: true,
  },
];

function findArticle(slug) {
  return NEWS.find(n => n.slug === slug);
}

function PageNews() {
  const hash = (window.location.hash || '').replace(/^#/, '');
  const m = hash.match(/^\/news\/(.+)$/);
  const article = m ? findArticle(m[1]) : null;
  if (article) return <NewsArticle item={article} />;
  return (
    <>
      <NewsHero />
      <NewsList />
    </>
  );
}

function NewsHero() {
  return (
    <section className="section" style={{ paddingTop: 'clamp(120px, 22vw, 200px)', paddingBottom: 60 }} data-screen-label="01 News Intro">
      <div className="wrap">
        <div style={{ maxWidth: 800 }}>
          <div className="eyebrow">Latest</div>
          <h1 className="h-display" style={{ fontSize: 'clamp(40px,5.4vw,76px)' }}>
            Milestones. Programs.<br/>Progress.
          </h1>
          <p className="body body-lg" style={{ marginTop: 28, maxWidth: 660 }}>
            Company announcements, recognition, and milestones from HFI
            Pyrotechnics.
          </p>
        </div>
      </div>
    </section>
  );
}

function NewsList() {
  return (
    <section className="section section--light" style={{ paddingTop: 80 }} data-screen-label="02 News List">
      <div className="wrap">
        <div style={{ borderTop: '1px solid var(--light-rule)' }}>
          {NEWS.map((n, i) => (
            <NewsRow key={n.slug} item={n} index={i} />
          ))}
        </div>
        <div style={{
          marginTop: 60,
          padding: '36px 40px',
          background: 'var(--light-surface)',
          border: '1px solid var(--light-rule)',
          borderLeft: '3px solid var(--red)',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between',
          gap: 30,
          flexWrap: 'wrap',
        }}>
          <div>
            <div className="label" style={{ color: 'var(--red)', marginBottom: 6 }}>Press · Media</div>
            <div style={{ color: 'var(--light-text)', fontSize: 18, fontWeight: 500 }}>
              Media enquiries are routed through HFI direct.
            </div>
          </div>
          <window.Link to="/contact" className="link-arrow">
            Contact Communications <span>→</span>
          </window.Link>
        </div>
      </div>
    </section>
  );
}

function NewsRow({ item }) {
  const [hover, setHover] = React.useState(false);
  const go = (e) => { e.preventDefault(); window.location.hash = '/news/' + item.slug; };
  return (
    <a
      href={'#/news/' + item.slug}
      onClick={go}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        display: 'grid',
        gridTemplateColumns: '220px 150px 1fr 120px',
        gap: 40,
        padding: '32px 0',
        borderBottom: '1px solid var(--light-rule)',
        cursor: 'pointer',
        transition: 'background 280ms',
        background: hover ? 'linear-gradient(90deg, rgba(212,30,27,0.05), transparent)' : 'transparent',
        alignItems: 'center',
        textDecoration: 'none',
      }}
      className="news-row"
    >
      <div style={{ aspectRatio: '4/3', overflow: 'hidden', background: 'var(--light-surface)', position: 'relative' }}>
        <img
          src={item.image}
          alt=""
          style={{
            width: '100%', height: '100%', objectFit: 'cover',
            filter: 'saturate(0.92)',
            transform: hover ? 'scale(1.05)' : 'scale(1)',
            transition: 'transform 600ms cubic-bezier(.2,0,.2,1)',
          }}
        />
        <div style={{ position: 'absolute', top: 0, left: 0, height: 3, width: 36, background: 'var(--red)' }}></div>
      </div>

      <div>
        <div className="label" style={{ color: 'var(--red)' }}>{item.date}</div>
        <div className="label" style={{ marginTop: 12 }}>{item.eyebrow}</div>
      </div>

      <div>
        <h2 className="h-2" style={{ marginBottom: 12, color: hover ? 'var(--red)' : 'var(--light-text)', transition: 'color 280ms', fontSize: 22 }}>
          {item.title}
        </h2>
        <p className="body" style={{ margin: 0, maxWidth: 640, fontSize: 15 }}>{item.summary}</p>
      </div>

      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-end' }}>
        <span className="link-arrow">
          Read <span style={{ transform: hover ? 'translateX(6px)' : 'translateX(0)', transition: 'transform 280ms' }}>→</span>
        </span>
      </div>
      <style>{`
        @media (max-width: 880px) {
          .news-row { grid-template-columns: 1fr !important; gap: 20px !important; }
        }
      `}</style>
    </a>
  );
}

function NewsArticle({ item }) {
  const idx = NEWS.findIndex(n => n.slug === item.slug);
  const next = NEWS[idx + 1] || NEWS[0];
  return (
    <>
      <article data-screen-label="News Article">
        <div className="wrap" style={{ maxWidth: 880, paddingTop: 'clamp(120px, 18vw, 180px)' }}>
          <window.Link to="/news" className="link-arrow" style={{ marginBottom: 34, display: 'inline-flex' }}>
            <span style={{ marginRight: 6 }}>←</span> All news
          </window.Link>
          <div className="label" style={{ color: 'var(--red)', marginBottom: 18 }}>
            {item.date} · {item.eyebrow}
          </div>
          <h1 className="h-1" style={{ fontSize: 'clamp(30px,4vw,52px)', marginBottom: 22 }}>
            {item.title}
          </h1>
          <div className="label" style={{ color: 'var(--text-3)' }}>By {item.author}</div>
        </div>

        <div className="wrap" style={{ maxWidth: 1040, marginTop: 48 }}>
          <div style={{ aspectRatio: '16/9', overflow: 'hidden', border: '1px solid var(--rule)', background: 'var(--bg-2)' }}>
            <img src={item.image} alt={item.title} style={{ width: '100%', height: '100%', objectFit: 'cover', filter: 'saturate(1.02) contrast(1.03)' }} />
          </div>
        </div>

        <div className="wrap" style={{ maxWidth: 720, marginTop: 50, paddingBottom: 40 }}>
          {item.body.map((p, i) => (
            <p key={i} className="body body-lg" style={{ marginBottom: 24 }}>{p}</p>
          ))}
          {!item.fullText && (
            <p className="body" style={{ marginTop: 32, paddingTop: 20, borderTop: '1px solid var(--rule)', color: 'var(--text-3)', fontSize: 14 }}>
              Originally published on hfipyrotechnics.ca on {item.date}.
            </p>
          )}
        </div>
      </article>

      <section className="section section--tight" style={{ borderTop: '1px solid var(--rule)' }}>
        <div className="wrap" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 30, flexWrap: 'wrap' }}>
          <div>
            <div className="label" style={{ color: 'var(--text-3)', marginBottom: 8 }}>Next</div>
            <window.Link to={'/news/' + next.slug} className="h-2" style={{ fontSize: 22, color: 'var(--white)', textDecoration: 'none' }}>
              {next.title}
            </window.Link>
          </div>
          <window.Link to="/news" className="btn btn--ghost">All news</window.Link>
        </div>
      </section>
    </>
  );
}

window.PageNews = PageNews;