// Power — cost-allocation explainer, rebuilt on the real HB 2992 mechanism
// (2026-08-02). The prior version's 78/22/0 cost-allocation bar had no
// source anywhere — not in the statute, the Corporation Commission's own
// summary, or contemporaneous reporting (including a dedicated Oklahoma
// fact-check). It's gone. This version explains what the law actually
// requires (75 MW+ threshold, a dedicated large-load tariff, stranded-cost
// protection, a real effective date) and drops "$0 added to your bill" as
// an absolute — the honest version is that large-load tariffs cover costs
// directly allocated to the project, but that doesn't automatically
// insulate ratepayers from a separate, unrelated rate case tied to
// aggregate demand growth. See docs/research/2026-08-02-elephants-evidence-briefs.md §2.
function Power() {
  const ref = useRef(null);
  const [inView, setInView] = useState(false);
  useEffect(() => {
    if (!ref.current) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) { setInView(true); io.disconnect(); } });
    }, { threshold: .3 });
    io.observe(ref.current);
    return () => io.disconnect();
  }, []);

  // What HB 2992 actually requires — each line traceable to the OCC's own
  // summary or the signed statute, not an invented percentage split.
  const mechanism = [
    { t: '75 MW+ threshold', d: 'Applies to a new data center, crypto-mining, or AI-computing facility contracting for 75 megawatts or more at a single interconnection point. Residential, commercial, agricultural, and traditional industrial customers are explicitly excluded.' },
    { t: 'Dedicated tariff', d: 'Utilities must establish a separate tariff for large-load customers, including credit requirements before service begins.' },
    { t: 'Stranded-cost protection', d: 'The tariff must ensure the large load reimburses the utility for costs fairly allocated to it — including costs that could go unrecovered if the customer leaves the system or materially cuts its load.' },
    { t: '60-day public notice', d: 'Developers must notify the Corporation Commission, county commissioners, and property owners within five miles before or after large land purchases, plus a published notice and a public meeting.' },
  ];

  return (
    <section id="power" ref={ref} style={{ padding: '140px 0', background: 'var(--paper-warm)', borderTop: '1px solid var(--paper-warm-line)' }}>
      <div className="container-x">
        {/* Heading row — same pattern as canonical sections */}
        <div className="pw-head">
          <div style={{ maxWidth: 760 }}>
            <Reveal delay={1}><div className="eyebrow"><span className="kicker-num">09</span><span className="dot" /> Power & the grid</div></Reveal>
            <Reveal delay={2}>
              <h2 className="h2" style={{ marginTop: 14 }}>
                State law says{' '}
                <span className="civic-emphasis">large loads pay their own way.</span>
              </h2>
            </Reveal>
            <Reveal delay={3}>
              <p className="pw-standfirst">
                Who pays for the new power lines?
              </p>
            </Reveal>
          </div>
          <Reveal delay={3}>
            <div className="pw-proof-stack">
              <p className="pw-deck">
                Oklahoma's 2026 ratepayer-protection law requires a large new electricity user like this one to sign a dedicated tariff covering the infrastructure its own load requires — including protection against costs left behind if it leaves.
              </p>
              <div className="pw-law-badge" aria-label="Signed into law: Oklahoma HB 2992">
                <span className="tag-mono pw-law-k">Signed into law · effective July 1, 2026</span>
                <strong>Oklahoma HB 2992</strong>
                <span>Data Center Consumer Ratepayer Protection Act of 2026</span>
              </div>
            </div>
          </Reveal>
        </div>

        {/* Mechanism — what the law actually requires, in its own terms */}
        <Reveal as="div" className="pw-mech-wrap" delay={2}>
          <div className="pw-mech-eyebrow">
            <StatusBadge status="sourced" />
            <span className="tag-mono">What HB 2992 requires</span>
          </div>
          <div className="pw-mech-grid">
            {mechanism.map((m, i) => (
              <div key={i} className="pw-mech-card">
                <span className="pw-mech-num tag-mono">{String(i + 1).padStart(2, '0')}</span>
                <div className="font-display pw-mech-t">{m.t}</div>
                <div className="pw-mech-d">{m.d}</div>
              </div>
            ))}
          </div>
        </Reveal>

        {/* Honest ledger — what the project covers vs. what the law doesn't guarantee */}
        <div className="pw-ledger">
          <Reveal as="div" className="pw-col pw-col-funded" delay={1}>
            <div className="pw-col-head">
              <span className="tag-mono pw-col-eyebrow">— What this project would fund</span>
              <h3 className="pw-col-title">
                Infrastructure built specifically to serve the campus.
              </h3>
            </div>
            <ul className="pw-list" role="list">
              {[
                { t: 'New power lines and a substation', d: 'Built specifically to deliver electricity to the campus.' },
                { t: 'Wires and switches to the site',   d: 'Standard equipment for any large new electricity user.' },
                { t: 'A dedicated tariff commitment',    d: 'The large-load tariff keeps the project paying for what it asked the utility to build, including if it leaves early.' },
                { t: 'Phased construction',              d: 'Built in stages so the local grid has time to keep up.' },
              ].map((it, i) => (
                <li key={i} className="pw-list-row">
                  <span className="pw-list-num tag-mono">{String(i + 1).padStart(2, '0')}</span>
                  <div className="pw-list-body">
                    <div className="font-display pw-list-t">{it.t}</div>
                    <div className="pw-list-d">{it.d}</div>
                  </div>
                </li>
              ))}
            </ul>
          </Reveal>

          <Reveal as="div" className="pw-col pw-col-existing" delay={2}>
            <div className="pw-col-head">
              <span className="tag-mono pw-col-eyebrow">— What it doesn't guarantee</span>
              <h3 className="pw-col-title pw-col-title-mute">
                Not a blanket promise that rates never move.
              </h3>
            </div>
            <p className="pw-col-body">
              A dedicated large-load tariff covers costs directly allocated to this project — it isn't billed to existing customers. But that's a different thing from a broader, unrelated rate case. In one real Oklahoma example, a utility separately sought roughly $10/month increases for all customers, citing $1.2 billion in infrastructure investment driven partly (not solely) by data-center and other large-industrial demand growth. The fair question for any specific line item is which category it falls into.
            </p>
            <div className="pw-col-footer">
              <span className="tag-mono pw-col-footer-k">Where to verify</span>
              <span className="pw-col-footer-v">The large-load tariff is filed publicly with the Oklahoma Corporation Commission, by docket number.</span>
            </div>
          </Reveal>
        </div>

        {/* How you check — audit beat */}
        <div className="pw-check">
          <span className="tag-mono pw-check-k">How you check</span>
          <span className="pw-check-v font-display">
            Oklahoma HB 2992 and the utility's filed large-load tariff docket. Public record.
          </span>
          <span className="pw-source">
            Applies to new data centers, AI computing facilities, and cryptocurrency mining operations adding 75 MW or more after July 1, 2026. Source: Oklahoma Corporation Commission official summary; corroborated by NonDoc (Mar. 2026), DataCenterKnowledge, and KGOU/KOSU (May 2026) reporting.
          </span>
        </div>

      </div>

      <style>{`
        #power .pw-head {
          display: flex;
          align-items: end;
          justify-content: space-between;
          gap: 40px;
          flex-wrap: wrap;
          margin-bottom: 48px;
        }
        #power .pw-standfirst {
          color: var(--slate-700);
          font-size: 18px;
          line-height: 1.45;
          margin: 14px 0 0;
          max-width: 580px;
        }
        #power .pw-deck {
          color: var(--slate-700);
          font-size: 15px;
          line-height: 1.6;
          max-width: 460px;
          margin: 0;
        }
        #power .pw-proof-stack {
          display: flex;
          flex-direction: column;
          gap: 18px;
          max-width: 460px;
        }
        #power .pw-law-badge {
          border: 1px solid rgba(20,32,27,.14);
          background: var(--white);
          border-radius: var(--r-xs);
          padding: 16px 18px;
          display: flex;
          flex-direction: column;
          gap: 5px;
          max-width: 320px;
        }
        #power .pw-law-k {
          color: var(--forest-800);
          font-size: 10px;
          letter-spacing: .18em;
        }
        #power .pw-law-badge strong {
          font-family: var(--font-display);
          color: var(--ink);
          font-size: 19px;
          line-height: 1.1;
        }
        #power .pw-law-badge span:last-child {
          color: var(--slate-700);
          font-size: 13px;
          line-height: 1.35;
        }

        /* ---- Mechanism grid ---- */
        #power .pw-mech-wrap {
          padding: 28px 0 8px;
          border-top: 1px solid rgba(20,32,27,.16);
          border-bottom: 1px solid rgba(20,32,27,.16);
        }
        #power .pw-mech-eyebrow {
          display: flex;
          align-items: center;
          gap: 12px;
          margin-bottom: 24px;
        }
        #power .pw-mech-eyebrow .tag-mono {
          color: var(--slate-500);
          letter-spacing: .16em;
        }
        #power .pw-mech-grid {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 20px;
          padding-bottom: 24px;
        }
        #power .pw-mech-card {
          padding: 20px 20px 18px;
          border-radius: var(--r-md);
          background: var(--white);
          border: 1px solid var(--paper-warm-line);
          box-shadow: var(--shadow-sm);
          display: flex;
          flex-direction: column;
          gap: 6px;
          transition: box-shadow .25s ease, transform .25s ease;
        }
        #power .pw-mech-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
        @media (prefers-reduced-motion: reduce) { #power .pw-mech-card:hover { transform: none; } }
        #power .pw-mech-num {
          color: var(--forest-700);
          font-size: 11px;
          letter-spacing: .12em;
        }
        #power .pw-mech-t {
          font-size: 15.5px;
          font-weight: 600;
          color: var(--ink);
          letter-spacing: -0.005em;
          margin-top: 4px;
        }
        #power .pw-mech-d {
          color: var(--slate-700);
          font-size: 13px;
          line-height: 1.55;
        }

        /* ---- Ledger asymmetry ---- */
        #power .pw-ledger {
          margin-top: 48px;
          display: grid;
          grid-template-columns: 1.55fr 1fr;
          gap: 28px;
          align-items: stretch;
        }
        #power .pw-col {
          padding: 28px 28px 24px;
          border-radius: var(--r-md);
          background: var(--white);
          border: 1px solid var(--paper-warm-line);
          box-shadow: var(--shadow-sm);
          display: flex;
          flex-direction: column;
          gap: 18px;
        }
        #power .pw-col-funded {
          background: var(--white);
          border-color: rgba(36,80,58,.2);
          position: relative;
          overflow: hidden;
        }
        #power .pw-col-funded::before {
          content: "";
          position: absolute; top: 0; left: 0; right: 0; height: 3px;
          background: linear-gradient(90deg, var(--wheat-500), var(--wheat-400));
        }
        #power .pw-col-existing {
          background: var(--white);
          border: 1px dashed rgba(20,32,27,.22);
          box-shadow: none;
        }
        #power .pw-col-head { display: flex; flex-direction: column; gap: 8px; }
        #power .pw-col-eyebrow {
          color: var(--forest-800);
          font-size: 10.5px;
          letter-spacing: .18em;
        }
        #power .pw-col-existing .pw-col-eyebrow { color: var(--slate-500); }
        #power .pw-col-title {
          font-family: var(--font-display);
          font-weight: 500;
          font-size: 22px;
          line-height: 1.18;
          letter-spacing: -0.012em;
          margin: 0;
          color: var(--ink);
        }
        #power .pw-col-title-mute { color: var(--slate-700); }

        /* Funded list */
        #power .pw-list {
          list-style: none;
          margin: 0;
          padding: 0;
          display: flex;
          flex-direction: column;
        }
        #power .pw-list-row {
          display: grid;
          grid-template-columns: 36px 1fr;
          gap: 14px;
          padding: 14px 0;
          border-top: 1px solid rgba(20,32,27,.1);
        }
        #power .pw-list-row:first-child { border-top: 1px solid rgba(20,32,27,.18); }
        #power .pw-list-num {
          color: var(--forest-700);
          font-size: 11px;
          letter-spacing: .12em;
          padding-top: 4px;
        }
        #power .pw-list-t {
          font-size: 15.5px;
          font-weight: 600;
          color: var(--ink);
          letter-spacing: -0.005em;
        }
        #power .pw-list-d {
          color: var(--slate-700);
          font-size: 13.5px;
          line-height: 1.55;
          margin-top: 2px;
        }

        /* Existing column body */
        #power .pw-col-body {
          color: var(--slate-700);
          font-size: 14.5px;
          line-height: 1.6;
          margin: 0;
        }
        #power .pw-col-footer {
          margin-top: auto;
          padding-top: 18px;
          border-top: 1px solid rgba(20,32,27,.12);
          display: flex;
          flex-direction: column;
          gap: 4px;
        }
        #power .pw-col-footer-k {
          color: var(--slate-500);
          letter-spacing: .14em;
          font-size: 10.5px;
        }
        #power .pw-col-footer-v {
          color: var(--ink);
          font-family: var(--font-display);
          font-size: 15px;
          line-height: 1.4;
        }

        /* ---- Audit beat + source line ---- */
        #power .pw-check {
          margin-top: 44px;
          display: flex;
          align-items: baseline;
          gap: 12px;
          flex-wrap: wrap;
        }
        #power .pw-check-k {
          color: var(--slate-500);
          letter-spacing: .18em;
        }
        #power .pw-check-v {
          color: var(--forest-900);
          font-size: 15px;
        }
        #power .pw-source {
          flex-basis: 100%;
          margin-top: 2px;
          color: var(--slate-500);
          font-size: 11px;
          line-height: 1.5;
        }

        /* ---- Responsive ---- */
        @media (max-width: 1024px) {
          #power .pw-mech-grid { grid-template-columns: 1fr 1fr; }
          #power .pw-ledger { grid-template-columns: 1fr; }
        }
        @media (max-width: 720px) {
          #power .pw-head { margin-bottom: 36px; }
          #power .pw-mech-grid { grid-template-columns: 1fr; }
          #power .pw-col { padding: 22px 20px 20px; }
          #power .pw-list-row { grid-template-columns: 28px 1fr; gap: 10px; }
        }
      `}</style>
    </section>
  );
}
window.Power = Power;
