/* Multi-page nav. Transparent over the hero on the home page (overHero),
   solid Parchment everywhere else. `current` highlights the active tab.
   Below 900px the link rail collapses into a hamburger that opens a
   full-screen brand menu. */
const { useState, useEffect } = React;

const HOME_HREF = 'index.html';

const NAV_LINKS = [
['the weekend', 'the-weekend.html', 'weekend'],
['explore', 'explore.html', 'explore'],
['travel & stay', 'travel-stay.html', 'travel'],
['registry', 'registry.html', 'registry'],
['faq', 'faq.html', 'faq'],
['rsvp', 'rsvp.html', 'rsvp']];


/* Shared hook — true when the viewport is phone/tablet width. */
function useIsMobile(breakpoint = 900) {
  const query = '(max-width: ' + breakpoint + 'px)';
  const [isMobile, setIsMobile] = useState(function () {
    return typeof window !== 'undefined' && window.matchMedia(query).matches;
  });
  useEffect(function () {
    const mq = window.matchMedia(query);
    const onChange = function (e) { setIsMobile(e.matches); };
    onChange(mq);
    if (mq.addEventListener) mq.addEventListener('change', onChange);else
    mq.addListener(onChange);
    return function () {
      if (mq.removeEventListener) mq.removeEventListener('change', onChange);else
      mq.removeListener(onChange);
    };
  }, [query]);
  return isMobile;
}

/* ─────────────────────────── Mobile menu ─────────────────────────── */
function MobileNav({ overHero, current }) {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);

  useEffect(function () {
    if (!overHero) return undefined;
    const onScroll = function () { setScrolled(window.scrollY > 40); };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return function () { window.removeEventListener('scroll', onScroll); };
  }, [overHero]);

  // Lock body scroll while the menu is open.
  useEffect(function () {
    document.body.style.overflow = open ? 'hidden' : '';
    return function () { document.body.style.overflow = ''; };
  }, [open]);

  const solid = !overHero || scrolled;
  const barColor = solid ? '#370821' : '#f0e8d0';

  const barStyle = {
    position: 'fixed', top: 0, left: 0, right: 0, zIndex: 60,
    padding: '12px clamp(16px, 5vw, 28px)',
    background: solid ? '#f0e8d0' : 'transparent',
    transition: 'background 500ms var(--ease-walk)',
    display: 'flex', alignItems: 'center', justifyContent: 'space-between'
  };

  const logoH = solid ? 52 : 60;

  return (
    <React.Fragment>
      <nav style={barStyle} data-screen-label="nav">
        <a href={HOME_HREF} aria-label="Home" style={{ display: 'inline-flex', flex: '0 0 auto' }}>
          <span
            role="img"
            aria-label="Sydney & Andrés"
            style={{
              display: 'block',
              height: logoH, width: logoH * 1.948,
              backgroundColor: barColor,
              WebkitMaskImage: 'url(assets/sa-logo2-mask.png)',
              maskImage: 'url(assets/sa-logo2-mask.png)',
              WebkitMaskRepeat: 'no-repeat', maskRepeat: 'no-repeat',
              WebkitMaskSize: 'contain', maskSize: 'contain',
              WebkitMaskPosition: 'center', maskPosition: 'center',
              transition: 'height 500ms var(--ease-walk), width 500ms var(--ease-walk), background-color 220ms var(--ease-walk)'
            }} />
        </a>

        <button
          type="button"
          aria-label="Open menu"
          aria-expanded={open}
          onClick={function () { setOpen(true); }}
          style={{
            background: 'transparent', border: 'none', padding: 8,
            display: 'inline-flex', flexDirection: 'column', gap: 6,
            cursor: 'pointer'
          }}>
          {[0, 1, 2].map(function (i) {
            return <span key={i} style={{ display: 'block', width: 28, height: 2, background: barColor, borderRadius: 2 }} />;
          })}
        </button>
      </nav>

      {/* Full-screen overlay menu */}
      <div
        style={{
          position: 'fixed', inset: 0, zIndex: 70,
          background: 'var(--night-bordeaux)',
          display: 'flex', flexDirection: 'column',
          alignItems: 'center', justifyContent: 'center',
          gap: 'clamp(18px, 4vh, 34px)',
          padding: '64px 24px',
          opacity: open ? 1 : 0,
          pointerEvents: open ? 'auto' : 'none',
          transition: 'opacity 360ms var(--ease-walk)'
        }}>
        <button
          type="button"
          aria-label="Close menu"
          onClick={function () { setOpen(false); }}
          style={{
            position: 'absolute', top: 18, right: 'clamp(16px, 5vw, 28px)',
            background: 'transparent', border: 'none', cursor: 'pointer',
            width: 40, height: 40, padding: 0
          }}>
          <span style={{ position: 'absolute', top: 19, left: 6, width: 28, height: 2, background: 'var(--parchment)', transform: 'rotate(45deg)' }} />
          <span style={{ position: 'absolute', top: 19, left: 6, width: 28, height: 2, background: 'var(--parchment)', transform: 'rotate(-45deg)' }} />
        </button>

        <span
          role="img"
          aria-label="Sydney & Andrés"
          style={{
            display: 'block', height: 64, width: 64 * 1.948,
            marginBottom: 'clamp(10px, 3vh, 28px)',
            backgroundColor: 'var(--golden-glow)',
            WebkitMaskImage: 'url(assets/sa-logo2-mask.png)',
            maskImage: 'url(assets/sa-logo2-mask.png)',
            WebkitMaskRepeat: 'no-repeat', maskRepeat: 'no-repeat',
            WebkitMaskSize: 'contain', maskSize: 'contain',
            WebkitMaskPosition: 'center', maskPosition: 'center'
          }} />

        {NAV_LINKS.map(function (entry) {
          const label = entry[0];const href = entry[1];const key = entry[2];
          const isActive = key === current;
          return (
            <a key={href} href={href}
              style={{
                fontFamily: 'var(--font-labels)',
                fontSize: 'clamp(34px, 9vw, 48px)',
                lineHeight: 1.05,
                textDecoration: 'none',
                transition: 'color 220ms var(--ease-walk)',
                color: isActive ? '#fb8365' : 'var(--parchment)'
              }}
              onMouseEnter={function (e) { e.currentTarget.style.color = '#fb8365'; }}
              onMouseLeave={function (e) { e.currentTarget.style.color = isActive ? '#fb8365' : 'var(--parchment)'; }}>
              {label}</a>);

        })}
      </div>
    </React.Fragment>);

}

