/* Donate screen — "Support the campaign" page
 *
 * Live donation processor (Anedot) and Supabase-backed volunteer / yard sign
 * forms will be wired up in a follow-up commit. Until then, this page directs
 * supporters to mail in contributions and email the campaign directly for
 * volunteer or yard sign requests. This is honest, ships today, and avoids
 * collecting form data we can't persist.
 */

const DonateScreen = ({ onNavigate }) => {
  return (
    <>
      {/* Hero band — navy with gold rule, sets context */}
      <section className="section" style={{
        background: 'var(--color-green-base)',
        color: '#fff',
        padding: '96px 32px 80px',
        position: 'relative',
        overflow: 'hidden',
      }}>
        <div style={{ maxWidth: 1160, margin: '0 auto', position: 'relative' }}>
          <span aria-hidden="true" style={{
            display: 'block', width: 56, height: 2,
            background: 'var(--color-gold-base)',
            marginBottom: 24,
          }} />
          <div style={{
            fontFamily: 'var(--font-sans)', fontSize: 12, fontWeight: 700,
            letterSpacing: '0.22em', textTransform: 'uppercase',
            color: 'var(--color-gold-300)',
            marginBottom: 18,
          }}>
            Support the campaign
          </div>
          <h1 style={{
            margin: '0 0 22px',
            fontFamily: 'var(--font-display)',
            fontWeight: 400,
            fontSize: 'clamp(2.4rem, 5vw, 4rem)',
            lineHeight: 1.04,
            color: '#fff',
            maxWidth: '18ch',
            textTransform: 'uppercase',
            letterSpacing: '0.005em',
          }}>
            This campaign runs on Island County.
          </h1>
          <p style={{
            margin: 0,
            fontFamily: 'var(--font-sans)',
            fontSize: 'clamp(1.05rem, 1.4vw, 1.2rem)',
            lineHeight: 1.55,
            color: 'rgba(255,255,255,0.92)',
            maxWidth: '58ch',
          }}>
            Practical leadership doesn&rsquo;t fund itself. Matthew is asking neighbors who want cooperation, accountability, and results &mdash; not division and conflict &mdash; to chip in however they can: a check in the mail, an evening on the doors, or a yard sign in the lawn.
          </p>
        </div>
      </section>

      {/* Three-column action grid */}
      <section className="section" style={{ padding: '96px 32px 128px', background: '#fff' }}>
        <div style={{ maxWidth: 1160, margin: '0 auto' }}>
          <div className="grid-3" style={{ gap: 28 }}>

            {/* Donate by mail */}
            <article style={{
              background: '#fff',
              border: '1px solid var(--divider)',
              borderTop: '3px solid var(--color-gold-base)',
              borderRadius: 4,
              padding: '32px 30px 28px',
              display: 'flex', flexDirection: 'column', gap: 14,
            }}>
              <Eyebrow>Donate by mail</Eyebrow>
              <h3 className="h3" style={{ margin: '4px 0 0' }}>Send a check today</h3>
              <p style={{ fontFamily: 'var(--font-sans)', fontSize: 15, lineHeight: 1.55, color: 'var(--color-ink-soft)', margin: 0 }}>
                Online donations are launching soon. Until then, the fastest way to support the campaign is to mail a check made out to&nbsp;<strong style={{ color: 'var(--color-ink)' }}>Elect Van Pelt</strong>.
              </p>
              <div style={{
                padding: '18px 20px',
                background: 'var(--color-paper)',
                borderLeft: '3px solid var(--color-gold-base)',
                borderRadius: 4,
                fontFamily: 'var(--font-sans)', fontSize: 15, lineHeight: 1.55,
                color: 'var(--color-ink)',
                marginTop: 6,
              }}>
                <div style={{ fontWeight: 700, marginBottom: 4 }}>Elect Van Pelt</div>
                <div>PO Box 10</div>
                <div>Oak Harbor, WA 98227</div>
              </div>
              <p style={{ fontSize: 12, color: 'var(--color-muted)', margin: '6px 0 0', lineHeight: 1.5 }}>
                Washington state law requires us to report the name, address, occupation, and employer for contributions over $25. Please include this information on the memo line or in a brief note.
              </p>
            </article>

            {/* Volunteer */}
            <article style={{
              background: '#fff',
              border: '1px solid var(--divider)',
              borderTop: '3px solid var(--color-gold-base)',
              borderRadius: 4,
              padding: '32px 30px 28px',
              display: 'flex', flexDirection: 'column', gap: 14,
            }}>
              <Eyebrow>Volunteer</Eyebrow>
              <h3 className="h3" style={{ margin: '4px 0 0' }}>Help on the ground</h3>
              <p style={{ fontFamily: 'var(--font-sans)', fontSize: 15, lineHeight: 1.55, color: 'var(--color-ink-soft)', margin: 0 }}>
                Door-knocking. Phone banking. Lit drops at community events. Writing letters from home. Every campaign needs neighbors who show up. Email us and Matthew&rsquo;s team will get back to you with what&rsquo;s most needed this week.
              </p>
              <ul style={{ listStyle: 'none', padding: 0, margin: '6px 0 0', display: 'grid', gap: 8 }}>
                {['Door-knocking', 'Phone banking', 'Lit drops & community events', 'Writing letters from home'].map((opt) => (
                  <li key={opt} style={{
                    display: 'grid', gridTemplateColumns: '20px 1fr', gap: 10,
                    fontSize: 14, lineHeight: 1.4, color: 'var(--color-ink)',
                  }}>
                    <span style={{
                      width: 20, height: 20, borderRadius: '50%',
                      background: 'var(--color-green-100)', color: 'var(--brand-primary)',
                      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                      fontSize: 11, fontWeight: 700, marginTop: 1,
                    }}>✓</span>
                    <span>{opt}</span>
                  </li>
                ))}
              </ul>
              <a
                href="#volunteer"
                data-volunteer-modal
                data-source="get-involved"
                style={{
                  marginTop: 14,
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                  background: 'var(--brand-primary)', color: '#fff',
                  padding: '12px 20px', borderRadius: 4,
                  fontFamily: 'var(--font-sans)', fontSize: 14, fontWeight: 600,
                  textDecoration: 'none', letterSpacing: '0.02em',
                  transition: 'background 150ms var(--ease-standard)',
                  cursor: 'pointer',
                }}>
                Sign me up to volunteer &nbsp;›
              </a>
            </article>

            {/* Yard sign */}
            <article style={{
              background: '#fff',
              border: '1px solid var(--divider)',
              borderTop: '3px solid var(--color-gold-base)',
              borderRadius: 4,
              padding: '32px 30px 28px',
              display: 'flex', flexDirection: 'column', gap: 14,
            }}>
              <Eyebrow>Yard sign</Eyebrow>
              <h3 className="h3" style={{ margin: '4px 0 0' }}>Put one in your lawn</h3>
              <p style={{ fontFamily: 'var(--font-sans)', fontSize: 15, lineHeight: 1.55, color: 'var(--color-ink-soft)', margin: 0 }}>
                A yard sign tells your neighbors you&rsquo;re backing Matthew &mdash; and helps every other voter on your street notice the race. Free to request. Drop-off across Whidbey and Camano starts in early summer.
              </p>
              <a
                href="#yardsign"
                data-yardsign-modal
                style={{
                  marginTop: 'auto',
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                  background: '#fff', color: 'var(--brand-primary)',
                  border: '2px solid var(--brand-primary)',
                  padding: '11px 20px', borderRadius: 4,
                  fontFamily: 'var(--font-sans)', fontSize: 14, fontWeight: 600,
                  textDecoration: 'none', letterSpacing: '0.02em',
                  transition: 'background 150ms var(--ease-standard)',
                  cursor: 'pointer',
                }}>
                Request a yard sign &nbsp;›
              </a>
            </article>

          </div>

          {/* Compliance + contact strip */}
          <div style={{
            marginTop: 64, padding: '28px 32px',
            background: 'var(--color-paper)',
            border: '1px solid var(--divider)',
            borderRadius: 4,
            display: 'flex', justifyContent: 'space-between', gap: 24,
            flexWrap: 'wrap', alignItems: 'center',
          }}>
            <div>
              <div style={{ fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 400, color: 'var(--color-ink)', textTransform: 'uppercase', letterSpacing: '0.01em' }}>
                Questions? Reach out directly.
              </div>
              <div style={{ fontSize: 14, color: 'var(--color-ink-soft)', marginTop: 6, maxWidth: '54ch' }}>
                The campaign is small and personal. Email goes straight to Matthew&rsquo;s team and gets a real human response.
              </div>
            </div>
            <a
              href="mailto:Vanpelt4dist3@gmail.com"
              style={{
                background: 'var(--brand-primary)', color: '#fff',
                padding: '13px 22px', borderRadius: 4,
                fontFamily: 'var(--font-sans)', fontSize: 15, fontWeight: 600,
                textDecoration: 'none', letterSpacing: '0.02em',
                whiteSpace: 'nowrap',
              }}>
              Vanpelt4dist3@gmail.com
            </a>
          </div>
        </div>
      </section>
    </>
  );
};

Object.assign(window, { DonateScreen });