/* Esselen Tribe — Home Page */

function HomePage() {
  return (
    <div className="route-enter">
      {/* Hero */}
      <section className="hero">
        <div className="hero-bg">
          <img src={window.__resources.r_hero_meta} alt="" />
        </div>
        <div className="hero-inner">
          <div className="hero-top">
            <div className="eyebrow" style={{ color: 'rgba(255,255,255,0.85)' }}>
              <span className="dot"></span>The Esselen Tribe of Monterey County
            </div>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.7)' }}>
              36.27° N &nbsp;·&nbsp; 121.81° W
            </div>
          </div>
          <div className="hero-headline">
            <div className="pre">We are still here</div>
            <h1 className="h-xxl" style={{ maxWidth: '14ch' }}>
              The first people of <em>Monterey&nbsp;County.</em>
            </h1>
          </div>
          <div className="hero-bottom">
            <div className="hero-meta">
              <span>EST. TIME IMMEMORIAL</span>
              <span>· 1,199 ACRES RECLAIMED</span>
              <span>· 13 HISTORIC VILLAGES</span>
              <span>· ESSELEN, RUMSEN, CHALONE, SUREÑO, CHUNCHUNES, GUATCHARRONE</span>
            </div>
            <div className="hero-actions">
              <button className="btn" onClick={() => navigate('about/reclaim')}>
                Reclaim & Restore <span className="arrow">→</span>
              </button>
              <button className="btn btn-ghost" onClick={() => navigate('about/history')}>
                Our history
              </button>
            </div>
          </div>
        </div>
      </section>

      {/* Marquee */}
      <Marquee items={[
        'Achasta', 'Chalon', 'Echilat', 'Ensen', 'Excelen', 'Esslenajan', 'Ixchenta', 'Jojopan', 'Kuchun', 'Pachepas', 'Sargenta-Ruc', 'Soccoronda', 'Tucutnut'
      ]} />

      {/* Intro statement */}
      <section className="section">
        <div className="container">
          <div className="split">
            <div>
              <div className="eyebrow"><span className="dot"></span>A people, a place</div>
              <h2 className="h-xl" style={{ marginTop: 18 }}>
                Bound to these mountains for <em className="italic-display">ten thousand years.</em>
              </h2>
            </div>
            <div className="body-prose">
              <p className="lede">
                The Esselen are an Indigenous people whose homeland stretches across the Santa
                Lucia Mountains, the Carmel and Big Sur watersheds, and the central California coast.
              </p>
              <p style={{ marginTop: 16 }}>
                The Mission of the ETMC is to preserve and protect our cultural heritage and
                ancestral sacred sites of the Esselen, Rumsen, Chalone, Sureño, Chunchunes and
                Guatcharrone peoples — including the historic villages of Monterey County —
                while building a sustainable future for generations to come.
              </p>
              <div style={{ display: 'flex', gap: 12, marginTop: 28 }}>
                <button className="btn btn-clay" onClick={() => navigate('membership/becoming')}>
                  Become a member <span className="arrow">→</span>
                </button>
                <button className="btn btn-ghost" onClick={() => navigate('contact')}>
                  Get in touch
                </button>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Featured: Reclaim & Restore */}
      <section className="section-tight">
        <div className="container-wide">
          <div className="grid grid-2" style={{ gap: 32, alignItems: 'stretch' }}>
            <div style={{ borderRadius: 22, overflow: 'hidden', minHeight: 520 }}>
              <img src={window.__resources.r_img_04} alt="" style={{ width: '100%', height: '100%', minHeight: 520, objectFit: 'cover' }} />
            </div>
            <div style={{ background: 'var(--terracotta)', color: '#fff', borderRadius: 22, padding: 'clamp(40px, 4vw, 64px)', display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
              <div>
                <div className="eyebrow" style={{ color: 'rgba(255,255,255,0.75)' }}>
                  <span className="dot" style={{ background: '#fff' }}></span>Featured initiative
                </div>
                <h2 className="h-xl" style={{ color: '#fff', marginTop: 18 }}>
                  Reclaim & Restore Ancestral Lands
                </h2>
                <p style={{ marginTop: 22, fontSize: 18, lineHeight: 1.55, color: 'rgba(255,255,255,0.88)', maxWidth: '38ch' }}>
                  In 2026, we are working to reclaim the Tularcitos Creek Parcels of the Historic
                  Rana Creek Ranch — a breathtaking, ecologically critical area full of cultural sites,
                  oak woodlands, and sensitive riparian zones. Without support, this sacred land
                  risks being divided into luxury estates and vineyards.
                </p>
              </div>
              <div style={{ marginTop: 32 }}>
                <div style={{ display: 'flex', gap: 40, marginBottom: 28, flexWrap: 'wrap' }}>
                  <div>
                    <div style={{ fontFamily: 'var(--font-display)', fontSize: 56, lineHeight: 1 }}>1,199</div>
                    <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', marginTop: 6, color: 'rgba(255,255,255,0.7)' }}>Acres reclaimed</div>
                  </div>
                  <div>
                    <div style={{ fontFamily: 'var(--font-display)', fontSize: 56, lineHeight: 1 }}>250</div>
                    <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', marginTop: 6, color: 'rgba(255,255,255,0.7)' }}>Years since</div>
                  </div>
                </div>
                <button className="btn" style={{ background: '#fff', color: 'var(--terracotta)', borderColor: '#fff' }} onClick={() => navigate('about/reclaim')}>
                  Read the story <span className="arrow">→</span>
                </button>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Announcements */}
      <section className="section">
        <div className="container-wide">
          <SecHead
            eyebrow="Announcements"
            title="What's happening now"
            lede="Gatherings, openings, and notices from the Esselen community."
            action={<button className="btn btn-ghost btn-sm" onClick={() => navigate('projects/news')}>All updates →</button>}
          />
          <div className="grid grid-3">
            {[
              { cat: 'Gathering', date: 'AUG 22 · 2026', title: 'Annual Pelican Gathering at Pelican Ranch', body: 'Open to members and invited guests. Songs, story, and a meal under the oaks.', img: window.__resources.r_img_06, go: 'projects/events/annual-pelican-gathering' },
              { cat: 'Open call', date: 'POSTED MAY 10', title: 'Hiring: Cultural Resources Field Lead', body: 'Help steward our reclaimed lands and shape ongoing restoration work.', img: window.__resources.r_img_07, go: 'projects/jobs/cultural-resources-field-lead' },
              { cat: 'In the news', date: 'APR 2026', title: 'CBS Sunday Morning visits the Big Sur lands', body: 'A national spotlight on the return of ancestral lands and what comes next.', img: window.__resources.r_img_02, go: 'projects/news/cbs-sunday-morning' },
            ].map((n, i) => (
              <article key={i} className="news-card" onClick={() => navigate(n.go)} 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>
                <p style={{ color: 'var(--fg-soft)', margin: 0 }}>{n.body}</p>
                <span style={{ marginTop: 8, fontWeight: 500, fontSize: 14 }}>Read more →</span>
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* Three pillars */}
      <section className="section" style={{ background: 'var(--bg-2)' }}>
        <div className="container-wide">
          <SecHead
            eyebrow="Three commitments"
            title="What we tend to."
            lede="Our work falls into three quietly-related practices — none of them new."
          />
          <div className="grid grid-3" style={{ gap: 4 }}>
            {[
              { num: '01', title: 'Land', body: 'Returning, restoring, and stewarding ancestral places — from Big Sur to the inland watersheds — in the slow, careful way they ask to be tended.', link: 'about/reclaim', linkLabel: 'Conservation project' },
              { num: '02', title: 'Culture', body: 'Carrying forward language, song, basketry, and ceremony — and teaching the next generation what it means to be Esselen today.', link: 'departments/cultural', linkLabel: 'Cultural Resources' },
              { num: '03', title: 'Community', body: 'Governing ourselves, supporting our families, opening doors to members, neighbors, scholars, and friends of the land.', link: 'membership/becoming', linkLabel: 'Become a member' },
            ].map((p, i) => (
              <div key={i} style={{ background: 'var(--bg)', padding: 'clamp(32px, 3vw, 48px)', minHeight: 360, display: 'flex', flexDirection: 'column', gap: 18 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                  <span className="idx">{p.num}</span>
                  <span className="idx">— Pillar</span>
                </div>
                <h3 className="h-l" style={{ marginTop: 12 }}>{p.title}</h3>
                <p style={{ color: 'var(--fg-soft)' }}>{p.body}</p>
                <a onClick={() => navigate(p.link)} style={{ marginTop: 'auto', color: 'var(--terracotta)', fontWeight: 500, cursor: 'pointer' }}>
                  {p.linkLabel} →
                </a>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Land Acknowledgement */}
      <LandAck />

      {/* Quote */}
      <section className="section">
        <div className="container" style={{ maxWidth: 980 }}>
          <div className="quote">
            <span className="qmark">“</span>
            We did not vanish. We were never gone. The land remembers us, and we remember the land. Every restored acre, every word of our language spoken aloud, every child taught to gather and to thank — these are how a people continue.
          </div>
          <div className="quote-attr">Tom Little Bear Nason · Chairman</div>
        </div>
      </section>

      {/* Community Partners */}
      <section className="section" style={{ background: 'var(--bg-2)' }}>
        <div className="container-wide">
          <SecHead
            eyebrow="Community partners"
            title="Walking with us."
            lede="Organizations, agencies, and neighbors lending their support to the long work of restoration and revitalization."
          />
          <div className="grid grid-4">
            {[
              'Western Rivers Conservancy',
              'Big Sur Land Trust',
              'California State Parks',
              'Resources Legacy Fund',
              'U.S. Forest Service',
              'Monterey County Parks',
              'Save the Redwoods League',
              'Pelican Network',
            ].map((p, i) => (
              <div key={i} className="partner-card">{p}</div>
            ))}
          </div>
          <div style={{ marginTop: 40, textAlign: 'center' }}>
            <button className="btn btn-ghost" onClick={() => navigate('contact')}>Become a partner →</button>
          </div>
        </div>
      </section>

      {/* CTA strip */}
      <section className="section">
        <div className="container-wide">
          <div className="grid grid-2" style={{ gap: 24 }}>
            <div style={{ background: 'var(--sage)', color: '#fff', borderRadius: 22, padding: 'clamp(36px, 4vw, 56px)', display: 'flex', flexDirection: 'column', justifyContent: 'space-between', minHeight: 320 }}>
              <div className="eyebrow" style={{ color: 'rgba(255,255,255,0.7)' }}>
                <span className="dot" style={{ background: '#fff' }}></span>Stay close
              </div>
              <div>
                <h3 className="h-l" style={{ color: '#fff' }}>Join our newsletter for announcements, gatherings, and stories from the lands.</h3>
                <form style={{ display: 'flex', gap: 8, marginTop: 28 }} onSubmit={(e) => e.preventDefault()}>
                  <input className="" placeholder="you@email.com" style={{ flex: 1, padding: '14px 18px', borderRadius: 999, border: 'none', font: 'inherit' }} />
                  <button className="btn" style={{ background: 'var(--deep)', color: '#fff', borderColor: 'var(--deep)' }}>Subscribe</button>
                </form>
              </div>
            </div>
            <div style={{ background: 'var(--deep)', color: 'var(--bg)', borderRadius: 22, padding: 'clamp(36px, 4vw, 56px)', display: 'flex', flexDirection: 'column', justifyContent: 'space-between', minHeight: 320 }}>
              <div className="eyebrow" style={{ color: 'rgba(242,235,221,0.6)' }}>
                <span className="dot"></span>Support the work
              </div>
              <div>
                <h3 className="h-l" style={{ color: '#fff' }}>Every dollar goes toward land restoration, language work, and our youth.</h3>
                <div style={{ display: 'flex', gap: 10, marginTop: 28, flexWrap: 'wrap' }}>
                  <button className="btn btn-clay" onClick={() => navigate('donate')}>Make a donation →</button>
                  <button className="btn btn-ghost" style={{ color: '#fff', borderColor: 'rgba(255,255,255,0.4)' }} onClick={() => navigate('membership/becoming')}>Become a member</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

window.HomePage = HomePage;
