/* Créapeiron maison — top navigation. Transparent over hero, frosts on scroll. */
const { Button: CPButton } = window.CrApeironELYSIENDesignSystem_f7a37f;

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

  const links = [
    ['Manifesto', 'manifesto'],
    ['Craftsmanship', 'craft'],
    ['Mechanism', 'mechanism'],
    ['Specifications', 'specs'],
    ['Collection', 'collection'],
    ['Vault', 'case'],
    ['Philosophy', 'philosophy'],
    ['Collectors', 'collectors'],
    ['Dealers', 'dealers'],
  ];

  const go = (id) => { setOpen(false); onNavigate && onNavigate(id); };

  return (
    <header style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 500,
      transition: 'background var(--dur-base) var(--ease-cinema), border-color var(--dur-base) var(--ease-cinema), backdrop-filter var(--dur-base)',
      background: scrolled ? 'rgba(10,10,13,0.72)' : 'transparent',
      backdropFilter: scrolled ? 'blur(18px) saturate(1.1)' : 'none',
      WebkitBackdropFilter: scrolled ? 'blur(18px) saturate(1.1)' : 'none',
      borderBottom: `1px solid ${scrolled ? 'var(--border-hairline)' : 'transparent'}`,
    }}>
      <div style={{
        maxWidth: 'var(--container-wide)', margin: '0 auto',
        padding: '0 24px', height: scrolled ? '70px' : '92px',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        transition: 'height var(--dur-base) var(--ease-cinema)',
      }}>
        <a href="#top" onClick={(e) => { e.preventDefault(); go('top'); }} style={{ display: 'flex', alignItems: 'center', textDecoration: 'none' }}>
          <Pic src="assets/logo/CREAPEIRON_white.png" alt="Créapeiron" style={{
            width: scrolled ? '62px' : '72px', height: 'auto', flex: '0 0 auto', display: 'block',
            transition: 'width var(--dur-base) var(--ease-cinema)',
          }} />
        </a>

        <nav style={{ display: 'flex', alignItems: 'center', gap: '14px' }} className="cp-nav-links">
          {links.map(([label, id]) => (
            <a key={id} href={'#' + id} onClick={(e) => { e.preventDefault(); go(id); }}
              style={{
                fontFamily: 'var(--font-display)', fontWeight: 'var(--fw-medium)',
                fontSize: 'var(--fs-eyebrow)', letterSpacing: '0.1em',
                textTransform: 'uppercase', color: 'var(--text-secondary)',
                whiteSpace: 'nowrap',
                transition: 'color var(--dur-base) var(--ease-cinema)',
              }}
              onMouseEnter={(e) => e.currentTarget.style.color = 'var(--text-primary)'}
              onMouseLeave={(e) => e.currentTarget.style.color = 'var(--text-secondary)'}
            >{label}</a>
          ))}
        </nav>

        <div style={{ display: 'flex', alignItems: 'center', gap: '18px' }}>
          <CPButton variant="ghost" size="sm" onClick={() => go('concierge')}>Concierge</CPButton>
        </div>
      </div>
    </header>
  );
}

window.MaisonNav = MaisonNav;