// home.jsx — APABA Colorado homepage

const { useState: useStateH, useEffect: useEffectH, useRef: useRefH } = React;

function Home({ tweaks, navigate }) {
  return (
    <div style={{ position: 'relative', zIndex: 2 }}>
      {tweaks.heroVariant === 'photo' && <HeroPhoto />}
      {tweaks.heroVariant === 'type' && <HeroType />}
      {tweaks.heroVariant === 'split' && <HeroSplit />}

      <StatsStrip />
      <ClinicFeature navigate={navigate} />
      <UpcomingEvents navigate={navigate} />
      <PhotoScroller />
      <MissionPillars />
      <PublicStatementsList navigate={navigate} />
      <FoundationCallout navigate={navigate} tweaks={tweaks} />
      <MemberSpotlight />
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// HERO — three variants
function HeroPhoto() {
  return (
    <section style={{ position: 'relative', minHeight: 'min(86vh, 760px)', display: 'flex', alignItems: 'flex-end', overflow: 'hidden' }}>
      <Photo
        ratio="16/9"
        tone="evening"
        noNote
        style={{ position: 'absolute', inset: 0, height: '100%' }}
      />
      <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(120deg, rgba(15,29,58,0.86) 0%, rgba(15,29,58,0.35) 55%, rgba(15,29,58,0.1) 100%)' }} />
      <div style={{
        position: 'absolute', top: 24, right: 24,
        fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.18em',
        textTransform: 'uppercase', color: 'rgba(250,246,240,0.6)',
        background: 'rgba(15,29,58,0.55)', padding: '8px 12px', borderLeft: '2px solid var(--accent)'
      }}>
        SHOT · Annual banquet, applause moment, wide<br/>
        <span style={{opacity: 0.7}}>16:9 · Available negative space, frame-left</span>
      </div>
      <div className="container-wide" style={{ position: 'relative', paddingTop: 96, paddingBottom: 96, color: 'var(--paper)', display: 'grid', gridTemplateColumns: '1.6fr 1fr', gap: 80, alignItems: 'end' }}>
        <div>
          <div className="eyebrow" style={{ color: 'var(--gold)', marginBottom: 24 }}>EST. 1991 · DENVER, COLORADO</div>
          <h1 style={{
            fontFamily: 'var(--serif)',
            fontSize: 'clamp(56px, 7.4vw, 116px)',
            fontWeight: 400,
            lineHeight: 0.96,
            letterSpacing: '-0.02em',
            color: 'var(--paper)',
            margin: 0,
          }}>
            Where heritage and<br/>
            the practice of law<br/>
            <em style={{ fontStyle: 'italic', color: 'var(--accent)' }}>converge.</em>
          </h1>
        </div>
        <div style={{ paddingBottom: 12 }}>
          <p style={{ fontFamily: 'var(--serif)', fontSize: 20, lineHeight: 1.5, color: 'rgba(250,246,240,0.85)', marginBottom: 32 }}>
            Thirty-five years of advocacy, mentorship, and pro bono service from the Asian Pacific American legal community of Colorado.
          </p>
          <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}>
            <button className="btn btn-accent">Become a member</button>
            <button className="btn btn-ghost-light">Visit the clinic →</button>
          </div>
        </div>
      </div>
    </section>
  );
}

function HeroType() {
  return (
    <section style={{ paddingTop: 96, paddingBottom: 96, background: 'var(--paper)' }}>
      <div className="container-wide" style={{ display: 'grid', gridTemplateColumns: '1.7fr 1fr', gap: 80, alignItems: 'end' }}>
        <div>
          <div className="eyebrow" style={{ marginBottom: 28 }}>EST. 1991 · A NAPABA AFFILIATE</div>
          <h1 style={{
            fontFamily: 'var(--serif)',
            fontSize: 'clamp(56px, 8.4vw, 132px)',
            fontWeight: 400,
            lineHeight: 0.95,
            letterSpacing: '-0.025em',
            margin: 0,
            color: 'var(--charcoal)',
          }}>
            A Colorado bar<br/>
            <em style={{ fontStyle: 'italic', color: 'var(--accent)' }}>for the practice,</em><br/>
            the people, the place.
          </h1>
        </div>
        <div>
          <p style={{ fontFamily: 'var(--serif)', fontSize: 20, lineHeight: 1.5, color: 'var(--text-muted)', marginBottom: 32 }}>
            Thirty-five years of advocacy, mentorship, and pro bono service from the Asian Pacific American legal community of Colorado.
          </p>
          <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}>
            <button className="btn btn-primary">Become a member</button>
            <button className="btn btn-ghost">Visit the clinic →</button>
          </div>
        </div>
      </div>
    </section>
  );
}

