/* global React */
// Sticky, blur-veiled marketing header.
function Header() {
  const DS = window.ReconcileAIDesignSystem_c7572b;
  const { Button, Logo } = DS;
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const el = document.querySelector('[data-scroll-root]') || window;
    const onScroll = () => {
      const y = el === window ? window.scrollY : el.scrollTop;
      setScrolled(y > 8);
    };
    el.addEventListener('scroll', onScroll);
    return () => el.removeEventListener('scroll', onScroll);
  }, []);

  const links = [
    { label: 'Why ReconcileAI', target: 'why-reconcileai' },
    { label: 'How it works', target: 'how-it-works' },
    { label: 'Impact', target: 'exceptions-queue' },
  ];

  const scrollToSection = (target) => {
    if (!target) return;
    const el = document.getElementById(target);
    if (!el) return;
    const y = el.getBoundingClientRect().top + window.scrollY - 88;
    window.scrollTo({ top: y, behavior: 'smooth' });
  };

  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 50,
      background: scrolled ? 'rgba(247,249,249,0.78)' : 'transparent',
      backdropFilter: scrolled ? 'saturate(180%) blur(12px)' : 'none',
      WebkitBackdropFilter: scrolled ? 'saturate(180%) blur(12px)' : 'none',
      borderBottom: scrolled ? '1px solid var(--border-subtle)' : '1px solid transparent',
      transition: 'background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out)',
    }}>
      <div style={{
        maxWidth: 'var(--container-max)', margin: '0 auto',
        padding: '14px var(--container-pad)',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '24px',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
          <img src="../../assets/logo/reconcileai-mark.png" alt="" style={{ height: 26, width: 'auto' }} />
          <Logo height={21} />
        </div>
        <nav style={{ display: 'flex', alignItems: 'center', gap: '28px' }} className="rai-nav">
          {links.map((l) => (
            <a key={l.label} href={l.target ? `#${l.target}` : '#'} style={{
              fontFamily: 'var(--font-sans)', fontSize: '14.5px', fontWeight: 500,
              color: 'var(--text-body)', textDecoration: 'none',
            }} onClick={(e) => { if (l.target) { e.preventDefault(); scrollToSection(l.target); } }}
               onMouseEnter={(e)=>e.currentTarget.style.color='var(--text-strong)'}
               onMouseLeave={(e)=>e.currentTarget.style.color='var(--text-body)'}>{l.label}</a>
          ))}
        </nav>
        <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
          <Button variant="primary" size="sm" iconRight={<i data-lucide="arrow-right"></i>}
            onClick={() => {
              const el = document.getElementById('waitlist');
              if (!el) return;
              const y = el.getBoundingClientRect().top + window.scrollY - 120;
              window.scrollTo({ top: y, behavior: 'smooth' });
              const input = el.querySelector('input');
              if (input) setTimeout(() => input.focus({ preventScroll: true }), 480);
            }}>
            Join waitlist
          </Button>
        </div>
      </div>
    </header>
  );
}
window.Header = Header;