// Power section — infrastructure & grid
function Power() {
  const items = [
    { k: 'Self‑funded', t: 'Infrastructure improvements', d: 'This project is designed to fund its own infrastructure improvements — not shift costs onto existing ratepayers.' },
    { k: 'Phased', t: 'Load ramp‑up', d: 'Electric load ramps up in phases, allowing utilities to plan and build infrastructure in a measured, responsible way.' },
    { k: 'Long‑term', t: 'Service agreements', d: 'Long‑term agreements allow utilities to plan grid upgrades and maintain reliability.' },
    { k: 'Cost‑recovery', t: 'Minimum payment', d: 'Minimum payment and cost‑recovery provisions are structured so the utility recovers its investment from the project — not from other customer classes.' },
    { k: 'Reinvested', t: 'New grid investment', d: 'Data centers drive new grid investment, including deferred maintenance that would otherwise pass to existing ratepayers.' },
  ];
  return (
    <section id="power" style={{ padding: '140px 0', background: 'var(--cream-50)', borderTop: '1px solid rgba(20,32,27,.08)' }}>
      <div className="container-x">
        <div style={{ display:'grid', gridTemplateColumns: '1fr 1.4fr', gap: 60, alignItems: 'start' }}>
          <div>
            <Reveal><div className="eyebrow"><span className="dot" /> Power & the community</div></Reveal>
            <Reveal delay={1}><h2 className="h2" style={{ marginTop: 18 }}>Pays its fair share of the grid it uses.</h2></Reveal>
            <Reveal delay={2}>
              <p style={{ color: 'var(--slate-700)', fontSize: 16, lineHeight: 1.6, marginTop: 20, maxWidth: 440 }}>
                Large power users like data centers are served under specialized utility arrangements closely overseen by state regulators — so the data center funds the infrastructure it needs.
              </p>
            </Reveal>
            {/* Grid viz */}
            <Reveal delay={3} style={{ marginTop: 28 }}>
              <svg viewBox="0 0 400 220" style={{ width: '100%', maxWidth: 440 }} aria-hidden>
                <defs>
                  <linearGradient id="grid-line" x1="0" x2="1"><stop offset="0" stopColor="var(--accent)" /><stop offset="1" stopColor="var(--forest-700)" /></linearGradient>
                </defs>
                {/* Towers */}
                {[40, 140, 240, 340].map((x, i) => (
                  <g key={i}>
                    <line x1={x} y1="50" x2={x} y2="180" stroke="#2a333a" strokeWidth="1.5" />
                    <path d={`M${x-14} 70 L${x+14} 70 M${x-10} 90 L${x+10} 90`} stroke="#2a333a" strokeWidth="1.2" />
                    <path d={`M${x-16} 60 L${x} 50 L${x+16} 60`} stroke="#2a333a" strokeWidth="1.2" fill="none" />
                  </g>
                ))}
                {/* Lines */}
                <path d="M 40 70 Q 90 90 140 70 T 240 70 T 340 70" stroke="url(#grid-line)" strokeWidth="1.6" fill="none" className="flow-line" />
                <path d="M 40 90 Q 90 110 140 90 T 240 90 T 340 90" stroke="url(#grid-line)" strokeWidth="1.6" fill="none" className="flow-line" strokeDashoffset="4" />
                {/* Ground */}
                <path d="M 0 185 H 400" stroke="rgba(10,24,18,.2)" />
                {/* Campus building */}
                <rect x="330" y="155" width="50" height="26" rx="2" fill="#0f2419" />
                <circle cx="354" cy="168" r="2" fill="var(--accent)" />
                {/* Home */}
                <path d="M 20 170 L 35 158 L 50 170 V185 H20 Z" fill="#d9cfa9" stroke="#2a333a" strokeWidth="1" />
                <path d="M 60 172 L 75 162 L 90 172 V185 H60 Z" fill="#d9cfa9" stroke="#2a333a" strokeWidth="1" />
                <text x="30" y="205" fontFamily="var(--font-mono)" fontSize="9" fill="#5a6670">Residents</text>
                <text x="330" y="205" fontFamily="var(--font-mono)" fontSize="9" fill="#5a6670">Campus</text>
              </svg>
            </Reveal>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr', gap: 12 }}>
            {items.map((it, i) => (
              <Reveal key={i} delay={(i%4)+1} className="card" style={{ padding: 24, display:'grid', gridTemplateColumns:'140px 1fr', gap: 24, alignItems: 'start' }}>
                <div>
                  <div className="pill pill-accent">{it.k}</div>
                </div>
                <div>
                  <div className="font-display" style={{ fontWeight: 600, fontSize: 18 }}>{it.t}</div>
                  <div style={{ color: 'var(--slate-700)', fontSize: 14.5, lineHeight: 1.55, marginTop: 6 }}>{it.d}</div>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </div>
      <style>{`
        @media(max-width: 900px){ #power > .container-x > div { grid-template-columns: 1fr !important; } }
        @media(max-width: 560px){
          #power .card { grid-template-columns: 1fr !important; gap: 12px !important; padding: 20px !important; }
        }
      `}</style>
    </section>
  );
}
window.Power = Power;