(() => {
const { Button, Badge, Card, Callout, SectionHeading, FactCard, PullQuote, SourceNote, TimelineEntry, ObligationRow, CrossSection, StatBlock } = window.JudithHorvathNonprofitDesignSystem_c97fb3;

const CHAIN = [
  { t: 'Capture', d: 'At a power plant or factory, equipment separates CO₂ from the exhaust before it leaves the stack, then compresses it until it behaves almost like a liquid, compact enough to move. This happens at the emission source, which may be miles from where the gas is finally stored.' },
  { t: 'Transport', d: 'The compressed CO₂ travels to the storage site, almost always by pipeline. A CCS project therefore usually means new pipeline construction: a buried line running from the capture point to the injection site. A pipeline being trenched toward a well site is a meaningful indicator of what that site is for.' },
  { t: 'Storage', d: 'The CO₂ is pumped down a well thousands of feet into a specific kind of deep rock, where it is intended to remain permanently. These injection wells carry their own federal category, Class VI, and are regulated more strictly than ordinary oil and gas wells because the goal is permanent containment.' },
];

const RISKS = [
  { t: 'Leakage or migration', d: 'The central technical risk: if the sealing rock contains unknown cracks, or if old wells nearby provide a path upward, CO₂ or the brine it displaces could migrate toward groundwater.' },
  { t: 'Induced seismicity', d: 'Injecting large fluid volumes underground can change pressure on rock faults and trigger small earthquakes. This has been documented at other injection wells, and regulators monitor for it.' },
  { t: 'CO₂ itself, in concentration', d: 'Carbon dioxide is heavier than air. A sudden release can pool in low areas and displace breathable air. Such releases are rare, and they are the reason pipeline routing and emergency planning matter to neighbors.' },
  { t: 'Long-term liability', d: 'Storage is intended to last centuries; companies do not. Ohio’s law allows responsibility to be handed off to the state after a set number of years, and it limits what nearby residents can claim if something goes wrong.' },
];

const LADDER = [
  { s: 'Your well water is tainted', o: "Damages are capped at the drop in your property's value, proven by you, in court, at your expense. There is no requirement to restore your water supply or to provide a replacement." },
  { s: 'A person is physically injured by CO₂ exposure', o: 'Nothing specific. HB 170 contains no personal-injury provision. The only path is an ordinary negligence lawsuit, with permit compliance argued as the standard of care.' },
  { s: 'The operator walks away or goes bankrupt', o: 'Whatever bond the permit required is the backstop. After a certificate of completion, a minimum of 50 years out, liability transfers to the State of Ohio.' },
  { s: 'Induced earthquakes near the well', o: 'The statute itself requires no seismic monitoring. Whether seismometers exist, and what triggers a shutdown, is a negotiated permit term rather than a statutory right.' },
];

const RECORD = [
  { d: '2011', t: 'Youngstown: earthquakes', b: "The Northstar 1 Class II well began operating in an area with no recorded local earthquakes. More than 100 quakes were recorded near the well during 2011, ending in a magnitude 4.0 earthquake on New Year's Eve, one day after ODNR obtained a voluntary shutdown. ODNR determined that the quakes probably resulted from the well's operation, created a seismic monitoring program, and helped lead a 13-state study of induced seismicity.", x: 'ODNR preliminary report · EX-26' },
  { d: '2014 – 2026', t: 'Weathersfield Twp.: 12 years of litigation', b: 'ODNR closed an injection well after two small earthquakes. The operator sought compensation for nearly 12 years. In 2026 the Ohio Supreme Court ruled 7 to 0 that the shutdown was not a compensable taking.', x: 'The Business Journal, Jul 7, 2026 · EX-27' },
  { d: 'Jan 2021', t: 'Noble County: an uncontrolled brine release', b: 'On January 24, 2021, an unused gas well known as the Gant well, near Dexter City in Noble County, began spewing brine. ODNR contained the release on January 27 and collected more than 30,000 barrels of fluid. The chloride-laden brine killed fish in Taylor Fork, a nearby tributary; roughly 450 fish, salamanders, and frogs died. ODNR spent approximately $1.28 million on the cleanup. The agency did not determine the source of the fluid at the time. It suspended the nearby DeepRock injection wells in early 2023, after a further uncontrolled release that January.', x: 'ODNR · Buckeye Environmental Network · EX-33' },
  { d: 'Jul 2026', t: 'Washington County: four wells shut down', b: 'Four Class II wells voluntarily ceased operations on July 1 and 2, 2026, after ODNR identified impacts to nearby oil and gas wells from migrating brine. A 2020 state investigation had already confirmed that wastewater from one of those wells, Redbird No. 4, migrated more than five miles into the Berea formation.', x: 'Farm and Dairy, Jul 2026 · EX-29' },
  { d: 'Feb 2020', t: 'Satartia, Mississippi: pipeline rupture', b: 'A CO₂ pipeline operated by Denbury ruptured near Satartia, releasing approximately 31,405 barrels. The invisible, heavier-than-air cloud traveled two miles, stalling vehicles as it rolled into town. Roughly 200 people were evacuated and 45 were hospitalized. The line was carrying CO₂ for enhanced oil recovery rather than for storage. The failure was in the pipeline, the one part of a CCS system that HB 170 does not regulate at all.', x: 'PHMSA failure investigation · EX-30' },
  { d: 'Apr 2024', t: 'Sulphur, Louisiana: the same operator, again', b: "Denbury's 24-inch Green Pipeline released CO₂ at the Lake Charles Pump Station. Authorities issued a shelter-in-place order covering roughly a quarter mile around the station, with residential housing directly across the street. No injuries were reported, and the volume released was never established. Denbury was the same operator responsible for the Satartia rupture four years earlier. By 2024 it had been acquired by ExxonMobil, which bought the company for its CO₂ pipeline network, the largest in the country, in order to build out carbon capture and storage. In January 2025, PHMSA proposed the first comprehensive federal safety standards for CO₂ pipelines, citing lessons learned from both this release and Satartia. The proposal was withdrawn five days later under a regulatory freeze. The component of a CCS system with the worst accident record remains the least regulated.", x: 'Pipeline Safety Trust · EX-57 · Louisiana Illuminator · EX-58' },
  { d: 'Aug 2024', t: 'Decatur, Illinois: the flagship well leaked', b: "ADM's Decatur facility, the first commercial Class VI well ever permitted and built with approximately $281 million in federal funding, was found to have allowed CO₂ and brine into unauthorized zones through a corroded monitoring well. The strictest well class that exists still leaked.", x: 'U.S. EPA Region 5 notice of violation · EX-31' },
];

function CCSScreen({ setPage }) {
  return (
    <>
      <Band>
        <div style={{ maxWidth: '46rem' }}>
          <Badge tone="green">Explainer</Badge>
          <h1 style={{ fontFamily: 'var(--font-display)', fontSize: 'var(--text-display-2)', fontWeight: 'var(--weight-medium)', letterSpacing: 'var(--tracking-display)', lineHeight: 'var(--leading-tight)', margin: 'var(--space-5) 0 var(--space-6)' }}>
            What Is a Carbon Storage (CCS) Well?
          </h1>
          <p style={{ fontSize: 'var(--text-body-lg)', lineHeight: 'var(--leading-relaxed)', color: 'var(--text-secondary)' }}>
            Written for neighbors who had not heard the term until this week. Three links in a chain, of which the well is only the last.
          </p>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 'var(--space-3)', marginTop: 'var(--space-6)' }}>
            <Button variant="secondary" href="docs/what-is-a-ccs-well-one-pager.html" target="_blank" rel="noopener" trailingIcon={<span aria-hidden="true">&rarr;</span>}>Print this explainer</Button>
          </div>
        </div>
        <div className="fg-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 'var(--space-6)', marginTop: 'var(--space-12)' }}>
          {CHAIN.map((c, i) => (
            <Card key={c.t} accentColor={['var(--green-600)', 'var(--wheat-500)', 'var(--sky-500)'][i]}>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 'var(--text-xs)', color: 'var(--clay-600)', letterSpacing: '0.08em' }}>{'0' + (i + 1)}</div>
              <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 'var(--text-h3)', fontWeight: 'var(--weight-medium)', letterSpacing: 'var(--tracking-display)', margin: 'var(--space-3) 0 var(--space-3)' }}>{c.t}</h3>
              <p style={{ fontSize: 'var(--text-body)', lineHeight: 'var(--leading-relaxed)', color: 'var(--text-secondary)', margin: 0 }}>{c.d}</p>
            </Card>
          ))}
        </div>
      </Band>

      <Band tone="sunken">
        <div className="fg-grid" style={{ display: 'grid', gridTemplateColumns: '1.05fr 0.95fr', gap: 'var(--space-16)', alignItems: 'start' }}>
          <div>
            <SectionHeading number="01" eyebrow="What the well passes through" title="From the field to the storage zone" />
            <div style={{ marginTop: 'var(--space-8)' }}>
              <CrossSection />
            </div>
          </div>
          <div style={{ display: 'grid', gap: 'var(--space-5)', paddingTop: 'var(--space-16)' }}>
            <FactCard heading="Not the same rock as fracking" source="Explainer · EX-16">
              Fracking targets shale: dense rock holding gas trapped tight, which must be cracked to release it. Storage targets sandstone: porous rock with open “pore space” between the grains, like a dense sponge. The rock is not cracked; the CO₂ is injected into space that already exists. The relevant layer here is the Mt. Simon Sandstone, the rock geologists across the Midwest consider the best storage candidate.
            </FactCard>
            <FactCard accent="var(--clay-500)" heading="Why now" source="45Q · U.S. EPA endangerment finding revocation, Feb 18, 2026 · EX-54">
              Three developments explain the timing. The first is the federal 45Q tax credit, worth up to $85 per metric ton of CO₂ permanently stored, which is significant revenue at scale. The second is the data center boom, which requires enormous round-the-clock power from new gas plants that then need somewhere to put the resulting CO₂ in order to sell that power as “low-carbon.” The third runs the other direction: in February 2026, U.S. EPA revoked the 2009 endangerment finding, removing the legal basis for federal limits on CO₂ emissions from power plants and other sources. That action is under legal challenge. It does not affect 45Q, which is written into the tax code and can be changed only by Congress. The practical result is that the regulatory requirement to control CO₂ has weakened while the payment for capturing it has not.
            </FactCard>
          </div>
        </div>
      </Band>

      <Band>
        <SectionHeading number="02" eyebrow="Stated honestly" title="The real risks"
          lede={<span>Ohio&rsquo;s own operating record for injection wells is collected on <a href="docs/injection-wells-operating-record-one-pager.html" target="_blank" rel="noopener">two printable pages</a>, incident by incident, with every source named.</span>} />
        <div className="fg-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 'var(--space-6)', marginTop: 'var(--space-10)' }}>
          {RISKS.map((r) => (
            <Card key={r.t} tone="sunken">
              <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 'var(--text-h4)', fontWeight: 'var(--weight-medium)', margin: '0 0 var(--space-3)' }}>{r.t}</h3>
              <p style={{ fontSize: 'var(--text-sm)', lineHeight: 'var(--leading-relaxed)', color: 'var(--text-secondary)', margin: 0 }}>{r.d}</p>
            </Card>
          ))}
        </div>
      </Band>

      <Band tone="sunken">
        <SectionHeading number="03" eyebrow="The obligation ladder" title="Every word in a statute carries a different weight."
          lede={'The weakest are “consider” and “address”: write about it in a plan, with no outcome required. In the middle are “monitor” and “report”: watch it and tell the regulator, not the public. The strongest are “remedy,” “restore,” and “make whole”: an actual duty to fix harm and to pay for it. HB 170’s harm-related language sits almost entirely on the bottom two rungs. The strong words do not appear in the Act.'} />
        <div style={{ marginTop: 'var(--space-10)', background: 'var(--surface-card)', border: '1px solid var(--border-subtle)', borderTop: '3px solid var(--clay-500)', borderRadius: 'var(--radius-md)', padding: 'var(--space-4) var(--space-8) var(--space-6)' }}>
          {LADDER.map((l, i) => (
            <ObligationRow key={l.s} scenario={l.s} obligation={l.o} last={i === LADDER.length - 1} />
          ))}
        </div>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 'var(--space-3)', marginTop: 'var(--space-6)' }}>
          <Button variant="secondary" href="docs/hb170-words-meaning-missing-one-pager.html" target="_blank" rel="noopener" trailingIcon={<span aria-hidden="true">&rarr;</span>}>The full ladder, scenario by scenario</Button>
        </div>
        <SourceNote label="Statute" style={{ marginTop: 'var(--space-5)' }}>Am. Sub. H.B. 170, 136th General Assembly · EX-25 · HB 170: The Words, the Meaning, and the Missing · EX-48</SourceNote>
      </Band>

      <Band>
        <div className="fg-grid" style={{ display: 'grid', gridTemplateColumns: '0.9fr 1.1fr', gap: 'var(--space-16)', alignItems: 'start' }}>
          <div>
            <SectionHeading number="04" eyebrow="Myth vs. math" title={'“We’ll get $9 million!”'} />
            <p style={{ fontSize: 'var(--text-body)', lineHeight: 'var(--leading-relaxed)', color: 'var(--text-secondary)', marginTop: 'var(--space-6)' }}>
              The hope: a formation holding 300 million tons, multiplied by a 3-cent-per-ton host fee, equals $9 million for the township. There are three problems with that math.
            </p>
            <StatBlock tone="clay" value="$60,000" unit="/yr" label="Countywide, at a realistic 2 million tons a year" note="Roughly the cost of repaving one short stretch of township road." style={{ marginTop: 'var(--space-8)' }} />
          </div>
          <div style={{ display: 'grid', gap: 'var(--space-4)' }}>
            <FactCard heading="Who gets it" source="Am. Sub. H.B. 170 · EX-25">The fee flows to a county-level fund, plus separate state funds. Townships are not a named recipient anywhere in the Act.</FactCard>
            <FactCard heading="When it arrives" source="Am. Sub. H.B. 170 · EX-25">The fee is paid per ton actually injected, not on lifetime capacity. Reaching $9 million would require injecting the full 300 million tons, a 150-year project.</FactCard>
            <FactCard heading="What it is for" source="Am. Sub. H.B. 170 · EX-25">Statutory funds typically carry earmarks rather than serving as a blank check to local government.</FactCard>
          </div>
        </div>
      </Band>

      <Band tone="dark">
        <SectionHeading inverse number="05" eyebrow="Ohio's own operating record" title="When things go wrong, the pattern repeats."
          lede="Drawn entirely from state regulators, federal agencies, court rulings, and news reporting. Class II disposal wells are not Class VI storage wells, and the technologies differ. What carries over is the regulator, the inspection regime, and the question of who discovers a problem first and who pays for it. Most injection wells operate without incident. When things go wrong, however, neighbors discover the damage before regulators do, investigations take years, and cleanup costs land on the public." />
        <div className="fg-grid" style={{ marginTop: 'var(--space-12)', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--space-6)' }}>
          {RECORD.map((r) => (
            <Card key={r.t} tone="dark" accentColor="var(--wheat-500)" style={{ background: 'var(--surface-dark-raised)' }}>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 'var(--text-xs)', color: 'var(--wheat-400)', letterSpacing: '0.06em' }}>{r.d}</div>
              <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 'var(--text-h4)', fontWeight: 'var(--weight-medium)', color: 'var(--cream-50)', margin: 'var(--space-3) 0 var(--space-3)' }}>{r.t}</h3>
              <p style={{ fontSize: 'var(--text-sm)', lineHeight: 'var(--leading-relaxed)', color: 'var(--green-200)', margin: 0 }}>{r.b}</p>
              <div style={{ marginTop: 'var(--space-4)', paddingTop: 'var(--space-3)', borderTop: '1px solid var(--green-800)', fontFamily: 'var(--font-mono)', fontSize: 'var(--text-xs)', color: 'var(--green-300)' }}>{r.x}</div>
            </Card>
          ))}
        </div>
      </Band>

      <Band tone="accent">
        <div className="fg-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 0.9fr', gap: 'var(--space-16)', alignItems: 'start' }}>
          <div>
            <SectionHeading number="06" eyebrow="It's been stopped before, here" title="Darke County, 2009" />
            <p style={{ fontSize: 'var(--text-body)', lineHeight: 'var(--leading-relaxed)', color: 'var(--text-secondary)', marginTop: 'var(--space-6)' }}>
              In 2008 and 2009, a Battelle-managed partnership proposed a $92.8 million project to inject a million tons of CO₂ from a Greenville ethanol plant into the Mt. Simon Sandstone, the same formation named above, more than 3,000 feet down, with $61 million in federal funding. Residents organized for roughly 14 months. Local officials and both of the county's state representatives publicly opposed the project, citing unanswered questions about seismic risk, groundwater, and property values. A local poll found 90% opposed. On August 19, 2009, the developer announced that Greenville was no longer under consideration.
            </p>
            <SourceNote label="Source" style={{ marginTop: 'var(--space-4)' }}>Dayton Daily News, Aug 21, 2009 · EX-32</SourceNote>
          </div>
          <div>
            <PullQuote>
              The lesson is not that opposition always wins. It is that informed, organized communities asking specific technical and legal questions early, with their local officials alongside them, have changed the outcome before, in this state, on this exact technology.
            </PullQuote>
            <Button onClick={() => setPage('involved')} trailingIcon={<span aria-hidden="true">→</span>} style={{ marginTop: 'var(--space-8)' }}>Where to be heard</Button>
          </div>
        </div>
      </Band>
    </>
  );
}

Object.assign(window, { CCSScreen });
})();
