/* Single-page detail templates: News, Event, Job, Education */

function BackToList({ to, label }) {
  return (
    <div className="container-wide" style={{ paddingTop: 24 }}>
      <a onClick={() => navigate(to)} style={{ cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: 8, color: 'var(--fg-soft)', fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase' }}>
        ← {label}
      </a>
    </div>
  );
}

/* ======================================================================
   NEWS ARTICLE — CBS Sunday Morning
   ====================================================================== */
function NewsArticle() {
  return (
    <div className="route-enter">
      <BackToList to="projects/news" label="All news" />

      {/* Editorial-style article header */}
      <section style={{ padding: '40px 0 24px' }}>
        <div className="container" style={{ maxWidth: 880 }}>
          <div style={{ display: 'flex', gap: 14, alignItems: 'center', flexWrap: 'wrap' }}>
            <span className="tag"><span className="tdot"></span>Press</span>
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--fg-mute)' }}>April 14, 2026 · 4 min read</span>
          </div>
          <h1 className="h-xl" style={{ marginTop: 28, maxWidth: '20ch' }}>
            CBS Sunday Morning visits the <em className="italic-display">reclaimed Big Sur lands.</em>
          </h1>
          <p className="lede" style={{ marginTop: 28, fontSize: 22, lineHeight: 1.45, color: 'var(--fg-soft)' }}>
            A national feature spotlights the 1,199-acre return, the people behind it, and what
            stewardship means for the next generation of Esselen leaders.
          </p>
          <div style={{ marginTop: 32, display: 'flex', alignItems: 'center', gap: 16, paddingTop: 24, borderTop: '1px solid var(--line)' }}>
            <div className="ph" style={{ width: 44, height: 44, borderRadius: 999, fontSize: 9, padding: 0 }}>JN</div>
            <div>
              <div style={{ fontFamily: 'var(--font-display)', fontSize: 18 }}>By Jana Nason</div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10.5, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--fg-mute)', marginTop: 4 }}>Tribal Administrator (Referencial)</div>
            </div>
            <div style={{ marginLeft: 'auto', display: 'flex', gap: 8 }}>
              <button className="btn btn-ghost btn-sm">Share</button>
              <button className="btn btn-ghost btn-sm">Print</button>
            </div>
          </div>
        </div>
      </section>

      {/* Hero image with caption */}
      <section style={{ padding: '16px 0' }}>
        <div className="container-wide">
          <div style={{ borderRadius: 18, overflow: 'hidden' }}>
            <img src={window.__resources.r_img_02} alt="" style={{ width: '100%', height: '70vh', objectFit: 'cover' }} />
          </div>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--fg-mute)', marginTop: 12 }}>
            ABOVE — The reclaimed lands above Big Sur, photographed during the CBS visit. (Referencial)
          </div>
        </div>
      </section>

      {/* Body prose */}
      <section className="section">
        <div className="container" style={{ maxWidth: 700 }}>
          <div className="body-prose" style={{ fontSize: 18, lineHeight: 1.65 }}>
            <p style={{ fontSize: 22, fontFamily: 'var(--font-display)', fontStyle: 'italic', color: 'var(--fg)', marginBottom: 36 }}>
              On a clear morning in April, a small camera crew followed Tribal Chairman Tom Little
              Bear Nason up a steep ridge above the Pacific — the same ridge his ancestors walked
              for thousands of years.
            </p>
            <p>
              The CBS Sunday Morning piece, which aired on April 14, focused on the return of 1,199
              acres of ancestral Esselen homeland in the Big Sur backcountry — a transfer that took
              place in 2020 through a partnership with Western Rivers Conservancy and the California
              Natural Resources Agency. (Referencial)
            </p>
            <p>
              The segment, produced by correspondent Lee Cowan's team, traced the long arc of
              Esselen presence in these mountains — from time immemorial, through the mission era,
              through the silent decades of the 19th and 20th centuries, to the present-day work of
              return. (Referencial)
            </p>

            <h3 className="h-m" style={{ marginTop: 48, marginBottom: 16 }}>"We did not vanish"</h3>
            <p>
              Chairman Nason spoke at length about the misconception that the Esselen people had
              disappeared — a story many California schoolchildren grew up hearing. "We did not
              vanish," he told the correspondent. "We were never gone. We just weren't being
              looked at." (Referencial)
            </p>

            {/* Pull quote */}
            <div style={{ borderLeft: '3px solid var(--terracotta)', padding: '8px 0 8px 32px', margin: '48px 0' }}>
              <div className="quote" style={{ fontSize: 30 }}>
                <span className="qmark">"</span>
                It feels like a homecoming. To put our feet on this ground, to sing here again — that is the work of a lifetime, and it begins now.
              </div>
              <div className="quote-attr" style={{ marginTop: 16 }}>Tom Little Bear Nason · Chairman (Referencial)</div>
            </div>

            <h3 className="h-m" style={{ marginTop: 48, marginBottom: 16 }}>What comes next</h3>
            <p>
              The Tribe is now turning attention to the Tularcitos Creek Parcels of the Historic
              Rana Creek Ranch — a new 2026 campaign to protect cultural sites, oak woodlands, and
              riparian zones from being divided into luxury estates and vineyards.
            </p>
            <p>
              The CBS feature closed with a quiet image of Chairman Nason standing alone on a high
              meadow, looking out toward the Pacific. The camera held the shot for a long beat.
              No words were needed. (Referencial)
            </p>

            <div style={{ marginTop: 56, padding: 24, background: 'var(--bg-2)', borderRadius: 14, display: 'flex', gap: 20, alignItems: 'center' }}>
              <div style={{ flex: 1 }}>
                <div className="idx">WATCH</div>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 22, marginTop: 6 }}>The full CBS Sunday Morning segment</div>
                <div style={{ color: 'var(--fg-mute)', fontSize: 13, marginTop: 4 }}>Approximately 9 minutes. (Referencial)</div>
              </div>
              <button className="btn">Watch on CBS →</button>
            </div>
          </div>
        </div>
      </section>

      {/* Related */}
      <section className="section" style={{ background: 'var(--bg-2)' }}>
        <div className="container-wide">
          <SecHead eyebrow="Keep reading" title="More from Esselen news." />
          <div className="grid grid-3">
            {[
              { cat: 'Announcement', date: 'MAR 28 · 2026', title: 'Conservation easement registered on reclaimed lands', img: window.__resources.r_img_04 },
              { cat: 'Field report', date: 'FEB 06 · 2026', title: 'Winter season: cultural burn pilot on the upper ridges', img: window.__resources.r_img_09 },
              { cat: 'Community', date: 'JAN 12 · 2026', title: 'Youth language circle gathers for winter solstice', img: window.__resources.r_img_08 },
            ].map((n, i) => (
              <article key={i} className="news-card" onClick={() => navigate('projects/news')} style={{ cursor: 'pointer' }}>
                <div className="nc-img"><img src={n.img} alt="" /></div>
                <div className="nc-cat">{n.cat} · {n.date}</div>
                <div className="nc-title">{n.title}</div>
              </article>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

/* ======================================================================
   EVENT DETAIL — Annual Pelican Gathering
   ====================================================================== */
function EventDetail() {
  return (
    <div className="route-enter">
      <BackToList to="projects/events" label="All events" />

      <section style={{ padding: '40px 0 0' }}>
        <div className="container-wide">
          <div className="grid grid-2" style={{ gap: 56, alignItems: 'center' }}>
            <div>
              <span className="tag"><span className="tdot"></span>Gathering (Referencial)</span>
              <h1 className="h-xl" style={{ marginTop: 22, maxWidth: '14ch' }}>
                Annual Pelican <em className="italic-display">Gathering.</em>
              </h1>
              <p className="lede" style={{ marginTop: 24 }}>
                Our largest annual community gathering — open to members and invited guests, with
                song, story, food, and a meeting under the oaks. A day for the Esselen community
                to come together as one.
              </p>

              <div style={{ display: 'flex', gap: 40, marginTop: 36, flexWrap: 'wrap' }}>
                <div>
                  <div style={{ fontFamily: 'var(--font-display)', fontSize: 72, lineHeight: 0.95 }}>22</div>
                  <div className="idx" style={{ marginTop: 4 }}>AUGUST 2026</div>
                </div>
                <div style={{ alignSelf: 'flex-end' }}>
                  <div style={{ fontFamily: 'var(--font-display)', fontSize: 24 }}>Saturday</div>
                  <div style={{ color: 'var(--fg-mute)', fontSize: 14, marginTop: 4 }}>10:00 AM – 4:00 PM</div>
                </div>
              </div>

              <div style={{ display: 'flex', gap: 12, marginTop: 36, flexWrap: 'wrap' }}>
                <button className="btn btn-clay">RSVP for the gathering →</button>
                <button className="btn btn-ghost">Add to calendar</button>
              </div>
            </div>
            <div style={{ borderRadius: 18, overflow: 'hidden' }}>
              <img src={window.__resources.r_img_06} alt="" style={{ width: '100%', height: 520, objectFit: 'cover' }} />
            </div>
          </div>
        </div>
      </section>

      {/* Meta strip */}
      <section style={{ padding: '64px 0 32px' }}>
        <div className="container-wide">
          <div className="grid grid-4" style={{ gap: 0, borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
            {[
              { l: 'When', v: 'Aug 22, 2026 · 10AM–4PM' },
              { l: 'Where', v: 'Pelican Ranch, Big Sur' },
              { l: 'Who', v: 'Members + invited guests' },
              { l: 'Cost', v: 'Free for members' },
            ].map((m, i) => (
              <div key={i} style={{ padding: '28px 32px', borderLeft: i > 0 ? '1px solid var(--line)' : 'none' }}>
                <div className="idx">{m.l}</div>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 22, marginTop: 6 }}>{m.v}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Agenda */}
      <section className="section">
        <div className="container">
          <div className="grid grid-2" style={{ gap: 56 }}>
            <div>
              <div className="eyebrow"><span className="dot"></span>Day of</div>
              <h2 className="h-l" style={{ marginTop: 18 }}>The shape of the day.</h2>
              <p className="lede" style={{ marginTop: 22 }}>
                A loose rhythm, not a strict schedule. Come for the whole day, or come for the part
                of it that calls to you.
              </p>
            </div>
            <div>
              {[
                { time: '10:00', t: 'Arrival & coffee', body: 'Park at the lower meadow. Walk up at your pace. Coffee, tea, and breakfast pastries laid out under the oak.' },
                { time: '11:00', t: 'Welcome & opening prayer', body: 'Chairman Nason opens the gathering. Elders share words. We sing together.' },
                { time: '12:30', t: 'Community lunch', body: 'A meal prepared by tribal members. Bring nothing — this part is on us.' },
                { time: '14:00', t: 'Stories & teachings', body: 'A circle of storytelling, including a teaching from this year\'s youth language cohort.' },
                { time: '15:30', t: 'Closing prayer & farewell', body: 'A short closing, and time to gather your things.' },
              ].map((s, i) => (
                <div key={i} style={{ display: 'grid', gridTemplateColumns: '80px 1fr', gap: 20, padding: '20px 0', borderTop: '1px solid var(--line)' }}>
                  <div style={{ fontFamily: 'var(--font-display)', fontSize: 24 }}>{s.time}</div>
                  <div>
                    <div style={{ fontFamily: 'var(--font-display)', fontSize: 20 }}>{s.t}</div>
                    <div style={{ color: 'var(--fg-soft)', marginTop: 6, fontSize: 15 }}>{s.body}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* What to bring */}
      <section className="section" style={{ background: 'var(--bg-2)' }}>
        <div className="container">
          <SecHead eyebrow="Practical" title="What to bring (and not bring)." />
          <div className="grid grid-2" style={{ gap: 32 }}>
            <div>
              <div className="idx" style={{ marginBottom: 14 }}>BRING</div>
              <ul className="bullets">
                <li>A water bottle and sun protection — Big Sur sun is no joke.</li>
                <li>Layers — the marine air rolls in by mid-afternoon.</li>
                <li>Comfortable shoes for walking on uneven ground.</li>
                <li>An open heart. A quiet voice. Time.</li>
              </ul>
            </div>
            <div>
              <div className="idx" style={{ marginBottom: 14 }}>PLEASE LEAVE AT HOME</div>
              <ul className="bullets">
                <li>Cameras, drones, or recording equipment.</li>
                <li>Anything you wouldn't bring into a ceremony.</li>
                <li>Strong scents (perfume, smoke).</li>
                <li>Hurry. We move on the time the day asks for.</li>
              </ul>
            </div>
          </div>
        </div>
      </section>

      {/* Map placeholder + RSVP CTA */}
      <section className="section">
        <div className="container-wide">
          <div className="grid grid-2" style={{ gap: 24 }}>
            <div className="ph" style={{ aspectRatio: '4/3', borderRadius: 18, fontSize: 13 }}>
              Map — Pelican Ranch, Big Sur (drop in real map)
            </div>
            <div style={{ background: 'var(--terracotta)', color: '#fff', borderRadius: 18, padding: 'clamp(32px, 4vw, 56px)', display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
              <div className="eyebrow" style={{ color: 'rgba(255,255,255,0.75)' }}><span className="dot" style={{ background: '#fff' }}></span>RSVP required</div>
              <div>
                <h3 className="h-l" style={{ color: '#fff' }}>Let us know you're coming so we can plan the meal.</h3>
                <p style={{ marginTop: 16, color: 'rgba(255,255,255,0.86)' }}>
                  RSVPs close August 10. If you have access needs or are bringing dependents, please
                  note it in the form so we can prepare.
                </p>
                <button className="btn" style={{ background: '#fff', color: 'var(--terracotta)', borderColor: '#fff', marginTop: 24 }}>RSVP →</button>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

/* ======================================================================
   JOB DETAIL — Cultural Resources Field Lead
   ====================================================================== */
function JobDetail() {
  return (
    <div className="route-enter">
      <BackToList to="projects/jobs" label="All openings" />

      <section style={{ padding: '40px 0 0' }}>
        <div className="container">
          <div style={{ display: 'flex', gap: 12, alignItems: 'center', flexWrap: 'wrap' }}>
            <span className="tag tag-sage"><span className="tdot"></span>Now hiring</span>
            <span className="tag"><span className="tdot"></span>Full-time</span>
            <span className="tag"><span className="tdot"></span>Esselen / tribal preference</span>
          </div>
          <h1 className="h-xl" style={{ marginTop: 22, maxWidth: '18ch' }}>
            Cultural Resources <em className="italic-display">Field Lead.</em>
          </h1>
          <div style={{ display: 'flex', gap: 28, marginTop: 24, color: 'var(--fg-mute)', fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: '0.14em', textTransform: 'uppercase', flexWrap: 'wrap' }}>
            <span>📍 Big Sur · On tribal lands</span>
            <span>📅 Posted May 10, 2026</span>
            <span>🕐 Open until filled</span>
          </div>
        </div>
      </section>

      {/* Body */}
      <section className="section">
        <div className="container">
          <div className="grid grid-2" style={{ gap: 56, alignItems: 'flex-start' }}>
            <div className="body-prose" style={{ fontSize: 17, lineHeight: 1.65 }}>
              <h3 className="h-m" style={{ marginTop: 0, marginBottom: 14 }}>About the role</h3>
              <p>
                The Cultural Resources Field Lead is the senior on-the-ground steward of the Esselen
                Tribe's reclaimed Big Sur lands. Reporting to the Tribal Council and working closely
                with elders, the Field Lead shapes day-to-day stewardship decisions, leads the
                seasonal field crew, and represents the Tribe to agency and partner organizations.
              </p>
              <p>
                This is a senior, year-round role with significant autonomy and significant trust.
                You will be the eyes, hands, and voice of the Tribe on land that has been waiting
                250 years for our return. (Referencial)
              </p>

              <h3 className="h-m" style={{ marginTop: 40, marginBottom: 14 }}>What you'll do</h3>
              <ul className="bullets">
                <li>Lead seasonal restoration work: native plant restoration, invasive removal, prescribed cultural burns.</li>
                <li>Coordinate and supervise a small field crew (3–5 people, seasonal).</li>
                <li>Maintain cultural site records in collaboration with the Tribal Historic Preservation Officer.</li>
                <li>Build and maintain relationships with neighbors, agencies (CAL FIRE, USFS), and research partners.</li>
                <li>Host youth land camps and adult apprenticeships, in partnership with the Educational Committee.</li>
                <li>Report monthly to the Tribal Council; flag cultural and ecological concerns promptly.</li>
              </ul>

              <h3 className="h-m" style={{ marginTop: 40, marginBottom: 14 }}>You should have</h3>
              <ul className="bullets">
                <li>Significant field experience in California ecological restoration, fire, or land stewardship.</li>
                <li>The judgment to make hard, often-lonely decisions on the land.</li>
                <li>A working understanding of Indigenous land relationships — and humility to learn ours specifically.</li>
                <li>The body for steep, all-weather, multi-day field work.</li>
                <li>Strong written communication (you'll be reporting to the Council).</li>
                <li><strong>Esselen tribal members are strongly encouraged to apply.</strong> Tribal preference applies where permitted by law.</li>
              </ul>

              <h3 className="h-m" style={{ marginTop: 40, marginBottom: 14 }}>The shape of compensation</h3>
              <p>
                Competitive salary commensurate with experience, plus medical, dental, retirement
                contribution, vehicle, and equipment. Discussed in interview. (Referencial)
              </p>

              <h3 className="h-m" style={{ marginTop: 40, marginBottom: 14 }}>How to apply</h3>
              <p>
                Send a single PDF to <strong>tribaladmin@esselentribe.org</strong> with the subject
                line "Cultural Resources Field Lead — [Your Name]." Include a brief letter of
                interest, a resume or CV, and (optionally) the names of two people who can speak
                to your field work.
              </p>
              <p>
                Esselen tribal members may also indicate enrollment in their letter. We respond
                within three weeks.
              </p>

              <button className="btn btn-clay" style={{ marginTop: 24 }}>Email your application →</button>
            </div>

            {/* Sidebar */}
            <div style={{ position: 'sticky', top: 100, alignSelf: 'flex-start', display: 'flex', flexDirection: 'column', gap: 16 }}>
              <div style={{ background: 'var(--deep)', color: 'var(--bg)', borderRadius: 18, padding: 28 }}>
                <div className="eyebrow" style={{ color: 'rgba(242,235,221,0.6)' }}><span className="dot"></span>At a glance</div>
                <div style={{ marginTop: 16, display: 'flex', flexDirection: 'column', gap: 14 }}>
                  {[
                    { l: 'Department', v: 'Cultural Resources' },
                    { l: 'Reports to', v: 'Tribal Council' },
                    { l: 'Employment type', v: 'Full-time, year-round' },
                    { l: 'Location', v: 'Big Sur · On Tribal lands' },
                    { l: 'Travel', v: 'Local — significant time outdoors' },
                    { l: 'Start date', v: 'Negotiable, late 2026' },
                  ].map((r, i) => (
                    <div key={i} style={{ paddingBottom: 14, borderBottom: i < 5 ? '1px solid rgba(255,255,255,0.12)' : 'none' }}>
                      <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'rgba(242,235,221,0.5)' }}>{r.l}</div>
                      <div style={{ fontFamily: 'var(--font-display)', fontSize: 18, marginTop: 4, color: '#fff' }}>{r.v}</div>
                    </div>
                  ))}
                </div>
              </div>

              <div className="card">
                <div className="eyebrow"><span className="dot"></span>About the Tribe</div>
                <p style={{ color: 'var(--fg-soft)', margin: 0, fontSize: 14 }}>
                  The Esselen Tribe of Monterey County is a sovereign Indigenous nation — and a 501(c)(3) —
                  working to preserve cultural heritage and steward ancestral lands in Monterey County.
                </p>
                <a onClick={() => navigate('about/our-history')} style={{ color: 'var(--terracotta)', fontWeight: 500, fontSize: 14, cursor: 'pointer' }}>Read more →</a>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

/* ======================================================================
   EDUCATION DETAIL — Youth Land Camps
   ====================================================================== */
function EducationDetail() {
  return (
    <div className="route-enter">
      <BackToList to="projects/education" label="All programs" />

      <FullImage src={window.__resources.r_img_10} height="64vh" />

      <section style={{ padding: '40px 0 0' }}>
        <div className="container">
          <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
            <span className="tag"><span className="tdot"></span>Ages 8–18</span>
            <span className="tag tag-sage"><span className="tdot"></span>Now enrolling</span>
          </div>
          <h1 className="h-xl" style={{ marginTop: 22, maxWidth: '14ch' }}>
            Youth Land <em className="italic-display">Camps.</em>
          </h1>
          <p className="lede" style={{ marginTop: 28, maxWidth: '64ch' }}>
            Multi-day camps on the reclaimed Esselen lands — basketry, gathering, fire, language,
            and play. Held three times a year, free for Esselen members and partner-tribe youth.
            (Referencial)
          </p>
        </div>
      </section>

      {/* Three sessions */}
      <section className="section">
        <div className="container-wide">
          <SecHead eyebrow="2026 sessions" title="Three camps. Three seasons." />
          <div className="grid grid-3" style={{ gap: 4 }}>
            {[
              { mo: 'JUN', day: '14–18', t: 'Summer session', body: 'Five days. Basketry with elders, plant gathering walks, evening fire circle.', spots: '8 spots remaining' },
              { mo: 'SEP', day: '20–22', t: 'Fall session', body: 'A long weekend at acorn harvest. Gathering, processing, and storytelling.', spots: '14 spots remaining' },
              { mo: 'DEC', day: '27–30', t: 'Winter session', body: 'Solstice gathering. Language work, song, indoor crafts, and quiet.', spots: 'Waitlist opens July' },
            ].map((s, i) => (
              <div key={i} style={{ background: 'var(--bg)', border: '1px solid var(--line)', padding: 32, display: 'flex', flexDirection: 'column', gap: 14, minHeight: 320 }}>
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 18 }}>
                  <div className="idx">{s.mo} 2026</div>
                  <div style={{ fontFamily: 'var(--font-display)', fontSize: 56, lineHeight: 0.9 }}>{s.day}</div>
                </div>
                <h3 className="h-m" style={{ marginTop: 18 }}>{s.t}</h3>
                <p style={{ color: 'var(--fg-soft)', margin: 0 }}>{s.body}</p>
                <div style={{ marginTop: 'auto', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                  <span className="idx">{s.spots}</span>
                  <button className="btn btn-ghost btn-sm">Enroll →</button>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* What you'll do */}
      <section className="section" style={{ background: 'var(--bg-2)' }}>
        <div className="container">
          <div className="grid grid-2" style={{ gap: 56 }}>
            <div>
              <div className="eyebrow"><span className="dot"></span>What you'll do</div>
              <h2 className="h-l" style={{ marginTop: 18 }}>Days on the land.</h2>
              <p className="lede" style={{ marginTop: 22 }}>
                No phones. No screens. Just the land, the elders, and the company of other young
                Esselen and partner-tribe youth.
              </p>
            </div>
            <ul className="bullets">
              <li><strong>Plant gathering walks</strong> with elders — learning what to take, what to leave.</li>
              <li><strong>Basketry & weaving</strong> with sedge, willow, and redbud from the lands.</li>
              <li><strong>Cooking traditional foods</strong> on open fire — acorn, salmon, herbs.</li>
              <li><strong>Esselen language</strong> circles, songs, and simple phrases.</li>
              <li><strong>Storytelling</strong> at fire circle, every evening.</li>
              <li><strong>Time for swimming, hiking,</strong> and quiet on your own.</li>
              <li><strong>A closing ceremony</strong> on the last day, with parents and family invited.</li>
            </ul>
          </div>
        </div>
      </section>

      {/* Logistics + Apply */}
      <section className="section">
        <div className="container-wide">
          <div className="grid grid-2" style={{ gap: 24 }}>
            <div className="card" style={{ background: 'var(--bg)', minHeight: 320 }}>
              <div className="eyebrow"><span className="dot"></span>Practical</div>
              <h3 className="h-m">What's included</h3>
              <ul className="bullets" style={{ marginTop: 8 }}>
                <li>All meals (prepared by tribal members)</li>
                <li>Tents, sleeping pads, and basic gear (bring your own bag)</li>
                <li>Round-trip transportation from Monterey or Salinas</li>
                <li>Materials for all activities</li>
                <li>An elder mentor for the week</li>
              </ul>
              <div className="idx" style={{ marginTop: 16 }}>COST</div>
              <div style={{ fontFamily: 'var(--font-display)', fontSize: 32, marginTop: 4 }}>
                Free for Esselen + partner-tribe youth
              </div>
              <div style={{ color: 'var(--fg-soft)', fontSize: 14, marginTop: 4 }}>Need-based scholarships available for friends-of-tribe youth. (Referencial)</div>
            </div>
            <div style={{ background: 'var(--sage)', color: '#fff', borderRadius: 18, padding: 'clamp(32px, 4vw, 56px)', display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
              <div className="eyebrow" style={{ color: 'rgba(255,255,255,0.75)' }}><span className="dot" style={{ background: '#fff' }}></span>Enroll your young person</div>
              <div>
                <h3 className="h-l" style={{ color: '#fff' }}>Applications open February through April.</h3>
                <p style={{ marginTop: 16, color: 'rgba(255,255,255,0.86)' }}>
                  Email <strong>tribaladmin@esselentribe.org</strong> for the youth program packet
                  and enrollment form. Spots are limited; we contact families in priority order.
                </p>
                <div style={{ display: 'flex', gap: 10, marginTop: 24, flexWrap: 'wrap' }}>
                  <button className="btn" style={{ background: '#fff', color: 'var(--sage-dark)', borderColor: '#fff' }}>Request packet →</button>
                  <button className="btn btn-ghost" style={{ color: '#fff', borderColor: 'rgba(255,255,255,0.4)' }} onClick={() => navigate('contact')}>Contact us</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { NewsArticle, EventDetail, JobDetail, EducationDetail });
