/* Departments pages */

const DEPT_SUBNAV = [
  { id: 'departments/council', label: 'Tribal Council' },
  { id: 'departments/board', label: 'Non-Profit Board' },
  { id: 'departments/grants', label: 'Grants Management' },
  { id: 'departments/cultural', label: 'Cultural Resources' },
  { id: 'departments/education', label: 'Educational Committee' },
];

function DepartmentsLanding() {
  return (
    <div className="route-enter">
      <PageHead trail="DEPARTMENTS" title="How the Tribe works."
        lede="The Esselen Tribe is a sovereign nation — a status that pre-dates the U.S. and is recognized by the Constitution and federal law. Our governance consists of a Tribal Council and a Non-Profit Organization working together to preserve cultural heritage and steward ancestral lands." />
      <SubNav items={DEPT_SUBNAV} active="" />
      <section className="section">
        <div className="container-wide">
          <div className="grid grid-2" style={{ gap: 32 }}>
            {[
              { id: 'departments/council', t: 'Tribal Council', body: 'Seven elected members governing the Tribe under adopted bylaws.', tag: 'Governance' },
              { id: 'departments/board', t: 'Non-Profit Board of Directors', body: 'Stewards the Tribe\'s 501(c)(3), grants, and public-facing programs.', tag: 'Governance' },
              { id: 'departments/grants', t: 'Grants Management', body: 'Pursues and administers public and private funding aligned with tribal priorities.', tag: 'Operations' },
              { id: 'departments/cultural', t: 'Cultural Resources', body: 'Land stewardship, ceremony, language, and tribal historic preservation.', tag: 'Programs' },
              { id: 'departments/education', t: 'Educational Committee', body: 'Youth programs, scholarships, and Esselen learning for members and friends.', tag: 'Programs' },
            ].map((d, i) => (
              <a key={i} onClick={() => navigate(d.id)} style={{ cursor: 'pointer' }}>
                <div className="card" style={{ minHeight: 260 }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                    <span className="idx">0{i+1}</span>
                    <span className="tag"><span className="tdot"></span>{d.tag}</span>
                  </div>
                  <h3 className="h-l">{d.t}</h3>
                  <p style={{ color: 'var(--fg-soft)', margin: 0 }}>{d.body}</p>
                  <span style={{ marginTop: 'auto', color: 'var(--terracotta)', fontWeight: 500 }}>View department →</span>
                </div>
              </a>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

// Generic people grid (placeholder portraits)
function PeopleGrid({ people }) {
  return (
    <div className="grid grid-3">
      {people.map((p, i) => (
        <div key={i} className="person">
          <div className="person-img">
            <div className="ph" style={{ width: '100%', height: '100%', borderRadius: 14 }}>{`Portrait — ${p.name}`}</div>
          </div>
          <div className="p-role">{p.role}</div>
          <div className="p-name">{p.name}</div>
          {p.note && <div style={{ color: 'var(--fg-soft)', fontSize: 14 }}>{p.note}</div>}
        </div>
      ))}
    </div>
  );
}

function TribalCouncil() {
  const council = [
    { name: 'Tom Little Bear Nason', role: 'Tribal Chairman, President' },
    { name: 'Dan Barker', role: 'Tribal Vice Chair' },
    { name: 'Jana Nason', role: 'Tribal Administrator & Secretary, Publications Chair' },
    { name: 'Diana Peña', role: 'Council Member' },
    { name: 'David MacDonald', role: 'Council Member' },
    { name: 'Hilary Shannon', role: 'Council Member' },
    { name: 'Kim Cose', role: 'Council Member' },
  ];
  return (
    <div className="route-enter">
      <PageHead trail="DEPARTMENTS — TRIBAL COUNCIL" title="Tribal Council"
        lede="Seven Esselen tribal members governing the Tribe under our adopted bylaws. The Council convenes monthly to address significant issues and support committees including Educational, Cultural Resource, and Legislative." />
      <SubNav items={DEPT_SUBNAV} active="departments/council" />

      <section className="section">
        <div className="container-wide">
          <SecHead eyebrow="Members" title="Current Council." />
          <PeopleGrid people={council} />
        </div>
      </section>

      <section className="section" style={{ background: 'var(--bg-2)' }}>
        <div className="container">
          <SecHead eyebrow="Responsibilities" title="What the Council does." />
          <div className="grid grid-2" style={{ gap: 32 }}>
            <ul className="bullets">
              <li>Adopts and amends Tribal bylaws and resolutions.</li>
              <li>Sets the annual budget and approves major expenditures.</li>
              <li>Represents the Tribe to federal, state, and county agencies.</li>
              <li>Negotiates partnerships and signs agreements on behalf of the Tribe.</li>
            </ul>
            <ul className="bullets">
              <li>Oversees the Departments and reviews program reports.</li>
              <li>Calls and presides over General Membership meetings.</li>
              <li>Manages the Tribe's roll and members' rights.</li>
              <li>Holds elections on staggered terms, every two years.</li>
            </ul>
          </div>
          <div style={{ marginTop: 32 }}>
            <button className="btn" onClick={() => navigate('contact')}>Contact the Council →</button>
          </div>
        </div>
      </section>
    </div>
  );
}

function NonProfitBoard() {
  const board = [
    { name: 'Tom Little Bear Nason', role: 'Tribal Chairman, President' },
    { name: 'Chris Nault', role: 'Board Member' },
    { name: 'Jana Nason', role: 'Tribal Administrator & Secretary, Publications Chair' },
    { name: 'Kristen Lovell', role: 'Board Member' },
    { name: 'Kim Cose', role: 'Board Member' },
  ];
  return (
    <div className="route-enter">
      <PageHead trail="DEPARTMENTS — NON-PROFIT BOARD" title="Non-Profit Board of Directors"
        lede="The 501(c)(3) Board stewards the Tribe's charitable work — fundraising, public programs, and partnerships." />
      <SubNav items={DEPT_SUBNAV} active="departments/board" />
      <section className="section">
        <div className="container-wide">
          <PeopleGrid people={board} />
        </div>
      </section>
      <section className="section" style={{ background: 'var(--bg-2)' }}>
        <div className="container">
          <div className="split">
            <div>
              <div className="eyebrow"><span className="dot"></span>Charitable mission</div>
              <h2 className="h-l" style={{ marginTop: 18 }}>What the Board funds and protects.</h2>
            </div>
            <div className="body-prose">
              <p>
                The Esselen Tribe Non-Profit is a registered 501(c)(3) charitable organization
                (EIN 82-5246660). The Board oversees all fundraising, donor relationships, and
                grant administration that flow into Tribal programs.
              </p>
              <p>
                Annual financial filings are available on request. The Board meets quarterly and
                publishes meeting summaries for members.
              </p>
              <button className="btn btn-ghost" onClick={() => navigate('donate')} style={{ marginTop: 16 }}>Support the work →</button>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

function GrantsManagement() {
  return (
    <div className="route-enter">
      <PageHead trail="DEPARTMENTS — GRANTS MANAGEMENT" title="Grants Management"
        lede="Pursuing and stewarding the public and private funding that makes our long-term work possible." />
      <SubNav items={DEPT_SUBNAV} active="departments/grants" />

      <section className="section">
        <div className="container-wide">
          <SecHead eyebrow="Current portfolio" title="Active grants & funding."
            lede="A snapshot of recent and current sources funding land restoration, language, and youth work." />
          <div className="grid grid-2" style={{ gap: 24 }}>
            {[
              { funder: 'California Natural Resources Agency', amt: '$4.5M', use: 'Acquisition & initial stewardship — 2020 land return', status: 'Active' },
              { funder: 'Resources Legacy Fund', amt: '$320K', use: 'Cultural Resources field team — 3-year capacity grant', status: 'Active' },
              { funder: 'CA Office of Historic Preservation', amt: '$98K', use: 'Cultural site survey and documentation, reclaimed lands', status: 'Active' },
              { funder: 'Administration for Native Americans', amt: '$180K', use: 'Esselen language documentation pilot', status: 'Closing' },
              { funder: 'Private foundation (anonymous)', amt: '$75K', use: 'Youth Education Fund — annual', status: 'Recurring' },
              { funder: 'Monterey Peninsula Foundation', amt: '$50K', use: 'Annual Pelican Gathering and community programs', status: 'Recurring' },
            ].map((g, i) => (
              <div key={i} style={{ padding: 28, border: '1px solid var(--line)', borderRadius: 16, background: 'var(--bg)' }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                  <div className="idx">GRANT 0{i+1}</div>
                  <span className="tag tag-sage"><span className="tdot"></span>{g.status}</span>
                </div>
                <h3 className="h-m" style={{ marginTop: 16 }}>{g.funder}</h3>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 36, marginTop: 8 }}>{g.amt}</div>
                <p style={{ color: 'var(--fg-soft)', marginTop: 12 }}>{g.use}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section" style={{ background: 'var(--bg-2)' }}>
        <div className="container">
          <SecHead eyebrow="Working with us" title="Grant-makers and funders."
            lede="We welcome conversations with funders who share our long-horizon perspective on land, language, and youth." />
          <div className="grid grid-2" style={{ gap: 32 }}>
            <ul className="bullets">
              <li>Submit a letter of inquiry to <strong>grants@esselentribe.org</strong>.</li>
              <li>Multi-year, unrestricted, and capacity grants are particularly welcome.</li>
              <li>We co-author reports and case studies with funder partners.</li>
            </ul>
            <ul className="bullets">
              <li>Tribal staff are available for site visits and stewardship briefings.</li>
              <li>Our 501(c)(3) determination letter is available on request.</li>
              <li>We do not accept anonymous donations over $25,000 without a Board review.</li>
            </ul>
          </div>
        </div>
      </section>
    </div>
  );
}

function CulturalResources() {
  return (
    <div className="route-enter">
      <PageHead trail="DEPARTMENTS — CULTURAL RESOURCES" title="Cultural Resources"
        lede="Land stewardship, ceremony, language, and Tribal Historic Preservation work — held together by a small, mighty team." />
      <SubNav items={DEPT_SUBNAV} active="departments/cultural" />

      <FullImage src={window.__resources.r_img_09} height="52vh" />

      <section className="section">
        <div className="container-wide">
          <SecHead eyebrow="Work areas" title="What we tend."
            lede="The Cultural Resources Department holds the practical, on-the-ground work of being Esselen today." />
          <div className="grid grid-3" style={{ gap: 4 }}>
            {[
              { t: 'Tribal Historic Preservation', body: 'NAGPRA consultation, cultural site documentation, and protection of ancestral resources across our homeland.' },
              { t: 'Land stewardship', body: 'Restoration of native plants, prescribed cultural burns, and protection of ceremonial places on Tribal lands.' },
              { t: 'Language revitalization', body: 'Documentation, recovery, and teaching of the Esselen language — together with linguists, elders, and youth.' },
              { t: 'Basketry & material culture', body: 'Maintenance of basketry traditions, regalia, and craft, in partnership with regional Indigenous artists.' },
              { t: 'Ceremony', body: 'Support for community ceremonies, gatherings, and youth coming-of-age work.' },
              { t: 'Archival research', body: 'Genealogical work, mission record research, and oral history collection — for members and scholars.' },
            ].map((p, i) => (
              <div key={i} style={{ background: 'var(--bg)', padding: 32, minHeight: 240, display: 'flex', flexDirection: 'column', gap: 12 }}>
                <div className="idx">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">
          <div className="ack">
            <div className="glyph"></div>
            <div className="eyebrow" style={{ color: 'rgba(242,235,221,0.6)' }}><span className="dot"></span>Working with researchers</div>
            <h2 className="h-l" style={{ color: '#fff', marginTop: 18, maxWidth: 760 }}>
              We welcome respectful research partnerships — on Esselen terms.
            </h2>
            <p style={{ maxWidth: 640, marginTop: 22, color: 'rgba(242,235,221,0.78)' }}>
              Researchers, agency staff, and graduate students interested in our homeland are
              invited to contact the Cultural Resources Department before beginning fieldwork.
              We co-design scope, review findings before publication, and require data-sharing
              agreements as a starting place.
            </p>
            <button className="btn" style={{ background: 'var(--bg)', color: 'var(--deep)', borderColor: 'var(--bg)', marginTop: 28 }} onClick={() => navigate('contact')}>
              Contact Cultural Resources →
            </button>
          </div>
        </div>
      </section>
    </div>
  );
}

function EducationCommittee() {
  return (
    <div className="route-enter">
      <PageHead trail="DEPARTMENTS — EDUCATIONAL COMMITTEE" title="Educational Committee"
        lede="A standing committee guiding youth programs, scholarship support, and Esselen learning — for our members and our friends." />
      <SubNav items={DEPT_SUBNAV} active="departments/education" />

      <section className="section">
        <div className="container-wide">
          <div className="grid grid-3">
            {[
              { t: 'Youth land camps', body: 'Seasonal multi-day camps on the reclaimed lands — basketry, gathering, fire, and language.' },
              { t: 'Scholarships', body: 'Annual scholarships for Esselen members in undergraduate and graduate study.' },
              { t: 'School visits', body: 'Classroom and field visits in partnership with regional public schools and educators.' },
              { t: 'Language circles', body: 'Member-led language work, plus public-facing teaching programs developed with linguists.' },
              { t: 'Ecological apprenticeships', body: 'Year-long mentored placements with the Cultural Resources field team.' },
              { t: 'Community lectures', body: 'A quarterly speaker series on Esselen history, archaeology, and land stewardship.' },
            ].map((p, i) => (
              <div key={i} className="card">
                <div className="idx">PROGRAM · 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" style={{ background: 'var(--bg-2)' }}>
        <div className="container">
          <SecHead eyebrow="Apply" title="Scholarships & youth programs."
            lede="Member students may apply for the annual Esselen Youth & Scholar Fund each spring." />
          <div className="grid grid-2" style={{ gap: 32 }}>
            <ul className="bullets">
              <li><strong>Eligibility:</strong> enrolled Esselen Tribal members at any level of study.</li>
              <li><strong>Award range:</strong> $500 – $5,000.</li>
              <li><strong>Application window:</strong> February 1 – April 15 annually.</li>
              <li><strong>Decision:</strong> notification by June 1.</li>
            </ul>
            <ul className="bullets">
              <li>Youth land camps are open to ages 8–18 of Esselen and partner tribes.</li>
              <li>Ecological apprenticeships are open to members 18+.</li>
              <li>Programs are free for tribal members; modest tuition for non-members supports the program.</li>
            </ul>
          </div>
          <div style={{ marginTop: 32, display: 'flex', gap: 12 }}>
            <button className="btn" onClick={() => navigate('membership/forms')}>Application forms →</button>
            <button className="btn btn-ghost" onClick={() => navigate('contact')}>Contact the Committee</button>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { DepartmentsLanding, TribalCouncil, NonProfitBoard, GrantsManagement, CulturalResources, EducationCommittee });
