// Top nav bar with language + theme toggles + mobile hamburger menu
const { useState: useStateNav, useEffect: useEffectNav } = React;

function Nav({ theme, lang, setLang, t, onBook, scrolled }) {
  const [menuOpen, setMenuOpen] = useStateNav(false);

  // Lock body scroll while menu is open
  useEffectNav(() => {
    if (menuOpen) {
      const prev = document.body.style.overflow;
      document.body.style.overflow = 'hidden';
      return () => { document.body.style.overflow = prev; };
    }
  }, [menuOpen]);

  // Close on Escape
  useEffectNav(() => {
    if (!menuOpen) return;
    const onKey = (e) => { if (e.key === 'Escape') setMenuOpen(false); };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [menuOpen]);

  const onReserveClick = (e) => {
    e.preventDefault();
    setMenuOpen(false);
    const el = document.getElementById('contact');
    if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
  };

  const links = [
    { href: '#classes', label: t.nav.classes },
    { href: '#social',  label: t.nav.social },
    { href: '#events',  label: t.nav.events },
    { href: '#about',   label: t.nav.about },
    { href: '#contact', label: t.nav.contact },
  ];

  const handleLinkClick = (e, href) => {
    e.preventDefault();
    setMenuOpen(false);
    // Wait a tick so body scroll lock is removed before scrolling
    setTimeout(() => {
      const el = document.querySelector(href);
      if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }, 50);
  };

  return (
    <React.Fragment>
      <nav style={{
        position: 'fixed', top: 0, left: 0, right: 0, zIndex: 50,
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: '14px 28px',
        background: scrolled || menuOpen ? '#0a0806ee' : '#0a0806',
        backdropFilter: scrolled || menuOpen ? 'blur(12px)' : 'none',
        borderBottom: scrolled || menuOpen ? '1px solid rgba(255,255,255,0.1)' : '1px solid transparent',
        transition: 'all 0.3s ease',
        color: '#f5efe2'
      }}>
        <a href="#top" aria-label={t.alt.logo} style={{
          display: 'flex', alignItems: 'center', gap: '10px',
          color: 'inherit', textDecoration: 'none'
        }}>
          <img src="assets/logo-wordmark.png" alt={t.alt.logo} style={{
            height: '88px', display: 'block', objectFit: 'contain', width: "200px"
          }} />
        </a>

        <div style={{ display: 'flex', gap: '28px', alignItems: 'center' }}>
          <div className="ls-nav-links" style={{ display: 'flex', gap: '22px', fontFamily: theme.body, fontSize: '14px' }}>
            {links.map((l) => (
              <a key={l.href} href={l.href} style={{ color: 'inherit', textDecoration: 'none', opacity: 0.85 }}>
                {l.label}
              </a>
            ))}
          </div>

          <div className="ls-lang-toggle" style={{
            display: 'flex', gap: '4px',
            fontFamily: theme.mono, fontSize: '11px', letterSpacing: '0.1em',
            border: '1px solid rgba(255,255,255,0.15)', borderRadius: theme.radius, padding: '2px'
          }}>
            {['es', 'en'].map((l) => (
              <button key={l} onClick={() => setLang(l)} style={{
                padding: '6px 10px',
                border: 'none',
                background: lang === l ? '#f5efe2' : 'transparent',
                color: lang === l ? '#0a0806' : '#f5efe2',
                fontFamily: 'inherit', fontSize: 'inherit', letterSpacing: 'inherit',
                cursor: 'pointer', borderRadius: theme.radius,
                textTransform: 'uppercase'
              }}>{l}</button>
            ))}
          </div>

          <a href="#contact" onClick={onReserveClick} className="ls-nav-reserve" style={{
            padding: '10px 18px',
            background: theme.accent,
            color: '#f5efe2',
            border: 'none',
            borderRadius: theme.radius,
            fontFamily: theme.body,
            fontSize: '14px',
            fontWeight: 600,
            cursor: 'pointer',
            display: 'inline-flex',
            alignItems: 'center',
            gap: '8px',
            whiteSpace: 'nowrap',
            textDecoration: 'none'
          }}>
            {t.nav.reserve}
            <span className="ls-nav-reserve-arrow" style={{ display: 'inline-block', transform: 'translateY(-1px)' }}>↓</span>
          </a>

          {/* Hamburger button — only visible on mobile via CSS */}
          <button
            className="ls-hamburger"
            aria-label={menuOpen ? 'Cerrar menú' : 'Abrir menú'}
            aria-expanded={menuOpen}
            onClick={() => setMenuOpen(!menuOpen)}
            style={{
              display: 'none', // overridden by mobile CSS
              width: '40px', height: '40px',
              padding: 0,
              border: '1px solid rgba(255,255,255,0.18)',
              background: 'transparent',
              borderRadius: theme.radius,
              cursor: 'pointer',
              alignItems: 'center', justifyContent: 'center',
              flexDirection: 'column', gap: '5px',
            }}
          >
            <span style={{
              display: 'block', width: '18px', height: '2px', background: '#f5efe2',
              transition: 'transform 0.25s ease, opacity 0.2s ease',
              transform: menuOpen ? 'translateY(7px) rotate(45deg)' : 'none',
            }} />
            <span style={{
              display: 'block', width: '18px', height: '2px', background: '#f5efe2',
              transition: 'opacity 0.15s ease',
              opacity: menuOpen ? 0 : 1,
            }} />
            <span style={{
              display: 'block', width: '18px', height: '2px', background: '#f5efe2',
              transition: 'transform 0.25s ease',
              transform: menuOpen ? 'translateY(-7px) rotate(-45deg)' : 'none',
            }} />
          </button>
        </div>
      </nav>

      {/* Mobile menu overlay */}
      <div
        className="ls-mobile-menu"
        role="dialog"
        aria-modal="true"
        aria-hidden={!menuOpen}
        style={{
          position: 'fixed',
          top: 0, left: 0, right: 0, bottom: 0,
          zIndex: 49,
          background: '#0a0806',
          color: '#f5efe2',
          padding: '110px 28px 32px',
          transform: menuOpen ? 'translateY(0)' : 'translateY(-100%)',
          transition: 'transform 0.35s cubic-bezier(0.4, 0, 0.2, 1)',
          display: 'flex',
          flexDirection: 'column',
          gap: '24px',
          overflowY: 'auto',
        }}
      >
        <div style={{ display: 'flex', flexDirection: 'column', gap: '6px' }}>
          {links.map((l, i) => (
            <a key={l.href} href={l.href}
              onClick={(e) => handleLinkClick(e, l.href)}
              style={{
                color: '#f5efe2',
                textDecoration: 'none',
                fontFamily: theme.display,
                fontStyle: theme.displayItalic ? 'italic' : 'normal',
                fontWeight: theme.displayWeight,
                fontSize: '40px',
                letterSpacing: '-0.025em',
                lineHeight: 1.15,
                padding: '14px 0',
                borderBottom: i < links.length - 1 ? '1px solid rgba(255,255,255,0.08)' : 'none',
                display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
              }}>
              <span>{l.label}</span>
              <span style={{
                fontFamily: theme.mono, fontSize: '12px',
                letterSpacing: '0.14em', opacity: 0.4,
              }}>0{i + 1}</span>
            </a>
          ))}
        </div>

        <div style={{ marginTop: 'auto', display: 'flex', flexDirection: 'column', gap: '18px' }}>
          <a
            href="https://wa.me/message/LNRZZI7DNWANB1"
            target="_blank"
            rel="noopener noreferrer"
            onClick={() => setMenuOpen(false)}
            style={{
              padding: '18px 22px',
              background: '#25D366',
              color: '#fff',
              borderRadius: theme.radius,
              textDecoration: 'none',
              fontFamily: theme.body,
              fontWeight: 600,
              fontSize: '16px',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'space-between',
            }}
          >
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: '12px' }}>
              <img src="assets/social/whatsapp.png" alt="" aria-hidden="true" style={{ width: '24px', height: '24px' }} />
              WhatsApp
            </span>
            <span>↗</span>
          </a>

          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '16px' }}>
            <div style={{
              fontFamily: theme.mono, fontSize: '11px',
              letterSpacing: '0.14em', textTransform: 'uppercase',
              opacity: 0.5,
            }}>Idioma · Language</div>
            <div style={{
              display: 'flex', gap: '4px',
              fontFamily: theme.mono, fontSize: '12px', letterSpacing: '0.1em',
              border: '1px solid rgba(255,255,255,0.15)', borderRadius: theme.radius, padding: '2px'
            }}>
              {['es', 'en'].map((l) => (
                <button key={l} onClick={() => setLang(l)} style={{
                  padding: '8px 14px',
                  border: 'none',
                  background: lang === l ? '#f5efe2' : 'transparent',
                  color: lang === l ? '#0a0806' : '#f5efe2',
                  fontFamily: 'inherit', fontSize: 'inherit', letterSpacing: 'inherit',
                  cursor: 'pointer', borderRadius: theme.radius,
                  textTransform: 'uppercase'
                }}>{l}</button>
              ))}
            </div>
          </div>
        </div>
      </div>
    </React.Fragment>
  );
}

function LogoMark({ theme, size = 32 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 40 40" fill="none">
      <circle cx="20" cy="20" r="19" stroke={theme.ink} strokeWidth="1.5" />
      <path d="M12 14 Q20 10 28 14 Q24 20 28 26 Q20 30 12 26 Q16 20 12 14Z"
        fill={theme.accent} />
      <circle cx="20" cy="20" r="2" fill={theme.bg} />
    </svg>
  );
}

Object.assign(window, { Nav, LogoMark });