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

function TipForm() {
  const [sent, setSent] = React.useState(false);
  const [files, setFiles] = React.useState([]);
  const [fileNote, setFileNote] = React.useState('');
  const MAX_FILES = 4, MAX_MB = 10;
  const onFiles = (e) => {
    const picked = Array.from(e.target.files || []);
    const kept = [], skipped = [];
    picked.slice(0, MAX_FILES).forEach((f) => (f.size <= MAX_MB * 1048576 ? kept : skipped).push(f));
    if (picked.length > MAX_FILES) setFileNote('First ' + MAX_FILES + ' files kept — email us if you have more.');
    else if (skipped.length) setFileNote(skipped.map((f) => f.name).join(', ') + ' is over ' + MAX_MB + 'MB — for big videos, paste a YouTube or Drive link instead.');
    else setFileNote('');
    Promise.all(kept.map((f) => new Promise((res) => {
      const r = new FileReader();
      r.onload = () => res({ name: f.name, type: f.type, data: String(r.result).split(',')[1] || '' });
      r.readAsDataURL(f);
    }))).then(setFiles);
  };
  const submit = (e) => {
    e.preventDefault();
    if (!window.FG_TIPS_ENDPOINT) { setSent('nobackend'); return; }
    const val = (id) => (document.getElementById(id) || {}).value || '';
    window.fgPost({ where: val('tip-where'), kind: val('tip-kind'), what: val('tip-what'), links: val('tip-links'), contact: val('tip-contact'), files });
    setSent(true);
  };
  return (
    <form onSubmit={submit} 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)' }}>
      {sent === true ? (
        <p style={{ margin: 0, fontSize: 'var(--text-body)', lineHeight: 'var(--leading-relaxed)', color: 'var(--green-800)' }}>Received — thank you. If you left contact information and it needs a follow-up, we will be in touch.</p>
      ) : (
        <>
          <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', 'A video, article, or post', '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-links" label="Link to a video, article, or post (optional)" placeholder="YouTube, news article, Facebook post…" />
          <div>
            <label htmlFor="tip-files" style={{ display: 'block', fontSize: 'var(--text-sm)', fontWeight: 600, marginBottom: 'var(--space-2)' }}>Attach photos, screenshots, PDFs, or short video (optional)</label>
            <input id="tip-files" type="file" multiple accept="image/*,application/pdf,video/*,audio/*" onChange={onFiles}
              style={{ display: 'block', width: '100%', fontFamily: 'var(--font-sans)', fontSize: 'var(--text-sm)', color: 'var(--text-secondary)', padding: 'var(--space-3)', background: 'var(--cream-100)', border: '1px dashed var(--border-default)', borderRadius: 'var(--radius-md)' }} />
            <p style={{ margin: 'var(--space-2) 0 0', fontFamily: 'var(--font-mono)', fontSize: 'var(--text-xs)', color: fileNote ? 'var(--clay-600)' : 'var(--text-muted)' }}>{fileNote || 'Up to ' + MAX_FILES + ' files, ' + MAX_MB + 'MB each. Bigger video? Paste a link instead.'}</p>
          </div>
          <Input id="tip-contact" label="How can we reach you? (optional)" placeholder="Email or phone" />
          <Button type="submit" variant="urgent" size="lg">Send the tip</Button>
          {sent === 'nobackend' && (
            <p style={{ margin: 0, fontFamily: 'var(--font-mono)', fontSize: 'var(--text-xs)', color: 'var(--clay-600)' }}>The tip line is coming online shortly — for now, email your tip to info@fairfieldgrounded.org.</p>
          )}
        </>
      )}
    </form>
  );
}

function TipScreen() {
  return (
    <>
      <Band>
        <SectionHeading level={1} eyebrow="Report a tip" title="Seen something? Tell us."
          lede="Survey crews, landmen at the door, trenching work, a letter, something said at a meeting. Evidence helps most: photos, screenshots, documents, recordings, links." />
        <div className="fg-grid" style={{ display: 'grid', gridTemplateColumns: '1.05fr 0.95fr', gap: 'var(--space-16)', marginTop: 'var(--space-10)', alignItems: 'start' }}>
          <TipForm />
          <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-6)' }}>
            <Card accentColor="var(--green-600)">
              <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 'var(--text-h4)', fontWeight: 'var(--weight-medium)', margin: '0 0 var(--space-3)' }}>What happens to a tip</h3>
              <Checklist items={[
                'A team volunteer reads it, usually within a few days.',
                'We do not publish tips as fact. They tell us where to look: records requests, meeting questions, site visits.',
                'If it checks out against the public record, what we publish is the record — with its exhibit number.',
                'Your name is never published. Contact information is used only to follow up with you.',
              ]} />
            </Card>
            <Callout tone="wheat" label="Rather email?">
              Send it to <a href="mailto:info@fairfieldgrounded.org?subject=Tip">info@fairfieldgrounded.org</a> — attachments welcome.
            </Callout>
          </div>
        </div>
        <SourceNote label="Privacy" style={{ marginTop: 'var(--space-8)' }}>No fundraising list, no sharing. Tips inform records requests under ORC 149.43.</SourceNote>
      </Band>
    </>
  );
}

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