// pages.jsx — APABA inner pages (Clinic, Membership, Foundation, Statements, About, Events)

const { useState: useStateP } = React;

// ─────────────────────────────────────────────────────────────
// FREE LEGAL CLINIC
function ClinicPage({ navigate }) {
  const [showModal, setShowModal] = useStateP(false);
  return (
    <div>
      <section style={{ position: 'relative', minHeight: 560, display: 'flex', alignItems: 'flex-end', overflow: 'hidden' }}>
        <Photo tone="warm" noNote style={{ position: 'absolute', inset: 0, height: '100%' }} />
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(15,29,58,0.35) 0%, rgba(15,29,58,0.85) 100%)' }} />
        <div className="container-wide" style={{ position: 'relative', paddingTop: 100, paddingBottom: 80, color: 'var(--paper)' }}>
          <div className="eyebrow" style={{ color: 'var(--gold)', marginBottom: 24 }}>FREE LEGAL CLINIC · DENVER, COLORADO</div>
          <h1 style={{ fontFamily: 'var(--serif)', fontSize: 'clamp(48px, 6vw, 92px)', lineHeight: 0.98, letterSpacing: '-0.02em', color: 'var(--paper)', maxWidth: 1100 }}>
            Free legal advice from<br/>
            volunteer attorneys, <em style={{ fontStyle: 'italic', color: 'var(--gold)' }}>thirty minutes</em> at a time.
          </h1>
        </div>
      </section>

      <section style={{ paddingTop: 80, paddingBottom: 80, background: 'var(--paper-warm)' }}>
        <div className="container-wide" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 60, alignItems: 'start' }}>
          <div>
            <div className="eyebrow eyebrow-accent" style={{ color: 'var(--accent)', marginBottom: 16 }}>NEXT CLINIC</div>
            <div style={{ fontFamily: 'var(--serif)', fontSize: 140, lineHeight: 0.85, letterSpacing: '-0.025em' }}>
              14 <em style={{ fontStyle: 'italic', fontSize: 56, color: 'var(--accent)' }}>May</em>
            </div>
            <div style={{ fontFamily: 'var(--mono)', fontSize: 13, letterSpacing: '0.04em', marginTop: 12, color: 'var(--text-muted)' }}>
              THURSDAY · 6:00 — 8:30 PM<br/>
              SAKURA SQUARE COMMUNITY ROOM · 1255 19TH ST
            </div>
            <button onClick={() => setShowModal(true)} className="btn btn-accent" style={{ marginTop: 40 }}>Reserve a 30-minute slot</button>
          </div>
          <div style={{ background: 'var(--paper)', padding: 36, borderTop: '3px solid var(--accent)' }}>
            <div className="eyebrow" style={{ marginBottom: 18 }}>WHAT TO BRING</div>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 14 }}>
              {['Photo ID for the volunteer attorney to confirm identity','Any documents related to your matter (lease, contract, notice, etc.)','Names and addresses of other parties involved','A pen and a notebook'].map(t => (
                <li key={t} style={{ fontFamily: 'var(--serif)', fontSize: 18, lineHeight: 1.5, paddingLeft: 22, position: 'relative' }}>
                  <span style={{ position: 'absolute', left: 0, color: 'var(--accent)', fontStyle: 'italic' }}>·</span>{t}
                </li>
              ))}
            </ul>
            <hr className="rule" style={{ margin: '24px 0' }}/>
            <div style={{ fontFamily: 'var(--serif)', fontSize: 16, color: 'var(--text-muted)', lineHeight: 1.5 }}>
              Translation available in Mandarin, Vietnamese, and Korean — request when reserving.
            </div>
          </div>
        </div>
      </section>

      <section style={{ paddingTop: 'var(--rhythm)', paddingBottom: 'var(--rhythm)' }}>
        <div className="container-wide">
          <div className="eyebrow" style={{ marginBottom: 24 }}>HOW IT WORKS</div>
          <h2 className="display-md" style={{ marginBottom: 64, maxWidth: 720 }}>Three steps. <em style={{ fontStyle: 'italic', color: 'var(--accent)' }}>That is the whole process.</em></h2>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 48 }}>
            {[
              ['i', 'Reserve', 'Sign up online or walk in. Tell us briefly what your matter concerns so we can match you with the right volunteer.'],
              ['ii', 'Meet', 'A volunteer attorney sits down with you for thirty minutes. They will listen, ask questions, and explain your options.'],
              ['iii', 'Continue', 'If you need ongoing representation, the attorney can refer you to a low-bono or pro bono lawyer in the right specialty.'],
            ].map(([n, t, b]) => (
              <div key={n} style={{ borderTop: '2px solid var(--charcoal)', paddingTop: 28 }}>
                <div style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 28, color: 'var(--accent)', marginBottom: 12 }}>{n}.</div>
                <h3 style={{ fontFamily: 'var(--serif)', fontSize: 32, fontWeight: 400, marginBottom: 16 }}>{t}</h3>
                <p style={{ fontFamily: 'var(--serif)', fontSize: 18, lineHeight: 1.55, color: 'var(--text-muted)' }}>{b}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <FAQ />
      {showModal && <ClinicModal onClose={() => setShowModal(false)} />}
    </div>
  );
}

