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

const RECORDINGS = [
  {
    venue: 'Amanda Township Trustees, regular meeting',
    date: 'July 13, 2026',
    exhibit: 'EX-51',
    duration: 'Full meeting',
    driveFileId: '',
    youtubeId: '',
    title: 'Amanda Township Trustees \u2014 July 13, 2026 \u2014 EX-51',
    body: 'The meeting where EQT representatives were asked about Class VI wells. Recorded by a resident who was there. We have not quoted from it yet, because nobody has written out a transcript.',
  },
  {
    venue: 'Hocking Township Trustees, regular meeting',
    date: 'July 28, 2026',
    exhibit: 'EX-52',
    duration: 'Full meeting',
    driveFileId: '',
    youtubeId: '',
    title: 'Hocking Township Trustees \u2014 July 28, 2026 \u2014 EX-52',
    body: 'Recorded by a resident who was there, and posted whole and unedited, so you can hear what was said without us picking the parts.',
  },
];

const BASIS = 'ORC 121.22 · Ohio Att\u2019y Gen. Op. No. 88-087';


function VideoSlot({ youtubeId, title }) {
  if (youtubeId) {
    return (
      <div style={{ position: 'relative', aspectRatio: '16 / 9', background: 'var(--ink-900)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-md)', overflow: 'hidden' }}>
        <iframe title={title} src={'https://www.youtube.com/embed/' + youtubeId} allow="accelerometer; clipboard-write; encrypted-media; picture-in-picture" allowFullScreen
          style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', border: 0, display: 'block' }} />
      </div>
    );
  }
  return (
    <div style={{ aspectRatio: '16 / 9', border: '1px dashed var(--border-default)', borderRadius: 'var(--radius-md)', background: 'repeating-linear-gradient(135deg,var(--cream-100),var(--cream-100) 9px,var(--cream-200) 9px,var(--cream-200) 18px)', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 'var(--space-3)', padding: 'var(--space-5)', textAlign: 'center' }}>
      <div style={{ fontFamily: 'var(--font-mono)', fontSize: 'var(--text-xs)', letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--clay-600)' }}>Audio on YouTube</div>
      <div style={{ fontFamily: 'var(--font-mono)', fontSize: '13px', lineHeight: 1.7, color: 'var(--ink-500)' }}>{title}</div>
      <a href="https://www.youtube.com/channel/UCwT0AW5z7pEyExX1YZ9PnRw" target="_blank" rel="noopener" style={{ fontFamily: 'var(--font-sans)', fontSize: 'var(--text-sm)', fontWeight: 500 }}>Listen on our YouTube channel →</a>
    </div>
  );
}


function MeetingCard({ venue, date, exhibit, duration, basis, youtubeId, title, children }) {
  return (
    <article style={{ background: 'var(--surface-card)', border: '1px solid var(--border-subtle)', borderTop: '3px solid var(--water-500)', borderRadius: 'var(--radius-md)', padding: 'var(--space-6)', display: 'flex', flexDirection: 'column', gap: 'var(--space-4)' }}>
      <div style={{ display: 'flex', gap: 'var(--space-4)', alignItems: 'baseline', justifyContent: 'space-between', flexWrap: 'wrap' }}>
        <div>
          <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 'var(--text-h4)', fontWeight: 'var(--weight-medium)', margin: 0, lineHeight: 'var(--leading-snug)' }}>{venue}</h3>
          <div style={{ display: 'flex', gap: 'var(--space-4)', flexWrap: 'wrap', marginTop: 'var(--space-1)', fontFamily: 'var(--font-mono)', fontSize: 'var(--text-xs)', color: 'var(--text-muted)' }}>
            <span>{date}</span>
            {duration && <span>{duration}</span>}
          </div>
        </div>
        {exhibit && <span style={{ fontFamily: 'var(--font-mono)', fontSize: 'var(--text-xs)', fontWeight: 500, background: 'var(--water-100)', color: 'var(--water-700)', border: '1px solid var(--water-300)', borderRadius: 'var(--radius-sm)', padding: 'var(--space-1) var(--space-2)', whiteSpace: 'nowrap' }}>{exhibit}</span>}
      </div>
      <div style={{ fontSize: 'var(--text-body)', lineHeight: 'var(--leading-relaxed)', color: 'var(--text-secondary)' }}>{children}</div>
      <VideoSlot youtubeId={youtubeId} title={title} />
      <div style={{ display: 'flex', gap: 'var(--space-5)', flexWrap: 'wrap', alignItems: 'baseline', paddingTop: 'var(--space-3)', borderTop: '1px solid var(--border-subtle)' }}>
        <span style={{ fontSize: 'var(--text-sm)', color: 'var(--text-muted)' }}>Transcript not yet available</span>
        {basis && <span style={{ fontFamily: 'var(--font-mono)', fontSize: 'var(--text-xs)', color: 'var(--text-muted)', lineHeight: 'var(--leading-normal)' }}>{basis}</span>}
      </div>
    </article>
  );
}

