// nav.jsx — fixed navbar + footer

// Serendria logo mark — Twin Peaks: two hairline triangles, one rising
// behind the other, evoking Sri Lanka's central highlands (Ella, Knuckles,
// Horton Plains). Stroke uses currentColor so it inherits the gold accent.
const SerendriaMark = ({ className = "", size }) => (
  <svg
    className={className}
    viewBox="0 0 240 240"
    width={size}
    height={size}
    fill="none"
    stroke="currentColor"
    strokeWidth="6"
    strokeLinejoin="round"
    aria-hidden="true"
  >
    <path d="M120 84 L180 200 L60 200 Z" />
    <path d="M155 36 L195 116 L115 116 Z" />
  </svg>
);

const Nav = ({ route, setRoute, onMenu }) => {
  const [solid, setSolid] = React.useState(false);
  const [open, setOpen] = React.useState(false);

  React.useEffect(() => {
    const onScroll = () => setSolid(window.scrollY > 40);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  React.useEffect(() => { setOpen(false); }, [route]);

  React.useEffect(() => {
    if (open) {
      const prev = document.body.style.overflow;
      document.body.style.overflow = 'hidden';
      return () => { document.body.style.overflow = prev; };
    }
  }, [open]);

  const go = (r) => () => { setRoute(r); window.scrollTo({ top: 0, behavior: 'instant' }); };

  const links = [
    { id: 'home', label: 'Journeys' },
    { id: 'tours', label: 'Tours' },
    { id: 'journal', label: 'Journal' },
    { id: 'about', label: 'About' },
    { id: 'contact', label: 'Contact' },
  ];

  return (
    <header className={`nav ${solid || open ? 'nav--solid' : ''} ${open ? 'nav--menu-open' : ''}`}>
      <div className="nav__inner">
        <div className="nav__brand" onClick={go('home')}>
          <SerendriaMark className="nav__brand-mark" />
          <span className="nav__brand-word">Serendria</span>
        </div>
        <nav className={`nav__links ${open ? 'nav__links--open' : ''}`}>
          {links.map(l => (
            <button
              key={l.id}
              className={`nav__link ${
                route === l.id
                  || (l.id === 'tours'   && route === 'detail')
                  || (l.id === 'journal' && route === 'article')
                  ? 'nav__link--active' : ''
              }`}
              onClick={go(l.id)}
            >
              {l.label}
            </button>
          ))}
        </nav>
        <div className="nav__cta">
          <button className="ulink ulink--gold" onClick={go('contact')}>
            Plan a Journey
          </button>
        </div>
        <button className="nav__menu-btn" onClick={() => setOpen(o => !o)} aria-label="Menu">
          {open ? 'Close' : 'Menu'}
        </button>
      </div>
    </header>
  );
};

const Footer = ({ setRoute }) => {
  const go = (r) => () => { setRoute(r); window.scrollTo({ top: 0, behavior: 'instant' }); };
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer__top">
          <div>
            <div className="footer__brand">
              <SerendriaMark className="footer__brand-mark" />
              <span>Serendria</span>
            </div>
            <div className="footer__estd">Estd · Ceylon · MMXXVI</div>
            <p className="footer__tag">Privately crafted journeys through Sri Lanka — for those who travel slowly, sleep beautifully, and notice the small things.</p>
          </div>
          <div>
            <div className="footer__col-title">Journeys</div>
            <div className="footer__links">
              <span className="footer__link" onClick={go('tours')}>All Journeys</span>
              <span className="footer__link" onClick={() => window.__nav('detail', 'island-loop')}>The Island Loop</span>
              <span className="footer__link" onClick={() => window.__nav('detail', 'high-country')}>The High Country</span>
              <span className="footer__link" onClick={() => window.__nav('detail', 'long-embrace')}>The Long Embrace</span>
              <span className="footer__link" onClick={() => window.__nav('detail', 'cat-tour')}>The Cat Tour</span>
            </div>
          </div>
          <div>
            <div className="footer__col-title">Company</div>
            <div className="footer__links">
              <span className="footer__link" onClick={go('about')}>About</span>
              <span className="footer__link" onClick={go('journal')}>Journal</span>
              <span className="footer__link" onClick={go('contact')}>Contact</span>
            </div>
          </div>
          <div>
            <div className="footer__col-title">Studio</div>
            <div className="footer__links">
              <a className="footer__link" href="https://maps.app.goo.gl/SxUq2yZuUXCjUwaRA" target="_blank" rel="noopener noreferrer">No. 117/01, Kottawa</a>
              <a className="footer__link" href="https://maps.app.goo.gl/SxUq2yZuUXCjUwaRA" target="_blank" rel="noopener noreferrer">Pannipitiya</a>
              <a className="footer__link" href="tel:+94773106248">+94 77 310 6248</a>
              <a className="footer__link" href="mailto:hello@serendria.com">hello@serendria.com</a>
            </div>
          </div>
        </div>
        <div className="footer__bottom">
          <span>© 2026 Serendria Private Limited</span>
          <div className="footer__legal">
            <span className="footer__legal-link" onClick={go('privacy')}>Privacy</span>
            <span className="footer__legal-sep">·</span>
            <span className="footer__legal-link" onClick={go('terms')}>Terms</span>
            <span className="footer__legal-sep">·</span>
            <span className="footer__legal-link" onClick={go('cookies')}>Cookies</span>
          </div>
        </div>
      </div>
    </footer>
  );
};

Object.assign(window, { Nav, Footer, SerendriaMark });