/* Corsa Privata — homepage header. Light, refined. Transparent over the ivory
 * hero, condenses to a porcelain bar on scroll. Single CTA + ES/EN toggle.
 * On <=980px the nav collapses into a hamburger menu. */
const { Logo, Button } = window.CorsaPrivataDesignSystem_94a5c9;
const HeaderIcon = window.Icon;

function Header({ go, t, lang, setLang }) {
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen] = React.useState(false);

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

  React.useEffect(() => {
    const onResize = () => { if (window.innerWidth > 980) setOpen(false); };
    window.addEventListener('resize', onResize);
    return () => window.removeEventListener('resize', onResize);
  }, []);

  const ids = ['house', 'configure', 'standard'];
  const links = t.header.nav.map((label, i) => ({ label, id: ids[i] }));
  const solid = scrolled || open;
  const goClose = (id) => { setOpen(false); go(id); };

  return (
    <header
      className="cp-header"
      style={{
        position: 'fixed', top: 0, left: 0, right: 0, zIndex: 40,
        background: solid ? 'rgba(245,242,237,0.92)' : 'transparent',
        backdropFilter: solid ? 'blur(12px) saturate(140%)' : 'none',
        WebkitBackdropFilter: solid ? 'blur(12px) saturate(140%)' : 'none',
        borderBottom: scrolled && !open ? '1px solid var(--border-hairline)' : '1px solid transparent',
        transition: 'background var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard)',
      }}
    >
      <div
        className="cp-header-inner"
        style={{
          maxWidth: 'var(--container-max)', margin: '0 auto',
          padding: scrolled ? '14px 32px' : '22px 32px',
          display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 20,
          transition: 'padding var(--dur-base) var(--ease-standard)',
        }}
      >
        <a href="#top" onClick={(e) => { e.preventDefault(); goClose('top'); }}
           className="cp-brand" aria-label="Corsa Privata"
           style={{ display: 'flex', alignItems: 'center', textDecoration: 'none', flexShrink: 0 }}>
          <img className="cp-logo" src="assets/logo-horizontal.png" alt="Corsa Privata" style={{ height: 44, width: 'auto', display: 'block' }} />
        </a>

        <nav className="cp-nav" style={{ display: 'flex', alignItems: 'center', gap: 30 }}>
          {links.map((l) => (
            <a key={l.id} href={'#' + l.id}
               onClick={(e) => { e.preventDefault(); go(l.id); }}
               className="cp-navlink"
               style={{
                 fontFamily: 'var(--font-display)', fontSize: 12, fontWeight: 'var(--fw-medium)',
                 textTransform: 'uppercase', letterSpacing: 'var(--ls-wider)',
                 color: 'var(--text-body)', textDecoration: 'none', whiteSpace: 'nowrap',
                 transition: 'color var(--dur-fast) var(--ease-standard)',
               }}>{l.label}</a>
          ))}
        </nav>

        <div style={{ display: 'flex', alignItems: 'center', gap: 14, flexShrink: 0 }}>
          <div className="cp-lang" role="group" aria-label="Language" style={{ display: 'inline-flex', alignItems: 'center', gap: 2 }}>
            {['es', 'en'].map((lg, i) => (
              <React.Fragment key={lg}>
                {i > 0 && <span style={{ color: 'var(--text-faint)', fontSize: 11 }}>/</span>}
                <button onClick={() => setLang(lg)} aria-pressed={lang === lg}
                  style={{
                    background: 'none', border: 'none', cursor: 'pointer', padding: '6px 4px',
                    fontFamily: 'var(--font-display)', fontSize: 12, fontWeight: 'var(--fw-medium)',
                    letterSpacing: 'var(--ls-wide)', textTransform: 'uppercase',
                    color: lang === lg ? 'var(--cp-gold-700)' : 'var(--text-muted)',
                    borderBottom: lang === lg ? '1px solid var(--cp-gold-500)' : '1px solid transparent',
                    transition: 'color var(--dur-fast) var(--ease-standard)',
                  }}>{lg.toUpperCase()}</button>
              </React.Fragment>
            ))}
          </div>
          <Button size="sm" className="cp-cta-head" onClick={() => go('begin')}>{t.header.cta}</Button>
          <button className="cp-burger" aria-label="Menu" aria-expanded={open} onClick={() => setOpen((o) => !o)}
            style={{ width: 44, height: 44, alignItems: 'center', justifyContent: 'center', background: 'transparent', border: 'none', cursor: 'pointer', padding: 0, marginRight: -8, color: 'var(--text-strong)' }}>
            <HeaderIcon name={open ? 'x' : 'menu'} size={23} stroke={1.7} color="var(--text-strong)" />
          </button>
        </div>
      </div>

      {open && (
        <div className="cp-mobile-menu" style={{
          position: 'absolute', top: '100%', left: 0, right: 0,
          background: 'rgba(245,242,237,0.98)', backdropFilter: 'blur(12px)', WebkitBackdropFilter: 'blur(12px)',
          borderBottom: '1px solid var(--border-default)', boxShadow: 'var(--shadow-lg)',
          padding: '8px 24px 24px',
        }}>
          <nav style={{ display: 'flex', flexDirection: 'column' }}>
            {links.map((l) => (
              <a key={l.id} href={'#' + l.id} onClick={(e) => { e.preventDefault(); goClose(l.id); }}
                style={{
                  fontFamily: 'var(--font-display)', fontSize: 14, fontWeight: 'var(--fw-medium)',
                  textTransform: 'uppercase', letterSpacing: 'var(--ls-wider)', color: 'var(--text-strong)',
                  textDecoration: 'none', padding: '16px 2px', borderBottom: '1px solid var(--border-hairline)',
                }}>{l.label}</a>
            ))}
          </nav>
          <div style={{ marginTop: 20 }}>
            <Button size="lg" fullWidth onClick={() => { setOpen(false); go('begin'); }}>{t.header.cta}</Button>
          </div>
        </div>
      )}
    </header>
  );
}

window.Header = Header;