/* Membership, Donate, Contact */

const MEMBER_SUBNAV = [
  { id: 'membership/becoming', label: 'Becoming a Member' },
  { id: 'membership/forms', label: 'Membership Forms' },
  { id: 'membership/login', label: 'Member Login' },
];

function MembershipLanding() {
  return (
    <div className="route-enter">
      <PageHead trail="MEMBERSHIP" title="Membership."
        lede="The Esselen Tribe of Monterey County maintains a roll of enrolled members descended from documented Esselen ancestors. Membership grants the rights and responsibilities of belonging." />
      <SubNav items={MEMBER_SUBNAV} active="" />
      <section className="section">
        <div className="container-wide">
          <div className="grid grid-3">
            {[
              { id: 'membership/becoming', t: 'Becoming a Member', body: 'Eligibility, documentation, and the path to enrollment.', img: window.__resources.r_img_12 },
              { id: 'membership/forms', t: 'Membership Forms', body: 'Application, lineage worksheet, address update, and member resources.', img: window.__resources.r_img_14 },
              { id: 'membership/login', t: 'Member Login', body: 'Access member-only resources, meeting minutes, and the directory.', img: window.__resources.r_img_15 },
            ].map((c, i) => (
              <a key={i} onClick={() => navigate(c.id)} style={{ cursor: 'pointer' }}>
                <div className="card" style={{ padding: 0, overflow: 'hidden' }}>
                  <div className="card-img" style={{ borderRadius: 0 }}><img src={c.img} alt="" /></div>
                  <div style={{ padding: 24 }}>
                    <div className="idx">0{i+1}</div>
                    <h3 className="h-m" style={{ marginTop: 8 }}>{c.t}</h3>
                    <p style={{ color: 'var(--fg-soft)', margin: '8px 0 0' }}>{c.body}</p>
                  </div>
                </div>
              </a>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

function BecomingMember() {
  return (
    <div className="route-enter">
      <PageHead trail="MEMBERSHIP — BECOMING A MEMBER" title="Becoming a Member"
        lede="Enrollment is open to people who can document direct descent from Esselen ancestors. Below is what to expect, and how the process works." />
      <SubNav items={MEMBER_SUBNAV} active="membership/becoming" />

      <section className="section">
        <div className="container">
          <div className="split">
            <div>
              <div className="eyebrow"><span className="dot"></span>Eligibility</div>
              <h2 className="h-l" style={{ marginTop: 18 }}>Who is eligible.</h2>
            </div>
            <div className="body-prose">
              <p>
                Enrolled membership in the Esselen Tribe of Monterey County is open to individuals who can
                document direct lineal descent from one or more Esselen ancestors. Documentation may
                include mission records, federal census data, oral history affidavits, and family records.
              </p>
              <p>
                Lineage and enrollment review is the responsibility of the Membership Committee.
                The Committee meets quarterly and works with applicants to assemble the strongest
                possible record — including, when needed, partnering with our archival research team.
              </p>
            </div>
          </div>
        </div>
      </section>

      <section className="section" style={{ background: 'var(--bg-2)' }}>
        <div className="container">
          <SecHead eyebrow="The process" title="What to expect." />
          <div className="grid grid-2" style={{ gap: 32 }}>
            <div>
              {[
                { n: '01', t: 'Reach out', body: 'Contact the Membership Committee. We\'ll arrange a private conversation about your family history.' },
                { n: '02', t: 'Gather records', body: 'Bring whatever you have — birth records, family bibles, photos, oral histories, names. We help fill in the rest.' },
                { n: '03', t: 'Complete the application', body: 'Submit the membership application with your lineage worksheet and supporting documents.' },
                { n: '04', t: 'Committee review', body: 'The Membership Committee reviews applications quarterly and notifies applicants within 90 days.' },
                { n: '05', t: 'Welcome', body: 'New members are formally welcomed at the next General Membership meeting.' },
              ].map((s, i) => (
                <div key={i} style={{ display: 'grid', gridTemplateColumns: '60px 1fr', gap: 20, padding: '20px 0', borderTop: i === 0 ? '1px solid var(--line)' : '1px solid var(--line)' }}>
                  <div className="idx">{s.n}</div>
                  <div>
                    <div style={{ fontFamily: 'var(--font-display)', fontSize: 22 }}>{s.t}</div>
                    <div style={{ color: 'var(--fg-soft)', marginTop: 6 }}>{s.body}</div>
                  </div>
                </div>
              ))}
            </div>
            <div style={{ position: 'sticky', top: 100, alignSelf: 'flex-start' }}>
              <div className="card card-deep" style={{ background: 'var(--deep)' }}>
                <div className="eyebrow" style={{ color: 'rgba(242,235,221,0.6)' }}><span className="dot"></span>A note</div>
                <h3 className="h-m" style={{ color: '#fff' }}>If you suspect Esselen ancestry but aren't sure where to start —</h3>
                <p style={{ color: 'rgba(242,235,221,0.85)' }}>
                  Reach out anyway. Many of our enrolled members began with no more than a family
                  whisper. The Committee and our archivist will help you trace it carefully.
                </p>
                <button className="btn" style={{ background: 'var(--bg)', color: 'var(--deep)', borderColor: 'var(--bg)', alignSelf: 'flex-start' }} onClick={() => navigate('contact')}>Contact Membership →</button>
              </div>
              <div className="card" style={{ marginTop: 16 }}>
                <div className="eyebrow"><span className="dot"></span>Membership rights</div>
                <ul className="bullets">
                  <li>Vote in Tribal elections at age 18.</li>
                  <li>Attend General Membership meetings.</li>
                  <li>Access member-only programs and the youth scholarship fund.</li>
                  <li>Receive a printed annual report.</li>
                  <li>Be heard.</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

function MembershipForms() {
  const forms = [
    { t: 'Membership Application', d: 'Primary application form for new members.', fmt: 'PDF · 4 pages' },
    { t: 'Lineage Worksheet', d: 'Companion to the application — document your line of descent.', fmt: 'PDF · 2 pages' },
    { t: 'Affidavit of Family History', d: 'For documenting oral history and family records.', fmt: 'PDF · 1 page' },
    { t: 'Member Information Update', d: 'Change of address, contact, or family record updates.', fmt: 'PDF · 1 page' },
    { t: 'Youth Scholarship Application', d: 'Annual scholarship application — opens Feb 1.', fmt: 'PDF · 3 pages' },
    { t: 'Member Directory Consent Form', d: 'Opt in to inclusion in the member directory.', fmt: 'PDF · 1 page' },
    { t: 'Membership Bylaws', d: 'Read the bylaws governing membership and the Tribe.', fmt: 'PDF · 22 pages' },
    { t: 'Annual Report (most recent)', d: 'The Tribe\'s annual report for members and friends.', fmt: 'PDF · 36 pages' },
  ];
  return (
    <div className="route-enter">
      <PageHead trail="MEMBERSHIP — FORMS" title="Membership Forms"
        lede="All forms are PDFs. Members and applicants may also request a printed copy mailed to your address." />
      <SubNav items={MEMBER_SUBNAV} active="membership/forms" />
      <section className="section">
        <div className="container">
          <div className="grid grid-2" style={{ gap: 16 }}>
            {forms.map((f, i) => (
              <div key={i} style={{ display: 'flex', gap: 20, padding: 24, border: '1px solid var(--line)', borderRadius: 14, background: 'var(--bg)', alignItems: 'center' }}>
                <div className="ph" style={{ width: 56, height: 70, borderRadius: 4, flexShrink: 0, fontSize: 10, padding: 4 }}>PDF</div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontFamily: 'var(--font-display)', fontSize: 21 }}>{f.t}</div>
                  <div style={{ color: 'var(--fg-soft)', fontSize: 14, marginTop: 4 }}>{f.d}</div>
                  <div className="idx" style={{ marginTop: 8, fontSize: 10 }}>{f.fmt}</div>
                </div>
                <button className="btn btn-ghost btn-sm">Download ↓</button>
              </div>
            ))}
          </div>
          <div className="card" style={{ marginTop: 40, background: 'var(--bg-2)' }}>
            <div className="eyebrow"><span className="dot"></span>Need help?</div>
            <h3 className="h-m">Email membership@esselentribe.org</h3>
            <p style={{ color: 'var(--fg-soft)', margin: 0 }}>
              The Membership Committee responds within two weeks. For urgent matters, call the Tribal office.
            </p>
          </div>
        </div>
      </section>
    </div>
  );
}

function MemberLogin() {
  return (
    <div className="route-enter">
      <PageHead trail="MEMBERSHIP — MEMBER LOGIN" title="Member Login"
        lede="Access to meeting minutes, the member directory, and members-only resources." />
      <SubNav items={MEMBER_SUBNAV} active="membership/login" />
      <section className="section">
        <div className="container">
          <div className="auth-card">
            <div className="eyebrow"><span className="dot"></span>Sign in</div>
            <h2 className="h-m" style={{ margin: 0 }}>Welcome back.</h2>
            <form onSubmit={(e) => e.preventDefault()} style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
              <div className="field">
                <label>Member email</label>
                <input type="email" placeholder="you@email.com" />
              </div>
              <div className="field">
                <label>Password</label>
                <input type="password" placeholder="••••••••" />
              </div>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', fontSize: 13 }}>
                <label style={{ display: 'flex', alignItems: 'center', gap: 8, color: 'var(--fg-soft)' }}>
                  <input type="checkbox" /> Keep me signed in
                </label>
                <a style={{ color: 'var(--terracotta)', cursor: 'pointer' }}>Forgot password?</a>
              </div>
              <button type="submit" className="btn btn-clay" style={{ justifyContent: 'center' }}>Sign in →</button>
              <div style={{ textAlign: 'center', fontSize: 13, color: 'var(--fg-mute)' }}>
                Not yet enrolled? <a onClick={() => navigate('membership/becoming')} style={{ color: 'var(--terracotta)', cursor: 'pointer' }}>Become a member →</a>
              </div>
            </form>
          </div>

          <div style={{ marginTop: 48, textAlign: 'center', color: 'var(--fg-mute)', fontSize: 13 }}>
            For technical assistance with your account, email <strong style={{ color: 'var(--fg)' }}>tech@esselentribe.org</strong>.
          </div>
        </div>
      </section>
    </div>
  );
}

function DonatePage() {
  const [amt, setAmt] = useState(100);
  const [freq, setFreq] = useState('one');
  return (
    <div className="route-enter">
      <PageHead trail="DONATE" title="Support the work."
        lede="Every contribution goes directly to land restoration, language and ceremony, and the next generation of Esselen people." />

      <section className="section">
        <div className="container-wide">
          <div className="grid grid-2" style={{ gap: 40 }}>
            <div>
              <SecHead eyebrow="Where it goes" title="What your gift funds." />
              <div className="grid grid-2" style={{ gap: 16 }}>
                {[
                  { t: 'Land restoration', body: 'Native plant work, cultural fire, and the field team that walks the lands.', pct: '42%' },
                  { t: 'Language & ceremony', body: 'Documentation, teaching circles, and support for ceremonial life.', pct: '22%' },
                  { t: 'Youth programs', body: 'Camps, apprenticeships, and the annual scholarship fund.', pct: '20%' },
                  { t: 'Operations', body: 'Governance, financial administration, and our small staff.', pct: '16%' },
                ].map((c, i) => (
                  <div key={i} className="card" style={{ padding: 22 }}>
                    <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                      <span className="idx">0{i+1}</span>
                      <span style={{ fontFamily: 'var(--font-display)', fontSize: 30, color: 'var(--terracotta)', lineHeight: 1 }}>{c.pct}</span>
                    </div>
                    <h3 className="h-s" style={{ marginTop: 10 }}>{c.t}</h3>
                    <p style={{ color: 'var(--fg-soft)', margin: 0, fontSize: 14 }}>{c.body}</p>
                  </div>
                ))}
              </div>

              <div style={{ marginTop: 40 }}>
                <SecHead eyebrow="Other ways" title="More ways to give." />
                <ul className="bullets">
                  <li><strong>Stock and securities</strong> — contact donate@esselentribe.org.</li>
                  <li><strong>Donor-Advised Fund</strong> — we are recognized by all major DAF sponsors.</li>
                  <li><strong>Bequests & legacy gifts</strong> — speak with our Board treasurer.</li>
                  <li><strong>By mail</strong> — checks to "Esselen Tribe of Monterey County", Post Office Box 95, Carmel Valley, CA 93924.</li>
                </ul>
              </div>
            </div>

            <div style={{ position: 'sticky', top: 100, alignSelf: 'flex-start' }}>
              <div style={{ background: 'var(--deep)', color: 'var(--bg)', borderRadius: 22, padding: 'clamp(28px, 3vw, 40px)' }}>
                <div className="eyebrow" style={{ color: 'rgba(242,235,221,0.6)' }}><span className="dot"></span>Make a donation</div>
                <h2 className="h-l" style={{ color: '#fff', marginTop: 14 }}>Give today.</h2>

                {/* Frequency toggle */}
                <div style={{ display: 'flex', gap: 4, padding: 4, background: 'rgba(255,255,255,0.08)', borderRadius: 999, marginTop: 24 }}>
                  {[['one', 'One-time'], ['monthly', 'Monthly'], ['annual', 'Annual']].map(([id, l]) => (
                    <button key={id} onClick={() => setFreq(id)} className="btn-sm" style={{
                      flex: 1, border: 'none', cursor: 'pointer', borderRadius: 999, padding: '10px 14px',
                      background: freq === id ? '#fff' : 'transparent',
                      color: freq === id ? 'var(--deep)' : 'rgba(255,255,255,0.85)',
                      fontFamily: 'inherit', fontSize: 13, fontWeight: 500,
                    }}>{l}</button>
                  ))}
                </div>

                {/* Amounts */}
                <div className="grid grid-3" style={{ gap: 8, marginTop: 16 }}>
                  {[25, 50, 100, 250, 500, 1000].map(v => (
                    <button key={v} onClick={() => setAmt(v)} style={{
                      padding: '14px 0', borderRadius: 12,
                      background: amt === v ? 'var(--terracotta)' : 'transparent',
                      color: amt === v ? '#fff' : 'var(--bg)',
                      border: amt === v ? '1px solid var(--terracotta)' : '1px solid rgba(255,255,255,0.18)',
                      fontFamily: 'var(--font-display)', fontSize: 22, cursor: 'pointer',
                    }}>${v}</button>
                  ))}
                </div>

                {/* Custom */}
                <div className="field" style={{ marginTop: 16 }}>
                  <label style={{ color: 'rgba(242,235,221,0.6)' }}>Other amount</label>
                  <input value={amt} onChange={e => setAmt(Number(e.target.value) || 0)} type="number" style={{ background: 'rgba(255,255,255,0.08)', color: '#fff', border: '1px solid rgba(255,255,255,0.18)' }} />
                </div>

                <button className="btn btn-clay" style={{ width: '100%', justifyContent: 'center', marginTop: 22 }}>
                  Give ${amt} {freq !== 'one' ? `/ ${freq}` : ''} <span className="arrow">→</span>
                </button>

                <div style={{ marginTop: 16, fontSize: 12, color: 'rgba(242,235,221,0.6)', textAlign: 'center' }}>
                  The Esselen Tribe of Monterey County is a 501(c)(3). EIN 82-5246660.
                  Your gift is tax-deductible to the extent allowed by law.
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="section" style={{ background: 'var(--bg-2)' }}>
        <div className="container">
          <div className="quote">
            <span className="qmark">“</span>
            We are funded not by recognition or by treaty — but by the goodwill and conviction of people who care about this place. To everyone who has given: thank you.
          </div>
          <div className="quote-attr">Esselen Non-Profit Board</div>
        </div>
      </section>
    </div>
  );
}

function ContactPage() {
  return (
    <div className="route-enter">
      <PageHead trail="CONTACT" title="Get in touch."
        lede="The Tribal office responds within two weeks. For matters of cultural protocol or land access, please allow additional time." />
      <section className="section">
        <div className="container-wide">
          <div className="grid grid-2" style={{ gap: 56 }}>
            <div>
              <SecHead eyebrow="Send a message" title="Write to us." />
              <form onSubmit={(e) => e.preventDefault()} style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
                <div className="field"><label>Your name</label><input placeholder="Full name" /></div>
                <div className="field"><label>Email</label><input type="email" placeholder="you@email.com" /></div>
                <div className="field" style={{ gridColumn: '1 / -1' }}>
                  <label>Reason for contact</label>
                  <select>
                    <option>General inquiry</option>
                    <option>Membership question</option>
                    <option>Cultural Resources / NAGPRA</option>
                    <option>Research partnership</option>
                    <option>Media inquiry</option>
                    <option>Donation / planned giving</option>
                    <option>Job application</option>
                    <option>Other</option>
                  </select>
                </div>
                <div className="field" style={{ gridColumn: '1 / -1' }}>
                  <label>Message</label>
                  <textarea rows="6" placeholder="Tell us a little about why you're writing."></textarea>
                </div>
                <button className="btn btn-clay" style={{ gridColumn: '1 / -1', justifyContent: 'center' }}>Send message →</button>
              </form>
            </div>

            <div>
              <SecHead eyebrow="Reach us directly" title="Other ways to get in touch." />
              <div style={{ display: 'flex', flexDirection: 'column', gap: 22 }}>
                {[
                  { t: 'Tribal office', body: 'tribaladmin@esselentribe.org', sub: 'General inquiries & administration' },
                  { t: 'Phone', body: '831.301.3078', sub: 'Tribal office line' },
                  { t: 'Membership Committee', body: 'membership@esselentribe.org', sub: 'Enrollment & member services (Referencial)' },
                  { t: 'Cultural Resources', body: 'cultural@esselentribe.org', sub: 'NAGPRA, research, land (Referencial)' },
                  { t: 'Donations', body: 'donate@esselentribe.org', sub: 'Major gifts, planned giving (Referencial)' },
                ].map((c, i) => (
                  <div key={i} style={{ padding: '20px 0', borderTop: '1px solid var(--line)' }}>
                    <div className="idx">{c.t}</div>
                    <div style={{ fontFamily: 'var(--font-display)', fontSize: 22, marginTop: 6 }}>{c.body}</div>
                    <div style={{ color: 'var(--fg-mute)', fontSize: 13, marginTop: 4 }}>{c.sub}</div>
                  </div>
                ))}
              </div>

              <div className="card" style={{ marginTop: 32, background: 'var(--bg-2)' }}>
                <div className="eyebrow"><span className="dot"></span>By mail</div>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 22, marginTop: 6 }}>
                  Esselen Tribe of Monterey County<br/>
                  Post Office Box 95<br/>
                  Carmel Valley, CA 93924
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { MembershipLanding, BecomingMember, MembershipForms, MemberLogin, DonatePage, ContactPage });