function MediaScreen({ setPage }) {
  return (
    <>
      <Band>
        <SectionHeading level={1} eyebrow="Media &amp; podcast" title="Hear it from the meeting itself."
          lede="Anyone who attends a public meeting in Ohio can record it. We record the ones where these projects come up, post the whole thing, and tell you when there is no written transcript yet." />
        <div style={{ display: 'flex', gap: 'var(--space-3)', marginTop: 'var(--space-8)', flexWrap: 'wrap' }}>
          <Button onClick={() => setPage('projects')}>See the project case files</Button>
          <Button variant="secondary" href="https://www.youtube.com/@fairfieldgrounded" target="_blank" rel="noopener">Open the YouTube archive</Button>
          <Button variant="secondary" onClick={() => setPage('involved')}>Stay informed</Button>
        </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="Meeting recordings" title="Two trustee meetings, recorded by residents"
          lede="Both run the length of the meeting. If you see an official or a company representative quoted anywhere on this site, the recording is where the quote came from." />
        <div className="fg-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--space-6)', marginTop: 'var(--space-10)' }}>
          {RECORDINGS.map((r) => (
            <MeetingCard key={r.exhibit} venue={r.venue} date={r.date} exhibit={r.exhibit}
              duration={r.duration} basis={BASIS} youtubeId={r.youtubeId} title={r.title}>{r.body}</MeetingCard>
          ))}
        </div>
        <Callout label="Your right to record" tone="record" style={{ marginTop: 'var(--space-6)' }}>
          Ohio law says public bodies have to meet in the open, and that anyone attending can record. Bring a phone, sit where you can hear, and say so if someone asks. You do not need permission, and you do not owe anyone a reason.
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 'var(--text-xs)', color: 'var(--text-muted)', marginTop: 'var(--space-3)' }}>ORC 121.22 · Ohio Att&rsquo;y Gen. Op. No. 88-087</div>
        </Callout>
      </Band>

      <Band>
        <div className="fg-grid" style={{ display: 'grid', gridTemplateColumns: '1.15fr 0.85fr', gap: 'var(--space-16)', alignItems: 'start' }}>
          <div>
            <SectionHeading number="02" eyebrow="The podcast" title="Where we talk it through" rule={false} />
            <p style={{ fontSize: 'var(--text-body)', lineHeight: 'var(--leading-relaxed)', color: 'var(--text-secondary)', marginTop: 'var(--space-5)', maxWidth: '38rem' }}>
              Some of this takes longer than a page to explain. The podcast is where we will go through a filing, or what a landman asked a neighbor for, at the length it deserves. Anything factual said in an episode will be sourced on this site.
            </p>
          </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 podcast is not live yet</h3>
            <p style={{ fontSize: 'var(--text-sm)', lineHeight: 'var(--leading-relaxed)', color: 'var(--text-secondary)', margin: '0 0 var(--space-5)' }}>
              Episodes will be listed here when the first one is recorded. Meeting audio is already going up on the YouTube channel.
            </p>
            <Button href="https://www.youtube.com/channel/UCwT0AW5z7pEyExX1YZ9PnRw" target="_blank" rel="noopener" trailingIcon={<span aria-hidden="true">→</span>}>Open the YouTube channel</Button>
          </Card>
        </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="Press" title="Nothing has run yet" rule={false} />
            <p style={{ fontSize: 'var(--text-body)', lineHeight: 'var(--leading-relaxed)', color: 'var(--green-100)', marginTop: 'var(--space-5)', maxWidth: '38rem' }}>
              We will list a story here once it airs or prints, with the outlet, the date, and a link. As of the date at the top of this page, none has. A Spectrum News interview is scheduled, and the segment will show up here when it runs.
            </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)' }}>For reporters</p>
            <p style={{ fontSize: 'var(--text-sm)', lineHeight: 'var(--leading-relaxed)', color: 'var(--green-100)', margin: '0 0 var(--space-5)' }}>
              Every figure on this site names its source document and carries an exhibit number. Ask for the exhibit and we will send the underlying file. Only designated spokespersons speak for Fairfield Grounded.
            </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>

      <Band tone="sunken" tight>
        <SourceNote label="Exhibits on this page">
          EX-51 · Amanda Township Trustees meeting, audio recording, July 13, 2026 · EX-52 · Hocking Township Trustees meeting, audio recording, July 28, 2026. Both citizen-recorded under ORC 121.22.
        </SourceNote>
      </Band>
    </>
  );
}

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