// Strategic Overview — Pillar 01
const Strategic = ({ country = 'sen' }) => {
  const profile = COUNTRY_PROFILES[country] || COUNTRY_PROFILES.sen;
  const HEAD = (
    <section className="band band-hero pillar-anchor" id="strategic">
      <div className="section-head">
        <div>
          <div className="eyebrow"><span className="swatch"></span>The SF₆ challenge</div>
          <h1 className="headline anim">
            Sulphur hexafluoride is the <span className="em">most potent greenhouse gas</span> ever regulated — and the power grid is its single biggest user.
          </h1>
          <p className="lede anim" style={{animationDelay: "120ms"}}>
            SF₆ is the dielectric of choice for high-voltage switchgear: ~80 % of global SF₆ in service sits inside transmission and distribution equipment. Every kilogram that leaks is climate-equivalent to <b>23.5 t of CO₂</b> — and stays in the atmosphere for thousands of years. This portal tracks our fleet's transition to clean alternatives.
          </p>
        </div>
        <div className="meta">
          <b>Last updated</b>
          {profile.name}
          <div className="pill-meta">Preliminary · Indicative figures</div>
        </div>
      </div>

      <div className="kpi-row">
        <div className="kpi">
          <div className="n"><span className="num">23,500</span><span className="x"> ×</span></div>
          <div className="l">Global Warming Potential of SF₆ over 100 years, AR6. The strongest GHG covered by the Kyoto Protocol — <b>22 700 × more warming</b> than CO₂.</div>
          <div className="src">Source · IPCC AR6 · 2023</div>
        </div>
        <div className="kpi">
          <div className="n"><span className="num">3,200</span><span className="unit"> years</span></div>
          <div className="l">Atmospheric lifetime. Once released, SF₆ persists for over a hundred human generations — <b>effectively permanent</b> on policy-relevant timescales.</div>
          <div className="src">Source · WMO · 2024</div>
        </div>
        <div className="kpi">
          <div className="n">≤ <span className="num">145</span><span className="unit"> kV</span></div>
          <div className="l">EU place-on-market ban from <b>2032</b> for new gas-insulated switchgear. ≤ 24 kV banned from 2030 under Regulation (EU) 2024/573.</div>
          <div className="src">Source · EU F-Gas · 2024</div>
        </div>
      </div>
    </section>
  );

  const PROBLEM = (
    <section className="band band-paper">
      <div className="eyebrow navy"><span className="swatch"></span>Understanding the source</div>
      <h2 className="section-h">Where does SF₆ enter the atmosphere?</h2>
      <p className="lede">Two emission channels — both inside the asset operator's perimeter, and both addressable.</p>

      <div className="two-up">
        <div className="pathway-card">
          <div className="pc-head">
            <div className="icon" style={{background: "rgba(255,87,33,0.10)", color: "var(--orange-700)"}}>
              <IconPlug size={24} />
            </div>
            <div>
              <h3>Operational leakage</h3>
              <div className="pc-tag">Continuous, in-service</div>
            </div>
          </div>
          <p>Industry-average leak rate is <b>0.5 – 1.0 % of installed mass per year</b> from sealed gas compartments, bushings and gaskets. Across our 4 820 kg fleet that is <b>up to 48 kg/yr</b> — equivalent to 1.1 kt CO₂e released without a single switching operation.</p>
          <div className="pc-meta">
            <div>
              <div className="lbl">Fleet leak rate</div>
              <div className="val">0.7 %/yr</div>
            </div>
            <div>
              <div className="lbl">Equivalent</div>
              <div className="val">~ 1.1 kt CO₂e/yr</div>
            </div>
          </div>
        </div>

        <div className="between"><IconArrow size={28} color="var(--fg-3)" /></div>

        <div className="pathway-card">
          <div className="pc-head">
            <div className="icon" style={{background: "rgba(255,140,0,0.10)", color: "#B36400"}}>
              <IconAtom size={24} />
            </div>
            <div>
              <h3>End-of-life release</h3>
              <div className="pc-tag">Punctual, retirement</div>
            </div>
          </div>
          <p>SF₆ recovered at switchgear retirement averages <b>85 % industry-wide</b>; the remaining 15 % is vented or lost in handling. A typical 380 kV bay contains 300 – 500 kg — recovering one bay correctly avoids the climate impact of <b>~ 1 700 transatlantic flights</b>.</p>
          <div className="pc-meta">
            <div>
              <div className="lbl">Current recovery</div>
              <div className="val">85 %</div>
            </div>
            <div>
              <div className="lbl">2032 target</div>
              <div className="val">≥ 98 %</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );

  const PATHS = (
    <section className="band band-paper-2">
      <div className="eyebrow green"><span className="swatch"></span>The transition choice</div>
      <h2 className="section-h">Two technology families replace SF₆ across every voltage class.</h2>
      <p className="lede">Both are commercially available today. The choice depends on voltage level, footprint constraints, and operator preference for vacuum vs. mixed-gas insulation.</p>

      <div className="row-2">
        <div className="pathway-card">
          <div className="pc-head">
            <div className="icon" style={{background: "rgba(98,211,47,0.14)", color: "var(--heat-green-dim)"}}>
              <IconLeaf size={24} />
            </div>
            <div>
              <h3>Clean-air + vacuum</h3>
              <div className="pc-tag">GWP = 0 · MV → 145 kV</div>
            </div>
          </div>
          <p>Synthetic dry air (80 % N₂ / 20 % O₂) for insulation; shielded vacuum interrupters for switching. <b>Zero GWP, zero F-gases, zero post-decommissioning liability.</b> In commercial series since 2017 from multiple OEMs.</p>
          <div className="pc-meta">
            <div>
              <div className="lbl">Voltage range</div>
              <div className="val">12 – 145 kV</div>
            </div>
            <div>
              <div className="lbl">In our fleet</div>
              <div className="val">5 stations</div>
            </div>
          </div>
        </div>

        <div className="pathway-card">
          <div className="pc-head">
            <div className="icon" style={{background: "rgba(0,175,215,0.12)", color: "var(--cyan-ink)"}}>
              <IconAtom size={24} />
            </div>
            <div>
              <h3>Fluoronitrile mixtures</h3>
              <div className="pc-tag">GWP &lt; 1 · up to 420 kV</div>
            </div>
          </div>
          <p>C4-FN / C5-FK mixtures (g³, EconiQ, AirPlus) with GWP &lt; 1 across the full 72.5 – 420 kV range. Same compact footprint as legacy GIS — <b>drop-in replacement bay-for-bay</b> where vacuum is not yet viable.</p>
          <div className="pc-meta">
            <div>
              <div className="lbl">Voltage range</div>
              <div className="val">72.5 – 420 kV</div>
            </div>
            <div>
              <div className="lbl">Retrofit-ready</div>
              <div className="val">Selected GIS</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );

  const OPP = (
    <section className="band band-dark">
      <div className="eyebrow"><span className="swatch" style={{background: "var(--heat-green)"}}></span>The opportunity</div>
      <h2 className="section-h">A complete transition by 2040 avoids <span style={{color: "var(--heat-green)"}}>186 kt CO₂e</span> across our portfolio.</h2>
      <p className="lede">Modelled against business-as-usual, between 2026 and 2040 (see <b>Pillar 03 — Emission Scenarios</b> for assumptions and sensitivity).</p>

      <div className="opportunity">
        <div>
          <div className="opp-big"><span className="num">186</span><span className="unit"> kt</span></div>
          <div className="opp-cap" style={{color: "rgba(255,255,255,0.55)"}}>CO₂-equivalent · cumulative 2026 – 2040 · accelerated scenario</div>
        </div>

        <div className="checklist">
          <div className="check">
            <div className="tick"><IconTick size={11} color="#002500"/></div>
            <div><b>Eliminate</b> a Kyoto-class F-gas at source<span className="ck-val">100 %</span></div>
          </div>
          <div className="check">
            <div className="tick"><IconTick size={11} color="#002500"/></div>
            <div><b>De-risk</b> Scope 1 reporting under the EU CSRD<span className="ck-val">2025 →</span></div>
          </div>
          <div className="check">
            <div className="tick"><IconTick size={11} color="#002500"/></div>
            <div><b>Pre-comply</b> with the 2032 EU F-Gas ban<span className="ck-val">6 yr lead</span></div>
          </div>
          <div className="check">
            <div className="tick"><IconTick size={11} color="#002500"/></div>
            <div><b>Future-proof</b> assets — 40-yr design life beyond regulatory horizon<span className="ck-val">2070+</span></div>
          </div>
        </div>
      </div>
    </section>
  );

  return <>{HEAD}{PROBLEM}{PATHS}{OPP}</>;
};

window.Strategic = Strategic;