/* About sub-pages: Reclaim & Restore, Esselen History, Sacred Land, Our History, Milestones */

const ABOUT_SUBNAV = [
  { id: 'about/reclaim', label: 'Reclaim & Restore' },
  { id: 'about/history', label: 'Esselen History' },
  { id: 'about/sacred', label: 'Sacred Land' },
  { id: 'about/our-history', label: 'Our History' },
  { id: 'about/milestones', label: 'Milestones' },
];

function AboutLanding() {
  return (
    <div className="route-enter">
      <PageHead
        trail="ABOUT US"
        title="A people, a continuance."
        lede="Five doorways into who the Esselen are: the long story of these lands, the story we tell about ourselves, and the work of return that is shaping our present."
      />
      <SubNav items={ABOUT_SUBNAV} active="" />
      <section className="section">
        <div className="container-wide">
          <div className="grid grid-2" style={{ gap: 32 }}>
            {[
              { id: 'about/reclaim', label: 'Reclaim & Restore Ancestral Lands', body: 'In 2020, 1,199 acres of our homeland returned to Esselen hands — and a long stewardship began.', img: window.__resources.r_img_04 },
              { id: 'about/history', label: 'Esselen History', body: 'Ten thousand years of presence in the Santa Lucia Mountains and the coast.', img: window.__resources.r_img_01 },
              { id: 'about/sacred', label: 'Sacred Land', body: 'The springs, oak groves, and gathering places that have always asked to be tended.', img: window.__resources.r_img_05 },
              { id: 'about/our-history', label: 'Our History', body: 'A chronicle, written by the people who lived it.', img: window.__resources.r_img_03 },
              { id: 'about/milestones', label: 'Milestones', body: 'Markers on the long road of recognition, return, and renewal.', img: window.__resources.r_img_09 },
            ].map((c, i) => (
              <a key={i} onClick={() => navigate(c.id)} style={{ cursor: 'pointer' }}>
                <div className="card" style={{ background: 'var(--bg-2)', minHeight: 340 }}>
                  <div className="card-img"><img src={c.img} alt="" /></div>
                  <div className="idx">0{i+1} —</div>
                  <h3 className="h-m">{c.label}</h3>
                  <p style={{ color: 'var(--fg-soft)', margin: 0 }}>{c.body}</p>
                  <span style={{ marginTop: 'auto', color: 'var(--terracotta)', fontWeight: 500 }}>Open →</span>
                </div>
              </a>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

function Reclaim() {
  return (
    <div className="route-enter">
      <PageHead trail="ABOUT — RECLAIM & RESTORE" title="Reclaim & Restore Ancestral Lands"
        lede="The Esselen Tribe is actively working to reclaim ancestral lands — from the 2020 return of Big Sur lands to the current 2026 campaign to protect the Tularcitos Creek Parcels of Historic Rana Creek Ranch." />
      <SubNav items={ABOUT_SUBNAV} active="about/reclaim" />

      <FullImage src={window.__resources.r_img_04} />

      <section className="section">
        <div className="container">
          <div className="split">
            <div>
              <div className="eyebrow"><span className="dot"></span>2026 campaign</div>
              <h2 className="h-l" style={{ marginTop: 18 }}>
                The Tularcitos Creek Parcels of <em className="italic-display">Historic Rana Creek Ranch.</em>
              </h2>
            </div>
            <div className="body-prose">
              <p className="lede">
                In 2026, we continue our mission to reclaim the Tularcitos Creek Parcels of the
                Historic Rana Creek Ranch — a breathtaking and ecologically critical area full of
                cultural sites, majestic oak woodlands, and sensitive riparian zones.
              </p>
              <p>
                Without support, this sacred land risks being divided into luxury estates and
                vineyards. Together, we can restore these lands for ceremonies, ecological
                preservation, and education for the broader community.
              </p>
              <button className="btn btn-clay" onClick={() => navigate('donate')} style={{ marginTop: 8 }}>
                Support this campaign →
              </button>
            </div>
          </div>
        </div>
      </section>

      <section className="section" style={{ background: 'var(--bg-2)' }}>
        <div className="container">
          <div className="split">
            <div>
              <div className="eyebrow"><span className="dot"></span>2020 land return</div>
              <h2 className="h-l" style={{ marginTop: 18 }}>
                After two and a half centuries, the land came <em className="italic-display">home.</em>
              </h2>
            </div>
            <div className="body-prose">
              <p className="lede">
                The 1,199-acre property in the Big Sur backcountry — acquired through a partnership
                with Western Rivers Conservancy and funded by the California Natural Resources Agency —
                was the first such return in the Tribe's recorded modern history.
              </p>
              <p>
                Stewardship plans now guide habitat restoration, controlled cultural burns,
                trail and access decisions, and the deliberate return of Esselen presence
                to a place that has missed us as much as we have missed it.
              </p>
            </div>
          </div>
        </div>
      </section>

      <section className="section" style={{ background: 'var(--bg-2)' }}>
        <div className="container-wide">
          <SecHead eyebrow="By the numbers" title="The shape of the work" />
          <div className="grid grid-4">
            <div className="stat"><span className="stat-num">1,199</span><span className="stat-label">Acres returned</span></div>
            <div className="stat"><span className="stat-num">250</span><span className="stat-label">Years since last Esselen stewardship</span></div>
            <div className="stat"><span className="stat-num">38</span><span className="stat-label">Documented cultural sites identified</span></div>
            <div className="stat"><span className="stat-num">12</span><span className="stat-label">Indigenous plant species under restoration</span></div>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container-wide">
          <SecHead eyebrow="Phases" title="A long-term stewardship plan" />
          <div className="grid grid-3">
            {[
              { n: 'Phase 01', t: 'Assess & Listen', body: 'Cultural sites mapped, watershed baseline data gathered, and elders walking the land first.' },
              { n: 'Phase 02', t: 'Restore', body: 'Native plant restoration, removal of invasive species, prescribed cultural burns, and the rebuilding of a ceremonial meeting place.' },
              { n: 'Phase 03', t: 'Tend in perpetuity', body: 'A standing Cultural Resources field team, intergenerational youth programs, and a member-led conservation easement.' },
            ].map((p, i) => (
              <div key={i} className="card" style={{ minHeight: 240 }}>
                <div className="idx">{p.n}</div>
                <h3 className="h-m">{p.t}</h3>
                <p style={{ color: 'var(--fg-soft)', margin: 0 }}>{p.body}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section" style={{ background: 'var(--bg-2)' }}>
        <div className="container">
          <div className="quote">
            <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">Esselen Tribal Council, July 2020</div>
        </div>
      </section>

      <CTAStrip />
    </div>
  );
}

function EsselenHistory() {
  return (
    <div className="route-enter">
      <PageHead trail="ABOUT — ESSELEN HISTORY" title="Esselen History"
        lede="The long arc of an Indigenous people in the central California coast — before contact, through the mission era, and into a present we are still writing." />
      <SubNav items={ABOUT_SUBNAV} active="about/history" />

      <section className="section">
        <div className="container-wide">
          <div className="grid grid-3" style={{ gap: 0 }}>
            <div style={{ padding: 32, borderRight: '1px solid var(--line)' }}>
              <div className="eyebrow"><span className="dot"></span>I.</div>
              <h3 className="h-m" style={{ marginTop: 12 }}>Before</h3>
              <p style={{ color: 'var(--fg-soft)' }}>
                The Mission of the ETMC is to preserve and protect our cultural heritage and
                ancestral sacred sites, namely of the Esselen, Rumsen, Chalone, Sureño, Chunchunes
                and Guatcharrone people, which includes the villages of Achasta, Chalon, Echilat,
                Ensen, Excelen, Esslenajan, Ixchenta, Jojopan, Kuchun, Pachepas, Sargenta-Ruc,
                Soccoronda, and Tucutnut — located within sacred pre-historic and historic tribal
                lands of Monterey County, California.
              </p>
            </div>
            <div style={{ padding: 32, borderRight: '1px solid var(--line)' }}>
              <div className="eyebrow"><span className="dot"></span>II.</div>
              <h3 className="h-m" style={{ marginTop: 12 }}>The Mission Era</h3>
              <p style={{ color: 'var(--fg-soft)' }}>
                Beginning in 1770, Spanish colonization brought catastrophic disruption.
                Many Esselen people were taken into the missions of Carmel and Soledad,
                where culture, language, and family lines were forcibly reshaped.
                Despite enormous loss, our people endured — quietly, persistently, in family memory and place.
              </p>
            </div>
            <div style={{ padding: 32 }}>
              <div className="eyebrow"><span className="dot"></span>III.</div>
              <h3 className="h-m" style={{ marginTop: 12 }}>Continuance</h3>
              <p style={{ color: 'var(--fg-soft)' }}>
                Through the 19th and 20th centuries Esselen families remained in Monterey County,
                holding language fragments, songs, and lineage across generations.
                In the 1990s and 2000s the contemporary Esselen Tribe organized formally,
                pursued recognition, and began the work of cultural and land return that continues today.
              </p>
            </div>
          </div>
        </div>
      </section>

      <FullImage src={window.__resources.r_img_08} height="56vh" />

      <section className="section">
        <div className="container">
          <div className="split">
            <div>
              <div className="eyebrow"><span className="dot"></span>The Creation Story</div>
              <h2 className="h-l" style={{ marginTop: 18 }}>
                Eagle, Hummingbird, and Coyote — how the Esselen came to <em className="italic-display">be.</em>
              </h2>
            </div>
            <div className="body-prose">
              <p>
                In the time of flood, when all the world was water, Eagle stood on the summit of
                Pico Blanco — the high white peak — and looked across an endless sea. Eagle sent
                Hummingbird and Coyote out across the water, and together they brought back the
                seeds and stones from which the world began again.
              </p>
              <p>
                From that high white peak the Esselen people first stepped onto land — and have
                never left these mountains since. Pico Blanco remains a sacred place to our people,
                a center to which all directions return.
              </p>
              <button className="btn btn-ghost" onClick={() => navigate('about/sacred')} style={{ marginTop: 8 }}>
                Sacred lands →
              </button>
            </div>
          </div>
        </div>
      </section>

      <section className="section" style={{ background: 'var(--bg-2)' }}>
        <div className="container-wide">
          <SecHead eyebrow="Villages" title="The places we come from."
            lede="The ETMC preserves the heritage of peoples across these documented historic villages in Monterey County." />
          <div className="grid grid-3">
            {[
              ['Achasta', ''], ['Chalon', ''], ['Echilat', ''],
              ['Ensen', ''], ['Excelen', ''], ['Esslenajan', ''],
              ['Ixchenta', ''], ['Jojopan', ''], ['Kuchun', ''],
              ['Pachepas', ''], ['Sargenta-Ruc', ''], ['Soccoronda', ''],
              ['Tucutnut', ''],
            ].map(([name], i) => (
              <div key={i} style={{ padding: 28, background: 'var(--bg)', borderRadius: 16, border: '1px solid var(--line)' }}>
                <div className="idx">VILLAGE · {String(i+1).padStart(2,'0')}</div>
                <h3 className="h-m" style={{ marginTop: 12 }}>{name}</h3>
                <div style={{ color: 'var(--fg-mute)', fontSize: 14, marginTop: 6 }}>Monterey County, California</div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

function SacredLand() {
  return (
    <div className="route-enter">
      <PageHead trail="ABOUT — SACRED LAND" title="Sacred Land"
        lede="Specific places — peaks, springs, oak groves, river bends — that the Esselen recognize as sacred and that ask, in their own ways, to be tended." />
      <SubNav items={ABOUT_SUBNAV} active="about/sacred" />

      <section className="section">
        <div className="container-wide">
          <div className="grid grid-2" style={{ gap: 40, alignItems: 'center' }}>
            <div style={{ borderRadius: 22, overflow: 'hidden' }}>
              <img src={window.__resources.r_img_01} alt="" style={{ width: '100%', height: 540, objectFit: 'cover' }} />
            </div>
            <div className="body-prose">
              <div className="eyebrow"><span className="dot"></span>The center</div>
              <h2 className="h-l" style={{ marginTop: 18 }}>Pico Blanco</h2>
              <p>
                The high white peak — visible from much of our homeland — is the place where, in our
                Creation Story, Eagle stood through the flood and from which the Esselen first stepped
                onto land. Pico Blanco is a center. From it, all the rest is read.
              </p>
              <p>
                We continue to advocate for its long-term protection, and for cultural access by Esselen
                people and recognized stewardship partners.
              </p>
            </div>
          </div>
        </div>
      </section>

      <section className="section" style={{ background: 'var(--bg-2)' }}>
        <div className="container-wide">
          <SecHead eyebrow="A partial list" title="Other places we tend."
            lede="A sacred place is not a destination. These are some of the lands whose names we carry, whose stories we know, and whose protection we work toward. We do not share every location publicly, by intention." />
          <div className="grid grid-3">
            {[
              { t: 'Tassajara Hot Springs', b: 'Healing waters of the deep Santa Lucia. A place of bathing, prayer, and pilgrimage since before memory.' },
              { t: 'Ventana Wilderness Cones', b: 'High exposed places held in particular reverence — for sky-watching, fasting, and ceremonial preparation.' },
              { t: 'Tularcitos Ridge', b: 'A long oak-and-grass ridge with ceremonial gathering places and seasonal acorn camps.' },
              { t: 'Carmel River bends', b: 'Specific bends and gravel bars used for steelhead, ceremony, and seasonal living.' },
              { t: 'Esselen Springs', b: 'Cold-water springs in the upper drainages — known to our families by names we carry quietly.' },
              { t: 'Reclaimed lands (Big Sur)', b: 'The 1,199-acre property returned in 2020 holds multiple cultural sites now under tribal care.' },
            ].map((p, i) => (
              <div key={i} className="card">
                <div className="idx">SACRED · 0{i+1}</div>
                <h3 className="h-m">{p.t}</h3>
                <p style={{ color: 'var(--fg-soft)', margin: 0 }}>{p.b}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="ack">
            <div className="glyph"></div>
            <div className="eyebrow" style={{ color: 'rgba(242,235,221,0.6)' }}><span className="dot"></span>A request</div>
            <h2 className="h-l" style={{ color: '#fff', marginTop: 18, maxWidth: 740 }}>
              If you visit any of these lands — public or otherwise — go gently.
            </h2>
            <p style={{ maxWidth: 640, marginTop: 22, color: 'rgba(242,235,221,0.78)' }}>
              Leave nothing. Take nothing. Listen more than you speak. Sacred places are not improved by visitors — they are protected by neighbors. We invite you to be a neighbor.
            </p>
          </div>
        </div>
      </section>
    </div>
  );
}

function OurHistory() {
  return (
    <div className="route-enter">
      <PageHead trail="ABOUT — OUR HISTORY" title="Our History"
        lede="A chronicle of the modern Esselen Tribe — the families, councils, and decades that brought us to today." />
      <SubNav items={ABOUT_SUBNAV} active="about/our-history" />
      <section className="section">
        <div className="container">
          <div className="body-prose" style={{ maxWidth: 760 }}>
            <p className="lede">
              The contemporary Esselen Tribe of Monterey County is the modern political and cultural
              body of Esselen-descended families who have remained in this region since the mission era
              and before. Our history is one of quiet survival, intentional re-organization, and
              determined return.
            </p>
            <p>
              By the late 20th century, a number of Esselen families began working together to formalize
              tribal governance, document genealogies, and rebuild ceremonial life. We organized as a
              non-profit, held our first council elections, and began the long process of being seen
              and heard — by neighbors, by the state, by the federal government, and by ourselves.
            </p>
            <p>
              We continue to pursue federal recognition. We govern ourselves as a tribal community
              under our own bylaws. We maintain a member roll, hold regular council meetings, and
              steward the lands, language, and ceremonies that make us a people. This work is shared
              among elders, council members, youth, and friends of the Tribe.
            </p>
          </div>
        </div>
      </section>

      <FullImage src={window.__resources.r_img_03} height="54vh" />

      <section className="section">
        <div className="container">
          <SecHead eyebrow="Governance today" title="How we work."
            lede="A brief reference for partners, scholars, and community members." />
          <ul className="bullets" style={{ maxWidth: 720 }}>
            <li><strong>Tribal Council</strong> — seven elected members serving staggered terms, governing the tribe under adopted bylaws.</li>
            <li><strong>Non-Profit Board of Directors</strong> — manages the Tribe's 501(c)(3) work, grants, and public-facing programs.</li>
            <li><strong>Departments</strong> — Cultural Resources, Education, and Grants Management, each led by appointed coordinators.</li>
            <li><strong>Community committees</strong> — Education, Land Stewardship, Membership, and ad hoc working groups.</li>
            <li><strong>General membership</strong> — adult tribal members vote on amendments, elections, and major resolutions.</li>
          </ul>
          <div style={{ marginTop: 32, display: 'flex', gap: 12, flexWrap: 'wrap' }}>
            <button className="btn" onClick={() => navigate('departments/council')}>Meet the Council →</button>
            <button className="btn btn-ghost" onClick={() => navigate('about/milestones')}>See milestones</button>
          </div>
        </div>
      </section>
    </div>
  );
}

function Milestones() {
  const items = [
    { y: '2026', t: 'Conservation easement filed', body: 'A perpetual conservation easement covering portions of the 2020 land return is registered, anchoring long-term protection.' },
    { y: '2024', t: 'Cultural Resources Department expands', body: 'Field team grows; cultural sites on the reclaimed lands are documented in partnership with the Tribe\'s elders.' },
    { y: '2022', t: 'Pelican Network partnership', body: 'A long-term partnership with regional conservation neighbors is formalized to coordinate restoration work.' },
    { y: '2020', t: '1,199 acres returned', body: 'In July 2020, ancestral land in the Big Sur backcountry is transferred back to the Esselen Tribe — the first such return in the modern era.' },
    { y: '2018', t: 'Educational Committee founded', body: 'A standing committee is established to guide youth programming, language work, and scholarship support.' },
    { y: '2012', t: 'Non-profit re-organization', body: 'The Esselen Tribe of Monterey County is established as a 501(c)(3) non-profit, enabling grants, partnerships, and public programs.' },
    { y: '2005', t: 'Federal acknowledgement petition', body: 'The Tribe submits documentation in pursuit of federal recognition — a process that continues.' },
    { y: '1992', t: 'Modern Tribal Council formed', body: 'A formal elected council is seated, marking the beginning of contemporary self-governance.' },
  ];
  return (
    <div className="route-enter">
      <PageHead trail="ABOUT — MILESTONES" title="Milestones"
        lede="Markers on a long road — moments at which Esselen people, together, decided what comes next." />
      <SubNav items={ABOUT_SUBNAV} active="about/milestones" />
      <section className="section">
        <div className="container">
          {items.map((it, i) => (
            <div key={i} className="milestone">
              <div className="ms-year">{it.y}</div>
              <div className="ms-title">{it.t}</div>
              <div style={{ color: 'var(--fg-soft)' }}>{it.body}</div>
            </div>
          ))}
        </div>
      </section>
    </div>
  );
}

function CTAStrip() {
  return (
    <section className="section">
      <div className="container-wide">
        <div className="grid grid-2" style={{ gap: 24 }}>
          <div style={{ background: 'var(--terracotta)', color: '#fff', borderRadius: 22, padding: 'clamp(36px, 4vw, 56px)', minHeight: 260, display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
            <div className="eyebrow" style={{ color: 'rgba(255,255,255,0.7)' }}><span className="dot" style={{ background: '#fff' }}></span>Support the work</div>
            <div>
              <h3 className="h-l" style={{ color: '#fff' }}>Help fund the next acre, the next season, the next youth program.</h3>
              <button className="btn" style={{ background: '#fff', color: 'var(--terracotta)', borderColor: '#fff', marginTop: 24 }} onClick={() => navigate('donate')}>Donate →</button>
            </div>
          </div>
          <div style={{ background: 'var(--sage)', color: '#fff', borderRadius: 22, padding: 'clamp(36px, 4vw, 56px)', minHeight: 260, display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
            <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 the membership, or simply keep in touch.</h3>
              <div style={{ marginTop: 24, display: 'flex', gap: 10, flexWrap: 'wrap' }}>
                <button className="btn" style={{ background: 'var(--deep)', borderColor: 'var(--deep)' }} onClick={() => navigate('membership/becoming')}>Become a member →</button>
                <button className="btn btn-ghost" style={{ color: '#fff', borderColor: 'rgba(255,255,255,0.4)' }} onClick={() => navigate('contact')}>Contact</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { AboutLanding, Reclaim, EsselenHistory, SacredLand, OurHistory, Milestones, CTAStrip });
