/* global React */
// Site header: logo, nav, support + LINE CTA, mobile menu.

function Header({ onLine, logoSrc }) {
  const { Logo, Button, IconButton } = window.AIDesignSystem_dabded;
  const { Icon } = window;
  const { nav } = window.LP;
  const [open, setOpen] = React.useState(false);

  return (
    <header className="lp-header">
      <div className="lp-header__bar">
        <a className="lp-brand" href="#top" aria-label="はたラクAI"><img className="lp-brand__img" src={logoSrc} alt="はたラクAI" /></a>

        <nav className="lp-nav" aria-label="メインナビゲーション">
          {nav.map((item) => (
            <a key={item.href} href={item.href} className="lp-nav__link">{item.label}</a>
          ))}
        </nav>

        <div className="lp-header__actions">
          <Button variant="line" size="md" onClick={onLine} startIcon={<Icon name="message-circle" size={16} />}>LINEで無料相談する</Button>
        </div>

        <span className="lp-header__menu">
          <IconButton variant="outline" size={40} label="メニュー" onClick={() => setOpen((v) => !v)}>
            <Icon name={open ? "x" : "menu"} size={20} />
          </IconButton>
        </span>
      </div>

      {open && (
        <nav className="lp-menu" aria-label="モバイルナビゲーション">
          {nav.map((item) => (
            <a key={item.href} href={item.href} className="lp-menu__link" onClick={() => setOpen(false)}>{item.label}</a>
          ))}
          <Button variant="line" size="lg" full onClick={() => { setOpen(false); onLine && onLine(); }} startIcon={<Icon name="message-circle" size={18} />}>LINEで無料相談する</Button>
        </nav>
      )}
    </header>
  );
}

Object.assign(window, { Header });