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

function PageFacility() {
  return (
    <>
      <FacHero />
      <FacLand />
      <FacEstablishingShot />
      <FacSiteGrid />
      <FacLocation />
      <FacStewardship />
      <window.ClosingCTA
        headline="Speak with us about the site."
        body="Site visits and infrastructure-program discussions are arranged through HFI directly."
        ctaText="Arrange a Site Visit"
      />
    </>
  );
}

/* =========================================================
   Editorial establishing shot - large aerial as visual breath
   ========================================================= */
function FacEstablishingShot() {
  return (
    <section style={{
      padding: 0,
      background: 'var(--bg)',
      position: 'relative',
    }} data-screen-label="03 Establishing">
      <figure style={{ margin: 0 }}>
        <div style={{
          position: 'relative',
          aspectRatio: '21 / 9',
          overflow: 'hidden',
        }}>
          <img
            src={window.A('photo-aerial-2.jpg')}
            alt="HFI site, eastern Ontario, aerial view of forested operational perimeter"
            style={{
              width: '100%',
              height: '100%',
              objectFit: 'cover',
              filter: 'saturate(0.94) contrast(1.04)',
            }}
          />
          {/* Side scrim for caption legibility */}
          <div style={{
            position: 'absolute',
            inset: 0,
            background: 'linear-gradient(90deg, rgba(12,14,18,.78) 0%, rgba(12,14,18,.25) 35%, rgba(12,14,18,0) 60%)',
            pointerEvents: 'none',
          }}></div>

          {/* Top-left ref marker */}
          <div style={{
            position: 'absolute',
            top: 28, left: 32,
            display: 'flex', flexDirection: 'column', gap: 14,
          }}>
            <div style={{ width: 36, height: 3, background: 'var(--red)' }}></div>
            <div className="label" style={{ color: 'var(--red)' }}>Site Reference · HFI-D-001</div>
            <div className="label" style={{ color: 'var(--text-2)' }}>44.7286° N · 75.4842° W</div>
          </div>

          {/* Bottom-left caption */}
          <figcaption style={{
            position: 'absolute',
            bottom: 32, left: 32,
            maxWidth: 540,
          }}>
            <h3 style={{
              fontSize: 'clamp(22px, 2.2vw, 32px)',
              fontWeight: 600,
              color: 'var(--white)',
              letterSpacing: '-0.015em',
              lineHeight: 1.18,
              margin: 0,
            }}>
              Operational today.<br />Acreage to grow into.
            </h3>
            <p style={{
              fontSize: 14,
              color: 'var(--text-2)',
              marginTop: 12,
              marginBottom: 0,
              maxWidth: 460,
              lineHeight: 1.55,
            }}>
              Eastern Ontario · Township of Edwardsburgh Cardinal · ~3,000 licensed acres.
              an operational core today, with headroom for new infrastructure and programs for generations to come.
            </p>
          </figcaption>
        </div>
      </figure>
    </section>
  );
}

/* =========================================================
   (Removed) 2b  AERIAL STRIP - redundant with hero + site grid
   ========================================================= */
