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

function PageAbout() {
  return (
    <>
      <AboutHero />
      <AboutWhoWeAre />
      <AboutTeamPhoto />
      <AboutGuides />
      <AboutTeamCTA />
    </>
  );
}

/* ============================================================
   5.1  Hero - near-black with aerial overlay
   ============================================================ */
function AboutHero() {
  return (
    <section className="hero hero--page" data-screen-label="01 About Hero">
      <div className="hero__bg" style={{ backgroundImage: `url(${window.A('photo-aerial-hero.jpg')})` }}></div>
      <div className="hero__grain"></div>
      <div className="wrap hero__content">
        <div className="eyebrow">Our Story</div>
        <h1 className="h-display">
          Founded in 1873.<br/>
          The most significant<br/>chapter is now.
        </h1>
      </div>
    </section>
  );
}

/* ============================================================
   5.2  Who We Are - LIGHT section, single column prose
   ============================================================ */
function AboutWhoWeAre() {
  return (
    <section className="section section--light" data-screen-label="02 Who We Are">
      <div className="wrap wrap--prose">
        <div className="eyebrow">Who We Are</div>
        <h2 className="h-1" style={{ marginBottom: 48 }}>
Over 150 years of uninterrupted<br/>Canadian manufacture.
        </h2>
        <div className="body body-lg">
          <p>
            HFI traces its origins to 1873, established as Canada was defining its own
            industrial and defence identity. For over 150 years, the company has
            operated without interruption as Canada's manufacturer of military
            pyrotechnics: through every major conflict, every generation of
            procurement policy, and every technological shift in the energetics
            domain.
          </p>
          <p>
            That continuity reflects a regulated, licensed position that competitors
            cannot quickly replicate, and a depth of technical knowledge that
            accumulates only through generations of operation.
          </p>
          <p>
            Today, HFI is in its most active phase of growth. Acquired in 2023
            and backed by permanent Canadian capital, the company has grown its
            eastern Ontario property to over 3,000 acres, deepened its relationships
            with Canada's Department of National Defence, the United States Navy, and
            allied militaries across NATO and partner nations, and launched funded programs for infrastructure
            development and new product development. The foundation is over 150 years
            old. What's being built on it is new.
          </p>
        </div>

        {/* Quiet date strip - anchors the heritage claim visually */}
        <div style={{
          marginTop: 70,
          paddingTop: 40,
          borderTop: '1px solid var(--light-rule)',
          display: 'grid',
          gridTemplateColumns: 'repeat(4, 1fr)',
          gap: 30,
        }} className="abt-strip">
          <Stat year="1873" label="Founded" />
          <Stat year="1914" label="Continuous wartime supply" />
          <Stat year="2023" label="CIEL Capital acquired" />
          <Stat year="Today" label="Over 150 years operating" highlight />
        </div>
      </div>
      <style>{`
        @media (max-width: 760px) {
          .abt-strip { grid-template-columns: 1fr 1fr !important; gap: 22px !important; }
        }
      `}</style>
    </section>
  );
}

function Stat({ year, label, highlight }) {
  return (
    <div>
      <div style={{
        fontSize: 28,
        fontWeight: 600,
        letterSpacing: '-0.02em',
        color: highlight ? 'var(--red)' : 'var(--light-text)',
      }}>{year}</div>
      <div style={{
        fontSize: 11,
        letterSpacing: '0.14em',
        textTransform: 'uppercase',
        color: 'var(--text-3)',
        marginTop: 8,
        lineHeight: 1.4,
      }}>{label}</div>
    </div>
  );
}

/* ============================================================
   5.2b  150th Anniversary group photo - anchors the people claim
   ============================================================ */
