// Plans & Targets — Pillar 04

const Plans = ({ country = 'sen' }) => {
  const profile = COUNTRY_PROFILES[country] || COUNTRY_PROFILES.sen;
  return (
    <>
      <section className="band band-paper pillar-anchor" id="plans">
        <div className="section-head">
          <div>
            <div className="eyebrow green"><span className="swatch"></span>Pillar 04 · Plans &amp; Targets</div>
            <h1 className="headline">
              From <span className="em">2026 inventory</span> to <span className="em-green">SF₆-free fleet by 2040</span>.
            </h1>
            <p className="lede">{profile.plans_lede}</p>
          </div>
          <div className="meta">
            <b>Governance</b>
            {profile.plans_meta}
            <div className="pill-meta">Next review · Q3 2026</div>
          </div>
        </div>

        {/* Target KPIs */}
        <div className="row-4" style={{marginTop: 44}}>
          {TARGETS.map((t, i) => (
            <div className="stat-block" key={i} style={{padding: "26px 28px"}}>
              <div className="accent-tile" style={{
                background: t.color === "green" ? "var(--heat-green)"
                          : t.color === "orange" ? "var(--orange)"
                          : "var(--cyan)"
              }}><IconTarget size={18} color="#fff"/></div>
              <div className="n" style={{
                color: t.color === "green" ? "var(--heat-green-dim)"
                     : t.color === "orange" ? "var(--orange-700)"
                     : "var(--blue-900)",
                fontSize: 56,
              }}>
                <span className="num">{t.n}</span>
                <span className="unit"> {t.unit}</span>
              </div>
              <div className="l" style={{marginTop: 14, fontSize: 14}}>{t.l}</div>
            </div>
          ))}
        </div>

        {/* Timeline */}
        <div style={{marginTop: 56}}>
          <div className="eyebrow"><span className="swatch"></span>Programme timeline</div>
          <h2 className="section-h" style={{marginTop: 12, fontSize: 30}}>Milestones · 2024 → 2040</h2>

          <div className="timeline">
            <div className="progress" style={{width: "32%"}}></div>
            <div className="tl-grid">
              {TIMELINE.map((tl, i) => (
                <div className={`tl-item ${tl.status}`} key={i}>
                  <div className="tl-node"></div>
                  <div className="tl-year">{tl.year}</div>
                  <span className={`tl-tag ${tl.tagCls}`}>{tl.tag}</span>
                  <h4>{tl.title}</h4>
                  <p>{tl.note}</p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      <section className="band band-paper-2">
        <div className="section-head">
          <div>
            <div className="eyebrow navy"><span className="swatch"></span>Six workstreams</div>
            <h2 className="section-h">What it takes to make 2040.</h2>
            <p className="lede">Each workstream is owned by a HEAT lead and reports quarterly progress against deliverables. Percentages reflect status as of Q1 2026 close.</p>
          </div>
          <div className="meta">
            <b>Programme lead</b>
            HEAT GmbH · Königstein
            <div className="pill-meta">v2.4 · Apr 2026</div>
          </div>
        </div>

        <div className="row-3" style={{marginTop: 40}}>
          {WORKSTREAMS.map((ws, i) => (
            <div className="workstream-card" key={i}>
              <div className="num-tag">{ws.num}</div>
              <h4>{ws.title}</h4>
              <p>{ws.desc}</p>
              <div className="ws-progress">
                <div className="ws-bar"><div style={{width: `${ws.pct}%`}}></div></div>
                <div className="ws-pct">{ws.pct}%</div>
              </div>
            </div>
          ))}
        </div>
      </section>

      <section className="band band-dark">
        <div className="section-head">
          <div>
            <div className="eyebrow"><span className="swatch" style={{background: "var(--heat-green)"}}></span>Regulatory anchors</div>
            <h2 className="section-h">Aligned with three binding frameworks.</h2>
          </div>
        </div>

        <div className="row-3" style={{marginTop: 40}}>
          <div style={{padding: "26px 28px", background: "rgba(255,255,255,0.04)", border: "1px solid rgba(255,255,255,0.1)", borderRadius: 14}}>
            <div style={{fontFamily: "JetBrains Mono, monospace", fontSize: 11, color: "var(--heat-green)", fontWeight: 700, letterSpacing: "0.1em"}}>EU · 2024</div>
            <h4 style={{color: "#fff", fontSize: 19, marginTop: 8, marginBottom: 10, fontWeight: 700, letterSpacing: "-0.005em"}}>Regulation (EU) 2024/573</h4>
            <p style={{fontSize: 14, color: "rgba(255,255,255,0.72)", lineHeight: 1.55, margin: 0}}>Place-on-market bans for new SF₆ switchgear: ≤ 24 kV in 2030, ≤ 145 kV in 2032, &gt; 145 kV phased restrictions thereafter. Operator obligations on leak detection and recovery from day one.</p>
          </div>
          <div style={{padding: "26px 28px", background: "rgba(255,255,255,0.04)", border: "1px solid rgba(255,255,255,0.1)", borderRadius: 14}}>
            <div style={{fontFamily: "JetBrains Mono, monospace", fontSize: 11, color: "var(--cyan)", fontWeight: 700, letterSpacing: "0.1em"}}>DE · 2021</div>
            <h4 style={{color: "#fff", fontSize: 19, marginTop: 8, marginBottom: 10, fontWeight: 700, letterSpacing: "-0.005em"}}>Klimaschutzgesetz</h4>
            <p style={{fontSize: 14, color: "rgba(255,255,255,0.72)", lineHeight: 1.55, margin: 0}}>Federal Climate Protection Act — net-zero by 2045. F-gas reductions are reported in the German National Inventory Report to UNFCCC; operator SF₆ data feeds Energy sector accounting.</p>
          </div>
          <div style={{padding: "26px 28px", background: "rgba(255,255,255,0.04)", border: "1px solid rgba(255,255,255,0.1)", borderRadius: 14}}>
            <div style={{fontFamily: "JetBrains Mono, monospace", fontSize: 11, color: "var(--orange-100)", fontWeight: 700, letterSpacing: "0.1em"}}>EU · 2022</div>
            <h4 style={{color: "#fff", fontSize: 19, marginTop: 8, marginBottom: 10, fontWeight: 700, letterSpacing: "-0.005em"}}>CSRD / ESRS E1</h4>
            <p style={{fontSize: 14, color: "rgba(255,255,255,0.72)", lineHeight: 1.55, margin: 0}}>Corporate Sustainability Reporting Directive — Scope 1 disclosure of GHG emissions including SF₆ leakage. Audit-grade traceability mandatory from FY 2025 onward.</p>
          </div>
        </div>
      </section>
    </>
  );
};

window.Plans = Plans;