// Header.jsx — sticky header with logo, nav, and CTA

const { useState, useEffect } = React;

function Logo() {
  return (
    <a href="#" style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
      <img src="../../assets/logo-mark.svg" width="36" height="36" alt="" />
      <div style={{ lineHeight: 1, whiteSpace: 'nowrap' }}>
        <div style={{
          fontFamily: 'var(--ffit-font-display)',
          fontWeight: 700,
          fontSize: 20,
          letterSpacing: '-0.02em',
          color: 'var(--ffit-fg-1)'
        }}>FFIT</div>
        <div style={{
          fontFamily: 'var(--ffit-font-body)',
          fontSize: 10,
          letterSpacing: '0.08em',
          textTransform: 'uppercase',
          color: 'var(--ffit-fg-3)',
          marginTop: 2
        }}>Fiers Frédéric · IT</div>
      </div>
    </a>
  );
}

function NavLink({ href, children, active }) {
  return (
    <a href={href} style={{
      fontFamily: 'var(--ffit-font-body)',
      fontSize: 14,
      fontWeight: 500,
      color: active ? 'var(--ffit-accent)' : 'var(--ffit-fg-2)',
      padding: '8px 4px',
      transition: 'color 120ms ease'
    }}
    onMouseEnter={e => e.currentTarget.style.color = 'var(--ffit-fg-1)'}
    onMouseLeave={e => e.currentTarget.style.color = active ? 'var(--ffit-accent)' : 'var(--ffit-fg-2)'}>
      {children}
    </a>
  );
}

function Header({ onCtaClick }) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <header style={{
      position: 'sticky',
      top: 0,
      height: 'var(--ffit-header-height)',
      background: scrolled ? 'rgba(255,255,255,0.85)' : 'white',
      backdropFilter: scrolled ? 'blur(12px)' : 'none',
      borderBottom: '1px solid var(--ffit-border-1)',
      boxShadow: scrolled ? 'var(--ffit-shadow-sm)' : 'none',
      zIndex: 100,
      transition: 'box-shadow 200ms ease, background 200ms ease'
    }}>
      <div className="kit-container" style={{
        height: '100%',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between'
      }}>
        <Logo />
        <nav style={{ display: 'flex', gap: 28 }}>
          <NavLink href="#services">Services</NavLink>
          <NavLink href="#process">Comment ça marche</NavLink>
          <NavLink href="#contact">Contact</NavLink>
        </nav>
        <button className="kit-btn kit-btn--primary" onClick={onCtaClick} style={{ whiteSpace: 'nowrap' }}>
          Demander un devis
        </button>
      </div>
    </header>
  );
}

window.Header = Header;