// 228 FILMS · Nav top
// Mirror proto ACADEMY : sceau mini avec rotation 24s + wordmark mono
// top-left ; theme toggle + lang switch top-right + 3 liens centre desktop
// (Mandats / Immobilier / Contact). Burger sur mobile.

function Nav() {
  const { theme, setTheme } = useTheme();
  const { lang, setLang } = useLang();
  const { setPage } = usePage();
  const { isMobile } = useViewport();
  const [menuOpen, setMenuOpen] = React.useState(false);
  return (
    <React.Fragment>
      {/* Brand top-left */}
      <div style={{
        position: 'fixed', top: '1.8rem', left: 'clamp(1.5rem, 4vw, 3rem)',
        display: 'flex', alignItems: 'center', gap: '0.7rem',
        opacity: 0, animation: 'fade-in .8s ease-out .2s forwards',
        zIndex: 50,
      }} aria-label="228 FILMS">
        <Sceau size={22} rotate />
        <button onClick={() => { setMenuOpen(false); setPage('home'); }} style={{
          all: 'unset', cursor: 'pointer',
          fontFamily: TOK.mono, fontSize: '0.72rem',
          letterSpacing: '0.22em', fontWeight: 500,
          color: TOK.ink, textTransform: 'uppercase', whiteSpace: 'nowrap',
        }}>228 FILMS</button>
      </div>

      {/* Nav center · desktop only */}
      <NavCenter />

      {/* Controls top-right · theme + lang (always visible) + burger (mobile only) */}
      <div style={{
        position: 'fixed', top: '1.6rem', right: 'clamp(1rem, 3vw, 3rem)',
        display: 'flex', alignItems: 'center', gap: isMobile ? 8 : 14,
        opacity: 0, animation: 'fade-in .8s ease-out .3s forwards',
        zIndex: 50,
      }}>
        <ThemeToggle theme={theme} setTheme={setTheme} />
        <LangSwitch lang={lang} setLang={setLang} />
        {isMobile && <BurgerButton open={menuOpen} onClick={() => setMenuOpen(o => !o)} />}
      </div>

      {/* Mobile drawer overlay · 4 pages + theme + lang */}
      {isMobile && <MobileDrawer open={menuOpen} onClose={() => setMenuOpen(false)} />}
    </React.Fragment>
  );
}

function BurgerButton({ open, onClick }) {
  return (
    <button onClick={onClick}
      aria-label={open ? 'Fermer le menu' : 'Ouvrir le menu'}
      aria-expanded={open}
      style={{
        all: 'unset', cursor: 'pointer',
        width: 38, height: 38, borderRadius: 999,
        border: `1px solid ${TOK.ink22}`,
        color: TOK.ink,
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
        background: TOK.ivory,
      }}>
      {open ? (
        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
          <line x1="3" y1="3" x2="13" y2="13" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/>
          <line x1="13" y1="3" x2="3" y2="13" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/>
        </svg>
      ) : (
        <svg width="16" height="14" viewBox="0 0 16 14" fill="none" aria-hidden="true">
          <line x1="1" y1="2"  x2="15" y2="2"  stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/>
          <line x1="1" y1="7"  x2="15" y2="7"  stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/>
          <line x1="1" y1="12" x2="15" y2="12" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/>
        </svg>
      )}
    </button>
  );
}

function MobileDrawer({ open, onClose }) {
  const tr = useTr();
  const { setPage, page } = usePage();
  const links = [
    { slug: 'mandats',    label: { fr: 'Mandats',     en: 'Engagements' } },
    { slug: 'immobilier', label: { fr: 'Immobilier',  en: 'Real estate' } },
    { slug: 'contact',    label: { fr: 'Contact',     en: 'Contact' } },
  ];
  React.useEffect(() => {
    if (open) {
      document.body.style.overflow = 'hidden';
    } else {
      document.body.style.overflow = '';
    }
    return () => { document.body.style.overflow = ''; };
  }, [open]);
  if (!open) return null;
  return (
    <div role="dialog" aria-modal="true" style={{
      position: 'fixed', inset: 0, zIndex: 49,
      background: TOK.ivory,
      paddingTop: '5.5rem',
      paddingLeft: 'clamp(1.5rem, 4vw, 3rem)',
      paddingRight: 'clamp(1.5rem, 4vw, 3rem)',
      paddingBottom: '2rem',
      display: 'flex', flexDirection: 'column', gap: 32,
    }}>
      <nav aria-label="Pages" style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
        {links.map((l) => (
          <button key={l.slug}
            onClick={() => { setPage(l.slug); onClose(); }}
            style={{
              all: 'unset', cursor: 'pointer',
              padding: '18px 0',
              borderBottom: `1px solid ${TOK.ink10}`,
              fontFamily: TOK.sans, fontSize: 22, fontWeight: 500,
              letterSpacing: '-0.015em',
              color: page === l.slug ? TOK.bronze : TOK.ink,
              display: 'flex', justifyContent: 'space-between', alignItems: 'center',
            }}>
            <span>{tr(l.label)}</span>
            <span style={{ color: TOK.bronze, fontSize: 18 }}>→</span>
          </button>
        ))}
      </nav>
    </div>
  );
}

