const { useState, useEffect } = React;

function Logo() {
  return (
    <a href="#top" className="logo" aria-label="AsherPay home">
      [<span>asher</span>pay]
    </a>
  );
}

function Nav({ onOpenTweaks }) {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);

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

  const links = [
    { label: "Capabilities", href: "#capabilities" },
    { label: "Industries", href: "#industries" },
    { label: "Developers", href: "#developers" },
    { label: "Pricing", href: "#pricing" },
    { label: "Company", href: "#company" },
  ];

  return (
    <header
      style={{
        position: "sticky", top: 0, zIndex: 40,
        backdropFilter: "blur(12px)",
        background: scrolled ? "rgba(8,8,8,0.78)" : "transparent",
        borderBottom: scrolled ? "1px solid var(--border)" : "1px solid transparent",
        transition: "background .22s ease, border-color .22s ease",
      }}
    >
      <div className="container nav-inner" style={{
        display: "flex", alignItems: "center", justifyContent: "space-between",
        padding: "1rem 1.5rem",
      }}>
        <Logo />

        <nav style={{
          display: "flex", alignItems: "center", gap: "2.2rem",
          position: "absolute", left: "50%", transform: "translateX(-50%)"
        }} className="main-nav">
          {links.map(l => (
            <a key={l.label} href={l.href} className="nav-link"
               style={{
                 fontSize: ".86rem", fontWeight: 600, color: "var(--text-dim)",
                 transition: "color .15s"
               }}
               onMouseEnter={e => e.currentTarget.style.color = "var(--white)"}
               onMouseLeave={e => e.currentTarget.style.color = "var(--text-dim)"}>
              {l.label}
            </a>
          ))}
        </nav>

        <div className="nav-actions" style={{ display: "flex", alignItems: "center", gap: ".6rem" }}>
          <a href="#" className="btn btn-ghost nav-signin" style={{ padding: ".55rem .9rem", fontSize: ".78rem" }}>
            Sign in
          </a>
          <a href="https://payments.asherpay.com" className="btn btn-primary nav-cta" style={{ padding: ".6rem 1.05rem", fontSize: ".78rem" }}>
            Get Processing
            <svg width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true">
              <path d="M2 6h8m-3-3 3 3-3 3" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
          </a>
        </div>
      </div>

      <style>{`
        @media (max-width: 960px) {
          .main-nav { display: none !important; }
        }
      `}</style>
    </header>
  );
}

window.Nav = Nav;
window.Logo = Logo;