// Top navigation — fixed, glass, trilingual

function Nav({ lang, setLang, onNav, scrolled }) {
  const L = LANG_COPY[lang];
  const [open, setOpen] = React.useState(false);

  return (
    <nav style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 50,
      padding: scrolled ? '14px 40px' : '24px 40px',
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      backdropFilter: scrolled ? 'blur(20px) saturate(1.4)' : 'none',
      background: scrolled ? 'rgba(18, 20, 28, 0.72)' : 'transparent',
      borderBottom: scrolled ? '1px solid rgba(255,255,255,0.06)' : '1px solid transparent',
      transition: 'all 0.35s cubic-bezier(.2,.7,.3,1)',
    }}>
      <a href="#top" onClick={(e) => { e.preventDefault(); onNav('top'); }}
        style={{ display: 'flex', alignItems: 'center', gap: 12, textDecoration: 'none', color: 'inherit' }}>
        <CygnusWordmark size={scrolled ? 22 : 26} />
      </a>

      <div className="nav-links" style={{ display: 'flex', gap: 36, alignItems: 'center' }}>
        {L.nav.map((item) => (
          <a key={item.id} href={`#${item.id}`}
            onClick={(e) => { e.preventDefault(); onNav(item.id); }}
            style={{
              color: 'rgba(255,255,255,0.78)', textDecoration: 'none',
              fontSize: 14, fontWeight: 500, letterSpacing: 0.2,
              transition: 'color 0.2s',
            }}
            onMouseEnter={(e) => (e.currentTarget.style.color = 'rgba(255,255,255,1)')}
            onMouseLeave={(e) => (e.currentTarget.style.color = 'rgba(255,255,255,0.78)')}
          >
            {item.label}
          </a>
        ))}
      </div>

      <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
        <LangSwitcher lang={lang} setLang={setLang} />
        <button onClick={() => onNav('contact')} className="cta-pill">
          {L.ctaNav}
          <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
            <path d="M3 9L9 3M9 3H4M9 3V8" />
          </svg>
        </button>
      </div>
    </nav>
  );
}

function LangSwitcher({ lang, setLang }) {
  const langs = ['es', 'en', 'pt'];
  return (
    <div style={{
      display: 'flex', gap: 2, padding: 3,
      background: 'rgba(255,255,255,0.04)',
      borderRadius: 100, border: '1px solid rgba(255,255,255,0.08)',
    }}>
      {langs.map((l) => (
        <button key={l} onClick={() => setLang(l)}
          style={{
            padding: '5px 10px', fontSize: 11, fontWeight: 600,
            letterSpacing: 0.8, textTransform: 'uppercase',
            fontFamily: 'var(--font-mono)',
            background: lang === l ? 'rgba(255,255,255,0.12)' : 'transparent',
            color: lang === l ? '#fff' : 'rgba(255,255,255,0.5)',
            border: 'none', borderRadius: 100, cursor: 'pointer',
            transition: 'all 0.2s',
          }}>
          {l}
        </button>
      ))}
    </div>
  );
}

function CygnusWordmark({ size = 26, color }) {
  return (
    <span style={{
      fontFamily: 'var(--font-wordmark)',
      fontWeight: 500,
      fontSize: size,
      letterSpacing: size * 0.28,
      color: color || 'var(--fg)',
      textTransform: 'uppercase',
      lineHeight: 1,
      paddingRight: size * 0.28,
    }}>CYGNUS</span>
  );
}

function CygnusMark({ size = 32, accent }) {
  return (
    <svg width={size} height={size} viewBox="0 0 32 32" fill="none" aria-label="Cygnus">
      <circle cx="16" cy="16" r="15" stroke="currentColor" strokeOpacity="0.15" strokeWidth="1" />
      <path d="M23 8 C17 6, 10 10, 9 17 C8 23, 13 26, 19 25"
        stroke={accent || 'var(--accent)'} strokeWidth="2" strokeLinecap="round" fill="none" />
      <circle cx="23" cy="8" r="1.8" fill={accent || 'var(--accent)'} />
      <circle cx="9" cy="17" r="1.4" fill={accent || 'var(--accent)'} />
      <circle cx="19" cy="25" r="1.6" fill={accent || 'var(--accent)'} />
    </svg>
  );
}

Object.assign(window, { Nav, LangSwitcher, CygnusMark, CygnusWordmark });
