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

function PagePartnerships() {
  return (
    <>
      <PartnershipsHero />
      <PartnershipBlock
        idx="01"
        eyebrow="Government of Canada"
        title="Canada's defence mandate is our mandate."
        image={window.A('photo-soldier-smoke.jpg')}
        imageAlt="Canadian Armed Forces personnel deploying HFI signal smoke during the DP3 Bravo Platoon Commander Course"
        imageCaption="Canadian Armed Forces · DP3 Bravo Platoon Commander Course"
        credit="Cdn Armed Forces · Combat Camera"
        crownCredit={true}
        body={[
          "HFI has supplied pyrotechnic products to the Canadian Armed Forces for generations, and in 2020 was formally designated a strategic supplier under Canada's Munitions Supply Program (MSP). Our working relationships across the Department of National Defence, Public Services and Procurement Canada, and related agencies run deeper than any single contract. HFI is part of Canada's permanent defence industrial infrastructure.",
          'We engage through established program vehicles, long-term contracts, and funded development arrangements. If you represent a government requirement that may benefit from HFI\'s capability, the right next step is a direct conversation.',
        ]}
      />
      <PartnershipBlock
        idx="02"
        eyebrow="Allied Nations & Foreign Military Procurement"
        title="In service with allied militaries."
        image={window.A('photo-allied-helo-purple.jpg')}
        imageAlt="Canadian soldier marking a helicopter landing zone with purple HFI smoke on coalition operations"
        imageCaption="Coalition operations · helicopter LZ marking with violet smoke"
        credit="Cdn Armed Forces · Combat Camera"
        crownCredit={true}
        body={[
          'HFI supplies pyrotechnic products to allied militaries across NATO and partner nations. Our products are qualified to allied specifications and have been in active service across multiple theatres.',
          'Canada is a participant in the European Union\u2019s SAFE defence procurement program \u2014 the only non-European country to take part \u2014 opening new pathways for allied co-operation and supply.',
          'International engagements are conducted under Canadian export controls and through established government-to-government and direct commercial channels. If you represent an allied procurement agency or a verified military requirement, we welcome the conversation.',
        ]}
      />
      <PartnershipBlock
        idx="03"
        eyebrow="Defence Prime Contractors"
        title="An innovation partner, not just a supplier."
        image={window.A('photo-diver-recall-test.jpg')}
        imageAlt="HFI technician in protective equipment conducting a controlled Diver Recall water test on the company's test range"
        imageCaption="Controlled product testing · HFI test range"
        body={[
          'HFI works with defence prime contractors as an innovation partner. We bring regulated energetic chemistry, a licensed manufacturing base, and 150 years of hands-on knowledge to new product development, from concept to launch, with rapid prototyping under controlled, compliant conditions.',
          'That includes engineering componentry into larger systems: compositions, initiators, inert assemblies, and validated subsystems where only HFI’s depth will do. We bring together diverse expertise to solve complex challenges. Innovation grounded in safety, compliance, and performance, designed for real-world results.',
          'If your program requires sovereign Canadian pyrotechnic capability and a partner that will develop alongside your requirements, we are open to the conversation.',
        ]}
        cta={{ text: 'Explore collaboration opportunities', to: '/contact', note: 'Routed to our business development and innovation teams.' }}
      />
      <NotWhatWeDo />
      <window.ClosingCTA
        headline="If you have a real requirement and a serious timeline, we'd like to hear about it."
        ctaText="Start a Partnership Conversation"
      />
    </>
  );
}

