/* Donate screen with amount selector */

const { useState: useStateD } = React;

const AMOUNTS = [25, 50, 100, 250, 500, 1000];
const AMOUNT_LABELS = {
  25:   'Covers a precinct of yard signs',
  50:   'Funds 3,000 door-hangers',
  100:  'Pays for a Saturday canvass',
  250:  'A full round of radio ads',
  500:  'Mailer to a precinct',
  1000: 'Federal max for a county race',
};

const formatPhone = (raw) => {
  const digits = raw.replace(/\D/g, '').slice(0, 10);
  if (digits.length === 0) return '';
  if (digits.length <= 3) return `(${digits}`;
  if (digits.length <= 6) return `(${digits.slice(0,3)}) ${digits.slice(3)}`;
  return `(${digits.slice(0,3)}) ${digits.slice(3,6)}-${digits.slice(6)}`;
};

const DonateScreen = ({ onNavigate }) => {
  const [amount, setAmount] = useStateD(100);
  const [custom, setCustom] = useStateD('');
  const [recur, setRecur] = useStateD(false);
  const [form, setForm] = useStateD({ first: '', last: '', email: '', occ: '', emp: '', zip: '98349' });
  const [submitted, setSubmitted] = useStateD(false);
  const [err, setErr] = useStateD('');

  // Volunteer modal state
  const VOLUNTEER_OPTS = ['Door-knocking', 'Phone banking', 'Lit drops & events', 'Writing letters from home'];
  const US_STATES = [
    ['AL','Alabama'],['AK','Alaska'],['AZ','Arizona'],['AR','Arkansas'],['CA','California'],
    ['CO','Colorado'],['CT','Connecticut'],['DE','Delaware'],['DC','District of Columbia'],
    ['FL','Florida'],['GA','Georgia'],['HI','Hawaii'],['ID','Idaho'],['IL','Illinois'],
    ['IN','Indiana'],['IA','Iowa'],['KS','Kansas'],['KY','Kentucky'],['LA','Louisiana'],
    ['ME','Maine'],['MD','Maryland'],['MA','Massachusetts'],['MI','Michigan'],['MN','Minnesota'],
    ['MS','Mississippi'],['MO','Missouri'],['MT','Montana'],['NE','Nebraska'],['NV','Nevada'],
    ['NH','New Hampshire'],['NJ','New Jersey'],['NM','New Mexico'],['NY','New York'],
    ['NC','North Carolina'],['ND','North Dakota'],['OH','Ohio'],['OK','Oklahoma'],['OR','Oregon'],
    ['PA','Pennsylvania'],['RI','Rhode Island'],['SC','South Carolina'],['SD','South Dakota'],
    ['TN','Tennessee'],['TX','Texas'],['UT','Utah'],['VT','Vermont'],['VA','Virginia'],
    ['WA','Washington'],['WV','West Virginia'],['WI','Wisconsin'],['WY','Wyoming']
  ];
  const [volOpen, setVolOpen] = useStateD(false);
  const [volForm, setVolForm] = useStateD({
    name: '', email: '', phone: '',
    interests: { 'Door-knocking': true, 'Phone banking': true, 'Lit drops & events': false, 'Writing letters from home': false },
  });
  const [volErr, setVolErr] = useStateD('');
  const [volDone, setVolDone] = useStateD(false);

  // Yard sign modal state
  const [signOpen, setSignOpen] = useStateD(false);
  const [signForm, setSignForm] = useStateD({ name: '', email: '', phone: '', street: '', city: '', state: 'WA', zip: '' });
  const [signErr, setSignErr] = useStateD('');
  const [signDone, setSignDone] = useStateD(false);

  // Anti-spam state
  const [honeypotV, setHoneypotV] = useStateD('');
  const [honeypotS, setHoneypotS] = useStateD('');
  const [volOpenedAt, setVolOpenedAt] = useStateD(0);
  const [signOpenedAt, setSignOpenedAt] = useStateD(0);

  const effective = custom ? Number(custom) || 0 : amount;

  const validate = () => {
    if (!effective || effective < 1) return 'Enter an amount of at least $1.';
    if (effective > 2000) return 'Individual contributions are capped at $2,000.';
    if (!form.first.trim() || !form.last.trim()) return 'Please enter your name.';
    if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(form.email)) return 'Please enter a valid email.';
    if (effective > 200 && !form.occ.trim()) return 'Federal law requires occupation for donations over $200.';
    if (effective > 200 && !form.emp.trim()) return 'Federal law requires employer for donations over $200.';
    if (!/^\d{5}$/.test(form.zip)) return 'Please enter a 5-digit ZIP.';
    return '';
  };

  const submit = (e) => {
    e.preventDefault();
    const v = validate();
    if (v) return setErr(v);
    setErr(''); setSubmitted(true);
    setTimeout(() => setSubmitted(false), 4500);
  };

  const openVolunteer = () => { setVolErr(''); setVolDone(false); setVolOpenedAt(Date.now()); setVolOpen(true); };
  const submitVolunteer = async (e) => {
    e.preventDefault();
    if (honeypotV) { setVolDone(true); return; }
    if (Date.now() - volOpenedAt < 2000) { setVolDone(true); return; }
    if (!volForm.name.trim()) return setVolErr('Please enter your name.');
    if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(volForm.email)) return setVolErr('Please enter a valid email.');
    if (!volForm.phone.replace(/\D/g, '').match(/^\d{10,}$/)) return setVolErr('Please enter a valid phone number.');
    if (!Object.values(volForm.interests).some(Boolean)) return setVolErr('Pick at least one way to help.');

    if (!window.supabaseClient) {
      return setVolErr('Connection issue. Please try again or call the office.');
    }

    const { error } = await window.supabaseClient
      .from('volunteers')
      .insert({
        name: volForm.name.trim(),
        email: volForm.email.trim().toLowerCase(),
        phone: volForm.phone.replace(/\D/g, ''),
        interests: volForm.interests,
      });

    if (error) {
      console.error('[volunteers insert]', error);
      return setVolErr('Something went wrong. Please try again or call the office.');
    }

    setVolErr(''); setVolDone(true);
  };

  const openSign = () => { setSignErr(''); setSignDone(false); setSignOpenedAt(Date.now()); setSignOpen(true); };
  const submitSign = async (e) => {
    e.preventDefault();
    if (honeypotS) { setSignDone(true); return; }
    if (Date.now() - signOpenedAt < 2000) { setSignDone(true); return; }
    if (!signForm.name.trim()) return setSignErr('Please enter your name.');
    if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(signForm.email)) return setSignErr('Please enter a valid email.');
    if (!signForm.phone.replace(/\D/g, '').match(/^\d{10,}$/)) return setSignErr('Please enter a valid phone number.');
    if (!signForm.street.trim() || signForm.street.trim().length < 3) return setSignErr('Please enter your street address.');
    if (!signForm.city.trim()) return setSignErr('Please enter your city.');
    if (!signForm.state) return setSignErr('Please select your state.');
    if (!/^\d{5}$/.test(signForm.zip)) return setSignErr('Please enter a 5-digit ZIP.');

    if (!window.supabaseClient) {
      return setSignErr('Connection issue. Please try again or call the office.');
    }

    const { error } = await window.supabaseClient
      .from('yard_signs')
      .insert({
        name: signForm.name.trim(),
        email: signForm.email.trim().toLowerCase(),
        phone: signForm.phone.replace(/\D/g, ''),
        street: signForm.street.trim(),
        city: signForm.city.trim(),
        state: signForm.state,
        zip: signForm.zip,
      });

    if (error) {
      console.error('[yard_signs insert]', error);
      return setSignErr('Something went wrong. Please try again or call the office.');
    }

    setSignErr(''); setSignDone(true);
  };

  return (
    <section className="section" style={{ padding: '96px 32px 128px', background: 'var(--color-paper)' }}>
      <div style={{ maxWidth: 1160, margin: '0 auto' }}>
        <GoldRule />
        <Eyebrow style={{ marginTop: 20 }}>Donate</Eyebrow>
        <h1 className="h1" style={{ margin: '14px 0 16px', maxWidth: '20ch' }}>
          Pierce County elects Pierce County.
        </h1>
        <p className="lead" style={{ maxWidth: '60ch', margin: '0 0 56px' }}>
          Chip in an amount that makes sense for you. Every dollar is used in District 7 — literature, yard signs, mileage, coffee for the volunteers. No corporate PACs. No out-of-state money.
        </p>

        <div className="split-donate">
          {/* Donation form — temporarily disabled with overlay */}
          <div style={{ position: 'relative' }}>
          <form onSubmit={(e) => e.preventDefault()} className="form-pad" aria-hidden="true" inert="" style={{
            background: '#fff', border: '1px solid var(--divider)',
            borderTop: '2px solid var(--color-gold-base)',
            borderRadius: 4, padding: '36px 40px',
            filter: 'grayscale(100%) blur(1.5px)',
            opacity: 0.55,
            pointerEvents: 'none',
            userSelect: 'none',
          }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 6 }}>
              <h2 className="h3" style={{ margin: 0 }}>Contribution amount</h2>
              <div style={{ fontSize: 11, color: 'var(--color-muted)', letterSpacing: '0.14em', textTransform: 'uppercase', fontWeight: 700 }}>
                Secure · FEC-compliant
              </div>
            </div>
            <div style={{ fontSize: 13, color: 'var(--color-ink-soft)', marginBottom: 18 }}>
              {AMOUNT_LABELS[effective] || (effective > 0 ? `$${effective} goes directly to field operations.` : 'Choose an amount to get started.')}
            </div>

            <div className="amount-grid" style={{ marginBottom: 12 }}>
              {AMOUNTS.map(a => {
                const on = !custom && amount === a;
                return (
                  <button key={a} type="button"
                    onClick={() => { setAmount(a); setCustom(''); }}
                    style={{
                      padding: '18px 12px', cursor: 'pointer',
                      background: on ? 'var(--color-green-100)' : '#fff',
                      color: on ? 'var(--color-green-900)' : 'var(--color-ink)',
                      border: on ? '2px solid var(--brand-primary)' : '1.5px solid var(--divider)',
                      borderRadius: 4,
                      fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 700,
                      letterSpacing: '-0.01em',
                      transition: 'all 120ms var(--ease-standard)',
                    }}>
                    ${a}
                  </button>
                );
              })}
            </div>
            <div style={{ position: 'relative', marginBottom: 18 }}>
              <span style={{
                position: 'absolute', left: 14, top: '50%', transform: 'translateY(-50%)',
                color: 'var(--color-muted)', fontSize: 15, fontWeight: 600,
              }}>$</span>
              <input
                value={custom}
                onChange={e => setCustom(e.target.value.replace(/[^\d]/g, ''))}
                placeholder="Other amount"
                inputMode="numeric"
                style={{
                  width: '100%', padding: '13px 14px 13px 26px',
                  border: custom ? '2px solid var(--brand-primary)' : '1.5px solid var(--divider)',
                  borderRadius: 4, fontSize: 15, outline: 'none',
                }}
              />
            </div>

            <label style={{
              display: 'flex', gap: 10, alignItems: 'center',
              padding: '14px 16px', border: '1px solid var(--divider)', borderRadius: 4,
              marginBottom: 26, cursor: 'pointer',
              background: recur ? 'var(--color-gold-100)' : '#fff',
              borderColor: recur ? 'var(--color-gold-base)' : 'var(--divider)',
              transition: 'all 150ms var(--ease-standard)',
            }}>
              <input type="checkbox" checked={recur} onChange={e => setRecur(e.target.checked)}
                     style={{ accentColor: 'var(--brand-primary)', width: 18, height: 18 }} />
              <span style={{ fontSize: 14, color: 'var(--color-ink)' }}>
                <strong style={{ fontWeight: 700 }}>Make it monthly.</strong> Small recurring gifts are how we keep the lights on.
              </span>
            </label>

            <div className="pair" style={{ marginBottom: 14 }}>
              <div className="field"><label>First name</label>
                <input value={form.first} onChange={e => setForm({...form, first: e.target.value})} /></div>
              <div className="field"><label>Last name</label>
                <input value={form.last} onChange={e => setForm({...form, last: e.target.value})} /></div>
            </div>
            <div className="field" style={{ marginBottom: 14 }}>
              <label>Email</label>
              <input type="email" value={form.email} onChange={e => setForm({...form, email: e.target.value})} />
            </div>
            <div className="pair-donate-meta" style={{ marginBottom: 14 }}>
              <div className="field"><label>Occupation {effective > 200 && <span style={{color:'var(--brand-accent)'}}>·required</span>}</label>
                <input value={form.occ} onChange={e => setForm({...form, occ: e.target.value})} /></div>
              <div className="field"><label>ZIP</label>
                <input value={form.zip} onChange={e => setForm({...form, zip: e.target.value.replace(/[^\d]/g, '').slice(0,5)})} /></div>
            </div>
            <div className="field" style={{ marginBottom: 26 }}>
              <label>Employer {effective > 200 && <span style={{color:'var(--brand-accent)'}}>·required</span>}</label>
              <input value={form.emp} onChange={e => setForm({...form, emp: e.target.value})} />
            </div>

            {err && (
              <div style={{
                padding: '10px 14px', marginBottom: 14,
                background: 'var(--color-gold-100)', color: 'var(--color-gold-900)',
                border: '1px solid var(--color-gold-300)', borderRadius: 4,
                fontSize: 13, fontWeight: 600,
              }}>{err}</div>
            )}

            <Button variant="primary" type="submit" fullWidth style={{ padding: '16px 22px', fontSize: 16 }}>
              Give ${effective || 0}{recur ? ' / month' : ''} to the campaign
            </Button>

            <div style={{ fontSize: 12, color: 'var(--color-muted)', marginTop: 16, lineHeight: 1.55 }}>
              Contributions are not tax-deductible. Federal law requires us to collect name, mailing address, occupation, and employer for donors giving over $200 in a calendar year. Paid for by Chuck West for Pierce County Council.
            </div>

            {submitted && (
              <div style={{
                marginTop: 18, padding: '14px 16px',
                background: 'var(--color-green-100)', color: 'var(--color-green-900)',
                border: '1px solid var(--color-green-300)', borderRadius: 4,
                fontSize: 14, fontWeight: 600,
              }}>
                ✓ Thanks, {form.first || 'neighbor'}. This is a prototype — no real charge.
              </div>
            )}
          </form>
            {/* Coming-soon overlay */}
            <div style={{
              position: 'absolute', inset: 0,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              padding: 24,
              pointerEvents: 'none',
            }}>
              <div style={{
                pointerEvents: 'auto',
                background: '#fff',
                borderTop: '4px solid var(--color-gold-base)',
                borderRadius: 4,
                boxShadow: '0 24px 60px rgba(10, 39, 84, 0.22), 0 6px 18px rgba(10, 39, 84, 0.10)',
                padding: '32px 36px',
                width: '100%', maxWidth: 440,
                textAlign: 'left',
              }}>
                <div style={{
                  fontFamily: 'var(--font-sans)', fontSize: 12, fontWeight: 700,
                  letterSpacing: '0.18em', textTransform: 'uppercase',
                  color: 'var(--brand-accent-warm)',
                }}>
                  Coming soon
                </div>
                <h3 className="h2" style={{ margin: '10px 0 14px', fontSize: 26, lineHeight: 1.18 }}>
                  Donor portal coming soon!
                </h3>
                <p style={{
                  fontFamily: 'var(--font-serif)', fontSize: 15.5, lineHeight: 1.55,
                  color: 'var(--color-ink-soft)', margin: '0 0 18px',
                }}>
                  Online donations should be available soon. In the meantime, if you&rsquo;d like to make a contribution, please mail a check to:
                </p>
                <div style={{
                  padding: '16px 18px',
                  background: 'var(--color-paper)',
                  borderLeft: '3px solid var(--color-gold-base)',
                  borderRadius: 4,
                  fontFamily: 'var(--font-sans)', fontSize: 14.5, lineHeight: 1.5,
                  color: 'var(--color-ink)',
                }}>
                  <div style={{ fontWeight: 700, marginBottom: 2 }}>Friends of Chuck West</div>
                  <div>PO Box 856</div>
                  <div>Vaughn, WA 98394</div>
                </div>
              </div>
            </div>
          </div>

          {/* Sidebar: volunteer, yard sign, why it matters */}
          <div style={{ display: 'grid', gap: 16 }}>
            <div style={{
              background: 'var(--color-blue-900)', color: '#fff',
              borderRadius: 4, padding: '28px 30px',
              position: 'relative', overflow: 'hidden',
            }}>
              <img src="assets/tree-mark.svg" alt=""
                   style={{ position: 'absolute', right: -40, top: -10, height: '140%', opacity: 0.08, filter: 'brightness(0) invert(1)', pointerEvents: 'none' }} />
              <div style={{ position: 'relative' }}>
                <Eyebrow color="var(--color-gold-500)">Why it matters</Eyebrow>
                <div style={{
                  fontFamily: 'var(--font-serif)', fontStyle: 'italic',
                  fontSize: 18, lineHeight: 1.5, margin: '14px 0 0',
                  color: 'rgba(255,255,255,0.9)',
                }}>
                  &ldquo;I&rsquo;m not running to start a political career. I&rsquo;m running because Pierce County is in trouble and I know how to fix it.&rdquo;
                </div>
              </div>
            </div>

            <div style={{ background: '#fff', border: '1px solid var(--divider)', borderRadius: 4, padding: '24px 26px' }}>
              <h3 className="h3" style={{ margin: '0 0 8px' }}>Volunteer a Saturday</h3>
              <p style={{ fontSize: 14, color: 'var(--color-ink-soft)', margin: '0 0 14px', lineHeight: 1.55 }}>
                Door-knocking, phone banks, lit drops, writing letters from home. Food provided.
              </p>
              <ul style={{ margin: '0 0 18px', padding: 0, listStyle: 'none', fontSize: 13.5, color: 'var(--color-ink-soft)', lineHeight: 1.7 }}>
                {VOLUNTEER_OPTS.map(l => (
                  <li key={l} style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                    <span style={{ color: 'var(--color-green-base)', fontWeight: 700 }}>·</span> {l}
                  </li>
                ))}
              </ul>
              <Button variant="secondary" fullWidth onClick={openVolunteer}>Sign me up</Button>
            </div>

            <div style={{ background: 'var(--color-green-base)', color: '#fff', borderRadius: 4, padding: '24px 26px' }}>
              <Eyebrow color="var(--color-gold-500)">Yard sign</Eyebrow>
              <h3 className="h3" style={{ margin: '10px 0 8px', color: '#fff' }}>Put Chuck in your yard.</h3>
              <p style={{ fontSize: 14, color: 'rgba(255,255,255,0.82)', margin: '0 0 16px', lineHeight: 1.5 }}>
                We&rsquo;ll drop one off this weekend. Key Peninsula and Gig Harbor first.
              </p>
              <Button variant="onDark" fullWidth onClick={openSign}>Request a yard sign</Button>
            </div>
          </div>
        </div>
      </div>

      {/* Volunteer modal */}
      {volOpen && (
        <div onClick={() => setVolOpen(false)}
          style={{
            position: 'fixed', inset: 0, zIndex: 220,
            background: 'rgba(10, 39, 84, 0.5)', backdropFilter: 'blur(4px)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            padding: 20, animation: 'fadeInUp 200ms var(--ease-standard) both',
          }}>
          <form onClick={e => e.stopPropagation()} onSubmit={submitVolunteer}
            style={{
              background: '#fff', borderRadius: 4, padding: 36,
              width: '100%', maxWidth: 480,
              borderTop: '3px solid var(--color-gold-base)',
              animation: 'fadeInUp 280ms var(--ease-standard) both',
              maxHeight: '90vh', overflowY: 'auto',
            }}>
            {volDone ? (
              <div>
                <Eyebrow>Thanks</Eyebrow>
                <h3 className="h2" style={{ margin: '8px 0 10px', fontSize: 26 }}>You&rsquo;re on the team.</h3>
                <p style={{ fontSize: 15, color: 'var(--color-ink-soft)', lineHeight: 1.55, margin: '0 0 22px' }}>
                  We&rsquo;ll reach out within a couple days with the next Saturday near you, {volForm.name.split(' ')[0]}.
                </p>
                <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
                  <Button variant="primary" onClick={() => setVolOpen(false)}>Close</Button>
                </div>
              </div>
            ) : (
              <>
                <input
                  type="text"
                  name="website"
                  tabIndex={-1}
                  autoComplete="off"
                  value={honeypotV}
                  onChange={e => setHoneypotV(e.target.value)}
                  aria-hidden="true"
                  style={{
                    position: 'absolute',
                    left: '-9999px',
                    width: 1,
                    height: 1,
                    opacity: 0,
                    pointerEvents: 'none',
                  }}
                />
                <Eyebrow>Volunteer</Eyebrow>
                <h3 className="h2" style={{ margin: '8px 0 6px', fontSize: 28 }}>Volunteer a Saturday</h3>
                <p style={{ fontSize: 14, color: 'var(--color-ink-soft)', margin: '0 0 22px' }}>
                  We&rsquo;ll text you the details. No commitment — show up when you can.
                </p>
                <div className="field" style={{ marginBottom: 14 }}>
                  <label>Full name</label>
                  <input value={volForm.name} onChange={e => setVolForm({ ...volForm, name: e.target.value })} />
                </div>
                <div className="field" style={{ marginBottom: 14 }}>
                  <label>Email</label>
                  <input type="email" value={volForm.email} onChange={e => setVolForm({ ...volForm, email: e.target.value })} />
                </div>
                <div className="field" style={{ marginBottom: 18 }}>
                  <label>Phone</label>
                  <input type="tel" value={volForm.phone} onChange={e => setVolForm({ ...volForm, phone: formatPhone(e.target.value) })} placeholder="(253) 555-0100" />
                </div>
                <div style={{ marginBottom: 18 }}>
                  <div style={{ fontFamily: 'var(--font-sans)', fontSize: 13, fontWeight: 600, color: 'var(--color-ink)', marginBottom: 10 }}>
                    How would you like to help?
                  </div>
                  {VOLUNTEER_OPTS.map(l => (
                    <label key={l} style={{ display: 'flex', gap: 10, alignItems: 'center', fontSize: 14, marginBottom: 8, cursor: 'pointer' }}>
                      <input
                        type="checkbox"
                        checked={!!volForm.interests[l]}
                        onChange={e => setVolForm({ ...volForm, interests: { ...volForm.interests, [l]: e.target.checked } })}
                        style={{ accentColor: 'var(--brand-primary)', width: 16, height: 16 }} />
                      {l}
                    </label>
                  ))}
                </div>
                {volErr && <div style={{ fontSize: 13, color: 'var(--color-gold-900)', marginBottom: 14 }}>{volErr}</div>}
                <div style={{ display: 'flex', gap: 10, justifyContent: 'flex-end' }}>
                  <Button variant="quiet" onClick={() => setVolOpen(false)}>Cancel</Button>
                  <Button variant="primary" type="submit">Sign me up</Button>
                </div>
              </>
            )}
          </form>
        </div>
      )}

      {/* Yard sign modal */}
      {signOpen && (
        <div onClick={() => setSignOpen(false)}
          style={{
            position: 'fixed', inset: 0, zIndex: 220,
            background: 'rgba(10, 39, 84, 0.5)', backdropFilter: 'blur(4px)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            padding: 20, animation: 'fadeInUp 200ms var(--ease-standard) both',
          }}>
          <form onClick={e => e.stopPropagation()} onSubmit={submitSign}
            style={{
              background: '#fff', borderRadius: 4, padding: 36,
              width: '100%', maxWidth: 480,
              borderTop: '3px solid var(--color-gold-base)',
              animation: 'fadeInUp 280ms var(--ease-standard) both',
              maxHeight: '90vh', overflowY: 'auto',
            }}>
            {signDone ? (
              <div>
                <Eyebrow>Got it</Eyebrow>
                <h3 className="h2" style={{ margin: '8px 0 10px', fontSize: 26 }}>Sign on its way.</h3>
                <p style={{ fontSize: 15, color: 'var(--color-ink-soft)', lineHeight: 1.55, margin: '0 0 22px' }}>
                  A volunteer will drop a sign at <strong style={{ color: 'var(--color-ink)' }}>{signForm.street}, {signForm.city}, {signForm.state} {signForm.zip}</strong> this weekend. We&rsquo;ll text {signForm.phone} when we&rsquo;re on the way.
                </p>
                <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
                  <Button variant="primary" onClick={() => setSignOpen(false)}>Close</Button>
                </div>
              </div>
            ) : (
              <>
                <input
                  type="text"
                  name="website"
                  tabIndex={-1}
                  autoComplete="off"
                  value={honeypotS}
                  onChange={e => setHoneypotS(e.target.value)}
                  aria-hidden="true"
                  style={{
                    position: 'absolute',
                    left: '-9999px',
                    width: 1,
                    height: 1,
                    opacity: 0,
                    pointerEvents: 'none',
                  }}
                />
                <Eyebrow>Yard sign</Eyebrow>
                <h3 className="h2" style={{ margin: '8px 0 6px', fontSize: 28 }}>Request a yard sign</h3>
                <p style={{ fontSize: 14, color: 'var(--color-ink-soft)', margin: '0 0 22px' }}>
                  We deliver weekends. Key Peninsula and Gig Harbor first; broader Pierce County rolling out through summer.
                </p>
                <div className="field" style={{ marginBottom: 14 }}>
                  <label>Full name <span style={{ color: 'var(--brand-accent)' }}>·required</span></label>
                  <input value={signForm.name} onChange={e => setSignForm({ ...signForm, name: e.target.value })} />
                </div>
                <div className="field" style={{ marginBottom: 14 }}>
                  <label>Email <span style={{ color: 'var(--brand-accent)' }}>·required</span></label>
                  <input type="email" value={signForm.email} onChange={e => setSignForm({ ...signForm, email: e.target.value })} />
                </div>
                <div className="field" style={{ marginBottom: 14 }}>
                  <label>Phone <span style={{ color: 'var(--brand-accent)' }}>·required</span></label>
                  <input type="tel" value={signForm.phone} onChange={e => setSignForm({ ...signForm, phone: formatPhone(e.target.value) })} placeholder="(253) 555-0100" />
                </div>
                <div className="field" style={{ marginBottom: 14 }}>
                  <label>Street address <span style={{ color: 'var(--brand-accent)' }}>·required</span></label>
                  <input value={signForm.street} onChange={e => setSignForm({ ...signForm, street: e.target.value })} placeholder="123 Main St" />
                </div>
                <div className="field" style={{ marginBottom: 14 }}>
                  <label>City <span style={{ color: 'var(--brand-accent)' }}>·required</span></label>
                  <input value={signForm.city} onChange={e => setSignForm({ ...signForm, city: e.target.value })} placeholder="Gig Harbor" />
                </div>
                <div className="pair-donate-meta" style={{ marginBottom: 22 }}>
                  <div className="field">
                    <label>State <span style={{ color: 'var(--brand-accent)' }}>·required</span></label>
                    <select value={signForm.state} onChange={e => setSignForm({ ...signForm, state: e.target.value })}>
                      {US_STATES.map(([code, name]) => <option key={code} value={code}>{code} — {name}</option>)}
                    </select>
                  </div>
                  <div className="field">
                    <label>ZIP <span style={{ color: 'var(--brand-accent)' }}>·required</span></label>
                    <input
                      type="text"
                      inputMode="numeric"
                      maxLength={5}
                      value={signForm.zip}
                      onChange={e => setSignForm({ ...signForm, zip: e.target.value.replace(/[^\d]/g, '').slice(0,5) })}
                      placeholder="98335"
                    />
                  </div>
                </div>
                {signErr && <div style={{ fontSize: 13, color: 'var(--color-gold-900)', marginBottom: 14 }}>{signErr}</div>}
                <div style={{ display: 'flex', gap: 10, justifyContent: 'flex-end' }}>
                  <Button variant="quiet" onClick={() => setSignOpen(false)}>Cancel</Button>
                  <Button variant="primary" type="submit">Request sign</Button>
                </div>
              </>
            )}
          </form>
        </div>
      )}
    </section>
  );
};

Object.assign(window, { DonateScreen });