// nav.jsx — top nav con logo Asterisk + menú móvil
const { useEffect: __ne, useState: __ns } = React;

function Nav({ t, lang, setLang }) {
  const [scrolled, setScrolled] = __ns(false);
  const [open, setOpen] = __ns(false);

  __ne(() => {
    const onScroll = () => setScrolled(window.scrollY > 60);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  __ne(() => {
    document.body.style.overflow = open ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [open]);

  const linkStyle = {
    color: 'var(--ink)', textDecoration: 'none', fontSize: 14,
    fontWeight: 500, letterSpacing: '-0.005em', transition: 'color 0.3s',
  };

  const close = () => setOpen(false);

  return (
    <nav style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 90,
      padding: scrolled ? '12px 24px' : '24px 24px',
      transition: 'padding 0.5s var(--ease-snap), background 0.4s, border-color 0.4s',
      background: scrolled || open ? 'color-mix(in oklch, var(--bg) 92%, transparent)' : 'transparent',
      backdropFilter: scrolled || open ? 'blur(20px) saturate(140%)' : 'none',
      WebkitBackdropFilter: scrolled || open ? 'blur(20px) saturate(140%)' : 'none',
      borderBottom: scrolled || open ? '1.5px solid var(--ink)' : '1.5px solid transparent',
    }}>
      <div className="nav-grid" style={{
        display: 'grid', gridTemplateColumns: '1fr auto 1fr', alignItems: 'center',
        gap: 24, maxWidth: 1600, margin: '0 auto'
      }}>
        <a href="#top" onClick={close} aria-label="Multiples Medios — inicio"
           style={{ textDecoration: 'none', color: 'var(--ink)', display: 'flex', alignItems: 'center', gap: 12 }}>
          <AsteriskMark size={34} />
          <span className="nav-wordmark" style={{
            fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 700,
            letterSpacing: '-0.03em', whiteSpace: 'nowrap'
          }}>
            multiples<span style={{
              fontFamily: 'var(--font-mono)', fontWeight: 400, fontSize: 18,
              margin: '0 4px', color: 'var(--magenta)'
            }}>·</span>medios
          </span>
        </a>

        {/* Pill central (desktop) */}
        <div className="nav-center" style={{
          display: 'flex', gap: 28, justifyContent: 'center',
          padding: '8px 20px',
          border: scrolled ? '1.5px solid transparent' : '1.5px solid var(--ink)',
          borderRadius: 999,
          background: scrolled ? 'transparent' : 'var(--paper)',
          transition: 'all 0.5s var(--ease-snap)'
        }}>
          <a href="#work" style={linkStyle} className="navlink">{t.nav.work}</a>
          <a href="#services" style={linkStyle} className="navlink">{t.nav.services}</a>
          <a href="#studio" style={linkStyle} className="navlink">{t.nav.studio}</a>
          <a href="#contact" style={linkStyle} className="navlink">{t.nav.contact}</a>
        </div>

        {/* Derecha (desktop): lang + CTA */}
        <div className="nav-right" style={{ display: 'flex', justifyContent: 'flex-end', gap: 12, alignItems: 'center' }}>
          <LangToggle lang={lang} setLang={setLang} />
          <a href="#contact" className="btn nav-cta" style={{ padding: '10px 18px', fontSize: 13 }}>
            {t.cta_brief} <span className="arrow">↗</span>
          </a>
        </div>

        {/* Botón hamburguesa (móvil) */}
        <button className="nav-burger" aria-label={open ? 'Cerrar menú' : 'Abrir menú'} aria-expanded={open}
          onClick={() => setOpen(o => !o)}
          style={{
            display: 'none', alignItems: 'center', justifyContent: 'center',
            width: 44, height: 44, borderRadius: 12,
            border: '1.5px solid var(--ink)', background: 'var(--paper)',
            padding: 0, cursor: 'pointer'
          }}>
          <span className={`burger ${open ? 'open' : ''}`}><i></i><i></i><i></i></span>
        </button>
      </div>

      {/* Drawer móvil */}
      <div className={`nav-drawer ${open ? 'open' : ''}`} aria-hidden={!open}>
        <div className="nav-drawer-inner">
          {[
            { h: '#work', l: t.nav.work },
            { h: '#services', l: t.nav.services },
            { h: '#studio', l: t.nav.studio },
            { h: '#contact', l: t.nav.contact },
          ].map(it => (
            <a key={it.h} href={it.h} onClick={close} className="nav-drawer-link">{it.l}</a>
          ))}
          <div style={{ display: 'flex', gap: 12, alignItems: 'center', marginTop: 24 }}>
            <LangToggle lang={lang} setLang={setLang} />
            <a href="#contact" onClick={close} className="btn" style={{ flex: 1, justifyContent: 'center' }}>
              {t.cta_brief} <span className="arrow">↗</span>
            </a>
          </div>
        </div>
      </div>

      <style>{`
        .navlink { position: relative; }
        .navlink::after {
          content: ''; position: absolute; left: 0; bottom: -4px;
          width: 0; height: 2px; background: var(--magenta);
          transition: width 0.4s var(--ease-snap);
        }
        .navlink:hover::after { width: 100%; }

        .burger { width: 20px; height: 14px; position: relative; display: inline-block; }
        .burger i {
          position: absolute; left: 0; right: 0; height: 2px;
          background: var(--ink); border-radius: 2px;
          transition: transform 0.3s var(--ease-snap), opacity 0.3s, top 0.3s;
        }
        .burger i:nth-child(1) { top: 0; }
        .burger i:nth-child(2) { top: 6px; }
        .burger i:nth-child(3) { top: 12px; }
        .burger.open i:nth-child(1) { top: 6px; transform: rotate(45deg); }
        .burger.open i:nth-child(2) { opacity: 0; }
        .burger.open i:nth-child(3) { top: 6px; transform: rotate(-45deg); }

        .nav-drawer {
          position: fixed; left: 0; right: 0; top: 100%;
          background: var(--bg);
          border-bottom: 1.5px solid var(--ink);
          transform: translateY(-20px); opacity: 0; pointer-events: none;
          transition: transform 0.4s var(--ease-snap), opacity 0.3s;
          max-height: calc(100vh - 80px); overflow-y: auto;
        }
        .nav-drawer.open { transform: translateY(0); opacity: 1; pointer-events: auto; }
        .nav-drawer-inner {
          max-width: 1600px; margin: 0 auto;
          padding: 32px 24px 40px;
          display: flex; flex-direction: column; gap: 4px;
        }
        .nav-drawer-link {
          font-family: var(--font-display);
          font-size: 32px; font-weight: 700; letter-spacing: -0.02em;
          color: var(--ink); text-decoration: none; padding: 10px 0;
          border-bottom: 1px solid var(--line);
        }
        .nav-drawer-link:active { color: var(--magenta); }

        @media (max-width: 900px) {
          .nav-grid { grid-template-columns: 1fr auto !important; }
          .nav-center { display: none !important; }
          .nav-right { display: none !important; }
          .nav-burger { display: inline-flex !important; }
          .nav-wordmark { font-size: 19px !important; }
        }
        @media (max-width: 480px) {
          .nav-wordmark { font-size: 17px !important; }
          .nav-wordmark span { font-size: 14px !important; margin: 0 3px !important; }
        }
        @media (max-width: 360px) {
          .nav-wordmark { font-size: 15px !important; letter-spacing: -0.025em !important; }
        }
      `}</style>
    </nav>
  );
}

function LangToggle({ lang, setLang }) {
  return (
    <div style={{
      display: 'flex', border: '1.5px solid var(--ink)', borderRadius: 999,
      padding: 3, fontFamily: 'var(--font-mono)', fontSize: 11, fontWeight: 600,
      background: 'var(--paper)'
    }}>
      {['es', 'en'].map(l => (
        <button key={l} onClick={() => setLang(l)} aria-label={`Cambiar idioma a ${l.toUpperCase()}`}
          style={{
            border: 0, background: lang === l ? 'var(--ink)' : 'transparent',
            color: lang === l ? 'var(--bg)' : 'var(--ink)',
            padding: '4px 10px', borderRadius: 999, textTransform: 'uppercase',
            transition: 'all 0.3s', fontFamily: 'inherit', fontSize: 'inherit', fontWeight: 'inherit',
            cursor: 'pointer'
          }}>{l}</button>
      ))}
    </div>
  );
}

// LogoMark legacy: lo dejamos como alias del AsteriskMark para compatibilidad
function LogoMark(props) { return <AsteriskMark {...props} />; }

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