function FAQ() {
  const [open, setOpen] = useStateP(0);
  const items = [
    ['Is the consultation actually free?', 'Yes. There is no charge for the thirty-minute consultation. If you choose to retain an attorney afterward, that engagement is separate and may have a fee.'],
    ['What kinds of matters can the clinic help with?', 'Family, employment, immigration, housing/landlord-tenant, small-business formation, and estate planning are the most common. We cannot offer criminal defense advice at the clinic.'],
    ['Do I need to be Asian Pacific American to attend?', 'No. The clinic is open to any Colorado resident regardless of background.'],
    ['What if I need translation?', 'We have Mandarin, Vietnamese, and Korean translators on rotation. Note your language when reserving and we will match you accordingly.'],
    ['Can I just walk in?', 'You can. Reservations are prioritized; remaining slots are filled walk-in starting at 6:15 PM.'],
  ];
  return (
    <section style={{ paddingBottom: 'var(--rhythm)' }}>
      <div className="container-wide" style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 80, alignItems: 'start' }}>
        <div>
          <div className="eyebrow" style={{ marginBottom: 16 }}>FREQUENTLY ASKED</div>
          <h2 style={{ fontFamily: 'var(--serif)', fontSize: 56, fontWeight: 400, lineHeight: 1, letterSpacing: '-0.015em' }}>
            Questions, <em style={{ fontStyle: 'italic', color: 'var(--accent)' }}>answered.</em>
          </h2>
        </div>
        <div>
          {items.map(([q, a], i) => (
            <div key={q} style={{ borderTop: '1px solid var(--rule)', borderBottom: i === items.length - 1 ? '1px solid var(--rule)' : 'none' }}>
              <button onClick={() => setOpen(open === i ? -1 : i)} style={{ width: '100%', textAlign: 'left', padding: '24px 0', display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 20 }}>
                <span style={{ fontFamily: 'var(--serif)', fontSize: 22, fontWeight: 400, lineHeight: 1.3 }}>{q}</span>
                <span style={{ fontFamily: 'var(--serif)', fontSize: 26, color: 'var(--accent)', flexShrink: 0 }}>{open === i ? '–' : '+'}</span>
              </button>
              {open === i && (
                <div style={{ paddingBottom: 24, paddingRight: 60, fontFamily: 'var(--serif)', fontSize: 18, lineHeight: 1.6, color: 'var(--text-muted)' }}>{a}</div>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function ClinicModal({ onClose }) {
  const [step, setStep] = useStateP(1);
  const [form, setForm] = useStateP({ name: '', email: '', phone: '', matter: 'Family', lang: 'English', notes: '' });
  return (
    <div style={{ position: 'fixed', inset: 0, background: 'rgba(15,29,58,0.7)', backdropFilter: 'blur(4px)', zIndex: 100, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 24 }} onClick={onClose}>
      <div style={{ background: 'var(--paper)', maxWidth: 560, width: '100%', padding: 48, position: 'relative' }} onClick={(e) => e.stopPropagation()}>
        <button onClick={onClose} style={{ position: 'absolute', top: 16, right: 16, fontSize: 24, color: 'var(--text-muted)' }}>×</button>
        {step < 3 ? (
          <>
            <div className="eyebrow" style={{ marginBottom: 16 }}>RESERVE · STEP {step} / 2</div>
            <h2 style={{ fontFamily: 'var(--serif)', fontSize: 36, fontWeight: 400, lineHeight: 1.05, marginBottom: 28 }}>{step === 1 ? <>Tell us how to <em style={{ fontStyle: 'italic', color: 'var(--accent)' }}>reach you.</em></> : <>About your <em style={{ fontStyle: 'italic', color: 'var(--accent)' }}>matter.</em></>}</h2>
            {step === 1 ? (
              <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
                <Field label="Full name" value={form.name} onChange={(v) => setForm({...form, name: v})} />
                <Field label="Email" type="email" value={form.email} onChange={(v) => setForm({...form, email: v})} />
                <Field label="Phone" value={form.phone} onChange={(v) => setForm({...form, phone: v})} />
              </div>
            ) : (
              <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
                <SelectField label="Type of matter" value={form.matter} onChange={(v) => setForm({...form, matter: v})} options={['Family', 'Employment', 'Immigration', 'Housing', 'Small Business', 'Estate Planning', 'Other']} />
                <SelectField label="Preferred language" value={form.lang} onChange={(v) => setForm({...form, lang: v})} options={['English', 'Mandarin', 'Vietnamese', 'Korean']} />
                <Field label="Brief description (optional)" value={form.notes} onChange={(v) => setForm({...form, notes: v})} multi />
              </div>
            )}
            <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 32 }}>
              <button onClick={step === 1 ? onClose : () => setStep(1)} className="btn btn-ghost">{step === 1 ? 'Cancel' : '← Back'}</button>
              <button onClick={() => setStep(step + 1)} disabled={step === 1 && !form.name} className="btn btn-primary">{step === 1 ? 'Continue' : 'Reserve →'}</button>
            </div>
          </>
        ) : (
          <>
            <div className="eyebrow eyebrow-accent" style={{ color: 'var(--accent)', marginBottom: 16 }}>RESERVED</div>
            <h2 style={{ fontFamily: 'var(--serif)', fontSize: 40, fontWeight: 400, lineHeight: 1.05, marginBottom: 24 }}>You're on the list, {form.name.split(' ')[0]}.</h2>
            <p style={{ fontFamily: 'var(--serif)', fontSize: 18, lineHeight: 1.55, color: 'var(--text-muted)', marginBottom: 28 }}>
              We'll send a confirmation to <strong>{form.email}</strong> with the address, parking details, and what to bring. See you on the 14th.
            </p>
            <button onClick={onClose} className="btn btn-primary">Close</button>
          </>
        )}
      </div>
    </div>
  );
}

function Field({ label, value, onChange, type='text', multi=false }) {
  const Comp = multi ? 'textarea' : 'input';
  return (
    <label style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
      <span style={{ fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--text-muted)' }}>{label}</span>
      <Comp type={type} value={value} onChange={(e) => onChange(e.target.value)} rows={multi ? 3 : undefined} style={{ padding: '12px 14px', border: '1px solid var(--rule)', background: 'var(--paper-warm)', fontFamily: 'var(--serif)', fontSize: 17, color: 'var(--charcoal)', borderRadius: 0 }} />
    </label>
  );
}

function SelectField({ label, value, onChange, options }) {
  return (
    <label style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
      <span style={{ fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--text-muted)' }}>{label}</span>
      <select value={value} onChange={(e) => onChange(e.target.value)} style={{ padding: '12px 14px', border: '1px solid var(--rule)', background: 'var(--paper-warm)', fontFamily: 'var(--serif)', fontSize: 17, color: 'var(--charcoal)', borderRadius: 0 }}>
        {options.map(o => <option key={o}>{o}</option>)}
      </select>
    </label>
  );
}

// ─────────────────────────────────────────────────────────────
// MEMBERSHIP
function MembershipPage({ navigate }) {
  const [tier, setTier] = useStateP('attorney');
  const tiers = {
    student: { price: 25, label: 'Law Student', body: 'For currently enrolled JD candidates at any accredited Colorado law school.' },
    barred: { price: 75, label: 'Newly Admitted', body: 'For attorneys within their first three years of practice in Colorado.' },
    attorney: { price: 175, label: 'Attorney', body: 'For practicing attorneys, judges, and in-house counsel.' },
    sustaining: { price: 350, label: 'Sustaining', body: 'For partners, principals, and members who want to do more.' },
  };
  return (
    <div>
      <PageHero eyebrow="MEMBERSHIP" title="Become a member of" italicWord="APABA Colorado." kicker="Membership is what makes the clinic, the banquet, the mentor program, and the public statements possible. It is also the easiest way to find your people in this practice." />

      <section style={{ paddingTop: 'var(--rhythm-sm)', paddingBottom: 'var(--rhythm)' }}>
        <div className="container-wide">
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24, marginBottom: 64 }}>
            {Object.entries(tiers).map(([key, t]) => (
              <button key={key} onClick={() => setTier(key)} style={{
                textAlign: 'left', padding: 32,
                background: tier === key ? 'var(--ink)' : 'var(--paper)',
                color: tier === key ? 'var(--paper)' : 'var(--charcoal)',
                border: tier === key ? '1px solid var(--ink)' : '1px solid var(--rule)',
                transition: 'all 200ms',
              }}>
                <div style={{ fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase', color: tier === key ? 'var(--gold)' : 'var(--accent)', marginBottom: 18 }}>{t.label}</div>
                <div style={{ fontFamily: 'var(--serif)', fontSize: 64, lineHeight: 0.9, letterSpacing: '-0.02em' }}>${t.price}<em style={{ fontStyle: 'italic', fontSize: 20, color: tier === key ? 'rgba(250,246,240,0.6)' : 'var(--text-muted)', marginLeft: 4 }}>/yr</em></div>
                <p style={{ fontFamily: 'var(--serif)', fontSize: 16, lineHeight: 1.5, marginTop: 18, color: tier === key ? 'rgba(250,246,240,0.78)' : 'var(--text-muted)' }}>{t.body}</p>
              </button>
            ))}
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 80 }}>
            <div>
              <div className="eyebrow" style={{ marginBottom: 16 }}>SIGN UP · {tiers[tier].label.toUpperCase()}</div>
              <h2 style={{ fontFamily: 'var(--serif)', fontSize: 48, fontWeight: 400, lineHeight: 1, letterSpacing: '-0.015em', marginBottom: 24 }}>
                ${tiers[tier].price}<em style={{ fontStyle: 'italic', fontSize: 20, color: 'var(--text-muted)' }}> annually.</em>
              </h2>
              <p style={{ fontFamily: 'var(--serif)', fontSize: 18, lineHeight: 1.55, color: 'var(--text-muted)' }}>
                Membership runs the calendar year. Dues are tax-deductible to the extent allowed by law and renew automatically each January.
              </p>
            </div>
            <form style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }} onSubmit={(e) => { e.preventDefault(); alert('Sign-up submitted (prototype).'); }}>
              <Field label="First name" value="" onChange={() => {}} />
              <Field label="Last name" value="" onChange={() => {}} />
              <div style={{ gridColumn: '1 / -1' }}><Field label="Email" type="email" value="" onChange={() => {}} /></div>
              <Field label="Firm or organization" value="" onChange={() => {}} />
              <Field label="Bar number (if applicable)" value="" onChange={() => {}} />
              <div style={{ gridColumn: '1 / -1', display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 12 }}>
                <span style={{ fontFamily: 'var(--mono)', fontSize: 12, color: 'var(--text-muted)' }}>Total billed today: ${tiers[tier].price}.00</span>
                <button type="submit" className="btn btn-primary">Continue to payment →</button>
              </div>
            </form>
          </div>
        </div>
      </section>

      <section style={{ paddingTop: 'var(--rhythm-sm)', paddingBottom: 'var(--rhythm)', background: 'var(--paper-warm)' }}>
        <div className="container-wide" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'center' }}>
          <Photo tone="rust" ratio="4/5" label="MEMBER · TESTIMONIAL" shot="Environmental portrait, mid-conversation. Member at her standing desk, late morning." />
          <div>
            <div className="eyebrow" style={{ marginBottom: 24 }}>WHY MEMBERS RENEW</div>
            <blockquote style={{ fontFamily: 'var(--serif)', fontSize: 36, fontWeight: 400, lineHeight: 1.2, letterSpacing: '-0.005em', margin: 0 }}>
              "The first APABA event I went to, I met three people who became close friends and one who became my <em style={{ fontStyle: 'italic', color: 'var(--accent)' }}>first big client.</em>"
            </blockquote>
            <hr className="rule" style={{ margin: '32px 0 20px' }} />
            <div style={{ fontFamily: 'var(--serif)', fontSize: 20 }}>Min-Jun Park</div>
            <div style={{ fontFamily: 'var(--mono)', fontSize: 12, letterSpacing: '0.04em', color: 'var(--text-muted)', marginTop: 4 }}>SOLO PRACTICE · MEMBER SINCE 2019</div>
          </div>
        </div>
      </section>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// FOUNDATION
function FoundationPage({ navigate }) {
  return (
    <div>
      <section style={{ position: 'relative', minHeight: 600, display: 'flex', alignItems: 'flex-end', overflow: 'hidden', background: 'var(--ink-deeper)' }}>
        <Photo tone="evening" noNote style={{ position: 'absolute', inset: 0, height: '100%', opacity: 0.4 }} />
        <div className="container-wide" style={{ position: 'relative', paddingTop: 120, paddingBottom: 100, color: 'var(--paper)', display: 'grid', gridTemplateColumns: '1.5fr 1fr', gap: 60, alignItems: 'end' }}>
          <div>
            <div className="eyebrow" style={{ color: 'var(--gold)', marginBottom: 24 }}>THE APABA FOUNDATION · A 501(C)(3)</div>
            <h1 style={{ fontFamily: 'var(--serif)', fontSize: 'clamp(48px, 6.6vw, 104px)', lineHeight: 0.96, letterSpacing: '-0.02em', color: 'var(--paper)', margin: 0 }}>
              Twenty-three years of <em style={{ fontStyle: 'italic', color: 'var(--gold)' }}>granting back</em> to Colorado.
            </h1>
          </div>
          <div>
            <p style={{ fontFamily: 'var(--serif)', fontSize: 20, lineHeight: 1.5, color: 'rgba(250,246,240,0.82)' }}>
              The Foundation is a separate 501(c)(3) supporting Asian Pacific American law students and Colorado community organizations through scholarships, grants, and the annual Diversity Summit.
            </p>
          </div>
        </div>
      </section>

      <section style={{ paddingTop: 80, paddingBottom: 80, background: 'var(--ink-deeper)', color: 'var(--paper)' }}>
        <div className="container-wide" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 32, borderTop: '1px solid rgba(250,246,240,0.18)', paddingTop: 64 }}>
          {[['$420K','granted since 2003'],['62','scholarship recipients'],['18','Colorado community partners'],['100%','volunteer-administered']].map(([n,l],i)=>(
            <div key={i}>
              <div style={{ fontFamily: 'var(--serif)', fontSize: 72, lineHeight: 0.95, color: 'var(--gold)' }}>{n}</div>
              <div style={{ fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.08em', color: 'rgba(250,246,240,0.6)', marginTop: 14, textTransform: 'uppercase' }}>{l}</div>
            </div>
          ))}
        </div>
      </section>

      <section style={{ paddingTop: 'var(--rhythm)', paddingBottom: 'var(--rhythm)' }}>
        <div className="container-wide" style={{ display: 'grid', gridTemplateColumns: '1fr 1.3fr', gap: 80 }}>
          <div style={{ position: 'sticky', top: 110, alignSelf: 'start' }}>
            <div className="eyebrow" style={{ marginBottom: 16 }}>WAYS TO GIVE</div>
            <h2 style={{ fontFamily: 'var(--serif)', fontSize: 56, fontWeight: 400, lineHeight: 1.02, letterSpacing: '-0.015em', marginBottom: 28 }}>
              Make a <em style={{ fontStyle: 'italic', color: 'var(--gold-deep)' }}>contribution.</em>
            </h2>
            <p style={{ fontFamily: 'var(--serif)', fontSize: 18, lineHeight: 1.55, color: 'var(--text-muted)', marginBottom: 32 }}>
              Every dollar funds a scholarship, a grant, or the Summit. The Foundation is run by volunteers; there is no overhead.
            </p>
            <DonateForm />
          </div>
          <div>
            <div className="eyebrow" style={{ marginBottom: 24 }}>2025 GRANTS</div>
            {[
              ['Asian Pacific Development Center', '$25,000', 'Aurora · Youth legal literacy program'],
              ['Vietnamese Community of Colorado', '$15,000', 'Statewide · Senior services & ESL'],
              ['Korean American Coalition', '$12,500', 'Denver · Civic engagement and voting access'],
              ['Hmong American Outreach', '$10,000', 'Westminster · Family case management'],
              ['Sakura Foundation', '$8,000', 'Denver · Heritage education'],
            ].map(([name, amount, sub], i, arr) => (
              <div key={name} style={{ display: 'grid', gridTemplateColumns: '1fr auto', gap: 24, padding: '28px 0', borderTop: '1px solid var(--rule)', borderBottom: i === arr.length-1 ? '1px solid var(--rule)' : 'none' }}>
                <div>
                  <div style={{ fontFamily: 'var(--serif)', fontSize: 26, fontWeight: 400, marginBottom: 6 }}>{name}</div>
                  <div style={{ fontFamily: 'var(--mono)', fontSize: 12, letterSpacing: '0.03em', color: 'var(--text-muted)' }}>{sub}</div>
                </div>
                <div style={{ fontFamily: 'var(--serif)', fontSize: 32, color: 'var(--gold-deep)', fontStyle: 'italic' }}>{amount}</div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

function DonateForm() {
  const [amt, setAmt] = useStateP(100);
  const presets = [50, 100, 250, 500, 1000];
  return (
    <div style={{ background: 'var(--paper-warm)', padding: 28, borderTop: '3px solid var(--gold)' }}>
      <div className="eyebrow" style={{ color: 'var(--gold-deep)', marginBottom: 16 }}>ONE-TIME GIFT</div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 6, marginBottom: 14 }}>
        {presets.map(p => (
          <button key={p} onClick={() => setAmt(p)} style={{ padding: '12px 0', fontFamily: 'var(--serif)', fontSize: 18, background: amt === p ? 'var(--ink)' : 'var(--paper)', color: amt === p ? 'var(--paper)' : 'var(--charcoal)', border: '1px solid var(--rule)' }}>${p}</button>
        ))}
      </div>
      <input type="number" value={amt} onChange={(e) => setAmt(Number(e.target.value))} style={{ width: '100%', padding: '14px 16px', border: '1px solid var(--rule)', background: 'var(--paper)', fontFamily: 'var(--serif)', fontSize: 22, marginBottom: 14, borderRadius: 0 }} />
      <button className="btn btn-gold" style={{ width: '100%' }}>Donate ${amt} →</button>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// PUBLIC STATEMENTS
function StatementsPage({ navigate }) {
  const all = [
    ['12.04.2025', 'On the Repeal of Asian American Studies Programs in Colorado School Districts', 'Public Policy'],
    ['09.18.2025', 'Statement in Support of Refugee Resettlement and the 1980 Refugee Act', 'Civil Rights'],
    ['06.30.2025', 'On the Confirmation of Judge Linda Le to the Colorado Court of Appeals', 'Judicial'],
    ['03.11.2025', 'A Letter to the Colorado General Assembly Regarding HB25-1149', 'Public Policy'],
    ['11.20.2024', 'On Anti-Asian Violence and the Tenth Circuit Hate Crimes Verdict', 'Civil Rights'],
    ['08.05.2024', 'Re: Public Comment on Aurora Police Department Use-of-Force Policy', 'Public Policy'],
    ['05.14.2024', 'On the Passage of the Colorado Language Access Act', 'Public Policy'],
    ['02.12.2024', 'Statement on the Passing of Hon. Joseph M. Kim', 'Memorial'],
  ];
  return (
    <div>
      <PageHero eyebrow="PUBLIC STATEMENTS · 2024 — 2026" title="When the chapter speaks," italicWord="it signs its name." kicker="Every public statement on this page was authored by the Public Policy Committee, reviewed by the Board, and signed by the Chapter President. We do not publish anonymously." />
      <section style={{ paddingTop: 'var(--rhythm-sm)', paddingBottom: 'var(--rhythm)' }}>
        <div className="container-wide">
          {all.map((s) => (
            <a key={s[1]} href="#" onClick={(e) => { e.preventDefault(); navigate('statement-detail'); }} className="link-row" style={{ gridTemplateColumns: '160px 140px 1fr 24px' }}>
              <div style={{ fontFamily: 'var(--mono)', fontSize: 13, letterSpacing: '0.04em', color: 'var(--text-muted)' }}>{s[0]}</div>
              <div style={{ fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--accent)' }}>{s[2]}</div>
              <div style={{ fontFamily: 'var(--serif)', fontSize: 24, lineHeight: 1.25, fontWeight: 400, color: 'var(--charcoal)', maxWidth: 760 }}>{s[1]}</div>
              <div style={{ fontFamily: 'var(--serif)', fontSize: 22, color: 'var(--text-muted)', textAlign: 'right' }}>→</div>
            </a>
          ))}
        </div>
      </section>
    </div>
  );
}

function StatementDetailPage({ navigate }) {
  return (
    <div>
      <article style={{ paddingTop: 80, paddingBottom: 'var(--rhythm)' }}>
        <div className="container" style={{ maxWidth: 760 }}>
          <button onClick={() => navigate('statements')} style={{ fontFamily: 'var(--mono)', fontSize: 12, letterSpacing: '0.06em', color: 'var(--text-muted)', marginBottom: 32 }}>← BACK TO ARCHIVE</button>
          <div className="eyebrow eyebrow-accent" style={{ color: 'var(--accent)', marginBottom: 24 }}>PUBLIC POLICY · DECEMBER 4, 2025</div>
          <h1 style={{ fontFamily: 'var(--serif)', fontSize: 'clamp(36px, 4.6vw, 64px)', fontWeight: 400, lineHeight: 1.05, letterSpacing: '-0.015em', marginBottom: 48 }}>
            On the Repeal of Asian American Studies Programs in Colorado School Districts
          </h1>
          <div style={{ fontFamily: 'var(--serif)', fontSize: 20, lineHeight: 1.65, color: 'var(--charcoal)' }}>
            <p style={{ fontSize: 24, fontStyle: 'italic', color: 'var(--text-muted)', marginBottom: 36 }}>
              The Asian Pacific American Bar Association of Colorado writes today in opposition to the recent decisions, by three Front Range school boards, to discontinue Asian American Studies coursework at the secondary level.
            </p>
            <p>For thirty-five years, this chapter has represented the legal community of Asian Pacific American Coloradans. We are attorneys, judges, and law students. We are also parents, neighbors, and people whose family stories are inseparable from the history this curriculum is designed to teach.</p>
            <p>The argument for repeal — that these courses are divisive, or that they lie outside the core curriculum — does not survive contact with what the courses actually contain. Asian American Studies, as taught in Colorado public schools, traces the legal history of Chinese exclusion, Japanese internment, the 1965 Hart-Celler Act, and the long arc of citizenship as it has been extended, denied, and contested in this country.</p>
            <blockquote style={{ borderLeft: '3px solid var(--accent)', paddingLeft: 28, margin: '40px 0', fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 28, lineHeight: 1.4, color: 'var(--charcoal)' }}>
              This is not a divisive curriculum. It is the curriculum that names how the legal system has, at moments, been turned against the people it was meant to protect — and how it has, at other moments, been turned back.
            </blockquote>
            <p>Governor Ralph Carr opposed Japanese internment in 1942, at significant political cost, because he believed that the protections of the Constitution applied to all residents of his state. The judicial center that bears his name stands two blocks from where this letter was drafted. We invoke his example because we believe Colorado, at its best, has always understood what the curriculum at issue is now being asked to teach.</p>
            <p>We urge the affected boards to reconsider, and we offer the resources of this chapter — including pro bono legal review of any First Amendment concerns raised in the deliberation — in service of that reconsideration.</p>
            <hr className="rule" style={{ margin: '48px 0 24px' }}/>
            <div style={{ fontFamily: 'var(--mono)', fontSize: 13, letterSpacing: '0.04em', color: 'var(--text-muted)', lineHeight: 1.7 }}>
              SIGNED, on behalf of the Board of Directors,<br/>
              <span style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 22, color: 'var(--charcoal)', letterSpacing: 0 }}>Christine M. Yamamoto</span><br/>
              CHAPTER PRESIDENT, APABA COLORADO
            </div>
          </div>
        </div>
      </article>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// ABOUT
function AboutPage({ navigate }) {
  const cards = [
    { title: 'Mission', sub: 'Why this chapter exists', tone: 'warm' },
    { title: "President's Message", sub: 'Christine M. Yamamoto, 2026', tone: 'evening' },
    { title: 'Board of Directors', sub: 'Twelve volunteers, three-year terms', tone: 'rust' },
    { title: 'Past Presidents', sub: 'Thirty-five years of leadership', tone: 'stone' },
    { title: 'Committees', sub: 'Eleven committees, year-round work', tone: 'sage' },
    { title: 'Bylaws & Governance', sub: 'How we make decisions', tone: 'ink' },
  ];
  return (
    <div>
      <PageHero eyebrow="ABOUT THE CHAPTER" title="A bar association, in" italicWord="practice." kicker="APABA Colorado is a 35-year-old volunteer organization. The work it does is the work its members choose to do." />
      <section style={{ paddingTop: 'var(--rhythm-sm)', paddingBottom: 'var(--rhythm)' }}>
        <div className="container-wide" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 32 }}>
          {cards.map((c) => (
            <a key={c.title} href="#" style={{ display: 'block', textDecoration: 'none', color: 'inherit', transition: 'transform 200ms' }}>
              <Photo tone={c.tone} ratio="4/5" noNote />
              <div style={{ paddingTop: 20 }}>
                <div className="eyebrow" style={{ marginBottom: 10 }}>{c.sub.toUpperCase()}</div>
                <h3 style={{ fontFamily: 'var(--serif)', fontSize: 32, fontWeight: 400, lineHeight: 1.05 }}>{c.title} <em style={{ fontStyle: 'italic', color: 'var(--accent)', fontSize: 22 }}>→</em></h3>
              </div>
            </a>
          ))}
        </div>
      </section>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// EVENTS
function EventsPage({ navigate }) {
  return (
    <div>
      <PageHero eyebrow="EVENTS · 2026" title="A year of CLEs," italicWord="banquets, and small dinners." kicker="The chapter holds roughly twenty-eight events per calendar year. The biggest is the Annual Banquet; the most useful is whichever one you actually go to." />
      <section style={{ paddingTop: 'var(--rhythm-sm)', paddingBottom: 'var(--rhythm)' }}>
        <div className="container-wide">
          <div className="eyebrow" style={{ marginBottom: 28 }}>UPCOMING</div>
          {[
            ['03 May','Saturday','CLE','Implicit Bias in Civil Litigation','Davis Graham & Stubbs · 6 CLE credits'],
            ['14 May','Thursday','Service','Free Legal Clinic — May','Sakura Square Community Room'],
            ['17 May','Saturday','Mentorship','Spring Mentor Match Brunch','Hotel Clio, Cherry Creek'],
            ['06 Jun','Friday','Social','Summer Members Happy Hour','Mercantile Dining & Provision'],
            ['11 Jun','Wednesday','Service','Free Legal Clinic — June','Sakura Square Community Room'],
            ['19 Jun','Thursday','CLE','Recent Developments in Immigration Law','Hogan Lovells, 1601 Wewatta'],
            ['26 Sep','Saturday','Banquet','35th Annual Banquet','Grand Hyatt, Denver'],
          ].map(([d,day,cat,t,loc]) => (
            <div key={t} className="link-row" style={{ gridTemplateColumns: '120px 140px 130px 1fr 200px 24px' }}>
              <div style={{ fontFamily: 'var(--serif)', fontSize: 28, lineHeight: 1, letterSpacing: '-0.01em' }}>{d}</div>
              <div style={{ fontFamily: 'var(--mono)', fontSize: 12, color: 'var(--text-muted)', letterSpacing: '0.04em' }}>{day}</div>
              <div style={{ fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--accent)' }}>{cat}</div>
              <div style={{ fontFamily: 'var(--serif)', fontSize: 22, fontWeight: 400 }}>{t}</div>
              <div style={{ fontFamily: 'var(--mono)', fontSize: 12, color: 'var(--text-muted)' }}>{loc}</div>
              <div style={{ fontFamily: 'var(--serif)', fontSize: 22, color: 'var(--text-muted)', textAlign: 'right' }}>→</div>
            </div>
          ))}
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { ClinicPage, MembershipPage, FoundationPage, StatementsPage, StatementDetailPage, AboutPage, EventsPage });
