/* global Icon, Logo, BrandMark, Wordmark */

const NAV_ITEMS = [
  { id: "anasayfa", label: "Anasayfa", href: "Anasayfa.html" },
  { id: "hakkimizda", label: "Hakkımızda", href: "Hakkimizda.html" },
  { id: "hizmetler", label: "Hizmetler", href: "Hizmetler.html" },
  { id: "vakalar", label: "Vakalar", href: "Vakalar.html" },
  { id: "sevk", label: "Hekim Sevki", href: "Sevk.html" },
  { id: "sss", label: "SSS", href: "SSS.html" },
  { id: "iletisim", label: "İletişim", href: "Iletisim.html" },
];
window.NAV_ITEMS = NAV_ITEMS;

function Header({ active = "anasayfa", onNavigate, transparentAtTop = true }) {
  const [mobileOpen, setMobileOpen] = React.useState(false);
  const [scrolled, setScrolled] = React.useState(false);

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

  // Mobil menü açıkken arka plan kaydırmasını kilitle
  React.useEffect(() => {
    document.body.style.overflow = mobileOpen ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [mobileOpen]);

  const handleClick = (e, id) => {
    if (onNavigate) {
      // If a navigate handler is provided (e.g. on homepage for in-page scroll),
      // delegate. Otherwise let the browser follow the href.
      const result = onNavigate(id, e);
      if (result === false) return;  // handler said "I handled it"
    }
  };

  return (
    <header style={{
      ...headerStyles.bar,
      borderBottomColor: scrolled ? "var(--pd-border-1)" : "transparent",
      background: scrolled || !transparentAtTop ? "rgba(255,255,255,0.94)" : "rgba(255,255,255,0.6)",
    }}>
      <div className="container-wide" style={headerStyles.row}>
        <a href="Anasayfa.html" onClick={(e) => handleClick(e, "anasayfa")} style={{ display: "inline-flex" }}>
          <Logo />
        </a>
        <nav style={headerStyles.nav} className="pd-nav-desktop" aria-label="Birincil">
          {NAV_ITEMS.map((it) => (
            <a key={it.id}
               href={it.href}
               onClick={(e) => handleClick(e, it.id)}
               style={{
                 ...headerStyles.link,
                 ...(active === it.id ? headerStyles.linkActive : {}),
               }}>
              {it.label}
              {active === it.id && <span style={headerStyles.linkBar} />}
            </a>
          ))}
        </nav>
        <div style={headerStyles.actions} className="pd-nav-desktop">
          <a href="https://wa.me/905435486208" target="_blank" rel="noopener" style={headerStyles.whatsapp} title="WhatsApp">
            <Icon name="whatsapp" size={16} style={{ color: "#25D366" }} />
            <span>WhatsApp</span>
          </a>
          <a href="Iletisim.html" className="btn btn-primary" onClick={(e) => handleClick(e, "iletisim")}>
            Randevu Al <Icon name="arrowRight" size={14} />
          </a>
        </div>
        <button
          aria-label="Menü"
          onClick={() => setMobileOpen(!mobileOpen)}
          style={headerStyles.menuBtn}
          className="pd-nav-mobile">
          <Icon name={mobileOpen ? "close" : "menu"} size={22} />
        </button>
      </div>
      {mobileOpen && (
        <div style={headerStyles.mobile}>
          {NAV_ITEMS.map((it) => (
            <a key={it.id} href={it.href}
               onClick={(e) => { handleClick(e, it.id); setMobileOpen(false); }}
               style={{
                 ...headerStyles.mobileLink,
                 ...(active === it.id ? { color: "var(--pd-orange)" } : {}),
               }}>{it.label}</a>
          ))}
          <div style={{ display: "flex", gap: 10, marginTop: 14 }}>
            <a href="https://wa.me/905435486208" target="_blank" rel="noopener" className="btn btn-secondary" style={{ flex: 1, justifyContent: "center" }}>
              <Icon name="whatsapp" size={16} style={{ color: "#25D366" }} /> WhatsApp
            </a>
            <a href="Iletisim.html" className="btn btn-primary" style={{ flex: 1, justifyContent: "center" }}
                    onClick={() => setMobileOpen(false)}>
              Randevu Al
            </a>
          </div>
        </div>
      )}
    </header>
  );
}

const headerStyles = {
  bar: {
    position: "sticky", top: 0, zIndex: 50,
    background: "rgba(255,255,255,0.6)",
    backdropFilter: "saturate(160%) blur(10px)",
    WebkitBackdropFilter: "saturate(160%) blur(10px)",
    borderBottom: "1px solid transparent",
    transition: "background-color 240ms var(--pd-ease-out), border-color 240ms var(--pd-ease-out)",
  },
  row: {
    display: "grid",
    gridTemplateColumns: "auto 1fr auto auto",
    alignItems: "center",
    gap: 28, padding: "14px 0",
  },
  nav: { display: "flex", gap: 24, justifyContent: "center" },
  link: {
    fontSize: 14, fontWeight: 500, color: "var(--pd-charcoal-2)",
    padding: "6px 0",
    position: "relative",
    transition: "color 160ms",
  },
  linkActive: {
    color: "var(--pd-charcoal)",
    position: "relative",
  },
  linkBar: {
    position: "absolute",
    left: 0, right: 0, bottom: -2,
    height: 2, background: "var(--pd-orange)",
  },
  actions: { display: "flex", gap: 16, alignItems: "center" },
  whatsapp: {
    display: "inline-flex", alignItems: "center", gap: 6,
    fontSize: 13, color: "var(--pd-charcoal-2)", fontWeight: 500,
  },
  menuBtn: {
    display: "none",
    background: "transparent", border: "1px solid var(--pd-border-1)",
    padding: "10px 12px", minWidth: 44, minHeight: 44,
    alignItems: "center", justifyContent: "center",
    color: "var(--pd-charcoal)", borderRadius: 6,
  },
  mobile: {
    display: "flex", flexDirection: "column", gap: 6,
    padding: "16px 22px 22px", borderTop: "1px solid var(--pd-border-1)",
    background: "#fff",
  },
  mobileLink: {
    fontSize: 17, fontWeight: 500, color: "var(--pd-charcoal)",
    padding: "13px 0", minHeight: 44,
    display: "flex", alignItems: "center",
    borderBottom: "1px solid var(--pd-border-1)",
    fontFamily: "var(--pd-font-body)",
  },
};

window.Header = Header;