// Event LP — Header + SP slide-in menu

const JOIN_URL = "https://libecity.com/room_list?room_id=s5fdayFXTBpGEdfQaMJM";

const NAV = [
  { label: "概要", href: "#about" },
  { label: "こんな方へ", href: "#audience" },
  { label: "開催詳細", href: "#info" },
];

const Wordmark = () => (
  <a className="wordmark" href="#top">
    <img className="wm-icon" src="assets/logo-ig-sm.jpg" alt="インスタ作業オフ会" />
    <span className="wm-text">
      <b>インスタ作業オフ会</b>
      <small>INSTA WORK MEETUP</small>
    </span>
  </a>
);

const Header = ({ onBurger }) => (
  <header className="hdr">
    <Wordmark />
    <nav className="hdr-nav">
      <div className="nav-links">
        {NAV.map((n) => <a key={n.href} href={n.href}>{n.label}</a>)}
      </div>
      <Button variant="primary" size="sm" href={JOIN_URL} target="_blank">参加する</Button>
      <button className="hdr-burger" aria-label="menu" onClick={onBurger}>
        <span></span><span></span><span></span>
      </button>
    </nav>
  </header>
);

const SpMenu = ({ open, onClose }) => (
  <div className={"sp-menu" + (open ? " open" : "")}>
    <button className="close" onClick={onClose} aria-label="close">×</button>
    {NAV.map((n) => <a key={n.href} href={n.href} onClick={onClose}>{n.label}</a>)}
    <Button variant="primary" block href={JOIN_URL} target="_blank" onClick={onClose}>参加する</Button>
  </div>
);

Object.assign(window, { Header, SpMenu, Wordmark, NAV, JOIN_URL });