function FacAerialStrip() {
  const cells = [
    { num: 'A-01', lbl: 'Northwest approach',    sub: 'Forested perimeter · standoff buffer', img: window.A('photo-aerial-hero.jpg') },
    { num: 'A-02', lbl: 'Operational interior',  sub: 'Production, storage, range', img: window.A('photo-aerial-2.jpg') },
    { num: 'A-03', lbl: 'Eastern boundary',      sub: 'Expansion-ready footprint', img: window.A('photo-aerial-3.jpg') },
  ];
  return (
    <section className="section section--alt" data-screen-label="02b Aerial Strip">
      <div className="wrap" style={{ marginBottom: 50 }}>
        <div className="eyebrow">From The Air</div>
        <h2 className="h-1" style={{ maxWidth: 720 }}>The site, in plan view.</h2>
      </div>
      <div style={{ padding: '0 24px' }}>
        <div className="strip strip--home3">
          {cells.map(c => (
            <div key={c.num} className="strip__cell" style={{ aspectRatio: '4 / 3' }}>
              <div className="strip__img" style={{ backgroundImage: `url(${c.img})` }}></div>
              <div className="strip__caption">
                <span className="num">{c.num}</span>
                <span className="lbl">{c.lbl}</span>
                <span className="sub">{c.sub}</span>
              </div>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 880px) { .section--alt .strip { grid-template-columns: 1fr !important; } }
      `}</style>
    </section>
  );
}

function FacHero() {
  return (
    <section className="hero" data-screen-label="01 Facility Hero" style={{ minHeight: '90vh' }}>
      <div className="hero__bg" style={{ backgroundImage: `url(${window.A('photo-aerial-3.jpg')})`, filter: 'saturate(0.92) contrast(1.04)' }}></div>
      <div className="hero__grain"></div>
      <div className="wrap hero__content">
        <div className="eyebrow" style={{ color: '#FF4E48', textShadow: '0 1px 12px rgba(0,0,0,0.7)' }}>Eastern Ontario, Canada</div>
        <h1 className="h-display">A site built<br />for the long term.</h1>
        <p className="hero__sub" style={{ maxWidth: 560 }}>
          Over 3,000 acres of licensed defence property. Purpose-built for regulated defence operations.
        </p>
      </div>
      <div className="hero__strap">
        <div className="wrap hero__strap-inner">
          <div className="hero__strap-item">
            <div className="num">~3,000 ac</div>
            <div className="lbl">Licensed Footprint</div>
          </div>
          <div className="hero__strap-item">
            <div className="num">150+ yrs</div>
            <div className="lbl">Continuous Operation</div>
          </div>
          <div className="hero__strap-item">
            <div className="num">~90 min</div>
            <div className="lbl">To Ottawa</div>
          </div>
          <div className="hero__strap-item">
            <div className="num">Adjacent</div>
            <div className="lbl">Intl. Border Corridor</div>
          </div>
        </div>
      </div>
    </section>
  );
}

function FacLand() {
  return (
    <section className="section section--light" data-screen-label="02 The Land">
      <div className="wrap wrap--prose">
        <window.FadeIn>
          <div className="eyebrow">The Footprint</div>
          <h2 className="h-1" style={{ marginBottom: 40 }}>Over 150 years of regulated standing.</h2>
          <div className="body body-lg">
            <p>
              HFI operates from a licensed defence site in the Township of
              Edwardsburgh Cardinal, eastern Ontario. The property spans over 3,000
              acres, purpose-built and ready for regulated energetics
              manufacturing, storage, testing, and associated defence activities.
            </p>
            <p>
              What sits on this land took over 150 years to build: a slow accumulation
              of regulatory standing, community relationships, and environmental
              stewardship around a working defence manufacturing site. The
              licensing, spacing, and safety envelope required to operate regulated
              energetics at this scale took generations to establish. It cannot be
              replicated on a short timeline.
            </p>
          </div>
          <p style={{
            fontSize: 'clamp(28px, 3vw, 44px)',
            fontWeight: 600,
            letterSpacing: '-0.02em',
            color: 'var(--light-text)',
            margin: '60px 0 0',
            paddingTop: 50,
            borderTop: '1px solid var(--light-rule)',
          }}>
            The perimeter is the capability.
          </p>
        </window.FadeIn>
      </div>
    </section>
  );
}

function FacSiteGrid() {
  const cols = [
    {
      title: 'Manufacturing',
      body: 'Licensed, ISO-certified production facilities for regulated pyrotechnic manufacture under Canadian and US compliance regimes. In continuous operation since 1873.',
      tag: 'SHIPPING',
    },
    {
      title: 'Infrastructure Development',
      body: 'Active capital programs underway: innovation, storage, and testing capability being built on Canadian soil. ',
      tag: 'BUILDING',
    },
    {
      title: 'Future Capacity',
      body: 'The site envelope supports capability that does not yet exist at scale in Canada. We are building it deliberately, with the right partners, at the right pace.',
      tag: 'EXPANDING',
    },
  ];
  return (
    <section className="section section--alt" data-screen-label="03 Site Capability">
      <div className="wrap">
        <window.SectionHead
          eyebrow="Site Capability"
          title="Three horizons. One footprint."
          lede="Manufacturing today. Infrastructure being built now. Capacity for what Canada and its allies need next."
        />
        <div className="pillars">
          {cols.map((c, i) => (
            <window.FadeIn key={i} delay={i * 100} className="pillar">
              <div className="pillar__num">0{i + 1}  ·  {c.tag}</div>
              <h3>{c.title}</h3>
              <p>{c.body}</p>
            </window.FadeIn>
          ))}
        </div>
      </div>
    </section>
  );
}

function FacLocation() {
  return (
    <section className="section" data-screen-label="05 Location">
      <div className="wrap">
        <div className="feature">
          <div className="feature__body">
            <div className="eyebrow">Geography</div>
            <h2 className="h-1">Eastern Ontario. Strategically positioned.</h2>
            <div className="body body-lg" style={{ marginTop: 28 }}>
              <p>
                Our site sits in the Township of Edwardsburgh Cardinal, close to
                Ottawa's defence procurement community, the Port of Montréal, CFB
                Trenton, and the United States border. Proximity to allied border
                infrastructure and Canada's major defence-logistics corridors is
                not incidental to our location. It is why we are here.
              </p>
            </div>
            <ul className="feature__list">
              <li>Township of Edwardsburgh Cardinal, Ontario, Canada</li>
              <li>~90 minutes from Ottawa (NDHQ)</li>
              <li>~2 hours from the Port of Montréal</li>
              <li>~2.5 hours from CFB Trenton; ~5 hours from CFB Borden</li>
              <li>Adjacent to the international border and St. Lawrence Seaway corridor</li>
            </ul>
          </div>
          <LocationMap />
        </div>
      </div>
    </section>
  );
}

/* Stylized locator map - HFI on the St. Lawrence, between Ottawa and the
   United States border. Replaces the dossier inset that duplicated the
   proximity list on the left. */
function LocationMap() {
  // Zoomed-out regional view: HFI within the Toronto-Ottawa-Montréal triangle,
  // on the St. Lawrence / US border, with the US Northeast beyond for context.
  const hfi = { x: 226, y: 286 };
  // St. Lawrence: from Lake Ontario outlet (lower-left) NE to Montréal and beyond.
  const river = 'M 96,360 C 150,330 196,312 244,276 C 296,236 330,196 360,150 L 392,104';
  // International border: runs along the river, then turns south into the US.
  const border = 'M 96,360 C 150,330 196,312 244,276 C 270,257 286,242 300,224 L 318,260 L 330,360 L 342,500';
  const cities = [
    { x: 196, y: 92,  label: 'OTTAWA',   sub: '90 min N', anchor: 'start', dx: 11, dy: 4 },
    { x: 360, y: 132, label: 'MONTRÉAL', sub: '2 hr NE',  anchor: 'end',   dx: -11, dy: 4 },
    { x: 96,  y: 372, label: 'KINGSTON', sub: '1 hr SW',  anchor: 'start', dx: 11, dy: 14 },
    { x: 44,  y: 322, label: 'TORONTO',  sub: '3.5 hr SW',anchor: 'start', dx: 11, dy: 4 },
  ];
  return (
    <figure style={{ margin: 0 }}>
      <div style={{
        position: 'relative',
        aspectRatio: '4 / 5',
        background: '#e8e4d9',
        border: '1px solid rgba(20,30,40,0.15)',
        overflow: 'hidden',
      }}>
        <svg viewBox="0 0 400 500" width="100%" height="100%" role="img" preserveAspectRatio="xMidYMid slice"
          aria-label="Regional locator map: HFI sits in eastern Ontario on the St. Lawrence River and the United States border, within the Toronto, Ottawa and Montréal triangle and adjacent to the US Northeast."
          style={{ display: 'block' }}>
          <defs>
            <radialGradient id="hfiGlow" cx="0.5" cy="0.5" r="0.5">
              <stop offset="0" stopColor="#D41E1B" stopOpacity="0.42" />
              <stop offset="1" stopColor="#D41E1B" stopOpacity="0" />
            </radialGradient>
          </defs>

          {/* Canada landmass (lighter paper) */}
          <rect x="0" y="0" width="400" height="500" fill="rgba(255,255,255,0.42)" />
          {/* United States - south / lower-right of the border, tan tint */}
          <path d={border + ' L 400,500 L 400,104 L 392,104 Z'} fill="rgba(120,104,64,0.14)" />

          {/* Faint graticule */}
          {[100, 200, 300].map(x => (
            <line key={'v'+x} x1={x} y1="0" x2={x} y2="500" stroke="rgba(20,30,40,0.05)" strokeWidth="1" />
          ))}
          {[125, 250, 375].map(y => (
            <line key={'h'+y} x1="0" y1={y} x2="400" y2={y} stroke="rgba(20,30,40,0.05)" strokeWidth="1" />
          ))}

          {/* Lake Ontario (lower-left) */}
          <ellipse cx="58" cy="392" rx="92" ry="46" transform="rotate(-18 58 392)" fill="#a9cde2" opacity="0.85" />
          <text fill="#3f6f8f" fontSize="9" letterSpacing="1.5"
            transform="translate(60,398) rotate(-18)" textAnchor="middle"
            fontFamily="ui-monospace, 'SF Mono', Menlo, monospace">LAKE ONTARIO</text>

          {/* St. Lawrence River */}
          <path d={river} fill="none" stroke="#a9cde2" strokeWidth="13" strokeLinecap="round" />
          <path d={river} fill="none" stroke="#6ea4c6" strokeOpacity="0.8" strokeWidth="1.2" />
          {/* International border (dashed) */}
          <path d={border} fill="none" stroke="rgba(45,55,65,0.5)" strokeWidth="1" strokeDasharray="2 5" />

          {/* Region labels */}
          <text x="30" y="48" fill="rgba(40,52,62,0.46)" fontSize="13" letterSpacing="3" fontWeight="600">CANADA</text>
          <text x="384" y="330" textAnchor="end" fill="rgba(40,52,62,0.42)" fontSize="13" letterSpacing="3" fontWeight="600">UNITED STATES</text>
          <text x="384" y="350" textAnchor="end" fill="rgba(40,52,62,0.4)" fontSize="9.5" letterSpacing="1"
            fontFamily="ui-monospace, 'SF Mono', Menlo, monospace">New York State</text>
          {/* Direction cue to the US Northeast */}
          <text x="372" y="468" textAnchor="end" fill="rgba(40,52,62,0.5)" fontSize="9.5" letterSpacing="1"
            fontFamily="ui-monospace, 'SF Mono', Menlo, monospace">New York City · Boston →</text>

          {/* River label */}
          <text fill="#3f6f8f" fontSize="9" letterSpacing="2"
            transform="translate(300,205) rotate(-37)" textAnchor="middle"
            fontFamily="ui-monospace, 'SF Mono', Menlo, monospace">ST. LAWRENCE R.</text>

          {/* Cities */}
          {cities.map(c => (
            <g key={c.label}>
              <circle cx={c.x} cy={c.y} r="3.2" fill="#23272e" />
              <circle cx={c.x} cy={c.y} r="6" fill="none" stroke="rgba(20,30,40,0.28)" strokeWidth="1" />
              <text x={c.x + c.dx} y={c.y + c.dy} textAnchor={c.anchor}
                fill="rgba(25,30,36,0.85)" fontSize="11" letterSpacing="1.2" fontWeight="600">{c.label}</text>
              {c.sub && (
                <text x={c.x + c.dx} y={c.y + c.dy + 13} textAnchor={c.anchor}
                  fill="rgba(25,30,36,0.5)" fontSize="8.5" letterSpacing="0.5"
                  fontFamily="ui-monospace, 'SF Mono', Menlo, monospace">{c.sub}</text>
              )}
            </g>
          ))}

          {/* HFI marker - on the St. Lawrence / border corridor */}
          <circle cx={hfi.x} cy={hfi.y} r="34" fill="url(#hfiGlow)" />
          <line x1={hfi.x} y1={hfi.y - 22} x2={hfi.x} y2={hfi.y + 22} stroke="#D41E1B" strokeWidth="1" strokeOpacity="0.7" />
          <line x1={hfi.x - 22} y1={hfi.y} x2={hfi.x + 22} y2={hfi.y} stroke="#D41E1B" strokeWidth="1" strokeOpacity="0.7" />
          <circle cx={hfi.x} cy={hfi.y} r="9" fill="none" stroke="#D41E1B" strokeWidth="1.5" />
          <circle cx={hfi.x} cy={hfi.y} r="4.5" fill="#D41E1B" />
          <text x={hfi.x - 14} y={hfi.y - 14} textAnchor="end" fill="#D41E1B" fontSize="13" letterSpacing="1.2" fontWeight="700">HFI</text>
          <text x={hfi.x - 14} y={hfi.y} textAnchor="end" fill="rgba(25,30,36,0.8)" fontSize="10" letterSpacing="0.5"
            fontFamily="ui-monospace, 'SF Mono', Menlo, monospace">Prescott, ON · on the US border</text>

          {/* North arrow */}
          <g transform="translate(366,34)">
            <path d="M 0,-13 L 4.5,7 L 0,2 L -4.5,7 Z" fill="rgba(40,52,62,0.65)" />
            <text x="0" y="22" textAnchor="middle" fill="rgba(40,52,62,0.55)" fontSize="9.5" letterSpacing="1"
              fontFamily="ui-monospace, 'SF Mono', Menlo, monospace">N</text>
          </g>

          {/* Scale bar (regional) */}
          <g transform="translate(26,478)">
            <line x1="0" y1="0" x2="62" y2="0" stroke="rgba(40,52,62,0.5)" strokeWidth="1.4" />
            <line x1="0" y1="-3" x2="0" y2="3" stroke="rgba(40,52,62,0.5)" strokeWidth="1.4" />
            <line x1="62" y1="-3" x2="62" y2="3" stroke="rgba(40,52,62,0.5)" strokeWidth="1.4" />
            <text x="68" y="3.5" fill="rgba(40,52,62,0.5)" fontSize="9" letterSpacing="0.5"
              fontFamily="ui-monospace, 'SF Mono', Menlo, monospace">~100 km</text>
          </g>
        </svg>
      </div>
      <figcaption className="label" style={{ marginTop: 16, color: 'var(--text-3)' }}>
        Eastern Ontario · on the St. Lawrence and the US border, within the Toronto, Ottawa and Montréal triangle
      </figcaption>
    </figure>
  );
}

/* Aerial of the location with a typographic dossier inset - replaces the SVG map */
function LocationAerial() {
  return (
    <div style={{
      position: 'relative',
      aspectRatio: '4 / 5',
      overflow: 'hidden',
      background: 'var(--bg-2)',
    }}>
      <img
        src={window.A('photo-aerial-hero.jpg')}
        alt="Aerial view of HFI's eastern Ontario site from above"
        style={{
          position: 'absolute',
          inset: 0,
          width: '100%',
          height: '100%',
          objectFit: 'cover',
          filter: 'saturate(1.05) contrast(1.05)',
        }}
      />
      {/* Faint scrim for label legibility */}
      <div style={{
        position: 'absolute', inset: 0,
        background: 'linear-gradient(180deg, rgba(12,14,18,0) 62%, rgba(12,14,18,.34) 84%, rgba(12,14,18,.72) 100%)',
        pointerEvents: 'none',
      }}></div>

      {/* Corner brackets, faint */}
      {[
        { top: 20, left: 20, borderTop: '1px solid rgba(212,30,27,.8)', borderLeft: '1px solid rgba(212,30,27,.8)' },
        { top: 20, right: 20, borderTop: '1px solid rgba(212,30,27,.8)', borderRight: '1px solid rgba(212,30,27,.8)' },
        { bottom: 20, left: 20, borderBottom: '1px solid rgba(212,30,27,.8)', borderLeft: '1px solid rgba(212,30,27,.8)' },
        { bottom: 20, right: 20, borderBottom: '1px solid rgba(212,30,27,.8)', borderRight: '1px solid rgba(212,30,27,.8)' },
      ].map((s, i) => (
        <div key={i} style={{ position: 'absolute', width: 18, height: 18, ...s }}></div>
      ))}

      {/* Top reference */}
      <div style={{
        position: 'absolute', top: 28, left: 32, right: 32,
        display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start',
      }}>
        <div>
          <div className="label" style={{ color: 'var(--red)' }}>Site · HFI-D-001</div>
          <div style={{
            fontFamily: 'ui-monospace, "SF Mono", Menlo, monospace',
            fontSize: 13,
            color: 'var(--white)',
            marginTop: 6,
            letterSpacing: '0.04em',
          }}>
            44.7286° N · 75.4842° W
          </div>
        </div>
        <div style={{
          fontFamily: 'ui-monospace, "SF Mono", Menlo, monospace',
          fontSize: 11,
          color: 'var(--text-3)',
          letterSpacing: '0.12em',
        }}>
          ↑ N
        </div>
      </div>

      {/* Bottom dossier card */}
      <div style={{
        position: 'absolute',
        bottom: 22, left: 22, right: 22,
        background: 'rgba(22,26,34,.72)',
        backdropFilter: 'blur(10px)',
        WebkitBackdropFilter: 'blur(10px)',
        border: '1px solid rgba(255,255,255,.08)',
        padding: '22px 24px 18px',
      }}>
        <div style={{
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'baseline',
          paddingBottom: 14,
          marginBottom: 4,
          borderBottom: '1px solid rgba(255,255,255,.1)',
        }}>
          <span style={{
            fontSize: 10.5,
            letterSpacing: '0.22em',
            textTransform: 'uppercase',
            color: 'var(--red)',
            fontWeight: 500,
          }}>Proximity</span>
          <span style={{
            fontFamily: 'ui-monospace, "SF Mono", Menlo, monospace',
            fontSize: 10,
            color: 'rgba(255,255,255,.5)',
            letterSpacing: '0.12em',
          }}>44.74° N · 75.45° W</span>
        </div>

        <DossierRow name="Ottawa (NDHQ)"  value="90 min" />
        <DossierRow name="Port of Montréal" value="2 hr" />
        <DossierRow name="CFB Trenton"   value="2.5 hr" />
        <DossierRow name="CFB Borden"    value="5 hr" />
        <DossierRow name="US Border"     value="Adjacent" last />
      </div>
    </div>
  );
}

function DossierRow({ name, value, last }) {
  return (
    <div style={{
      display: 'flex',
      justifyContent: 'space-between',
      alignItems: 'baseline',
      padding: '11px 0 10px',
      borderBottom: last ? 'none' : '1px solid rgba(255,255,255,.07)',
    }}>
      <span style={{
        fontSize: 11.5,
        letterSpacing: '0.18em',
        textTransform: 'uppercase',
        color: 'rgba(255,255,255,.92)',
        fontWeight: 500,
      }}>{name}</span>
      <span style={{
        fontFamily: 'ui-monospace, "SF Mono", Menlo, monospace',
        fontSize: 12,
        color: 'var(--red)',
        whiteSpace: 'nowrap',
        fontWeight: 500,
        letterSpacing: '0.04em',
      }}>{value}</span>
    </div>
  );
}

/* Typographic location dossier - institutional, no faux cartography */
function FacilityMap() {
  return (
    <div style={{
      aspectRatio: '4/5',
      background: 'var(--bg-2)',
      border: '1px solid var(--rule)',
      padding: '44px 40px',
      display: 'flex',
      flexDirection: 'column',
      position: 'relative',
      overflow: 'hidden',
    }}>
      {/* Top: header / coordinates */}
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 36 }}>
        <div>
          <div className="label" style={{ color: 'var(--red)' }}>Site Reference</div>
          <div style={{ fontSize: 11, color: 'var(--text-3)', marginTop: 8, letterSpacing: '0.12em' }}>
            HFI-D-001
          </div>
        </div>
        <div style={{
          width: 8, height: 8,
          background: 'var(--red)',
          marginTop: 8,
        }}></div>
      </div>

      {/* Coordinates - display style */}
      <div style={{
        paddingBottom: 28,
        borderBottom: '1px solid var(--rule)',
        marginBottom: 28,
      }}>
        <div style={{
          fontFamily: 'ui-monospace, "SF Mono", Menlo, monospace',
          fontSize: 'clamp(20px, 2.2vw, 26px)',
          color: 'var(--white)',
          letterSpacing: '-0.01em',
          fontWeight: 500,
          lineHeight: 1.3,
        }}>
          44.7286° N<br/>
          75.4842° W
        </div>
        <div style={{ fontSize: 12, color: 'var(--text-3)', marginTop: 12, letterSpacing: '0.12em' }}>
          EDWARDSBURGH CARDINAL · ONTARIO
        </div>
      </div>

      {/* Distance table */}
      <div style={{ flex: 1 }}>
        <div className="label" style={{ marginBottom: 18 }}>Proximity</div>
        <Row name="Ottawa, ON" value="~90 min" sub="National defence procurement" />
        <Row name="Montréal, QC" value="~2 hr" sub="St. Lawrence corridor" />
        <Row name="Toronto, ON" value="~3 hr" sub="Industrial base" />
        <Row name="US Border" value="Adjacent" sub="International logistics" />
      </div>

      {/* Footer hairline marks */}
      <div style={{
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'center',
        paddingTop: 24,
        borderTop: '1px solid var(--rule)',
        fontSize: 10,
        letterSpacing: '0.16em',
        color: 'var(--text-3)',
        textTransform: 'uppercase',
      }}>
        <span>St. Lawrence Seaway · Hwy 401</span>
        <span style={{ color: 'var(--red)' }}>●</span>
      </div>
    </div>
  );
}

function Row({ name, value, sub }) {
  return (
    <div style={{
      display: 'flex',
      justifyContent: 'space-between',
      alignItems: 'baseline',
      gap: 16,
      padding: '14px 0',
      borderBottom: '1px solid var(--rule)',
    }}>
      <div>
        <div style={{ fontSize: 15, color: 'var(--white)', fontWeight: 500, letterSpacing: '-0.005em' }}>
          {name}
        </div>
        <div style={{ fontSize: 11.5, color: 'var(--text-3)', marginTop: 4, letterSpacing: '0.04em' }}>
          {sub}
        </div>
      </div>
      <div style={{
        fontFamily: 'ui-monospace, "SF Mono", Menlo, monospace',
        fontSize: 14,
        color: 'var(--red)',
        whiteSpace: 'nowrap',
        fontWeight: 500,
      }}>
        {value}
      </div>
    </div>
  );
}

function FacStewardship() {
  return (
    <section className="section section--light" data-screen-label="05 Stewardship">
      <div className="wrap wrap--prose">
        <div className="eyebrow">Stewardship</div>
        <h2 className="h-1" style={{ marginBottom: 36 }}>Responsible stewardship of a national asset.</h2>
        <div className="body body-lg">
          <p>
            Operating a regulated defence site of this scale carries obligations
            beyond the commercial. HFI treats land stewardship, environmental
            compliance, community relations, and safety as foundational. These are
            not constraints on operations, but the basis of our licence to operate. We have
            been part of this community since 1873. We intend to be here for the next
            150 years.
          </p>
        </div>
      </div>
    </section>
  );
}

window.PageFacility = PageFacility;