// Nav.jsx — glass top bar (responsive: pill on desktop, hamburger on mobile)

function Nav() {
  const links = [
    ['#hero', 'Home'],
    ['#story', 'Our Story'],
    ['#ceremony', 'Lễ cưới'],
    ['#schedule', 'Lịch trình'],
    ['#gallery', 'Gallery'],
    ['#rsvp', 'RSVP'],
    ['#wishes', 'Lời chúc'],
  ];

  const [open, setOpen] = React.useState(false);

  // Close mobile menu on resize to desktop
  React.useEffect(() => {
    const onResize = () => { if (window.innerWidth > 820) setOpen(false); };
    window.addEventListener('resize', onResize);
    return () => window.removeEventListener('resize', onResize);
  }, []);

  // Prevent body scroll when mobile menu open
  React.useEffect(() => {
    document.body.style.overflow = open ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [open]);

  const linkStyle = {
    fontFamily: 'var(--font-ui)', fontSize: 13, fontWeight: 600,
    color: 'var(--ink-700)', padding: '8px 12px',
    textDecoration: 'none', borderRadius: 'var(--r-pill)',
    transition: 'all .2s',
  };

  return (
    <>
      <style>{`
        .ll-nav-desktop { display: flex; }
        .ll-nav-burger  { display: none; }
        @media (max-width: 820px) {
          .ll-nav-desktop { display: none; }
          .ll-nav-burger  { display: inline-flex; }
        }
        .ll-burger-line {
          display: block; width: 22px; height: 2px; background: var(--ink-700);
          border-radius: 2px; transition: transform .3s ease, opacity .3s ease;
        }
        .ll-burger.open .l1 { transform: translateY(6px) rotate(45deg); }
        .ll-burger.open .l2 { opacity: 0; }
        .ll-burger.open .l3 { transform: translateY(-6px) rotate(-45deg); }

        .ll-mobile-sheet {
          position: fixed; inset: 0; z-index: 49;
          background: rgba(58, 42, 51, 0.35);
          backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
          opacity: 0; pointer-events: none; transition: opacity .3s ease;
        }
        .ll-mobile-sheet.open { opacity: 1; pointer-events: auto; }
        .ll-mobile-panel {
          position: absolute; top: 76px; left: 16px; right: 16px;
          background: var(--cream-50);
          border: 1px solid var(--border-rose);
          border-radius: var(--r-xl);
          box-shadow: var(--shadow-xl);
          padding: 18px 14px;
          transform: translateY(-12px); transition: transform .35s cubic-bezier(.34,1.56,.64,1);
        }
        .ll-mobile-sheet.open .ll-mobile-panel { transform: translateY(0); }
        .ll-mobile-link {
          display: block; padding: 14px 18px; margin: 2px 0;
          font-family: var(--font-ui); font-size: 16px; font-weight: 600;
          color: var(--ink-900); text-decoration: none;
          border-radius: var(--r-md);
          transition: background .2s, color .2s;
        }
        .ll-mobile-link:active, .ll-mobile-link:hover {
          background: var(--pink-100); color: var(--pink-700);
        }
        .ll-mobile-link + .ll-mobile-link { border-top: 1px solid var(--ink-100); }
      `}</style>

      <nav style={{
        position: 'fixed', top: 16, left: '50%', transform: 'translateX(-50%)',
        zIndex: 50,
        background: 'rgba(253, 246, 233, 0.75)',
        backdropFilter: 'blur(12px)',
        WebkitBackdropFilter: 'blur(12px)',
        borderRadius: 'var(--r-pill)',
        padding: '8px 14px',
        boxShadow: 'var(--shadow-md)',
        border: '1px solid var(--border-rose)',
        display: 'flex', alignItems: 'center', gap: 4,
        maxWidth: 'calc(100vw - 32px)',
      }}>
        <img src="assets/logo-mark.svg" style={{ width: 32, height: 32, marginRight: 4 }}/>

        {/* Desktop links */}
        <div className="ll-nav-desktop" style={{ alignItems: 'center', gap: 4 }}>
          {links.map(([href, label]) => (
            <a key={href} href={href} style={linkStyle}
              onMouseEnter={e => { e.currentTarget.style.background = 'var(--pink-200)'; e.currentTarget.style.color = 'var(--pink-700)'; }}
              onMouseLeave={e => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = 'var(--ink-700)'; }}
            >{label}</a>
          ))}
        </div>

        {/* Mobile burger button */}
        <button
          aria-label={open ? 'Đóng menu' : 'Mở menu'}
          aria-expanded={open}
          onClick={() => setOpen(o => !o)}
          className={`ll-nav-burger ll-burger ${open ? 'open' : ''}`}
          style={{
            background: 'transparent', border: 'none', cursor: 'pointer',
            width: 40, height: 40, borderRadius: 'var(--r-pill)',
            alignItems: 'center', justifyContent: 'center',
            flexDirection: 'column', gap: 4, padding: 0,
          }}
        >
          <span className="ll-burger-line l1"/>
          <span className="ll-burger-line l2"/>
          <span className="ll-burger-line l3"/>
        </button>
      </nav>

      {/* Mobile dropdown sheet */}
      <div
        className={`ll-mobile-sheet ${open ? 'open' : ''}`}
        onClick={() => setOpen(false)}
      >
        <div className="ll-mobile-panel" onClick={e => e.stopPropagation()}>
          {links.map(([href, label]) => (
            <a key={href} href={href} className="ll-mobile-link"
              onClick={() => setOpen(false)}
            >{label}</a>
          ))}
        </div>
      </div>
    </>
  );
}

window.Nav = Nav;