(() => {
const { Button, Badge, Card, Callout, SectionHeading, SourceNote, AlertSignupForm, ChannelCard, Checklist, Textarea, Input, Select } = window.JudithHorvathNonprofitDesignSystem_c97fb3;

const WAYS = [
  { t: 'Stay informed', d: 'Meeting alerts, filing updates, nothing else.' },
  { t: 'Report a tip', d: 'Seen something before it reaches the public record? Tell us. We do not publish tips as fact; they inform records requests.' },
  { t: 'Volunteer', d: 'Meeting coverage, records requests, and document review.' },
  { t: 'Donate', d: 'Coming soon, not live yet. We want nonprofit status and a fiscal sponsor confirmed before we ask anyone for money. Sign up to stay informed and we will say when this opens.' },
];

const CHANNELS = [
  { v: 'Township trustees and county commissioners', t: 'now', l: 'Now', ask: 'A resolution, in writing, entered into the minutes.', d: 'Speak at a regular public meeting, usually 3 to 5 minutes, and send a written letter to the fiscal officer so that it enters the official record.' },
  { v: 'Your state representative and senator', t: 'now', l: 'Now', ask: 'A specific fix: amend ORC 1509.76 to require notice when a storage boundary is proposed.', d: 'Letter or call to the district office.' },
  { v: 'ODNR Division of Oil and Gas (Columbus)', t: 'now', l: 'Now', ask: 'An inspection, citing the well by name.', d: 'Citizen complaint by phone or online form. Cite the well by name: Viking 1-S, Amanda Twp., API 34-045-2-1515-00-00 (unformatted: 34045215150000).' },
  { v: 'Ohio Attorney General, Consumer Protection', t: 'unknown', l: 'As needed', ask: 'An inquiry into specific conduct, with dates and names.', d: 'For deceptive or misleading landman conduct.' },
  { v: 'ODNR rulemaking and the JCARR hearing', t: 'soon', l: 'Fall 2026', ask: 'Notice and setback provisions written into the rules themselves.', d: 'The sleeper venue. Written comments on draft carbon storage rules, then testimony at the JCARR public hearing in Columbus.' },
  { v: 'Ohio Power Siting Board', t: 'onFiling', l: 'On filing', ask: 'Denial, or conditions attached to a certificate.', d: 'Public comment on the case docket at any time, testimony at the required local hearing, or a filing for formal intervention.' },
  { v: 'Class VI permit comment period', t: 'unknown', l: 'Possibly 2028', ask: 'A public hearing, requested in writing during the comment period.', d: 'No application can be filed until the stratigraphic test results are analyzed, which is expected to take approximately six months. After that, the pace is up to EPA. These reviews have historically run three to five years against a stated EPA target of 24 months, but EPA has signaled that roughly two dozen additional applications could reach draft permit within the year. When a draft permit publishes, EPA opens a comment period of at least 30 days; submit written comments to the docket and request a public hearing. The authority is U.S. EPA Region 5 unless Ohio has obtained primacy by then.' },
];

function InvolvedScreen() {
  return (
    <>
      <Band>
        <SectionHeading level={1} eyebrow="Get involved" title="Four ways in. Choose what fits." />
        <div className="fg-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 'var(--space-6)', marginTop: 'var(--space-10)' }}>
          {WAYS.map((w, i) => (
            <Card key={w.t} accentColor={['var(--green-600)', 'var(--clay-500)', 'var(--wheat-500)', 'var(--ink-300)'][i]}>
              <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 'var(--text-h3)', fontWeight: 'var(--weight-medium)', letterSpacing: 'var(--tracking-display)', margin: '0 0 var(--space-3)' }}>{w.t}</h3>
              <p style={{ fontSize: 'var(--text-sm)', lineHeight: 'var(--leading-relaxed)', color: 'var(--text-secondary)', margin: 0 }}>{w.d}</p>
            </Card>
          ))}
        </div>
      </Band>

      <Band tone="sunken">
        <div className="fg-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--space-16)', alignItems: 'start' }}>
          <AlertSignupForm heading="Stay informed" lede="Meeting alerts, filing updates, nothing else." />
          <form onSubmit={(e) => e.preventDefault()} style={{ background: 'var(--surface-card)', border: '1px solid var(--border-subtle)', borderTop: '3px solid var(--clay-500)', borderRadius: 'var(--radius-md)', padding: 'var(--space-8)', display: 'flex', flexDirection: 'column', gap: 'var(--space-5)' }}>
            <div>
              <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 'var(--text-h3)', fontWeight: 'var(--weight-medium)', letterSpacing: 'var(--tracking-display)', margin: '0 0 var(--space-2)' }}>Report a tip</h3>
              <p style={{ margin: 0, fontSize: 'var(--text-sm)', lineHeight: 'var(--leading-relaxed)', color: 'var(--text-secondary)' }}>We do not publish tips as fact; they inform records requests.</p>
            </div>
            <Input id="tip-where" label="Township or road" placeholder="Amanda Township, Blacklick Road" />
            <Select id="tip-kind" label="What did you see?" placeholder="Choose one" options={['Survey or drilling crew', 'A landman at the door', 'Pipeline or trenching work', 'A notice or letter I received', 'Something said at a public meeting', 'Something else']} />
            <Textarea id="tip-what" label="Tell us what you saw" rows={4} hint="Dates and specifics help most. Your name is optional." />
            <Input id="tip-contact" label="How can we reach you? (optional)" placeholder="Email or phone" />
            <Button type="submit" variant="urgent">Send the tip</Button>
          </form>
        </div>
      </Band>

      <Band>
        <SectionHeading number="01" eyebrow="Where to be heard" title="Seven official channels"
          lede="Specific beats general. Ask for something concrete: a resolution, a rule change, a hearing, a denial. Sign with your full name and address, and keep a dated copy of everything." />
        <div className="fg-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 'var(--space-6)', marginTop: 'var(--space-10)' }}>
          {CHANNELS.map((c) => (
            <ChannelCard key={c.v} venue={c.v} timing={c.t} timingLabel={c.l} ask={c.ask}>{c.d}</ChannelCard>
          ))}
        </div>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 'var(--space-3)', marginTop: 'var(--space-8)' }}>
          <Button variant="secondary" href="docs/where-to-be-heard-one-pager.html" target="_blank" rel="noopener" trailingIcon={<span aria-hidden="true">&rarr;</span>}>Print all seven channels on one page</Button>
        </div>
        <SourceNote label="Reference" style={{ marginTop: 'var(--space-5)' }}>Where to Be Heard: Seven Official Channels · EX-47</SourceNote>
      </Band>

      <Band tone="accent" tight>
        <div className="fg-grid" style={{ display: 'grid', gridTemplateColumns: '0.9fr 1.1fr', gap: 'var(--space-16)', alignItems: 'start' }}>
          <div>
            <SectionHeading number="02" eyebrow="Local meetings" title="Every trustee meeting, in one calendar." rule={false} />
            <p style={{ fontSize: 'var(--text-body)', lineHeight: 'var(--leading-relaxed)', color: 'var(--text-secondary)', marginTop: 'var(--space-4)' }}>
              Trustee meetings, hearings, and comment deadlines, in one place. Until the calendar is published, meeting alerts go out by email.
            </p>
          </div>
          <div>
            <Card accentColor="var(--wheat-500)">
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 'var(--text-xs)', letterSpacing: 'var(--tracking-overline)', textTransform: 'uppercase', color: 'var(--clay-600)' }}>Coming soon</div>
              <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 'var(--text-h4)', fontWeight: 'var(--weight-medium)', letterSpacing: 'var(--tracking-display)', margin: 'var(--space-3) 0 var(--space-3)' }}>The meetings calendar is not published yet</h3>
              <p style={{ fontSize: 'var(--text-sm)', lineHeight: 'var(--leading-relaxed)', color: 'var(--text-secondary)', margin: 0 }}>
                Report a tip or volunteer using the forms above, and we will write when a hearing or trustee meeting is scheduled.
              </p>
            </Card>
          </div>
        </div>
      </Band>
    </>
  );
}

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