(() => {
const { Button, Card, Callout, SectionHeading, SourceNote, ExhibitTable } = window.JudithHorvathNonprofitDesignSystem_c97fb3;

// Citizen-prepared references, served from this site.
const OURS = [
  { id: 'EX-41', document: 'Injection Wells: The Operating Record', source: 'Fairfield Grounded (citizen-prepared)', date: 'Aug 2026', tag: 'Reference', href: 'docs/injection-wells-operating-record-one-pager.html' },
  { id: 'EX-43', document: 'What Is a Carbon Storage (CCS) Well? A plain-language explainer', source: 'Fairfield Grounded (citizen-prepared)', date: 'Aug 2026', tag: 'Explainer', href: 'docs/what-is-a-ccs-well-one-pager.html' },
  { id: 'EX-44', document: 'How Can That Possibly Be Legal? The HB 170 notice problem', source: 'Fairfield Grounded (citizen-prepared)', date: 'Aug 2026', tag: 'Reference', href: 'docs/how-can-that-be-legal-one-pager.html' },
  { id: 'EX-45', document: 'When a Landman Knocks: landowner reference', source: 'Fairfield Grounded (citizen-prepared)', date: 'Aug 2026', tag: 'Reference', href: 'docs/when-a-landman-knocks-one-pager.html' },
  { id: 'EX-46', document: 'The 70/30 Rule in Plain English: one page, print it', source: 'Fairfield Grounded (citizen-prepared)', date: 'Aug 2026', tag: 'Reference', href: 'docs/70-30-rule-one-pager.html' },
  { id: 'EX-47', document: 'Where to Be Heard: seven official channels', source: 'Fairfield Grounded (citizen-prepared)', date: 'Aug 2026', tag: 'Reference', href: 'docs/where-to-be-heard-one-pager.html' },
  { id: 'EX-48', document: 'HB 170: The Words, the Meaning, and the Missing', source: 'Fairfield Grounded (citizen-prepared)', date: 'Aug 2026', tag: 'Reference', href: 'docs/hb170-words-meaning-missing-one-pager.html' },
];

const ORIGINALS = [
  { label: 'Injection Wells: The Operating Record', href: 'docs/injection-wells-the-operating-record.pdf' },
  { label: 'What Is a Carbon Storage (CCS) Well?', href: 'docs/what-is-a-ccs-well.docx' },
  { label: 'How Can That Possibly Be Legal?', href: 'docs/how-can-that-be-legal-hb170-notice.pdf' },
  { label: 'When a Landman Knocks', href: 'docs/when-a-landman-knocks.pdf' },
  { label: 'The 70/30 Rule in Plain English', href: 'docs/the-70-30-rule-in-plain-english.pdf' },
  { label: 'Where to Be Heard', href: 'docs/where-to-be-heard-seven-official-channels.pdf' },
  { label: 'HB 170: The Words, the Meaning, and the Missing', href: 'docs/hb170-the-words-the-meaning-the-missing.pdf' },
];

// The primary record, at its official home.
const OFFICIAL = [
  { id: 'HB 170', document: 'House Bill 170 — carbon capture, storage, and geologic sequestration', source: 'Ohio Legislature, 136th General Assembly', date: 'Eff. Sept 23, 2026', tag: 'Legislation', href: 'https://www.legislature.ohio.gov/legislation/136/hb170' },
  { id: 'HB 15', document: 'House Bill 15 — behind-the-meter generation', source: 'Ohio Legislature, 136th General Assembly', date: 'Eff. Aug 14, 2025', tag: 'Legislation', href: 'https://www.legislature.ohio.gov/legislation/136/hb15' },
  { id: 'EX-42', document: 'ORC 1509.051 — test well confidentiality', source: 'Ohio Revised Code', date: 'Current', tag: 'Statute', href: 'https://codes.ohio.gov/ohio-revised-code/section-1509.051' },
  { id: 'ORC 121.22', document: 'Open Meetings Act — the right to attend and record', source: 'Ohio Revised Code', date: 'Current', tag: 'Statute', href: 'https://codes.ohio.gov/ohio-revised-code/section-121.22' },
  { id: 'EPA', document: 'Class VI wells used for geologic sequestration of carbon dioxide', source: 'U.S. Environmental Protection Agency', date: 'Current', tag: "Gov't record", href: 'https://www.epa.gov/uic/class-vi-wells-used-geologic-sequestration-carbon-dioxide' },
];

function LibraryScreen({ setPage }) {
  return (
    <>
      <Band>
        <SectionHeading level={1} eyebrow="Document library" title="The papers, and where to get them."
          lede="The laws are on the state's own websites, so those links go straight there. The plain-language sheets are ours. Download them, print them, hand them to a neighbor." />
        <div className="fg-grid" style={{ display: 'grid', gridTemplateColumns: '1.15fr 0.85fr', gap: 'var(--space-16)', alignItems: 'start', marginTop: 'var(--space-10)' }}>
          <p style={{ fontSize: 'var(--text-body)', lineHeight: 'var(--leading-relaxed)', color: 'var(--text-secondary)', margin: 0 }}>
            When we tell you what a law says, we send you to the law. Nobody should have to trust our summary of it, and the state's website is the place it actually lives. We also keep our own copy of anything we quote, with the date we downloaded it, because government websites get rearranged and a page that worked in July can be gone by December. If that happens, the copy is still here.
          </p>
          <Callout label="What the numbers mean" tone="record">
            <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-3)' }}>
              <div>Every paper gets a number, like EX-46. When you see that number next to a figure somewhere on this site, this is the paper it came from.</div>
              <div>Links marked with a state or federal agency open on their website, not ours.</div>
              <div>The rest are ours. We wrote them, and we say so on every one.</div>
            </div>
          </Callout>
        </div>
        <p style={{ fontFamily: 'var(--font-mono)', fontSize: 'var(--text-xs)', color: 'var(--text-muted)', marginTop: 'var(--space-8)' }}>Current as of August 29, 2026.</p>
      </Band>

      <Band tone="sunken">
        <SectionHeading number="01" eyebrow="The laws" title="Read them yourself"
          lede="These open on the state and federal websites that published them. Long, and worth having open when someone tells you what the law allows." />
        <ExhibitTable rows={OFFICIAL} style={{ marginTop: 'var(--space-10)' }} />
        <SourceNote label="Note" style={{ marginTop: 'var(--space-6)' }}>
The Ohio Legislature notes that the copies on its website are not the official ones. The official signed version of a law is kept by the Secretary of State.
        </SourceNote>
      </Band>

      <Band>
        <SectionHeading number="02" eyebrow="Our sheets" title="One page each, in plain English"
          lede="Written for the meeting on Tuesday night, not for a law review. Each one prints clean on a letter page. Open one, hit print, and pass them around. You do not need to credit us." />
        <ExhibitTable rows={OURS} style={{ marginTop: 'var(--space-10)' }} />
        <div style={{ marginTop: 'var(--space-8)', paddingTop: 'var(--space-5)', borderTop: '1px solid var(--border-subtle)' }}>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 'var(--text-xs)', letterSpacing: 'var(--tracking-overline)', textTransform: 'uppercase', color: 'var(--text-muted)', marginBottom: 'var(--space-3)' }}>The original files, as they were written</div>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 'var(--space-2) var(--space-5)', fontSize: 'var(--text-sm)' }}>
            {ORIGINALS.map((o) => (<a key={o.href} href={o.href}>{o.label}</a>))}
          </div>
        </div>
      </Band>

      <Band tone="dark" tight>
        <div className="fg-grid" style={{ display: 'grid', gridTemplateColumns: '1.15fr 0.85fr', gap: 'var(--space-16)', alignItems: 'start' }}>
          <div>
            <SectionHeading inverse number="03" eyebrow="Governance" title="Mission, conduct, and rules of engagement" rule={false} />
            <p style={{ fontSize: 'var(--text-body)', lineHeight: 'var(--leading-relaxed)', color: 'var(--green-100)', marginTop: 'var(--space-5)', maxWidth: '38rem' }}>
              We ask officials to put their commitments in writing, so ours belong in writing too: what we are for, how members conduct themselves, and what we will and will not do. All three are written and none are final.
            </p>
          </div>
          <div>
            <p style={{ fontFamily: 'var(--font-mono)', fontSize: 'var(--text-xs)', letterSpacing: 'var(--tracking-wide)', color: 'var(--wheat-400)', textTransform: 'uppercase', margin: '0 0 var(--space-4)' }}>Looking for something specific?</p>
            <p style={{ fontSize: 'var(--text-sm)', lineHeight: 'var(--leading-relaxed)', color: 'var(--green-100)', margin: '0 0 var(--space-5)' }}>
              If something on this site quotes a paper you do not see here, ask us for it and we will send it.
            </p>
            <Button variant="inverse" href="mailto:info@fairfieldgrounded.org?subject=Document%20request" trailingIcon={<span aria-hidden="true">→</span>}>Email us for a document</Button>
          </div>
        </div>
      </Band>
    </>
  );
}

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