function HeroSplit() {
  return (
    <section style={{ paddingTop: 56, paddingBottom: 0 }}>
      <div className="container-wide" style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 56, alignItems: 'stretch' }}>
        <div style={{ paddingTop: 40, paddingBottom: 56, display: 'flex', flexDirection: 'column', justifyContent: 'space-between', minHeight: 600 }}>
          <div className="eyebrow">EST. 1991 · DENVER, COLORADO</div>
          <div>
            <h1 style={{
              fontFamily: 'var(--serif)',
              fontSize: 'clamp(48px, 6.6vw, 104px)',
              fontWeight: 400,
              lineHeight: 0.98,
              letterSpacing: '-0.02em',
              margin: 0,
            }}>
              Where heritage<br/>
              and the practice<br/>
              of law <em style={{ fontStyle: 'italic', color: 'var(--accent)' }}>converge.</em>
            </h1>
            <p style={{ fontFamily: 'var(--serif)', fontSize: 20, lineHeight: 1.5, color: 'var(--text-muted)', marginTop: 36, maxWidth: 460 }}>
              Thirty-five years of advocacy, mentorship, and pro bono service from the Asian Pacific American legal community of Colorado.
            </p>
            <div style={{ display: 'flex', gap: 14, marginTop: 32, flexWrap: 'wrap' }}>
              <button className="btn btn-primary">Become a member</button>
              <button className="btn btn-ghost">Visit the clinic →</button>
            </div>
          </div>
        </div>
        <Photo
          tone="evening"
          ratio="4/5"
          label="HERO · DOCUMENTARY"
          shot="Environmental portrait of current president at the Ralph Carr Judicial Center. Available light, late afternoon."
        />
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// Stats strip
function StatsStrip() {
  const stats = [
    { num: '35', unit: 'years', label: 'serving Colorado' },
    { num: '$420K', unit: '', label: 'in Foundation grants & scholarships' },
    { num: '180+', unit: 'clinics', label: 'free legal consultations held' },
    { num: '11', unit: 'committees', label: 'active across the chapter' },
  ];
  return (
    <section style={{ paddingTop: 56, paddingBottom: 56, borderTop: '1px solid var(--rule)', borderBottom: '1px solid var(--rule)', background: 'var(--paper)' }}>
      <div className="container-wide" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 40 }}>
        {stats.map((s, i) => (
          <div key={i} style={{ paddingLeft: i > 0 ? 32 : 0, borderLeft: i > 0 ? '1px solid var(--rule)' : 'none' }}>
            <div style={{
              fontFamily: 'var(--serif)',
              fontSize: 64,
              fontWeight: 400,
              lineHeight: 1,
              letterSpacing: '-0.02em',
              color: 'var(--charcoal)',
              marginBottom: 14,
            }}>
              {s.num}{s.unit && <em style={{ fontStyle: 'italic', fontSize: 28, marginLeft: 6, color: 'var(--accent)' }}>{s.unit}</em>}
            </div>
            <div style={{ fontFamily: 'var(--mono)', fontSize: 12, letterSpacing: '0.04em', color: 'var(--text-muted)', textTransform: 'lowercase' }}>
              {s.label}
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// Free Legal Clinic feature — full-bleed dark
function ClinicFeature({ navigate }) {
  return (
    <section style={{ background: 'var(--ink)', color: 'var(--paper)', position: 'relative', marginTop: 'var(--rhythm)' }}>
      <Photo tone="evening" noNote style={{ position: 'absolute', inset: 0, height: '100%', opacity: 0.32 }} />
      <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, var(--ink) 0%, rgba(15,29,58,0.6) 50%, var(--ink) 100%)' }} />
      <div className="container-wide" style={{ position: 'relative', paddingTop: 120, paddingBottom: 120 }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 80, alignItems: 'start' }}>
          <div>
            <div className="eyebrow" style={{ color: 'var(--gold)', marginBottom: 28 }}>OUR HIGHEST-VOLUME PROGRAM</div>
            <h2 style={{
              fontFamily: 'var(--serif)', fontSize: 'clamp(40px, 5.4vw, 80px)', fontWeight: 400,
              lineHeight: 1, letterSpacing: '-0.015em', color: 'var(--paper)', marginBottom: 36,
            }}>
              Thirty-minute consultations,<br/>
              <em style={{ fontStyle: 'italic', color: 'var(--gold)' }}>free of charge,</em><br/>
              the second Thursday of every month.
            </h2>
            <p style={{ fontFamily: 'var(--serif)', fontSize: 21, lineHeight: 1.55, color: 'rgba(250,246,240,0.82)', maxWidth: 620, marginBottom: 40 }}>
              Volunteer attorneys offer one-on-one consultations on family, employment, immigration, and small-business matters. Walk-ins welcome; appointments preferred. Translation available in Mandarin, Vietnamese, and Korean on request.
            </p>
            <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}>
              <button onClick={() => navigate('clinic')} className="btn btn-gold">Reserve a consultation</button>
              <button className="btn btn-ghost-light">Volunteer as an attorney →</button>
            </div>
          </div>

          <div style={{ background: 'var(--paper)', color: 'var(--charcoal)', padding: 32, position: 'relative' }}>
            <div style={{ position: 'absolute', top: 0, left: 0, height: 4, background: 'var(--gold)', width: '100%' }} />
            <div className="eyebrow eyebrow-accent" style={{ color: 'var(--accent)', marginBottom: 18 }}>NEXT CLINIC</div>
            <div style={{ fontFamily: 'var(--serif)', fontSize: 88, fontWeight: 400, lineHeight: 0.9, letterSpacing: '-0.025em' }}>
              14 <em style={{ fontStyle: 'italic', fontSize: 36, marginLeft: 4, color: 'var(--accent)' }}>May</em>
            </div>
            <div style={{ fontFamily: 'var(--mono)', fontSize: 12, letterSpacing: '0.04em', color: 'var(--text-muted)', marginTop: 6 }}>
              THURSDAY · 6:00 — 8:30 PM
            </div>
            <hr className="rule" style={{ margin: '24px 0' }}/>
            <div style={{ fontFamily: 'var(--serif)', fontSize: 18, lineHeight: 1.45 }}>
              Sakura Square Community Room<br/>
              <span style={{ color: 'var(--text-muted)' }}>1255 19th Street, Denver</span>
            </div>
            <hr className="rule" style={{ margin: '24px 0' }}/>
            <div style={{ display: 'flex', justifyContent: 'space-between', fontFamily: 'var(--mono)', fontSize: 12, letterSpacing: '0.04em', color: 'var(--text-muted)' }}>
              <span>SLOTS REMAINING</span><span style={{ color: 'var(--charcoal)', fontWeight: 600 }}>11 / 16</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// Upcoming events — featured + grid
function UpcomingEvents({ navigate }) {
  const events = [
    { date: '03', month: 'May', day: 'Saturday', cat: 'CLE', title: 'Implicit Bias in Civil Litigation', loc: 'Davis Graham & Stubbs · 6 CLE credits', tone: 'stone' },
    { date: '17', month: 'May', day: 'Saturday', cat: 'Mentorship', title: 'Spring Mentor Match Brunch', loc: 'Hotel Clio, Cherry Creek', tone: 'sage' },
    { date: '06', month: 'Jun', day: 'Friday', cat: 'Social', title: 'Summer Members Happy Hour', loc: 'Mercantile Dining & Provision', tone: 'rust' },
  ];
  return (
    <section style={{ paddingTop: 'var(--rhythm)' }}>
      <div className="container-wide">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 56 }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 16 }}>UPCOMING · APRIL — JUNE 2026</div>
            <h2 className="display-md" style={{ maxWidth: 760 }}>
              The next gathering of<br/>
              <em style={{ fontStyle: 'italic', color: 'var(--accent)' }}>the Colorado bar.</em>
            </h2>
          </div>
          <button onClick={() => navigate('events')} className="btn btn-ghost btn-arrow" style={{ padding: '12px 18px' }}>All events</button>
        </div>

        {/* Featured event — Annual Banquet */}
        <div style={{
          background: 'var(--ink)',
          color: 'var(--paper)',
          display: 'grid',
          gridTemplateColumns: '1fr 1.1fr',
          minHeight: 440,
          marginBottom: 56,
          position: 'relative',
        }}>
          <Photo
            tone="evening"
            noNote
            style={{ height: '100%' }}
          />
          <div style={{ padding: '60px 64px', display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
            <div>
              <div style={{ fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.18em', color: 'var(--gold)', marginBottom: 24 }}>FEATURED · 35TH ANNUAL BANQUET</div>
              <div style={{ fontFamily: 'var(--serif)', fontSize: 96, lineHeight: 0.9, letterSpacing: '-0.02em', marginBottom: 12 }}>
                26 <em style={{ fontStyle: 'italic', color: 'var(--gold)', fontSize: 40 }}>September</em>
              </div>
              <div style={{ fontFamily: 'var(--mono)', fontSize: 12, letterSpacing: '0.04em', color: 'rgba(250,246,240,0.7)' }}>
                SATURDAY EVENING · GRAND HYATT, DENVER
              </div>
              <h3 style={{ fontFamily: 'var(--serif)', fontSize: 40, fontWeight: 400, lineHeight: 1.05, marginTop: 36, color: 'var(--paper)', letterSpacing: '-0.01em' }}>
                Honoring Hon. Christine M. Arguello<br/>
                <em style={{ fontStyle: 'italic', color: 'rgba(250,246,240,0.7)', fontSize: 28 }}>with the Trailblazer Award</em>
              </h3>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 20, marginTop: 40 }}>
              <button className="btn btn-gold">Reserve seats</button>
              <button className="btn btn-ghost-light">Become a sponsor →</button>
            </div>
          </div>
        </div>

        {/* Three event cards */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 32 }}>
          {events.map((e, i) => (
            <article key={i} style={{ background: 'var(--paper-warm)', padding: 0, transition: 'transform 200ms', cursor: 'pointer' }}>
              <Photo tone={e.tone} ratio="4/3" noNote />
              <div style={{ padding: 28 }}>
                <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 20 }}>
                  <div style={{ fontFamily: 'var(--serif)', fontSize: 44, lineHeight: 0.9, letterSpacing: '-0.02em' }}>
                    {e.date} <em style={{ fontStyle: 'italic', color: 'var(--accent)', fontSize: 18 }}>{e.month}</em>
                  </div>
                  <div style={{ fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.1em', color: 'var(--text-muted)', textTransform: 'uppercase' }}>{e.cat}</div>
                </div>
                <h3 style={{ fontFamily: 'var(--serif)', fontSize: 26, lineHeight: 1.15, fontWeight: 400, marginBottom: 14 }}>{e.title}</h3>
                <div style={{ fontFamily: 'var(--mono)', fontSize: 12, color: 'var(--text-muted)', letterSpacing: '0.02em' }}>{e.day} · {e.loc}</div>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// Photo scroller — horizontal, documentary archive
function PhotoScroller() {
  const scrollerRef = useRefH(null);

  const photos = [
    { tone: 'evening', label: '2024 BANQUET', shot: 'Past President\'s remarks, applause across the room' },
    { tone: 'warm', label: 'JUNE CLINIC', shot: 'Volunteer attorney mid-consultation, hands gesturing' },
    { tone: 'rust', label: 'CLE PANEL', shot: 'Implicit bias workshop, Q&A from the floor' },
    { tone: 'stone', label: 'FOUNDATION GRANTEE', shot: 'Asian Pacific Development Center youth program' },
    { tone: 'sage', label: 'MENTOR BRUNCH', shot: 'Spring 2025 match, Hotel Clio courtyard' },
    { tone: 'ink', label: 'PUBLIC POLICY', shot: 'Press conference, Ralph Carr Judicial Center steps' },
    { tone: 'evening', label: 'HAPPY HOUR', shot: 'New-member welcome, summer 2025' },
    { tone: 'warm', label: 'BAR PASSAGE', shot: 'Welcome reception for newly-admitted attorneys' },
  ];

  const scroll = (dir) => {
    const el = scrollerRef.current;
    if (!el) return;
    el.scrollBy({ left: dir * 480, behavior: 'smooth' });
  };

  return (
    <section style={{ paddingTop: 'var(--rhythm)', paddingBottom: 'var(--rhythm-sm)' }}>
      <div className="container-wide" style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 36 }}>
        <div>
          <div className="eyebrow" style={{ marginBottom: 16 }}>FROM THE ARCHIVE</div>
          <h2 className="display-md">A year in <em style={{ fontStyle: 'italic', color: 'var(--accent)' }}>frame.</em></h2>
        </div>
        <div style={{ display: 'flex', gap: 12 }}>
          <button onClick={() => scroll(-1)} aria-label="Previous" style={{ width: 44, height: 44, border: '1px solid var(--rule)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--serif)', fontSize: 20 }}>←</button>
          <button onClick={() => scroll(1)} aria-label="Next" style={{ width: 44, height: 44, border: '1px solid var(--rule)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--serif)', fontSize: 20 }}>→</button>
        </div>
      </div>
      <div
        ref={scrollerRef}
        className="no-scrollbar"
        style={{
          display: 'flex',
          gap: 28,
          overflowX: 'auto',
          scrollSnapType: 'x mandatory',
          padding: '0 max(40px, calc((100vw - 1480px) / 2))',
          scrollPaddingLeft: 'max(40px, calc((100vw - 1480px) / 2))',
        }}
      >
        {photos.map((p, i) => (
          <figure key={i} style={{ flex: '0 0 auto', width: 460, margin: 0, scrollSnapAlign: 'start' }}>
            <Photo tone={p.tone} ratio="4/5" label={p.label} shot={p.shot} />
            <figcaption style={{ marginTop: 14, fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.06em', color: 'var(--text-muted)', textTransform: 'uppercase', display: 'flex', justifyContent: 'space-between' }}>
              <span>{p.label}</span>
              <span>· {String(i+1).padStart(2,'0')} / {String(photos.length).padStart(2,'0')}</span>
            </figcaption>
          </figure>
        ))}
        <div style={{ flex: '0 0 40px' }} />
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// Mission / Four Pillars — split, sticky
function MissionPillars() {
  const pillars = [
    { num: 'i', title: 'Advocacy', body: 'We speak in public to public matters when the moment calls. Our statements are short, considered, and signed by the chapter, not by anonymity.' },
    { num: 'ii', title: 'Mentorship', body: 'A mentor program that connects law students and junior attorneys with practitioners who have been in their seat. Twice-yearly matching; year-round informal continuity.' },
    { num: 'iii', title: 'Pro Bono', body: 'The Free Legal Clinic and four allied volunteer programs. Volunteer attorneys give roughly 4,200 hours of service every year.' },
    { num: 'iv', title: 'Community', body: 'Annual banquet, quarterly happy hours, judicial receptions, the Lunar New Year gala, and the small dinners that hold the rest together.' },
  ];
  return (
    <section style={{ paddingTop: 'var(--rhythm)', paddingBottom: 'var(--rhythm)' }}>
      <div className="container-wide" style={{ display: 'grid', gridTemplateColumns: '1fr 1.3fr', gap: 100, alignItems: 'start' }}>
        <div style={{ position: 'sticky', top: 110 }}>
          <div className="eyebrow" style={{ marginBottom: 28 }}>OUR MISSION</div>
          <h2 style={{
            fontFamily: 'var(--serif)', fontSize: 'clamp(36px, 4.6vw, 68px)',
            fontWeight: 400, lineHeight: 1.02, letterSpacing: '-0.015em',
          }}>
            APABA serves the Asian Pacific American legal community of Colorado through <em style={{ fontStyle: 'italic', color: 'var(--accent)' }}>four enduring commitments</em>.
          </h2>
          <hr className="rule" style={{ margin: '32px 0' }}/>
          <p style={{ fontFamily: 'var(--serif)', fontSize: 19, lineHeight: 1.55, color: 'var(--text-muted)', maxWidth: 460 }}>
            The chapter has held to these since 1991. The forms have changed; the work has not.
          </p>
        </div>
        <ol style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column' }}>
          {pillars.map((p, i) => (
            <li key={p.num} style={{
              display: 'grid', gridTemplateColumns: '80px 1fr', gap: 32,
              padding: '36px 0',
              borderTop: '1px solid var(--rule)',
              borderBottom: i === pillars.length - 1 ? '1px solid var(--rule)' : 'none',
            }}>
              <div style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 36, color: 'var(--accent)', lineHeight: 1 }}>{p.num}.</div>
              <div>
                <h3 style={{ fontFamily: 'var(--serif)', fontSize: 36, fontWeight: 400, lineHeight: 1, marginBottom: 16, letterSpacing: '-0.01em' }}>{p.title}</h3>
                <p style={{ fontFamily: 'var(--serif)', fontSize: 19, lineHeight: 1.55, color: 'var(--text-muted)', maxWidth: 580 }}>{p.body}</p>
              </div>
            </li>
          ))}
        </ol>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// Public statements list
function PublicStatementsList({ navigate }) {
  const statements = [
    { date: '12.04.2025', title: 'On the Repeal of Asian American Studies Programs in Colorado School Districts', cat: 'Public Policy' },
    { date: '09.18.2025', title: 'Statement in Support of Refugee Resettlement and the 1980 Refugee Act', cat: 'Civil Rights' },
    { date: '06.30.2025', title: 'On the Confirmation of Judge Linda Le to the Colorado Court of Appeals', cat: 'Judicial' },
    { date: '03.11.2025', title: 'A Letter to the Colorado General Assembly Regarding HB25-1149', cat: 'Public Policy' },
  ];
  return (
    <section style={{ paddingTop: 'var(--rhythm)', paddingBottom: 'var(--rhythm)', background: 'var(--paper-warm)' }}>
      <div className="container-wide">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 48 }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 16 }}>PUBLIC STATEMENTS</div>
            <h2 className="display-md">When the chapter speaks, <em style={{ fontStyle: 'italic', color: 'var(--accent)' }}>it signs its name.</em></h2>
          </div>
          <button onClick={() => navigate('statements')} className="btn btn-ghost btn-arrow" style={{ padding: '12px 18px' }}>The archive</button>
        </div>
        <div>
          {statements.map((s) => (
            <a
              key={s.title}
              href="#"
              onClick={(e) => { e.preventDefault(); navigate('statement-detail'); }}
              className="link-row"
              style={{ gridTemplateColumns: '160px 110px 1fr 24px' }}
            >
              <div style={{ fontFamily: 'var(--mono)', fontSize: 13, letterSpacing: '0.04em', color: 'var(--text-muted)' }}>{s.date}</div>
              <div style={{ fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--accent)' }}>{s.cat}</div>
              <div style={{ fontFamily: 'var(--serif)', fontSize: 24, lineHeight: 1.25, fontWeight: 400, color: 'var(--charcoal)', maxWidth: 720 }}>{s.title}</div>
              <div style={{ fontFamily: 'var(--serif)', fontSize: 22, color: 'var(--text-muted)', textAlign: 'right' }}>→</div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// Foundation callout — distinct gold treatment
function FoundationCallout({ navigate, tweaks }) {
  return (
    <section style={{ background: 'var(--ink-deeper)', color: 'var(--paper)', position: 'relative', overflow: 'hidden' }}>
      <div className="container-wide" style={{ paddingTop: 120, paddingBottom: 120, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 72, alignItems: 'center' }}>
        <Photo tone="evening" ratio="4/5" label="FOUNDATION · GRANTEE" shot="Asian Pacific Development Center afterschool program, Aurora. Documentary moment, mid-activity." />
        <div>
          <div className="eyebrow" style={{ color: 'var(--gold)', marginBottom: 24 }}>THE APABA FOUNDATION</div>
          <h2 style={{
            fontFamily: 'var(--serif)', fontSize: 'clamp(36px, 5vw, 72px)', fontWeight: 400,
            lineHeight: 1, letterSpacing: '-0.015em', color: 'var(--paper)', marginBottom: 28,
          }}>
            A separate 501(c)(3),<br/>
            <em style={{ fontStyle: 'italic', color: 'var(--gold)' }}>granting back</em><br/>
            to the community.
          </h2>
          <p style={{ fontFamily: 'var(--serif)', fontSize: 21, lineHeight: 1.55, color: 'rgba(250,246,240,0.78)', marginBottom: 36, maxWidth: 540 }}>
            Since 2003, the Foundation has awarded $420,000 in scholarships to APA law students and grants to Colorado community organizations serving Asian Pacific American residents.
          </p>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20, marginBottom: 40, paddingTop: 28, borderTop: '1px solid rgba(250,246,240,0.18)' }}>
            <div>
              <div style={{ fontFamily: 'var(--serif)', fontSize: 56, lineHeight: 1, color: 'var(--gold)' }}>$420K</div>
              <div style={{ fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.08em', color: 'rgba(250,246,240,0.6)', marginTop: 8, textTransform: 'uppercase' }}>granted since 2003</div>
            </div>
            <div>
              <div style={{ fontFamily: 'var(--serif)', fontSize: 56, lineHeight: 1, color: 'var(--gold)' }}>62</div>
              <div style={{ fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.08em', color: 'rgba(250,246,240,0.6)', marginTop: 8, textTransform: 'uppercase' }}>scholarship recipients</div>
            </div>
          </div>
          <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}>
            <button onClick={() => navigate('foundation')} className="btn btn-gold">Make a contribution</button>
            <button onClick={() => navigate('foundation')} className="btn btn-ghost-light">About the Foundation →</button>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// Member spotlight
function MemberSpotlight() {
  return (
    <section style={{ paddingTop: 'var(--rhythm)' }}>
      <div className="container-wide" style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 80, alignItems: 'center' }}>
        <Photo tone="warm" ratio="4/5" label="SPOTLIGHT · APRIL 2026" shot="Environmental portrait at member's office, available afternoon light from window. Books, papers, a steel mug visible." />
        <div>
          <div className="eyebrow" style={{ marginBottom: 28 }}>MEMBER SPOTLIGHT · APRIL 2026</div>
          <blockquote style={{
            fontFamily: 'var(--serif)', fontSize: 'clamp(28px, 3.4vw, 48px)',
            fontWeight: 400, lineHeight: 1.15, letterSpacing: '-0.01em',
            margin: 0, color: 'var(--charcoal)',
          }}>
            "What APABA gave me was permission to bring my whole self to the practice — <em style={{ fontStyle: 'italic', color: 'var(--accent)' }}>not less of one part</em>, not more of another."
          </blockquote>
          <hr className="rule" style={{ margin: '36px 0 24px' }}/>
          <div style={{ fontFamily: 'var(--serif)', fontSize: 22 }}>Jennifer Tanaka</div>
          <div style={{ fontFamily: 'var(--mono)', fontSize: 12, letterSpacing: '0.04em', color: 'var(--text-muted)', marginTop: 6 }}>
            PARTNER · WHEELER TRIGG O'DONNELL · APABA MEMBER SINCE 2014
          </div>
          <div style={{ marginTop: 32 }}>
            <button className="btn btn-ghost btn-arrow" style={{ padding: '12px 18px' }}>Read the full feature</button>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Home });