// Top nav with language toggle

function SunMark({ size = 22 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" aria-hidden="true">
      <circle cx="12" cy="12" r="4.2" fill="var(--sun)" />
      <g stroke="var(--ink)" strokeWidth="1.6" strokeLinecap="round">
        <line x1="12" y1="1.5" x2="12" y2="4.5" />
        <line x1="12" y1="19.5" x2="12" y2="22.5" />
        <line x1="1.5" y1="12" x2="4.5" y2="12" />
        <line x1="19.5" y1="12" x2="22.5" y2="12" />
        <line x1="4.6" y1="4.6" x2="6.7" y2="6.7" />
        <line x1="17.3" y1="17.3" x2="19.4" y2="19.4" />
        <line x1="4.6" y1="19.4" x2="6.7" y2="17.3" />
        <line x1="17.3" y1="6.7" x2="19.4" y2="4.6" />
      </g>
    </svg>
  );
}

function Wordmark() {
  return (
    <a href="#top" className="wordmark" aria-label="Sunblocker home">
      <SunMark />
      <span>
        <span style={{ fontWeight: 700 }}>sun</span>
        <span style={{ fontWeight: 400, opacity: 0.7 }}>blocker</span>
      </span>
    </a>
  );
}

function LangToggle() {
  const { lang, setLang } = useLang();
  return (
    <div className="lang-toggle" role="group" aria-label="Language">
      <button
        className={"lang-btn " + (lang === 'en' ? 'lang-btn-on' : '')}
        onClick={() => setLang('en')}
        aria-pressed={lang === 'en'}
      >EN</button>
      <button
        className={"lang-btn " + (lang === 'es' ? 'lang-btn-on' : '')}
        onClick={() => setLang('es')}
        aria-pressed={lang === 'es'}
      >ES</button>
      <style>{`
        .lang-toggle {
          display: inline-flex;
          padding: 3px;
          background: var(--bg-2);
          border: 1px solid var(--hairline);
          border-radius: 999px;
          font-family: var(--mono);
          font-size: 11px;
          letter-spacing: 0.08em;
        }
        .lang-btn {
          background: transparent; border: 0;
          padding: 5px 10px;
          border-radius: 999px;
          color: var(--ink-soft);
          font: inherit;
          font-weight: 500;
        }
        .lang-btn-on {
          background: var(--ink);
          color: var(--bg);
        }
        [data-theme="dark"] .lang-btn-on { background: var(--sun); color: #15110a; }
      `}</style>
    </div>
  );
}

function TopNav({ onBookClick }) {
  const { t } = useLang();
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const links = [
    { label: t.nav.work,     href: '#work' },
    { label: t.nav.benefits, href: '#benefits' },
    { label: t.nav.how,      href: '#how' },
    { label: t.nav.pricing,  href: '#pricing' },
    { label: t.nav.about,    href: '#about' },
  ];

  return (
    <header className={"nav " + (scrolled ? "nav-scrolled" : "")}>
      <div className="wrap nav-inner">
        <Wordmark />
        <nav className="nav-links" aria-label="Primary">
          {links.map(l => (
            <a key={l.href} href={l.href}>{l.label}</a>
          ))}
        </nav>
        <div className="nav-cta">
          <LangToggle />
          <button className="btn btn-primary nav-book" onClick={onBookClick}>
            <span className="nav-book-full">{t.nav.cta}</span>
            <span className="nav-book-short">{t.nav.ctaShort}</span>
          </button>
          <button className="nav-burger" onClick={() => setOpen(o => !o)} aria-label={t.nav.menu}>
            <span /><span /><span />
          </button>
        </div>
      </div>
      {open && (
        <div className="nav-mobile" onClick={() => setOpen(false)}>
          {links.map(l => <a key={l.href} href={l.href}>{l.label}</a>)}
          <button className="btn btn-primary" onClick={onBookClick}>{t.nav.cta}</button>
        </div>
      )}
      <style>{`
        .nav {
          position: sticky; top: 0; z-index: 50;
          padding: 14px 0;
          border-bottom: 1px solid transparent;
          transition: background .2s, border-color .2s, backdrop-filter .2s;
        }
        .nav-scrolled {
          background: color-mix(in srgb, var(--bg) 80%, transparent);
          backdrop-filter: blur(20px) saturate(180%);
          -webkit-backdrop-filter: blur(20px) saturate(180%);
          border-color: var(--hairline);
        }
        .nav-inner {
          display: flex; align-items: center; justify-content: space-between;
          gap: 8px;
        }
        @media (min-width: 700px) {
          .nav-inner { gap: 16px; }
        }
        .wordmark {
          display: inline-flex; align-items: center; gap: 10px;
          font-family: var(--display);
          font-size: 19px;
          letter-spacing: -0.02em;
        }
        .nav-links {
          display: none;
          gap: 24px;
          font-size: 14px;
          color: var(--ink-soft);
        }
        .nav-links a:hover { color: var(--ink); }
        .nav-cta { display: inline-flex; gap: 6px; align-items: center; }
        @media (min-width: 700px) {
          .nav-cta { gap: 10px; }
        }
        .nav-book { padding: 10px 16px; font-size: 14px; }
        .nav-book-full { display: none; }
        .nav-book-short { display: inline; }
        @media (min-width: 640px) {
          .nav-book-full { display: inline; }
          .nav-book-short { display: none; }
        }
        .nav-burger {
          width: 40px; height: 40px;
          display: inline-flex; flex-direction: column;
          align-items: center; justify-content: center;
          gap: 4px;
          background: transparent;
          border: 1px solid var(--hairline);
          border-radius: 999px;
        }
        .nav-burger span {
          width: 16px; height: 1.5px; background: var(--ink);
        }
        .nav-mobile {
          position: absolute; top: 100%; left: 0; right: 0;
          background: var(--bg);
          border-bottom: 1px solid var(--hairline);
          padding: 16px 24px 24px;
          display: flex; flex-direction: column; gap: 12px;
          font-size: 18px;
        }
        .nav-mobile a { padding: 10px 0; border-bottom: 1px solid var(--hairline); }
        @media (min-width: 980px) {
          .nav-links { display: inline-flex; }
          .nav-burger { display: none; }
        }
      `}</style>
    </header>
  );
}

Object.assign(window, { TopNav, SunMark, Wordmark, LangToggle });