(() => {
const { Button, Badge, Card, Callout, SectionHeading, StatBlock, FactCard, SourceNote, ImageFrame, AlertSignupForm, ClaimList } = window.JudithHorvathNonprofitDesignSystem_c97fb3;

const WHAT_WE_DO = [
  { t: "Read the filings so you don't have to", d: "HB 170's actual text, ODNR filings, and the operating record of injection wells already running in Ohio: collected, dated, and linked to source." },
  { t: 'Explain it in plain language', d: 'Carbon capture and CO₂ injection are technical by design. We translate the mechanics without softening or overstating what the record shows.' },
  { t: 'Point you somewhere useful', d: 'Seven official channels where a comment enters the record, a tip line, and a landowner reference for anyone approached about a lease before they sign anything.' },
];

function HomeScreen({ setPage }) {
  return (
    <>
      <Ticker />
      <Band>
        <div className="fg-grid" style={{ display: 'grid', gridTemplateColumns: '1.1fr 0.9fr', gap: 'var(--space-16)', alignItems: 'center' }}>
          <div>
            <Badge tone="clay">A citizen's guide to the well, the law, and what is coming · Fairfield County, OH</Badge>
            <h1 style={{ fontFamily: 'var(--font-display)', fontSize: 'var(--text-display-1)', fontWeight: 'var(--weight-medium)', letterSpacing: 'var(--tracking-display)', lineHeight: 'var(--leading-tight)', margin: 'var(--space-6) 0 var(--space-5)' }}>
              What is actually happening with the well in <span style={{ color: 'var(--clay-600)' }}>Amanda Township</span>, and the law behind it.
            </h1>
            <p style={{ fontSize: 'var(--text-body-lg)', lineHeight: 'var(--leading-relaxed)', color: 'var(--text-secondary)', maxWidth: '36rem' }}>
              Fairfield Grounded is a nonpartisan citizen education and advocacy organization serving Fairfield County, Ohio. We are residents, landowners, farmers, and neighbors, unaffiliated with any political party, campaign, or commercial interest. We work so that decisions about this county's land, water, safety, and economic future are made in the open, with adequate notice, and with the informed participation of the people who live here. That work covers carbon storage wells, injection wells, data centers, behind-the-meter power plants, and the pipelines that connect them.
            </p>
            <p style={{ fontFamily: 'var(--font-display)', fontSize: 'var(--text-h4)', fontStyle: 'italic', color: 'var(--green-800)', maxWidth: '32rem', marginTop: 'var(--space-6)' }}>
              We do not ask you to take our word for it. Every claim on this site is linked to the document it came from. We research the issues and bring the receipts. You decide.
            </p>
            <div style={{ display: 'flex', gap: 'var(--space-3)', marginTop: 'var(--space-8)', flexWrap: 'wrap' }}>
              <Button size="lg" variant="urgent" onClick={() => setPage('involved')}>Report a tip</Button>
              <Button size="lg" onClick={() => setPage('well')}>See the Well File</Button>
              <Button size="lg" variant="secondary" onClick={() => setPage('involved')}>Stay informed</Button>
            </div>
          </div>
          <ImageFrame ratio="4 / 5" src={PHOTO.field} alt="Drilling rig on the horizon beyond a wheat field in Amanda Township"
            caption="The Viking 1-S stratigraphic test well, seen from the road across a Fairfield County field."
            credit="Submitted to FG by a private citizen" />
        </div>
      </Band>

      <Band tone="dark" tight>
        <div className="fg-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 'var(--space-8)' }}>
          <StatBlock tone="inverse" value="0" label="Operating Class VI wells in Ohio" note="As of August 28, 2026." />
          <StatBlock tone="inverse" value="70" unit="%" label="Pore-space consent needed to force in the rest" />
          <StatBlock tone="inverse" value="Sept 23" label="HB 170 takes effect" note="2026." />
          <StatBlock tone="inverse" value="32" unit="+" label="Cities, villages and townships in Fairfield County" />
        </div>
      </Band>

      <Band tone="sunken">
        <SectionHeading number="01" eyebrow="Why this exists" title="Data centers need power. Power needs gas. Gas plants need somewhere to put the carbon." />
        <div className="fg-grid" style={{ display: 'grid', gridTemplateColumns: '1.05fr 0.95fr', gap: 'var(--space-16)', marginTop: 'var(--space-8)', alignItems: 'start' }}>
          <div>
            <p style={{ fontSize: 'var(--text-body-lg)', lineHeight: 'var(--leading-relaxed)', color: 'var(--text-secondary)' }}>
              That is not a slogan. It is the regulatory chain now moving through Fairfield County. A 2025 state law lets data centers build gas-fired power plants directly on their own property through a fast-tracked approval process. A separate 2026 law, HB 170, gives Ohio its first legal framework for injecting the resulting CO₂ permanently underground. A stratigraphic test well near Amanda Township, the kind of well drilled to determine whether deep rock can hold CO₂, is being drilled now.
            </p>
            <Button variant="quiet" onClick={() => setPage('well')} trailingIcon={<span aria-hidden="true">→</span>} style={{ marginLeft: '-20px' }}>Read the well file</Button>
          </div>
          <div style={{ display: 'grid', gap: 'var(--space-4)' }}>
            {WHAT_WE_DO.map((w, i) => (
              <Card key={w.t} accentColor={['var(--green-600)', 'var(--wheat-500)', 'var(--clay-500)'][i]} padding="var(--space-5) var(--space-6)">
                <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 'var(--text-h4)', fontWeight: 'var(--weight-medium)', margin: '0 0 var(--space-2)' }}>{w.t}</h3>
                <p style={{ fontSize: 'var(--text-sm)', lineHeight: 'var(--leading-relaxed)', color: 'var(--text-secondary)', margin: 0 }}>{w.d}</p>
              </Card>
            ))}
          </div>
        </div>
      </Band>

      <Band>
        <SectionHeading number="02" eyebrow="The two laws driving this" title="The two are often confused for each other because they arrived together. They are not the same law." />
        <div className="fg-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--space-6)', marginTop: 'var(--space-10)' }}>
          <FactCard accent="var(--clay-500)" heading="HB 15 (2025): the power plants" source="Ohio HB 15 (2025)">
            Lets data centers build “behind the meter” gas-fired generation on their own land, with a fast-tracked approval process that largely bypasses local zoning. This is why gas plant proposals are appearing next to data center projects statewide.
          </FactCard>
          <FactCard accent="var(--sky-500)" heading="HB 170 (2026): the storage wells" source="Am. Sub. H.B. 170, 136th General Assembly · EX-25">
            Signed June 24, 2026; effective September 23, 2026. Creates Ohio's first legal framework for carbon storage (Class VI wells), including the 70% forced-pooling rule for underground “pore space.” HB 170 governs pore space and consolidation. It does not give Ohio the power to issue the well permit itself: Class VI permits for Ohio wells are issued by U.S. EPA unless and until EPA grants Ohio primacy.
          </FactCard>
        </div>
      </Band>

      <Band tone="accent">
        <div className="fg-grid" style={{ display: 'grid', gridTemplateColumns: '0.85fr 1.15fr', gap: 'var(--space-16)', alignItems: 'start' }}>
          <div>
            <SectionHeading number="03" eyebrow="Our position, stated separately" title="Where we stand" />
            <p style={{ fontSize: 'var(--text-body)', lineHeight: 'var(--leading-relaxed)', color: 'var(--text-secondary)', marginTop: 'var(--space-6)' }}>
              Everything else on this site is the record, presented so you can reach your own conclusion. This is the one page where we state ours. We oppose Class VI CO₂ injection wells on three grounds, and the three converge on one point: each removes the public's ability to know what is happening and to choose.
            </p>
            <Button onClick={() => setPage('stand')} trailingIcon={<span aria-hidden="true">→</span>} style={{ marginTop: 'var(--space-4)' }}>Read the full position</Button>
          </div>
          <ClaimList items={[
            'The technology does not do what its name suggests.',
            'This project, under these conditions: zero Ohio operating history, no school setback, geology sealed until roughly 2031.',
            'The law removes the decision from the people it affects.',
          ]} />
        </div>
      </Band>

      <Band tone="sunken" tight>
        <div className="fg-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--space-16)', alignItems: 'center' }}>
          <div>
            <SectionHeading eyebrow="A note on approach" title="We live here too." rule={false} />
            <p style={{ fontSize: 'var(--text-body)', lineHeight: 'var(--leading-relaxed)', color: 'var(--text-secondary)', marginTop: 'var(--space-4)' }}>
              Fairfield Grounded is nonpartisan and unaffiliated with any political party, campaign, or commercial interest. We are not here to tell you what to think about data centers, gas plants, or carbon storage. We are here so that no one in this county learns about a project after the decisions are already made. This is the period in which residents can act, not the period in which they will be told. What you do with that information is your decision.
            </p>
          </div>
          <AlertSignupForm heading="Meeting alerts, filing updates, nothing else." lede="Tell us your township so we only write about what is near you." />
        </div>
      </Band>
    </>
  );
}

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