/* Esselen Tribe — Shared Components */
const { useState, useEffect, useRef } = React;

// Hash router
function useRoute() {
  const [route, setRoute] = useState(() => window.location.hash.slice(1) || 'home');
  useEffect(() => {
    const onChange = () => {
      const r = window.location.hash.slice(1) || 'home';
      setRoute(r);
      window.scrollTo({ top: 0, behavior: 'instant' });
    };
    window.addEventListener('hashchange', onChange);
    return () => window.removeEventListener('hashchange', onChange);
  }, []);
  return [route, (r) => {window.location.hash = r;}];
}

function navigate(r) {window.location.hash = r;}

// Logo
function Logo({ size = 40 }) {
  return (
    <img src={window.__resources.r_logo_visionquest} alt="Esselen Tribe seal" style={{ width: size, height: size, borderRadius: 999, objectFit: 'cover' }} />);

}

// Top Navigation
const NAV_ITEMS = [
{ id: 'home', label: 'Home' },
{ id: 'about', label: 'About', children: [
  { id: 'about/reclaim', label: 'Reclaim & Restore Ancestral Lands', sub: 'A 1,200-acre return' },
  { id: 'about/history', label: 'Esselen History', sub: 'Origins and continuance' },
  { id: 'about/sacred', label: 'Sacred Land', sub: 'Places of ceremony' },
  { id: 'about/our-history', label: 'Our History', sub: 'A living chronicle' },
  { id: 'about/milestones', label: 'Milestones', sub: 'Markers on the path' }]
},
{ id: 'departments', label: 'Departments', children: [
  { id: 'departments/council', label: 'Tribal Council' },
  { id: 'departments/board', label: 'Non-Profit Board of Directors' },
  { id: 'departments/grants', label: 'Grants Management' },
  { id: 'departments/cultural', label: 'Cultural Resources' },
  { id: 'departments/education', label: 'Educational Committee' }]
},
{ id: 'projects', label: 'Projects & News', children: [
  { id: 'projects/news', label: 'News', sub: 'Recent stories' },
  { id: 'projects/events', label: 'Calendar of Events' },
  { id: 'projects/education', label: 'Education' },
  { id: 'projects/jobs', label: 'Job Openings' },
  { id: 'projects/conservation', label: 'Tribal Lands Conservation Project' }]
},
{ id: 'membership', label: 'Membership', children: [
  { id: 'membership/becoming', label: 'Becoming a Member' },
  { id: 'membership/forms', label: 'Membership Forms' },
  { id: 'membership/login', label: 'Member Login' }]
}];


function TopNav({ route }) {
  const [activeTop] = route.split('/');
  return (
    <header className="nav">
      <div className="announce">
        <span className="dot"></span>
        <span><strong>2026 Campaign:</strong> Help us protect the Tularcitos Creek Parcels of Historic Rana Creek Ranch before they become luxury estates.</span>
        <a onClick={() => navigate('about/reclaim')}>Learn more →</a>
      </div>
      <div className="nav-inner">
        <a className="nav-brand" onClick={() => navigate('home')} style={{ cursor: 'pointer' }}>
          <img src={window.__resources.r_logo_visionquest} alt="" />
          <div>
            <div className="nb-title">Esselen Tribe</div>
            <div className="nb-sub">of Monterey County</div>
          </div>
        </a>
        <nav className="nav-links">
          {NAV_ITEMS.map((item) =>
          <div key={item.id} className="nav-link-wrap">
              <button
              className={"nav-link " + (activeTop === item.id ? 'active' : '')}
              onClick={() => navigate(item.id)}>
              
                {item.label}
                {item.children && <span className="caret"></span>}
              </button>
              {item.children &&
            <div className="nav-dropdown">
                  {item.children.map((c) =>
              <a key={c.id} className="nav-dd-item" onClick={() => navigate(c.id)}>
                      {c.label}
                      {c.sub && <span className="nd-sub">{c.sub}</span>}
                    </a>
              )}
                </div>
            }
            </div>
          )}
        </nav>
        <button className="nav-cta" onClick={() => navigate('donate')}>
          Donate
          <span className="arrow">→</span>
        </button>
      </div>
    </header>);

}

