const { Button } = window.MartiniVastgoedDesignSystem_adb8d1;

function HeaderPlayful({ onValuation }) {
  const links = [['Aanbod', '#aanbod'], ['Verkopen', ''], ['Taxeren', ''], ['Over ons', '#over-ons']];
  const ref = React.useRef(null);
  const [hidden, setHidden] = React.useState(false);
  const [open, setOpen] = React.useState(false);
  React.useEffect(() => {
    // motion.js heeft deze rig overgenomen, zie MOTION-PLAN.md sectie 2.
    if (window.MV_TAKEOVER) return;
    let lastY = window.scrollY, up = 0, raf = 0;
    const tick = () => {
      raf = 0;
      const y = window.scrollY, dy = y - lastY;
      lastY = y;
      const h = ref.current ? ref.current.offsetHeight : 70;
      const box = document.getElementById('film-box');
      const engaged = box && box.getBoundingClientRect().top <= h + 1;
      if (!engaged) { up = 0; setHidden(false); }
      else if (dy > 2) { up = 0; setHidden(true); }
      else if (dy < 0) { up -= dy; if (up > 80) setHidden(false); }
    };
    const onScroll = () => { if (!raf) raf = requestAnimationFrame(tick); };
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => { window.removeEventListener('scroll', onScroll); if (raf) cancelAnimationFrame(raf); };
  }, []);
  return (
    <header ref={ref} style={{ position: 'sticky', top: 0, zIndex: 40, background: 'var(--mv-bone)', borderBottom: '3px solid var(--mv-ink)', boxShadow: '0 4px 0 rgba(22,18,58,0.12)', transform: hidden ? 'translateY(-110%)' : 'translateY(0)', transition: 'transform .32s cubic-bezier(.2,.8,.2,1)' }}>
      <div style={{ maxWidth: 'var(--maxw)', margin: '0 auto', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24, padding: '14px var(--gutter)' }}>
        <a href="#top" style={{ display: 'inline-flex', alignItems: 'center', textDecoration: 'none' }}>
          <img src="assets/logo-lockup-ink.webp" alt="Martini Vastgoed" style={{ display: 'block', height: 30, width: 'auto' }} />
        </a>
        <nav style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-6)' }}>
          <ul className="mvp-links" style={{ display: 'flex', gap: 10, listStyle: 'none', margin: 0, padding: 0 }}>
            {links.map(([l, href]) => (
              <li key={l}><a href={href || '#top'} onClick={(e) => { if (!href) { e.preventDefault(); onValuation && onValuation(); } }} className="mvp-chip" style={{ display: 'inline-block', font: '700 var(--fs-label)/1 var(--font-mono)', letterSpacing: '0.06em', textTransform: 'uppercase', color: 'var(--mv-ink)', textDecoration: 'none', border: '2px solid var(--mv-ink)', padding: '8px 12px', background: 'var(--mv-bone)' }}>{l}</a></li>
            ))}
          </ul>
          <span className="mvp-cta-wide"><Button variant="ink" size="sm" onClick={onValuation} iconRight={<span aria-hidden="true">→</span>}>Waardebepaling</Button></span>
          <button type="button" className="mvp-burger" aria-label="Menu" aria-expanded={open} onClick={() => setOpen(!open)} style={{ display: 'none', width: 46, height: 46, cursor: 'pointer', background: open ? 'var(--mv-green)' : 'var(--mv-bone)', border: '3px solid var(--mv-ink)', boxShadow: '3px 3px 0 var(--mv-ink)', padding: 0, flexDirection: 'column', justifyContent: 'center', alignItems: 'center', gap: 5 }}>
            <span style={{ display: 'block', width: 20, height: 3, background: 'var(--mv-ink)', transform: open ? 'translateY(8px) rotate(45deg)' : 'none', transition: 'transform .2s' }}></span>
            <span style={{ display: 'block', width: 20, height: 3, background: 'var(--mv-ink)', opacity: open ? 0 : 1, transition: 'opacity .2s' }}></span>
            <span style={{ display: 'block', width: 20, height: 3, background: 'var(--mv-ink)', transform: open ? 'translateY(-8px) rotate(-45deg)' : 'none', transition: 'transform .2s' }}></span>
          </button>
        </nav>
      </div>
      {open && (
        <div className="mvp-drawer" style={{ borderTop: '3px solid var(--mv-ink)', background: 'var(--mv-bone)', padding: 'var(--gutter)', display: 'flex', flexDirection: 'column', gap: 10 }}>
          {links.map(([l, href]) => (
            <a key={l} href={href || '#top'} onClick={(e) => { setOpen(false); if (!href) { e.preventDefault(); onValuation && onValuation(); } }} style={{ display: 'flex', alignItems: 'center', minHeight: 48, padding: '0 14px', font: '700 var(--fs-label)/1 var(--font-mono)', letterSpacing: '0.06em', textTransform: 'uppercase', color: 'var(--mv-ink)', textDecoration: 'none', border: '3px solid var(--mv-ink)', background: 'var(--mv-bone)', boxShadow: '4px 4px 0 var(--mv-ink)' }}>{l}</a>
          ))}
          <Button variant="primary" size="lg" full onClick={() => { setOpen(false); onValuation && onValuation(); }} iconRight={<span aria-hidden="true">→</span>}>Gratis waardebepaling</Button>
        </div>
      )}
      <style>{`.mvp-chip{transition:transform .15s,background .15s,box-shadow .15s}.mvp-chip:hover{background:var(--mv-green);transform:translate(-2px,-2px) rotate(-1.5deg);box-shadow:3px 3px 0 var(--mv-ink);color:var(--mv-ink)}@media(max-width:900px){.mvp-links,.mvp-cta-wide{display:none!important}.mvp-burger{display:flex!important}}@media(min-width:901px){.mvp-drawer{display:none!important}}`}</style>
    </header>
  );
}
Object.assign(window, { HeaderPlayful });