/* Projects / Events / News */

const PROJ_SUBNAV = [
  { id: 'projects/news', label: 'News' },
  { id: 'projects/events', label: 'Events Calendar' },
  { id: 'projects/education', label: 'Education' },
  { id: 'projects/jobs', label: 'Job Openings' },
  { id: 'projects/conservation', label: 'Conservation Project' },
];

function ProjectsLanding() {
  return (
    <div className="route-enter">
      <PageHead trail="PROJECTS · EVENTS · NEWS" title="In motion."
        lede="What's happening in Esselen country right now — and what's coming next." />
      <SubNav items={PROJ_SUBNAV} active="" />
      <section className="section">
        <div className="container-wide">
          <div className="grid grid-2" style={{ gap: 32 }}>
            {[
              { id: 'projects/news', t: 'News', body: 'Stories from the Tribe, partners, and the press.', img: window.__resources.r_img_02 },
              { id: 'projects/events', t: 'Calendar of Events', body: 'Gatherings, ceremonies, workshops, and public talks.', img: window.__resources.r_img_06 },
              { id: 'projects/education', t: 'Education', body: 'Programs, language circles, and youth camps.', img: window.__resources.r_img_10 },
              { id: 'projects/jobs', t: 'Job Openings', body: 'Roles with the Tribe and its partners.', img: window.__resources.r_img_13 },
              { id: 'projects/conservation', t: 'Tribal Lands Conservation Project', body: 'Restoration on the reclaimed Big Sur lands.', img: window.__resources.r_img_04 },
            ].map((c, i) => (
              <a key={i} onClick={() => navigate(c.id)} style={{ cursor: 'pointer' }}>
                <div className="card" style={{ minHeight: 320, padding: 0, overflow: 'hidden' }}>
                  <div className="card-img" style={{ borderRadius: 0, aspectRatio: '16/10' }}><img src={c.img} alt="" /></div>
                  <div style={{ padding: 24, display: 'flex', flexDirection: 'column', gap: 10 }}>
                    <div className="idx">0{i+1}</div>
                    <h3 className="h-m">{c.t}</h3>
                    <p style={{ color: 'var(--fg-soft)', margin: 0 }}>{c.body}</p>
                  </div>
                </div>
              </a>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

function NewsPage() {
  const news = [
    { cat: 'Press', date: 'APR 14 · 2026', title: 'CBS Sunday Morning visits the reclaimed Big Sur lands', body: 'A national feature spotlights the 1,199-acre return, the people behind it, and what stewardship means for the next generation.', img: window.__resources.r_img_02 },
    { cat: 'Announcement', date: 'MAR 28 · 2026', title: 'Conservation easement registered on reclaimed lands', body: 'A perpetual easement formally protects portions of the 2020 return, anchoring long-term care.', img: window.__resources.r_img_04 },
    { cat: 'Field report', date: 'FEB 06 · 2026', title: 'Winter season: cultural burn pilot on the upper ridges', body: 'The Cultural Resources team partnered with CAL FIRE for a small cultural burn — the first on Tribal lands in modern memory.', img: window.__resources.r_img_09 },
    { cat: 'Community', date: 'JAN 12 · 2026', title: 'Youth language circle gathers for winter solstice', body: 'Twelve youth members and three elders met for a long weekend of language, song, and story.', img: window.__resources.r_img_08 },
    { cat: 'Press', date: 'NOV 22 · 2025', title: 'Esselen Tribe featured in California Sunday', body: 'A long-form essay on the return of the lands and the people who tended through the silent years.', img: window.__resources.r_img_01 },
    { cat: 'Council update', date: 'OCT 04 · 2025', title: 'Elections complete; Council seated for 2025–2027 term', body: 'Three seats turned over in the latest tribal elections; thanks to outgoing members for their service.', img: window.__resources.r_img_03 },
  ];
  return (
    <div className="route-enter">
      <PageHead trail="PROJECTS — NEWS" title="News"
        lede="Stories from the Tribe, our partners, and the press." />
      <SubNav items={PROJ_SUBNAV} active="projects/news" />
      <section className="section">
        <div className="container-wide">
          {/* Featured */}
          <a onClick={() => navigate('projects/news/cbs-sunday-morning')} style={{ cursor: 'pointer' }}>
            <div className="grid grid-2" style={{ gap: 32, marginBottom: 64, alignItems: 'center' }}>
              <div style={{ borderRadius: 22, overflow: 'hidden' }}>
                <img src={news[0].img} alt="" style={{ width: '100%', height: 520, objectFit: 'cover' }} />
              </div>
              <div>
                <div className="eyebrow"><span className="dot"></span>Featured · {news[0].cat}</div>
                <h2 className="h-xl" style={{ marginTop: 18 }}>{news[0].title}</h2>
                <p className="lede" style={{ marginTop: 22 }}>{news[0].body}</p>
                <div style={{ marginTop: 22, color: 'var(--fg-mute)', fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em' }}>{news[0].date}</div>
                <button className="btn btn-ghost" style={{ marginTop: 22 }} onClick={() => navigate('projects/news/cbs-sunday-morning')}>Read story →</button>
              </div>
            </div>
          </a>

          <div className="grid grid-3">
            {news.slice(1).map((n, i) => (
              <article key={i} className="news-card" 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>
              </article>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

function EventsPage() {
  const events = [
    { id: 'projects/events/annual-pelican-gathering', day: '22', mo: 'AUG', y: '2026', title: 'Annual Pelican Gathering', loc: 'Pelican Ranch · Big Sur', time: '10am – 4pm', type: 'Gathering' },
    { day: '14', mo: 'JUN', y: '2026', title: 'Youth Land Camp · Summer session', loc: 'Reclaimed lands · Big Sur', time: '5-day camp', type: 'Youth', id: 'projects/education/youth-land-camps' },
    { day: '04', mo: 'JUL', y: '2026', title: 'Public lecture: Mission-era genealogy with Dr. Yamane', loc: 'Carmel Mission Basilica', time: '7pm – 9pm', type: 'Lecture' },
    { day: '11', mo: 'MAY', y: '2026', title: 'Spring restoration workday', loc: 'Reclaimed lands · Big Sur', time: '9am – 3pm', type: 'Volunteer' },
    { day: '02', mo: 'MAY', y: '2026', title: 'Quarterly General Membership meeting', loc: 'Salinas · Members only', time: '1pm – 4pm', type: 'Governance' },
    { day: '20', mo: 'APR', y: '2026', title: 'Esselen language circle (open session)', loc: 'Virtual', time: '6:30pm', type: 'Language' },
  ];
  return (
    <div className="route-enter">
      <PageHead trail="PROJECTS — CALENDAR OF EVENTS" title="Calendar of Events"
        lede="Gatherings, ceremonies, workshops, and public talks. Some are open; some are members-only." />
      <SubNav items={PROJ_SUBNAV} active="projects/events" />

      <section className="section">
        <div className="container-wide">
          <div className="grid grid-2" style={{ gap: 32, alignItems: 'flex-start' }}>
            <div>
              <SecHead eyebrow="Upcoming" title="What's coming up." />
              <div>
                {events.map((e, i) => (
                  <div key={i} className="event-row" style={{ cursor: e.id ? 'pointer' : 'default' }} onClick={() => e.id && navigate(e.id)}>
                    <div className="event-date">
                      <div className="ed-day">{e.day}</div>
                      <div className="ed-mo">{e.mo} · {e.y}</div>
                    </div>
                    <div>
                      <span className="tag" style={{ marginBottom: 8 }}><span className="tdot"></span>{e.type}</span>
                      <div className="event-title">{e.title}</div>
                      <div className="event-meta">
                        <span>📍 {e.loc}</span>
                        <span>🕐 {e.time}</span>
                      </div>
                    </div>
                    <button className="btn btn-ghost btn-sm">Details →</button>
                  </div>
                ))}
              </div>
            </div>
            <div style={{ position: 'sticky', top: 100 }}>
              <div className="card" style={{ background: 'var(--terracotta)', color: '#fff', borderColor: 'var(--terracotta)' }}>
                <div className="eyebrow" style={{ color: 'rgba(255,255,255,0.7)' }}><span className="dot" style={{ background: '#fff' }}></span>Featured</div>
                <h3 className="h-l" style={{ color: '#fff' }}>Annual Pelican Gathering</h3>
                <div style={{ display: 'flex', gap: 32, marginTop: 12 }}>
                  <div>
                    <div style={{ fontFamily: 'var(--font-display)', fontSize: 56, lineHeight: 1 }}>22</div>
                    <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', marginTop: 4 }}>August 2026</div>
                  </div>
                  <div style={{ alignSelf: 'center' }}>
                    <div>10am – 4pm</div>
                    <div style={{ fontSize: 13, opacity: 0.8 }}>Pelican Ranch · Big Sur</div>
                  </div>
                </div>
                <p style={{ marginTop: 14, color: 'rgba(255,255,255,0.86)' }}>
                  Our largest annual gathering — open to members and invited guests, with song, story, food, and a meeting under the oaks.
                </p>
                <button className="btn" style={{ background: '#fff', color: 'var(--terracotta)', borderColor: '#fff', alignSelf: 'flex-start' }} onClick={() => navigate('projects/events/annual-pelican-gathering')}>RSVP →</button>
              </div>

              <div className="card" style={{ marginTop: 16 }}>
                <div className="eyebrow"><span className="dot"></span>Subscribe</div>
                <h3 className="h-m">Add events to your calendar</h3>
                <p style={{ color: 'var(--fg-soft)', margin: 0 }}>Public events are also published as an .ics feed.</p>
                <div style={{ display: 'flex', gap: 8 }}>
                  <button className="btn btn-ghost btn-sm">Google Calendar</button>
                  <button className="btn btn-ghost btn-sm">.ics feed</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

function EducationPage() {
  return (
    <div className="route-enter">
      <PageHead trail="PROJECTS — EDUCATION" title="Education"
        lede="Through our growing education program, we collaborate with local schools, cultural institutions, and community groups to provide hands-on learning experiences that deepen understanding of the Esselen people's past and present — from archaeological field schools to immersive cultural workshops." />
      <SubNav items={PROJ_SUBNAV} active="projects/education" />

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

      <section className="section">
        <div className="container-wide">
          <SecHead eyebrow="Programs" title="What we offer."
            lede="A growing portfolio of programs from the Educational Committee and Cultural Resources Department." />
          <div className="grid grid-3">
            {[
              { tag: 'Ages 8–18', t: 'Youth Land Camps', body: 'Multi-day camps on the reclaimed lands — basketry, gathering, fire, language, and play. Held three times a year.', open: true, go: 'projects/education/youth-land-camps' },
              { tag: '18+', t: 'Ecological Apprenticeships', body: 'Year-long mentored placements with the Cultural Resources field team. Open to Esselen members.', open: true },
              { tag: 'All ages', t: 'Esselen Language Circle', body: 'Member-led monthly sessions. A quarterly public-facing teaching session is open to neighbors.', open: false },
              { tag: 'Students', t: 'Esselen Youth Scholarship Fund', body: 'Annual scholarships for Esselen members at any level of study. Applications open Feb 1 – Apr 15.', open: false },
              { tag: 'Educators', t: 'Classroom Visits', body: 'School and university visits in partnership with regional educators. Free for K–12; modest fee for higher-ed.', open: true },
              { tag: 'Public', t: 'Quarterly Lecture Series', body: 'A speaker series on Esselen history, archaeology, and land stewardship. Free and open.', open: false },
            ].map((p, i) => (
              <div key={i} className="card" style={{ cursor: p.go ? 'pointer' : 'default' }} onClick={() => p.go && navigate(p.go)}>
                <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                  <span className="tag"><span className="tdot"></span>{p.tag}</span>
                  {p.open && <span className="tag tag-sage"><span className="tdot"></span>Now open</span>}
                </div>
                <h3 className="h-m">{p.t}</h3>
                <p style={{ color: 'var(--fg-soft)', margin: 0 }}>{p.body}</p>
                <a style={{ marginTop: 'auto', color: 'var(--terracotta)', fontWeight: 500, cursor: 'pointer' }}>Learn more →</a>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section" style={{ background: 'var(--bg-2)' }}>
        <div className="container">
          <div className="quote">
            <span className="qmark">“</span>
            We don't only teach our young people <em>about</em> being Esselen. We teach them <em>to be</em> Esselen — on land, with elders, with their hands in the soil.
          </div>
          <div className="quote-attr">Educational Committee</div>
        </div>
      </section>
    </div>
  );
}

function JobsPage() {
  const jobs = [
    { id: 'projects/jobs/cultural-resources-field-lead', t: 'Cultural Resources Field Lead', loc: 'Big Sur · On Tribal lands', type: 'Full-time', open: 'Posted May 10' },
    { t: 'Youth Programs Coordinator', loc: 'Salinas / Monterey County', type: 'Full-time', open: 'Posted May 03' },
    { t: 'Language Documentation Specialist', loc: 'Hybrid · Monterey County', type: 'Contract · 12 months', open: 'Posted April 22' },
    { t: 'Grants Manager (part-time)', loc: 'Hybrid', type: 'Part-time · 20 hrs/wk', open: 'Posted April 14' },
    { t: 'Seasonal Restoration Crew (3 positions)', loc: 'Big Sur', type: 'Seasonal · Jun–Sep', open: 'Posted March 30' },
  ];
  return (
    <div className="route-enter">
      <PageHead trail="PROJECTS — JOB OPENINGS" title="Job Openings"
        lede="Work with the Tribe — directly, or through our partners. Esselen members and tribal preference apply where permitted." />
      <SubNav items={PROJ_SUBNAV} active="projects/jobs" />
      <section className="section">
        <div className="container">
          <SecHead eyebrow="Now hiring" title="Open roles." />
          {jobs.map((j, i) => (
            <div key={i} className="event-row" style={{ gridTemplateColumns: '60px 1fr auto auto', gap: 24, cursor: j.id ? 'pointer' : 'default' }} onClick={() => j.id && navigate(j.id)}>
              <div className="idx" style={{ fontSize: 14 }}>0{i+1}</div>
              <div>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 26 }}>{j.t}</div>
                <div className="event-meta" style={{ marginTop: 6 }}>
                  <span>📍 {j.loc}</span>
                  <span>📅 {j.open}</span>
                </div>
              </div>
              <span className="tag"><span className="tdot"></span>{j.type}</span>
              <button className="btn btn-ghost btn-sm">View →</button>
            </div>
          ))}
          <div style={{ marginTop: 48 }}>
            <div className="card" style={{ background: 'var(--bg-2)' }}>
              <div className="eyebrow"><span className="dot"></span>How to apply</div>
              <h3 className="h-m">Send a single PDF to jobs@esselentribe.org</h3>
              <p style={{ color: 'var(--fg-soft)', margin: 0 }}>
                Include a brief letter of interest, a resume or CV, and the role you're applying to in the subject line.
                Esselen tribal members may also indicate enrollment in their letter.
              </p>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

function ConservationPage() {
  return (
    <div className="route-enter">
      <PageHead trail="PROJECTS — TRIBAL LANDS CONSERVATION PROJECT" title="Tribal Lands Conservation Project"
        lede="The long, deliberate restoration of 1,199 acres in the Big Sur backcountry — returned in 2020, and tended in perpetuity." />
      <SubNav items={PROJ_SUBNAV} active="projects/conservation" />

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

      <section className="section">
        <div className="container">
          <div className="split">
            <div>
              <div className="eyebrow"><span className="dot"></span>The project</div>
              <h2 className="h-l" style={{ marginTop: 18 }}>What restoration means, on Esselen terms.</h2>
            </div>
            <div className="body-prose">
              <p>
                Restoration is not return-to-pristine. It is the rebuilding of a relationship between
                a people and a place: fire used carefully, native plants encouraged, invasive species
                pulled, cultural sites protected, and young Esselen people taught to know this country
                the way their ancestors did.
              </p>
              <p>
                The Conservation Project is a 30-year horizon endeavor. We are not in a hurry. The
                land is not in a hurry.
              </p>
            </div>
          </div>
        </div>
      </section>

      <section className="section" style={{ background: 'var(--bg-2)' }}>
        <div className="container-wide">
          <SecHead eyebrow="Workstreams" title="On the ground." />
          <div className="grid grid-3" style={{ gap: 4 }}>
            {[
              { t: 'Cultural fire', body: 'Small, careful prescribed burns — guided by elders and CAL FIRE partners — restoring the role of fire on the landscape.' },
              { t: 'Native plant restoration', body: 'Removal of invasives; replanting of soaproot, sedge, redbud, willow, and other plants central to Esselen life.' },
              { t: 'Steelhead habitat', body: 'Protection of cold-water sources, stream-bank repair, and partnership with the regional Steelhead recovery plan.' },
              { t: 'Cultural site survey', body: 'Mapping and protection of sites identified by elders and confirmed by careful field documentation.' },
              { t: 'Trails & access', body: 'Decisions about where (and where not) to permit access — guided by cultural and ecological sensitivity.' },
              { t: 'Member camp', body: 'A simple, low-impact gathering place for Esselen members on the land — a small ceremonial center under construction.' },
            ].map((p, i) => (
              <div key={i} style={{ background: 'var(--bg)', padding: 32, minHeight: 220, display: 'flex', flexDirection: 'column', gap: 12 }}>
                <div className="idx">WORKSTREAM 0{i+1}</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">
        <div className="container-wide">
          <SecHead eyebrow="Get involved" title="Join the work." />
          <div className="grid grid-3">
            <div className="card card-sage" style={{ background: 'var(--sage)' }}>
              <div className="eyebrow" style={{ color: 'rgba(255,255,255,0.7)' }}><span className="dot" style={{ background: '#fff' }}></span>Volunteer</div>
              <h3 className="h-m">Restoration workdays</h3>
              <p style={{ color: 'rgba(255,255,255,0.86)', margin: 0 }}>Monthly volunteer days, May through October. Open to neighbors and friends of the Tribe.</p>
              <button className="btn" style={{ background: '#fff', color: 'var(--sage-dark)', borderColor: '#fff', alignSelf: 'flex-start' }}>Sign up →</button>
            </div>
            <div className="card card-clay">
              <div className="eyebrow" style={{ color: 'rgba(255,255,255,0.7)' }}><span className="dot" style={{ background: '#fff' }}></span>Fund</div>
              <h3 className="h-m">Acre-by-acre giving</h3>
              <p style={{ color: 'rgba(255,255,255,0.86)', margin: 0 }}>Sponsor an acre of restoration. Naming, recognition, and a quarterly stewardship update.</p>
              <button className="btn" style={{ background: '#fff', color: 'var(--terracotta)', borderColor: '#fff', alignSelf: 'flex-start' }} onClick={() => navigate('donate')}>Give →</button>
            </div>
            <div className="card card-deep">
              <div className="eyebrow" style={{ color: 'rgba(242,235,221,0.6)' }}><span className="dot"></span>Partner</div>
              <h3 className="h-m">Research & agency partners</h3>
              <p style={{ color: 'rgba(242,235,221,0.8)', margin: 0 }}>For agencies, conservation groups, and qualified researchers seeking partnership.</p>
              <button className="btn" style={{ background: 'var(--bg)', color: 'var(--deep)', borderColor: 'var(--bg)', alignSelf: 'flex-start' }} onClick={() => navigate('contact')}>Contact →</button>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { ProjectsLanding, NewsPage, EventsPage, EducationPage, JobsPage, ConservationPage });
