/* global React, Icon, Button */
// Header.jsx — fixed translucent header + mobile drawer

const NAV = [
  { label: 'El hogar', href: '#hogar' },
  { label: 'Cuándo pedir apoyo', href: '#apoyo' },
  { label: 'Cómo es un día', href: '#dia' },
  { label: 'Preguntas', href: '#faq' },
];

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

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

  return (
    <header className={`mr-header${scrolled ? ' is-scrolled' : ''}`}>
      <div className="mr-header__bar mr-container">
        <a href="#top" className="mr-header__logo" aria-label="Mi Refugio en el Campo — inicio">
          <img src="assets/logo-full.png" alt="Mi Refugio en el Campo" />
        </a>

        <nav className="mr-header__nav" aria-label="Principal">
          {NAV.map((n) => (
            <a key={n.href} href={n.href}>{n.label}</a>
          ))}
        </nav>

        <div className="mr-header__cta">
          <Button variant="whatsapp" icon="whatsapp" onClick={onWhatsApp}>WhatsApp</Button>
        </div>

        <button className="mr-header__burger" aria-label="Abrir menú" onClick={() => setOpen(true)}>
          <Icon name="menu" size={26} />
        </button>
      </div>

      {open && (
        <div className="mr-drawer" role="dialog" aria-modal="true">
          <div className="mr-drawer__head mr-container">
            <span className="mr-drawer__title">Menú</span>
            <button className="mr-header__burger" aria-label="Cerrar menú" onClick={() => setOpen(false)}>
              <Icon name="x" size={26} />
            </button>
          </div>
          <nav className="mr-drawer__nav mr-container" aria-label="Móvil">
            {NAV.map((n) => (
              <a key={n.href} href={n.href} onClick={() => setOpen(false)}>{n.label}</a>
            ))}
            <Button variant="whatsapp" icon="whatsapp" onClick={() => { setOpen(false); onWhatsApp(); }} style={{ marginTop: 12 }}>
              Conversar por WhatsApp
            </Button>
          </nav>
        </div>
      )}
    </header>
  );
}

window.Header = Header;