function AboutTeamPhoto() {
  return (
    <section
      data-screen-label="02b The People"
      style={{ background: 'var(--bg)', padding: '40px 0 0' }}
    >
      <figure className="wrap" style={{ margin: 0 }}>
        <div className="team150">
          <div className="team150__frame">
            <img
              src={window.A('photo-hfi-team-150.jpg')}
              alt="The HFI team gathered at the company's 150th anniversary celebration in eastern Ontario."
              className="team150__img"
            />
            {/* archival frame treatments */}
            <div className="team150__grade" aria-hidden="true"></div>
            <div className="team150__vignette" aria-hidden="true"></div>
            <div className="team150__grain" aria-hidden="true"></div>

            {/* corner metadata - contact-sheet feel */}
            <div className="team150__meta team150__meta--tl">
              <span className="team150__dot" aria-hidden="true"></span>
              <span>FRAME 03 / 12</span>
            </div>
            <div className="team150__meta team150__meta--tr">
              <span>ARCHIVE · HFI / 1873-2023</span>
            </div>
            <div className="team150__meta team150__meta--bl">
              <span>PRESCOTT, ONTARIO</span>
            </div>
            <div className="team150__meta team150__meta--br">
              <span>150-YEAR ASSEMBLY · 2023</span>
            </div>

            {/* corner ticks - print-register marks */}
            <span className="team150__tick team150__tick--tl" aria-hidden="true"></span>
            <span className="team150__tick team150__tick--tr" aria-hidden="true"></span>
            <span className="team150__tick team150__tick--bl" aria-hidden="true"></span>
            <span className="team150__tick team150__tick--br" aria-hidden="true"></span>
          </div>
        </div>

        <figcaption style={{
          paddingTop: 36,
          paddingBottom: 36,
          maxWidth: 760,
          margin: '0 auto',
          textAlign: 'center',
        }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 16 }}>The People</div>
            <h3 style={{
              fontSize: 28,
              fontWeight: 600,
              letterSpacing: '-0.02em',
              color: 'var(--white)',
              lineHeight: 1.15,
              margin: 0,
            }}>
              Continuity isn't a slogan.<br/>It's an effective workforce.
            </h3>
          </div>
          <div style={{
            fontSize: 15.5,
            lineHeight: 1.7,
            color: 'var(--text-2)',
            maxWidth: 560,
            margin: '22px auto 0',
          }}>
            <p style={{ margin: 0 }}>
              The HFI workforce gathered at the company's 150th anniversary in Prescott,
              eastern Ontario. Many on this site have spent the better part of their careers
              inside HFI's regulated buildings; the kind of accumulated, hands-on knowledge
              that a new entrant cannot stand up overnight, and the foundation HFI
              is building from.
            </p>
          </div>
        </figcaption>
      </figure>
      <style>{`
        .team150 {
          position: relative;
          padding: 22px;
          background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 100%);
          border: 1px solid var(--rule);
        }
        .team150__frame {
          position: relative;
          width: 100%;
          overflow: hidden;
          background: #060708;
          border: 1px solid #0f1116;
        }
        .team150__img {
          display: block;
          width: 100%;
          height: auto;
          object-fit: cover;
          filter: saturate(0.72) contrast(1.08) brightness(1.08);
        }
        .team150__grade {
          position: absolute; inset: 0; pointer-events: none;
          background:
            radial-gradient(120% 80% at 50% 30%, rgba(12,14,18,0) 50%, rgba(12,14,18,.24) 100%),
            linear-gradient(180deg, rgba(12,14,18,.18) 0%, rgba(12,14,18,0) 25%, rgba(12,14,18,0) 72%, rgba(12,14,18,.44) 100%);
          mix-blend-mode: normal;
        }
        .team150__vignette {
          position: absolute; inset: 0; pointer-events: none;
          background: radial-gradient(120% 90% at 50% 50%, rgba(0,0,0,0) 62%, rgba(0,0,0,.32) 100%);
        }
        .team150__grain {
          position: absolute; inset: 0; pointer-events: none;
          opacity: 0.16;
          mix-blend-mode: overlay;
          background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.6'/></svg>");
        }
        .team150__meta {
          position: absolute;
          font-family: ui-monospace, 'SF Mono', Menlo, monospace;
          font-size: 10px;
          letter-spacing: 0.18em;
          color: rgba(255,255,255,.78);
          padding: 8px 12px;
          display: inline-flex;
          align-items: center;
          gap: 8px;
          background: rgba(12,14,18,.45);
          border: 1px solid rgba(255,255,255,.12);
          backdrop-filter: blur(2px);
          z-index: 3;
        }
        .team150__meta--tl { top: 14px; left: 14px; color: var(--white); }
        .team150__meta--tr { top: 14px; right: 14px; }
        .team150__meta--bl { bottom: 14px; left: 14px; }
        .team150__meta--br { bottom: 14px; right: 14px; color: var(--white); }
        .team150__dot {
          width: 6px; height: 6px;
          background: var(--red);
          display: inline-block;
        }
        .team150__tick {
          position: absolute;
          width: 14px; height: 14px;
          z-index: 4;
        }
        .team150__tick--tl { top: 6px; left: 6px; border-top: 1px solid var(--red); border-left: 1px solid var(--red); }
        .team150__tick--tr { top: 6px; right: 6px; border-top: 1px solid var(--red); border-right: 1px solid var(--red); }
        .team150__tick--bl { bottom: 6px; left: 6px; border-bottom: 1px solid var(--red); border-left: 1px solid var(--red); }
        .team150__tick--br { bottom: 6px; right: 6px; border-bottom: 1px solid var(--red); border-right: 1px solid var(--red); }

        @media (max-width: 860px) {
          [data-screen-label="02b The People"] figcaption {
            grid-template-columns: 1fr !important;
            gap: 24px !important;
          }
          .team150 { padding: 12px; }
          .team150__meta {
            font-size: 9px;
            padding: 6px 9px;
            letter-spacing: 0.14em;
          }
          .team150__meta--tr,
          .team150__meta--bl { display: none; }
        }
      `}</style>
    </section>
  );
}

