(() => {
const { Button, Badge, Card, Callout, SectionHeading, PullQuote, Checklist, ClaimList, RecordingCard, SourceNote, ImageFrame } = window.JudithHorvathNonprofitDesignSystem_c97fb3;

const STAND_FOR = [
  { t: 'Transparency', d: 'decisions made in the open, on the record, with documents available to the public' },
  { t: 'Notification', d: 'residents informed of proposals before decisions are made, not after' },
  { t: 'Citizen voice', d: 'meaningful public comment periods and officials who engage with, rather than dismiss, resident questions' },
  { t: 'Accountability', d: 'commitments in writing; claims sourced to statute, public record, or on-record statement' },
  { t: 'Healthy, difficult conversations', d: 'disagreement conducted with facts and civility, among neighbors who will still be neighbors when this is over' },
  { t: 'Community-benefiting development', d: 'economic activity evaluated by what it leaves in the community, not what it removes from it' },
];

const OPPOSE = [
  'Nondisclosure agreements, gag provisions, or confidentiality tactics that prevent residents or officials from discussing matters of public concern',
  'Public decisions made without adequate notice, discussion, or comment opportunity',
  'Timelines compressed so that decisions precede public understanding',
  'Suppression or discouragement of resident questions, dissent, or online discussion of local concerns',
  'Obfuscation — including partial answers, undisclosed project phases, or “test” framing for activities intended to advance larger projects',
];

const GOALS = [
  'Educate Fairfield County residents on the laws, permits, and processes governing large-scale land-use projects, using materials sourced to statute and public record.',
  'Attend, document, and archive public meetings where these matters are discussed.',
  'Document and publicize official actions — votes, decisions, notice periods, and on-record statements — related to these projects, so that residents can see how and by whom decisions were made.',
  'Advocate for written commitments, adequate notice periods, and public engagement from officials and project operators.',
  'Provide residents with practical tools — reference documents, official-channel guides, and meeting preparation materials.',
  'Model the civic behavior we ask of others: factual, sourced, non-defamatory, and open to correction.',
];

const CONDUCT = [
  { t: 'Facts over fire', d: 'We do not respond in kind to ad hominem attacks. Our response is facts, citations, and transparency about our own intent and actions.' },
  { t: 'At public meetings', d: 'Members identify whether they speak as individuals or for the organization. Only designated spokespersons speak for Fairfield Grounded.' },
  { t: 'Online', d: 'We never post about landowners under NDA or about their families.' },
  { t: 'Practices, not persons', d: 'We document and oppose conduct: obfuscation, gag clauses, and inadequate notice, regardless of who engages in it. We do not speculate about motive.' },
  { t: 'Landowner neutrality', d: 'We do not target or shame landowners who have signed leases or NDAs. Many signed without full information, and anyone reconsidering is welcomed without judgment. We never ask anyone to break a confidentiality agreement. If you are not bound by one, we welcome a copy of your agreement, shared with Fairfield Grounded in confidence, so that we can better understand what is being offered in this county.' },
  { t: 'Threats, always reported', d: 'Any threat or intimidation, from anyone, toward anyone, is reported to law enforcement and condemned. We do not amplify or theorize about it.' },
];

function MissionScreen({ setPage }) {
  return (
    <>
      <Band>
        <div className="fg-grid" style={{ display: 'grid', gridTemplateColumns: '1.1fr 0.9fr', gap: 'var(--space-16)', alignItems: 'start' }}>
          <div>
            <Badge tone="green">Mission &amp; conduct</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)' }}>
              No project should advance faster than the public's ability to understand it.
            </h1>
            <p style={{ fontSize: 'var(--text-body-lg)', lineHeight: 'var(--leading-relaxed)', color: 'var(--text-secondary)', maxWidth: '34rem' }}>
              Fairfield Grounded is a citizen education and advocacy organization serving the residents of Fairfield County, Ohio. We work to ensure that decisions affecting the county's land, water, safety, and economic future are made transparently, with adequate public notice, and with the informed participation of the people who live here.
            </p>
            <p style={{ fontSize: 'var(--text-body)', lineHeight: 'var(--leading-relaxed)', color: 'var(--text-secondary)', maxWidth: '34rem' }}>
              We are residents, landowners, farmers, and neighbors. We are nonpartisan and unaffiliated with any political party, campaign, or commercial interest.
            </p>
          </div>
          <ImageFrame ratio="4 / 3" src={PHOTO.field} alt="Farmland with the drilling rig on the horizon"
            caption="Amanda Township. The organization was started by residents after a stratigraphic test well appeared here with little public notice."
            credit="Submitted to FG by a private citizen" />
        </div>
      </Band>

      <Band tone="sunken">
        <div className="fg-grid" style={{ display: 'grid', gridTemplateColumns: '0.85fr 1.15fr', gap: 'var(--space-16)', alignItems: 'start' }}>
          <div>
            <SectionHeading number="01" eyebrow="Why we exist" title="Unzoned townships, compressed timelines, long-term consequences" />
            <p style={{ fontSize: 'var(--text-body)', lineHeight: 'var(--leading-relaxed)', color: 'var(--text-secondary)', marginTop: 'var(--space-6)' }}>
              Fairfield County's unincorporated and unzoned townships are increasingly targeted for large-scale industrial land use — including data centers and the power plants, pipelines, and carbon dioxide injection wells that accompany them. These projects can proceed under state law with limited local input, on compressed timelines, and with long-term consequences borne by residents. Our role is to make sure no such project advances faster than the public's ability to understand it — and to oppose it, if they choose to do so.
            </p>
          </div>
          <div>
            <SectionHeading number="02" eyebrow="What we stand for" title="Six commitments" />
            <div className="fg-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--space-4)', marginTop: 'var(--space-8)' }}>
              {STAND_FOR.map((s, i) => (
                <Card key={s.t} accentColor={['var(--green-600)', 'var(--wheat-500)', 'var(--water-500)', 'var(--clay-500)', 'var(--field-500)', 'var(--green-600)'][i]} padding="var(--space-5)">
                  <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 'var(--text-h4)', fontWeight: 'var(--weight-medium)', margin: '0 0 var(--space-2)' }}>{s.t}</h3>
                  <p style={{ fontSize: 'var(--text-sm)', lineHeight: 'var(--leading-relaxed)', color: 'var(--text-secondary)', margin: 0 }}>{s.d}</p>
                </Card>
              ))}
            </div>
          </div>
        </div>
      </Band>

      <Band>
        <div className="fg-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--space-16)', alignItems: 'start' }}>
          <div>
            <SectionHeading number="03" eyebrow="Practices we will document and oppose" title="These are practices, not persons."
              lede="We document and oppose this conduct regardless of who engages in it." />
            <Checklist style={{ marginTop: 'var(--space-8)' }} items={OPPOSE} />
          </div>
          <div>
            <SectionHeading number="04" eyebrow="Our goals" title="Six things we actually do" />
            <Checklist numbered style={{ marginTop: 'var(--space-8)' }} items={GOALS} />
          </div>
        </div>
      </Band>

      <Band tone="dark">
        <SectionHeading inverse number="05" eyebrow="Code of conduct" title="Every member agrees to these before speaking for the organization, or in association with it." />
        <div className="fg-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 'var(--space-6)', marginTop: 'var(--space-12)' }}>
          {CONDUCT.map((c) => (
            <Card key={c.t} tone="dark" accentColor="var(--wheat-500)" style={{ background: 'var(--surface-dark-raised)' }}>
              <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 'var(--text-h4)', fontWeight: 'var(--weight-medium)', color: 'var(--cream-50)', margin: '0 0 var(--space-3)' }}>{c.t}</h3>
              <p style={{ fontSize: 'var(--text-sm)', lineHeight: 'var(--leading-relaxed)', color: 'var(--green-200)', margin: 0 }}>{c.d}</p>
            </Card>
          ))}
        </div>
      </Band>

      <Band tone="sunken">
        <SectionHeading number="06" eyebrow="The archive" title="We record the meetings, and we publish the recordings."
          lede="Goal two, in practice. Ohio law gives any resident the right to record a public meeting; we do it and put the audio where anyone can check what was said against what was later reported." />
        <div className="fg-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--space-6)', marginTop: 'var(--space-10)' }}>
          <RecordingCard venue="Amanda Township Trustees" date="July 13, 2026" exhibit="EX-51"
            basis="ORC 121.22 · Ohio Att'y Gen. Op. No. 88-087">
            EQT representatives confirmed a Class VI carbon storage intent for the Viking 1-S test well.
          </RecordingCard>
          <RecordingCard venue="Hocking Township Trustees" date="July 28, 2026" exhibit="EX-52"
            basis="ORC 121.22 · Ohio Att'y Gen. Op. No. 88-087">
            EQT representatives took questions from residents.
          </RecordingCard>
        </div>
        <div style={{ display: 'flex', gap: 'var(--space-3)', flexWrap: 'wrap', marginTop: 'var(--space-6)' }}>
          <Button href="https://www.youtube.com/channel/UCwT0AW5z7pEyExX1YZ9PnRw" target="_blank" rel="noopener" trailingIcon={<span aria-hidden="true">→</span>}>Listen on our YouTube channel</Button>
        </div>
        <SourceNote label="Right to record" style={{ marginTop: 'var(--space-5)' }}>ORC 121.22 · Ohio Att'y Gen. Op. No. 88-087 (1988) · EX-53</SourceNote>
      </Band>

      <Band tone="accent" tight>
        <div className="fg-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 0.9fr', gap: 'var(--space-16)', alignItems: 'center' }}>
          <PullQuote attribution="Fairfield Grounded">
            Read the documents. Talk to your neighbors. Decide for yourself.
          </PullQuote>
          <div>
            <Callout tone="green" label="Media inquiries">
              All inquiries and interview requests should be directed to info@fairfieldgrounded.org, or by direct message to Fairfield Grounded's Facebook page.
            </Callout>
          </div>
        </div>
      </Band>
    </>
  );
}

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