// Footer
function Footer() {
  return (
    <footer className="footer">
      <div className="container-wide">
        <div className="footer-grid">
          <div>
            <div className="footer-brand">
              <img src={window.__resources.r_logo_visionquest} alt="" />
              <div>
                <h3>Esselen Tribe</h3>
                <div className="fbsub">of Monterey County</div>
              </div>
            </div>
            <p style={{ maxWidth: 320, marginTop: 22, lineHeight: 1.5, fontSize: 14 }}>
              We are the original people of the lands now known as Monterey County —
              still here, still tending the land, still in ceremony.
            </p>
            <p style={{ marginTop: 16, fontSize: 13, color: 'rgba(255,255,255,0.55)' }}>
              Post Office Box 95<br />
              Carmel Valley, CA 93924<br />
              831.301.3078<br />
              tribaladmin@esselentribe.org
            </p>
          </div>
          <div>
            <h4>About</h4>
            <a onClick={() => navigate('about/reclaim')}>Reclaim & Restore</a>
            <a onClick={() => navigate('about/history')}>Esselen History</a>
            <a onClick={() => navigate('about/sacred')}>Sacred Land</a>
            <a onClick={() => navigate('about/milestones')}>Milestones</a>
          </div>
          <div>
            <h4>Departments</h4>
            <a onClick={() => navigate('departments/council')}>Tribal Council</a>
            <a onClick={() => navigate('departments/board')}>Non-Profit Board</a>
            <a onClick={() => navigate('departments/grants')}>Grants Management</a>
            <a onClick={() => navigate('departments/cultural')}>Cultural Resources</a>
            <a onClick={() => navigate('departments/education')}>Education Committee</a>
          </div>
          <div>
            <h4>Engage</h4>
            <a onClick={() => navigate('projects/news')}>News</a>
            <a onClick={() => navigate('projects/events')}>Events</a>
            <a onClick={() => navigate('projects/jobs')}>Job Openings</a>
            <a onClick={() => navigate('projects/conservation')}>Conservation Project</a>
          </div>
          <div>
            <h4>Membership</h4>
            <a onClick={() => navigate('membership/becoming')}>Becoming a Member</a>
            <a onClick={() => navigate('membership/forms')}>Forms</a>
            <a onClick={() => navigate('membership/login')}>Member Login</a>
            <a onClick={() => navigate('donate')}>Donate</a>
            <a onClick={() => navigate('contact')}>Contact</a>
          </div>
        </div>
        <div className="footer-base">
          <div>© 2026 Esselen Tribe of Monterey County. All rights reserved.</div>
          <div>Made in the lands of the Esselen, Rumsen, Chalone, Sureño, Chunchunes and Guatcharrone peoples.</div>
        </div>
      </div>
    </footer>);

}

// Section heading
function SecHead({ eyebrow, title, lede, action }) {
  return (
    <div className="sec-head">
      <div className="sh-left">
        {eyebrow && <div className="eyebrow"><span className="dot"></span>{eyebrow}</div>}
        <h2 className="h-l">{title}</h2>
        {lede && <p className="lede sh-lede">{lede}</p>}
      </div>
      {action}
    </div>);

}

// Page header (interior pages)
function PageHead({ trail, title, lede, image }) {
  return (
    <div className="page-head">
      <div className="container-wide">
        <div className="ph-trail">{trail}</div>
        <h1>{title}</h1>
        {lede && <p className="lede" style={{ marginTop: 26, fontSize: 19 }}>{lede}</p>}
      </div>
    </div>);

}

// Full-bleed image
function FullImage({ src, height = '60vh' }) {
  return (
    <div className="full-img">
      <img src={src} alt="" style={{ height, objectFit: "cover" }} />
    </div>);

}

// Subnav for sub-pages
function SubNav({ items, active }) {
  return (
    <div className="container-wide" style={{ paddingTop: 32, paddingBottom: 16 }}>
      <div className="subnav" style={{ display: 'inline-flex' }}>
        {items.map((it) =>
        <button key={it.id} className={active === it.id ? 'active' : ''} onClick={() => navigate(it.id)}>
            {it.label}
          </button>
        )}
      </div>
    </div>);

}

// Land Acknowledgement card
function LandAck() {
  return (
    <section className="container-wide" style={{ paddingTop: 32, paddingBottom: 32 }}>
      <div className="ack">
        <div className="glyph"></div>
        <div className="eyebrow" style={{ color: 'rgba(242,235,221,0.6)' }}>
          <span className="dot"></span>Land Acknowledgement
        </div>
        <h2 className="h-l" style={{ color: '#fff', marginTop: 18, maxWidth: 760 }}>
          We are the original people of these mountains, valleys, and shorelines —
          <span className="italic-display" style={{ color: 'var(--ochre)' }}> and we have never left.</span>
        </h2>
        <p style={{ maxWidth: 640, marginTop: 22, color: 'rgba(242,235,221,0.78)' }}>
          The Esselen people have lived in the lands now called Monterey County since time
          immemorial. We continue to gather, to govern, to teach our language, and to care
          for the places that have always cared for us. We invite you to learn, listen, and walk gently.
        </p>
      </div>
    </section>);

}

// Marquee strip
function Marquee({ items }) {
  const content = items.join('   ✦   ');
  return (
    <div className="marquee">
      <div className="mar-track">
        <span>{content}</span>
        <span>{content}</span>
      </div>
    </div>);

}

Object.assign(window, {
  useRoute, navigate, TopNav, Footer, Logo, NAV_ITEMS,
  SecHead, PageHead, FullImage, SubNav, LandAck, Marquee
});