/* ─────────────────────────── Desktop nav ─────────────────────────── */
function DesktopNav({ overHero, current }) {
  const [scrolled, setScrolled] = useState(false);
  const [logoHover, setLogoHover] = useState(false);

  useEffect(function () {
    if (!overHero) return undefined;
    const onScroll = function () { setScrolled(window.scrollY > 80); };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return function () { window.removeEventListener('scroll', onScroll); };
  }, [overHero]);

  const solid = !overHero || scrolled;

  const navStyle = {
    position: 'fixed', top: 0, left: 0, right: 0, zIndex: 50,
    padding: solid ? '12px 32px 14px' : '24px 32px 22px',
    background: solid ? '#f0e8d0' : 'transparent',
    transition: 'all 600ms var(--ease-walk)',
    display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'center', gap: 0
  };

  const baseColor = solid ? '#370821' : '#f0e8d0';
  const hoverColor = solid ? '#fb8365' : '#C1C119';
  const activeColor = '#C2AC00';

  const linkStyle = function (isActive) {
    return {
      fontFamily: 'var(--font-labels)',
      fontSize: solid ? 22 : 20,
      color: isActive ? activeColor : baseColor,
      textDecoration: 'none',
      paddingBottom: 2,
      borderBottom: isActive ? '1.5px solid ' + activeColor : '1.5px solid transparent',
      transition: 'color 220ms var(--ease-walk), font-size 600ms var(--ease-walk)',
      whiteSpace: 'nowrap'
    };
  };

  const leftLinks = NAV_LINKS.slice(0, 3);
  const rightLinks = NAV_LINKS.slice(3);

  const renderLink = function (entry) {
    const label = entry[0];const href = entry[1];const key = entry[2];
    const isActive = key === current;
    return (
      <a key={href} href={href} style={linkStyle(isActive)}
        onMouseEnter={function (e) { e.currentTarget.style.color = hoverColor; }}
        onMouseLeave={function (e) { e.currentTarget.style.color = isActive ? activeColor : baseColor; }}>
        {label}</a>);

  };

  const linkGroupStyle = {
    flex: 1,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'space-evenly',
    gap: 'clamp(10px, 1.5vw, 30px)',
    flexWrap: 'nowrap'
  };

  return (
    <nav style={navStyle} data-screen-label="nav">
      <div style={linkGroupStyle}>
        {leftLinks.map(renderLink)}
      </div>
      <a href={HOME_HREF} style={{ textDecoration: 'none', display: 'inline-flex', flex: '0 0 auto', margin: '0 clamp(10px, 1.8vw, 34px)' }} aria-label="Home"
        onMouseEnter={function () { setLogoHover(true); }}
        onMouseLeave={function () { setLogoHover(false); }}>
        <span
          role="img"
          aria-label="Sydney & Andrés · Tepoztlán · México · 2027"
          style={{
            display: 'block',
            height: solid ? 87 : 108,
            width: (solid ? 87 : 108) * 1.948,
            backgroundColor: solid ? logoHover ? '#fb8365' : '#370821' : '#f0e8d0',
            WebkitMaskImage: 'url(assets/sa-logo2-mask.png)',
            maskImage: 'url(assets/sa-logo2-mask.png)',
            WebkitMaskRepeat: 'no-repeat',
            maskRepeat: 'no-repeat',
            WebkitMaskSize: 'contain',
            maskSize: 'contain',
            WebkitMaskPosition: 'center',
            maskPosition: 'center',
            transition: 'height 600ms var(--ease-walk), width 600ms var(--ease-walk), background-color 220ms var(--ease-walk)'
          }} />
      </a>
      <div style={linkGroupStyle}>
        {rightLinks.map(renderLink)}
      </div>
    </nav>);

}

function Nav({ overHero = false, current = '' }) {
  const isMobile = useIsMobile(900);
  return isMobile ?
    <MobileNav overHero={overHero} current={current} /> :
    <DesktopNav overHero={overHero} current={current} />;
}

window.Nav = Nav;