// Header — sticky nav with desktop nav + mobile drawer
function Header({ current = 'accueil' }) {
  const [hover, setHover] = React.useState(null);
  const [open, setOpen] = React.useState(false);
  const [scrolled, setScrolled] = React.useState(false);
  const [hidden, setHidden] = React.useState(false);
  const isMobile = window.__dch_isMobile;

  React.useEffect(() => {
    let lastY = window.scrollY;
    let ticking = false;
    const update = () => {
      const y = window.scrollY;
      const goingDown = y > lastY;
      const delta = Math.abs(y - lastY);
      setScrolled(y > 24);
      // Auto-hide when scrolling down past the hero; reveal immediately on up.
      if (y > 180 && goingDown && delta > 4) {
        setHidden(true);
      } else if (!goingDown && delta > 2) {
        setHidden(false);
      }
      if (y < 60) setHidden(false);
      lastY = y;
      ticking = false;
    };
    const onScroll = () => {
      if (!ticking) {
        requestAnimationFrame(update);
        ticking = true;
      }
    };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  React.useEffect(() => {
    document.documentElement.style.overflow = open ? 'hidden' : '';
  }, [open]);

  const links = [
    { id: 'accueil', label: 'Accueil', href: 'index.html' },
    { id: 'services', label: 'Nos services', href: 'nos-services.html' },
    { id: 'apropos', label: 'À propos', href: 'a-propos.html' },
    { id: 'contact', label: 'Contact', href: 'contact.html' },
  ];

  const Logo = () => (
    <a href="index.html" style={hdr.logoWrap}>
      <img src="assets/logo-gold.png" alt="Delta Cars Héritage" style={hdr.logoImg} />
      <div style={hdr.logoText}>
        <div style={hdr.logoLine1}>Delta Cars</div>
        <div style={hdr.logoLine2}>Héritage</div>
      </div>
    </a>
  );

  if (isMobile) {
    return (
      <React.Fragment>
        <header style={{
          ...hdr.bar,
          padding: scrolled ? '10px 20px' : '16px 20px',
          background: scrolled ? 'rgba(10,10,10,0.78)' : 'rgba(10,10,10,0.0)',
          borderBottom: scrolled ? '1px solid rgba(196,164,90,0.18)' : '1px solid transparent',
          transform: hidden && !open ? 'translateY(-110%)' : 'translateY(0)',
          boxShadow: scrolled ? '0 8px 24px rgba(0,0,0,0.35)' : 'none',
        }}>
          <Logo />
          <button aria-label="Menu" onClick={() => setOpen(true)} style={hdr.burger}>
            <Icon name="menu" size={24} color="#F5F0E8" />
          </button>
        </header>
        {open && (
          <div style={hdr.drawer}>
            <div style={hdr.drawerHead}>
              <Logo />
              <button aria-label="Fermer" onClick={() => setOpen(false)} style={hdr.burger}>
                <Icon name="close" size={24} color="#F5F0E8" />
              </button>
            </div>
            <nav style={hdr.drawerNav}>
              {links.map((l) => (
                <a key={l.id} href={l.href} onClick={() => setOpen(false)} style={{
                  ...hdr.drawerLink,
                  color: l.id === current ? '#C4A45A' : '#F5F0E8',
                }}>
                  <span style={{ fontFamily: "'DM Mono', monospace", fontSize: 11, color: '#8A7F6E', minWidth: 28 }}>
                    0{links.indexOf(l) + 1}
                  </span>
                  {l.label}
                </a>
              ))}
            </nav>
            <div style={hdr.drawerFoot}>
              <a href="contact.html" onClick={() => setOpen(false)} style={hdr.drawerCta}>Prendre rendez-vous</a>
              <div style={hdr.drawerMeta}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                  <Icon name="phone" size={14} color="#C4A45A" />
                  <span>06 79 98 26 08</span>
                </div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                  <Icon name="pin" size={14} color="#C4A45A" />
                  <span>Essonne — 91</span>
                </div>
              </div>
            </div>
          </div>
        )}
      </React.Fragment>
    );
  }

  return (
    <header style={{
      ...hdr.bar,
      padding: scrolled ? '12px 80px' : '22px 80px',
      background: scrolled ? 'rgba(10,10,10,0.72)' : 'rgba(10,10,10,0.0)',
      borderBottom: scrolled ? '1px solid rgba(196,164,90,0.22)' : '1px solid transparent',
      transform: hidden ? 'translateY(-110%)' : 'translateY(0)',
      boxShadow: scrolled ? '0 8px 32px rgba(0,0,0,0.4)' : 'none',
    }}>
      <div style={{
        ...hdr.inner,
        transform: scrolled ? 'scale(0.96)' : 'scale(1)',
        transformOrigin: 'left center',
        transition: 'transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1)',
      }}>
        <Logo />
        <nav style={hdr.nav}>
          {links.map((l, i) => (
            <a key={l.id} href={l.href}
              onMouseEnter={() => setHover(i)}
              onMouseLeave={() => setHover(null)}
              style={{
                ...hdr.link,
                color: l.id === current ? '#C4A45A' : (hover === i ? '#C4A45A' : '#C8BFA8'),
              }}>
              {l.id === current && <span style={hdr.activeDot} />}
              {l.label}
            </a>
          ))}
        </nav>
        <a href="contact.html" style={hdr.cta}>Prendre rendez-vous</a>
      </div>
    </header>
  );
}

const hdr = {
  bar: {
    position: 'sticky', top: 0, zIndex: 50,
    background: 'rgba(10,10,10,0.0)',
    backdropFilter: 'blur(14px) saturate(1.1)',
    WebkitBackdropFilter: 'blur(14px) saturate(1.1)',
    transition: 'padding 320ms cubic-bezier(0.22, 0.61, 0.36, 1), border-color 320ms ease-out, background 320ms ease-out, transform 380ms cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 320ms ease-out',
    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
    willChange: 'transform, background, padding',
  },
  inner: { maxWidth: 1440, margin: '0 auto', width: '100%', display: 'flex', alignItems: 'center', gap: 40 },
  logoWrap: { display: 'flex', alignItems: 'center', gap: 12, textDecoration: 'none', flexShrink: 0 },
  logoImg: { width: 42, height: 'auto', display: 'block' },
  logoText: { display: 'flex', flexDirection: 'column', lineHeight: 1.05, whiteSpace: 'nowrap' },
  logoLine1: { fontFamily: "'Cormorant Garamond', serif", fontStyle: 'italic', fontWeight: 400, fontSize: 18, color: '#F5F0E8', letterSpacing: '0.01em' },
  logoLine2: { fontFamily: "'Inter', sans-serif", fontWeight: 500, fontSize: 9, letterSpacing: '0.22em', textTransform: 'uppercase', color: '#C4A45A', marginTop: 2 },
  nav: { display: 'flex', gap: 36, marginLeft: 'auto', marginRight: 'auto' },
  link: {
    fontFamily: "'Inter', sans-serif", fontSize: 12, fontWeight: 500, letterSpacing: '0.16em',
    textTransform: 'uppercase', textDecoration: 'none', transition: 'color 200ms ease-out',
    whiteSpace: 'nowrap', position: 'relative',
    display: 'inline-flex', alignItems: 'center', gap: 10,
  },
  activeDot: { width: 4, height: 4, background: '#C4A45A', borderRadius: 999, display: 'inline-block' },
  cta: {
    fontFamily: "'Inter', sans-serif", fontSize: 11, fontWeight: 600, letterSpacing: '0.14em', textTransform: 'uppercase',
    background: '#C4A45A', color: '#0A0A0A',
    padding: '12px 22px', borderRadius: 2, textDecoration: 'none',
    transition: 'background 200ms ease-out',
    whiteSpace: 'nowrap',
  },
  burger: {
    background: 'transparent', border: '1px solid #2A2A2A', borderRadius: 2,
    width: 44, height: 44, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer',
  },
  drawer: {
    position: 'fixed', inset: 0, zIndex: 100, background: '#0A0A0A',
    display: 'flex', flexDirection: 'column',
    animation: 'dchFade 240ms ease-out',
  },
  drawerHead: {
    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
    padding: '16px 20px', borderBottom: '1px solid #1A1A1A',
  },
  drawerNav: { display: 'flex', flexDirection: 'column', padding: '24px 0', flex: 1 },
  drawerLink: {
    fontFamily: "'Cormorant Garamond', serif", fontWeight: 400, fontSize: 28,
    padding: '18px 28px', textDecoration: 'none',
    borderBottom: '1px solid #1A1A1A',
    display: 'flex', alignItems: 'center', gap: 18,
  },
  drawerFoot: { padding: '20px 24px 32px', borderTop: '1px solid #1A1A1A', display: 'flex', flexDirection: 'column', gap: 20 },
  drawerCta: {
    background: '#C4A45A', color: '#0A0A0A',
    fontFamily: "'Inter', sans-serif", fontWeight: 600, fontSize: 12, letterSpacing: '0.14em', textTransform: 'uppercase',
    padding: '16px 22px', borderRadius: 2, textAlign: 'center', textDecoration: 'none',
  },
  drawerMeta: {
    display: 'flex', flexDirection: 'column', gap: 12,
    fontFamily: "'Inter', sans-serif", fontSize: 13, color: '#C8BFA8', letterSpacing: '0.02em',
  },
};

window.Header = Header;