const Header = ({ onRequest }) => {
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const hrefs = ["#services", "#vehicle", "#how", "#info", "#faq"];
  const navLinks = t("header.nav").map((l, i) => [l, hrefs[i]]);

  return (
    <header style={{
      position: "sticky", top: 0, zIndex: 50,
      background: scrolled ? "rgba(246,249,253,.85)" : "transparent",
      backdropFilter: scrolled ? "saturate(140%) blur(12px)" : "none",
      borderBottom: scrolled ? "1px solid var(--line-soft)" : "1px solid transparent",
      transition: "all .2s ease",
    }}>
      <div className="wrap" style={{
        display: "flex", alignItems: "center", justifyContent: "space-between",
        padding: "18px 32px",
      }}>
        <a href="#top" style={{ display: "flex", alignItems: "center", gap: 12 }}>
          <Wordmark size="md"/>
        </a>

        <nav style={{ display: "flex", gap: 8 }} className="desktop-nav">
          {navLinks.map(([l, h]) => (
            <a key={h} href={h} className="btn btn-ghost" style={{ fontWeight: 500 }}>{l}</a>
          ))}
        </nav>

        <div style={{ display: "flex", gap: 12, alignItems: "center" }} className="desktop-cta">
          <a href="tel:+4961511234567" className="btn btn-secondary" aria-label={t("header.callAria")}>
            <Icon.phone size={18}/> {t("common.phone")}
          </a>
          <button className="btn btn-mint" onClick={onRequest}>
            {t("common.requestRide")} <Icon.arrow size={18}/>
          </button>
        </div>

        <button className="mobile-toggle btn btn-ghost" onClick={() => setOpen(!open)} aria-label={t("header.menuAria")}>
          {open ? <Icon.close /> : <Icon.menu />}
        </button>
      </div>

      {open && (
        <div className="mobile-menu" style={{
          background: "var(--surface)", borderTop: "1px solid var(--line-soft)",
          padding: "16px 20px", display: "grid", gap: 8,
        }}>
          {navLinks.map(([l, h]) => (
            <a key={h} href={h} className="btn btn-ghost" style={{ justifyContent: "flex-start" }} onClick={() => setOpen(false)}>{l}</a>
          ))}
          <a href="tel:+4961511234567" className="btn btn-secondary" style={{ justifyContent: "center" }}>
            <Icon.phone size={18}/> {t("common.phone")}
          </a>
          <button className="btn btn-mint" onClick={() => { setOpen(false); onRequest(); }}>{t("common.requestRide")}</button>
        </div>
      )}

      <style>{`
        .mobile-toggle { display: none; }
        @media (max-width: 1080px) {
          .desktop-nav { display: none !important; }
        }
        @media (max-width: 880px) {
          .desktop-cta { display: none !important; }
          .mobile-toggle { display: inline-flex !important; }
        }
      `}</style>
    </header>
  );
};

Object.assign(window, { Header });