/* global React */
/* EgoYüzme · Header — Sticky, logo + nav + dual CTA, with hash routing awareness */

const NAV_ITEMS = [
  { href: "#/", label: "Ana Sayfa" },
  { href: "#/hakkimizda", label: "Hakkımızda" },
  { href: "#/programlar", label: "Programlar" },
  { href: "#/lisansli-sporcu", label: "Lisanslı Sporcu" },
  { href: "#/subeler", label: "Şubeler" },
  { href: "#/sss", label: "S.S.S" },
  { href: "#/iletisim", label: "İletişim" },
];

const Header = ({ route }) => {
  const [open, setOpen] = React.useState(false);
  React.useEffect(() => { setOpen(false); }, [route]);

  return (
    <header className="site-header">
      <div className="container inner">
        <a href="#/" aria-label="EgoYüzme ana sayfa" className="brand">
          <img className="mark" src="assets/logos/turtle-mark-color.png" alt="" aria-hidden="true" />
          <img className="logo" src="assets/logos/wordmark-horizontal-color.png" alt="EgoYüzme" />
        </a>
        <nav className={open ? "is-open" : ""}>
          {NAV_ITEMS.map(n => (
            <a
              key={n.href}
              href={n.href}
              className={route === n.href || (n.href === "#/" && (route === "" || route === "#")) ? "is-active" : ""}
            >
              {n.label}
            </a>
          ))}
          <div className="mobile-menu-cta" aria-hidden={!open}>
            <Button
              variant="primary"
              size="sm"
              rightIcon="arrow-right"
              onClick={() => { window.location.hash = "/iletisim"; setOpen(false); }}
            >
              Ücretsiz deneme dersi
            </Button>
            <Button
              variant="secondary"
              size="sm"
              leftIcon="phone"
              onClick={() => { window.location.hash = "/iletisim"; setOpen(false); }}
            >
              0 555 123 45 67
            </Button>
          </div>
        </nav>
        <div className="cta">
          <Button variant="secondary" size="sm" leftIcon="phone" onClick={() => window.location.hash = "/iletisim"}>0 555 123 45 67</Button>
          <Button variant="primary" size="sm" onClick={() => window.location.hash = "/iletisim"}>Ücretsiz deneme</Button>
        </div>
        <button
          type="button"
          className="mobile-toggle"
          aria-label="Menüyü aç/kapat"
          aria-expanded={open}
          onClick={() => setOpen(o => !o)}
        >
          {open ? (
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
          ) : (
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
          )}
        </button>
      </div>
    </header>
  );
};

Object.assign(window, { Header, NAV_ITEMS });