function PartnershipsHero() {
  return (
    <section className="hero hero--page" data-screen-label="01 Partnerships Hero">
      <div className="hero__bg" style={{ backgroundImage: `url(${window.A('photo-chinook-green-lz.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">How We Work</div>
        <h1 className="h-display">Three partner types.<br/>One operating standard.</h1>
        <p className="hero__sub" style={{ maxWidth: 640 }}>
          HFI engages through three channels: Government of Canada,
          allied procurement, and defence prime contractors. Each runs on its
          own protocol. We commit for the long term, and expect the same in return.
        </p>
      </div>
    </section>
  );
}

function PartnershipBlock({ idx, eyebrow, title, body, image, imageAlt, imageCaption, credit, crownCredit, cta }) {
  // 01 dark, 02 light, 03 dark - alternating cadence
  const isLight = Number(idx) === 2;
  const klass = isLight
    ? 'section section--light'
    : (Number(idx) % 2 === 0 ? 'section section--alt' : 'section');
  const reverse = Number(idx) % 2 === 0;
  return (
    <section className={klass} data-screen-label={`Partnership ${idx}`}>
      <div className="wrap">
        <div style={{
          display: 'grid',
          gridTemplateColumns: '1fr 1fr',
          gap: 80,
          alignItems: 'center',
        }} className="ptn-row">
          <div style={{ order: reverse ? 2 : 1 }}>
            <figure className="photo-figure">
              <div className="photo-figure__media" style={{ aspectRatio: '4/5' }}>
                <img src={image} alt={imageAlt} />
                {crownCredit && (
                  <p className="crown-credit crown-credit--left">© His Majesty the King in Right of Canada, Canadian Armed Forces, Combat Camera</p>
                )}
              </div>
              <figcaption className="photo-figure__cap">
                <span><span className="ref">{`P-${idx}`}</span> · {imageCaption}</span>
                <span>{credit || 'HFI'}</span>
              </figcaption>
            </figure>
          </div>
          <div style={{ order: reverse ? 1 : 2 }}>
            <div style={{
              display: 'flex',
              alignItems: 'baseline',
              gap: 20,
              marginBottom: 28,
              flexWrap: 'wrap',
            }}>
              <div style={{
                fontSize: 48, fontWeight: 700, color: 'var(--red)',
                letterSpacing: '-0.04em', lineHeight: 1,
                fontFamily: 'ui-monospace, "SF Mono", Menlo, monospace',
              }}>{idx}</div>
              <div style={{
                fontSize: 18,
                fontWeight: 600,
                letterSpacing: '0.06em',
                textTransform: 'uppercase',
                color: 'var(--red)',
                lineHeight: 1.2,
                paddingBottom: 4,
                borderBottom: '2px solid var(--red)',
              }}>{eyebrow}</div>
            </div>
            <h2 className="h-1" style={{ marginBottom: 32, maxWidth: 720 }}>{title}</h2>
            <div className="body body-lg" style={{ maxWidth: 740 }}>
              {body.map((p, i) => <p key={i}>{p}</p>)}
            </div>
            {cta && (
              <div style={{ marginTop: 38, display: 'flex', alignItems: 'center', gap: 22, flexWrap: 'wrap' }}>
                <window.Link to={cta.to} className="btn btn--primary">{cta.text} <span className="arr">→</span></window.Link>
                {cta.note && (
                  <span style={{ fontSize: 13, color: 'var(--text-3)', letterSpacing: '0.02em' }}>{cta.note}</span>
                )}
              </div>
            )}
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 940px) {
          .ptn-row { grid-template-columns: 1fr !important; gap: 40px !important; }
          .ptn-row > div { order: 0 !important; }
        }
      `}</style>
    </section>
  );
}

function NotWhatWeDo() {
  const declines = [
    'Civilian or commercial markets',
    'Entertainment applications',
    "Engagements outside Canada's defence and security interests",
  ];
  return (
    <section className="section section--light" data-screen-label="04 Selectivity">
      <div className="wrap">
        <div style={{
          display: 'grid',
          gridTemplateColumns: '1fr 1.3fr',
          gap: 100,
          alignItems: 'start',
        }} className="sel-grid">
          <div>
            <div className="eyebrow">What We Do Not Do</div>
            <h2 className="h-1">We are selective<br/>for good reason.</h2>
          </div>
          <div className="body body-lg">
            <p>
              HFI does not pursue every opportunity. We decline engagements
              that do not align with our mandate, our safety standards, or our
              regulatory requirements.
            </p>
            <p>
              This is not a limitation. It is a deliberate choice that protects the
              integrity of our capability and our standing in Canada's defence
              ecosystem.
            </p>

            <ul style={{
              listStyle: 'none',
              padding: 0,
              margin: '40px 0 0',
              borderTop: '1px solid var(--light-rule)',
            }}>
              {declines.map((d, i) => (
                <li key={i} className="decline-row" style={{
                  display: 'grid',
                  gridTemplateColumns: '120px 1fr',
                  alignItems: 'baseline',
                  gap: 24,
                  padding: '18px 0',
                  borderBottom: '1px solid var(--light-rule)',
                }}>
                  <span style={{
                    fontSize: 11,
                    letterSpacing: '0.14em',
                    textTransform: 'uppercase',
                    color: 'var(--red)',
                    fontWeight: 500,
                  }}>
                    We Decline
                  </span>
                  <span style={{ fontSize: 16, color: 'var(--light-text)', fontWeight: 500, letterSpacing: '-0.005em' }}>
                    {d}
                  </span>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 880px) {
          .sel-grid { grid-template-columns: 1fr !important; gap: 30px !important; }
        }
        @media (max-width: 540px) {
          .decline-row { grid-template-columns: 1fr !important; gap: 6px !important; }
        }
      `}</style>
    </section>
  );
}

window.PagePartnerships = PagePartnerships;