function NavCenter() {
  const tr = useTr();
  const { setPage, page } = usePage();
  const { isMobile } = useViewport();
  if (isMobile) return null;
  const links = [
    { slug: 'mandats',    label: { fr: 'Mandats',     en: 'Engagements' } },
    { slug: 'immobilier', label: { fr: 'Immobilier',  en: 'Real estate' } },
    { slug: 'contact',    label: { fr: 'Contact',     en: 'Contact' } },
  ];
  return (
    <nav aria-label="Pages" style={{
      position: 'fixed', top: '1.8rem', left: '50%',
      transform: 'translateX(-50%)',
      display: 'flex', alignItems: 'center', gap: 22,
      opacity: 0, animation: 'fade-in .8s ease-out .35s forwards',
      zIndex: 49,
    }}>
      {links.map((l) => (
        <NavLink key={l.slug} active={page === l.slug} onClick={() => setPage(l.slug)}>
          {tr(l.label)}
        </NavLink>
      ))}
    </nav>
  );
}

function NavLink({ active, onClick, children }) {
  const [hover, setHover] = React.useState(false);
  return (
    <button onClick={onClick}
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{
        all: 'unset', cursor: 'pointer',
        fontFamily: TOK.mono, fontSize: 10.5,
        letterSpacing: '.2em', textTransform: 'uppercase',
        color: active ? TOK.ink : (hover ? TOK.ink : TOK.inkMed),
        paddingBottom: 4,
        borderBottom: `1px solid ${active ? TOK.bronze : (hover ? TOK.ink22 : 'transparent')}`,
        transition: 'color .18s, border-color .18s',
      }}>{children}</button>
  );
}

function ThemeToggle({ theme, setTheme }) {
  const [hover, setHover] = React.useState(false);
  return (
    <button
      aria-label="Bascule clair / sombre"
      onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{
        all: 'unset', cursor: 'pointer',
        width: 32, height: 32, borderRadius: 999,
        border: `1px solid ${hover ? TOK.bronze : TOK.ink22}`,
        color: TOK.ink,
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
        transition: 'border-color .18s',
      }}>
      {theme === 'light' ? (
        <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
          <path d="M11.5 8.5a4.5 4.5 0 0 1-6-6 4.5 4.5 0 1 0 6 6Z" stroke="currentColor" strokeWidth="1.1" strokeLinejoin="round" />
        </svg>
      ) : (
        <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
          <circle cx="7" cy="7" r="2.6" stroke="currentColor" strokeWidth="1.1" />
          <line x1="7"   y1="0.5"  x2="7"    y2="2"    stroke="currentColor" strokeWidth="1.1" strokeLinecap="round" />
          <line x1="7"   y1="12"   x2="7"    y2="13.5" stroke="currentColor" strokeWidth="1.1" strokeLinecap="round" />
          <line x1="0.5" y1="7"    x2="2"    y2="7"    stroke="currentColor" strokeWidth="1.1" strokeLinecap="round" />
          <line x1="12"  y1="7"    x2="13.5" y2="7"    stroke="currentColor" strokeWidth="1.1" strokeLinecap="round" />
          <line x1="2.1" y1="2.1"  x2="3.2"  y2="3.2"  stroke="currentColor" strokeWidth="1.1" strokeLinecap="round" />
          <line x1="10.8" y1="10.8" x2="11.9" y2="11.9" stroke="currentColor" strokeWidth="1.1" strokeLinecap="round" />
          <line x1="2.1" y1="11.9" x2="3.2"  y2="10.8" stroke="currentColor" strokeWidth="1.1" strokeLinecap="round" />
          <line x1="10.8" y1="3.2" x2="11.9" y2="2.1"  stroke="currentColor" strokeWidth="1.1" strokeLinecap="round" />
        </svg>
      )}
    </button>
  );
}

function LangSwitch({ lang, setLang }) {
  return (
    <div role="group" aria-label="Langue" style={{
      display: 'flex', alignItems: 'center', gap: 2,
      border: `1px solid ${TOK.ink22}`, borderRadius: 999, padding: 3,
    }}>
      {['fr', 'en'].map((v) => (
        <button key={v}
          onClick={() => setLang(v)}
          aria-label={v === 'fr' ? 'Français' : 'English'}
          style={{
            all: 'unset', cursor: 'pointer',
            padding: '4px 11px', borderRadius: 999,
            fontFamily: TOK.mono, fontSize: 10,
            letterSpacing: '.18em', textTransform: 'uppercase',
            background: lang === v ? TOK.ink : 'transparent',
            color: lang === v ? TOK.ivory : TOK.inkMed,
            transition: 'background .18s, color .18s',
          }}>{v}</button>
      ))}
    </div>
  );
}

Object.assign(window, { Nav, NavCenter, NavLink, BurgerButton, MobileDrawer });