/* ============================================================
   5.3  What Guides Us - DARK charcoal, three values
   ============================================================ */
function AboutGuides() {
  const values = [
    { name: 'Anticipate', body: 'The defence environment changes. Requirements shift. Technology evolves. We build for what is coming, not only what is contracted today.' },
    { name: 'Adapt',      body: 'Over 150 years of operation means generations of navigating change. Not by resisting it, but by having the foundation to absorb it and move.' },
    { name: 'Act',        body: 'Strategy without execution is irrelevant in defence. We make decisions, commit capital, and build. The work speaks for itself.' },
  ];
  return (
    <section className="section section--alt" data-screen-label="03 What Guides Us">
      <div className="wrap">
        <div style={{ maxWidth: 760, marginBottom: 70 }}>
          <div className="eyebrow">What Guides Us</div>
          <h2 className="h-1">Three principles.<br/>One operating standard.</h2>
        </div>
        <div className="pillars">
          {values.map((v, i) => (
            <window.FadeIn key={v.name} delay={i * 100} className="pillar">
              <div className="pillar__num">0{i + 1}</div>
              <h3 style={{ fontSize: 22, textTransform: 'none', letterSpacing: '-0.01em' }}>{v.name}</h3>
              <p style={{ marginTop: 18 }}>{v.body}</p>
            </window.FadeIn>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   5.4  Team CTA - LIGHT, centred. Now speaks to both audiences:
   procurement readers heading to leadership, and prospective
   employees who want a way in.
   ============================================================ */
function AboutTeamCTA() {
  return (
    <section className="section section--alt" data-screen-label="05 Team CTA">
      <div className="wrap" style={{ textAlign: 'center', maxWidth: 760, margin: '0 auto' }}>
        <div className="eyebrow">Together, Stronger</div>
        <h2 className="h-1" style={{ marginBottom: 24 }}>The team behind HFI.</h2>
        <p className="body body-lg" style={{ marginBottom: 36, margin: '0 auto 36px', maxWidth: 560 }}>
          A leadership team, an advisory board, and 150-plus people across operations,
          engineering, innovation, and the line, pulling in one direction with the
          customers and partners who rely on us. Individually expert; together, stronger.
        </p>
        <div style={{ display: 'flex', gap: 22, justifyContent: 'center', flexWrap: 'wrap', alignItems: 'center' }}>
          <window.Link to="/team" className="link-arrow">
            Meet the Team <span>→</span>
          </window.Link>
          <span aria-hidden="true" style={{ width: 1, height: 18, background: 'var(--rule)', display: 'inline-block' }}></span>
          <window.Link to="/careers" className="link-arrow">
            Join the Team <span>→</span>
          </window.Link>
        </div>
      </div>
    </section>
  );
}

window.PageAbout = PageAbout;