// Shared nav for AdOpsify marketing pages.
// "current" can be: Services, Apps, About, Contact
const Nav = ({ dark = false, current = "" }) => {
  // Use 1024px breakpoint so both mobile and tablet use the hamburger nav
  const COMPACT_NAV_BP = 1024;
  const [scrolled, setScrolled] = React.useState(false);
  const [servicesOpen, setServicesOpen] = React.useState(false);
  const [mobileOpen, setMobileOpen] = React.useState(false);
  const [mobile, setMobile] = React.useState(window.innerWidth < COMPACT_NAV_BP);
  const closeT = React.useRef(null);

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

  React.useEffect(() => {
    const onResize = () => {
      const isMobile = window.innerWidth < COMPACT_NAV_BP;
      setMobile(isMobile);
      if (!isMobile) setMobileOpen(false);
    };
    window.addEventListener("resize", onResize, { passive: true });
    onResize();
    return () => window.removeEventListener("resize", onResize);
  }, []);

  const bg = scrolled
    ? (dark ? "rgba(14,18,14,0.78)" : "rgba(250,248,244,0.78)")
    : "transparent";
  const border = scrolled ? "1px solid var(--border)" : "1px solid transparent";
  const fg = dark ? "var(--paper)" : "var(--ink-900)";
  const linkStyle = (isCurrent) => ({
    color: fg,
    fontSize: 14,
    fontWeight: isCurrent ? 600 : 500,
    opacity: isCurrent ? 1 : 0.72,
    textDecoration: "none",
    transition: "opacity 180ms",
    display: "inline-flex",
    alignItems: "center",
    gap: 4,
    cursor: "pointer",
  });

  const links = [
    ["Apps", "apps.html"],
    ["About", "about.html"],
    ["Contact", "contact.html"],
  ];

  const services = [
    ["Programmatic Advertising", "programmatic.html", "Audience-first DSP buys across web, mobile, CTV."],
    ["CTV Advertising", "ctv.html", "Premium streaming inventory with creative QA built in."],
    ["Mobile Development", "mobile-development.html", "Native iOS, Android, cross-platform — shipped."],
    ["Cloud Computing", "cloud-computing.html", "AWS / GCP architecture, DevOps, and managed runtime."],
  ];

  const openServices = () => { clearTimeout(closeT.current); setServicesOpen(true); };
  const closeServices = () => { closeT.current = setTimeout(() => setServicesOpen(false), 140); };

  return (
    <>
    <nav style={{
      position: "fixed", top: 0, left: 0, right: 0, zIndex: 60,
      height: 72, display: "flex", alignItems: "center",
      padding: "0 clamp(16px, 4vw, 48px)", background: bg,
      backdropFilter: scrolled ? "blur(20px) saturate(140%)" : "none",
      WebkitBackdropFilter: scrolled ? "blur(20px) saturate(140%)" : "none",
      borderBottom: border,
      transition: "background 300ms, border-color 300ms",
    }}>
      <a href="index.html" style={{ display: "flex", alignItems: "center", gap: 12, textDecoration: "none" }}>
        <img src="assets/logo/adopsify-mark.png" style={{ height: 36, width: "auto", display: "block" }} alt="AdOpsify"/>
        <span style={{
          fontFamily: "var(--font-display)",
          fontSize: mobile ? 21 : 24,
          fontWeight: 400,
          letterSpacing: "-0.02em",
          color: fg,
          lineHeight: 1,
        }}>
          AdOpsify<span style={{ color: "var(--brand-violet)", fontStyle: "italic" }}>.</span>
        </span>
      </a>

      <div className="nav-links" style={{ marginLeft: "auto", gap: 32, alignItems: "center" }}>
        {/* Services dropdown */}
        <div
          style={{ position: "relative" }}
          onMouseEnter={openServices}
          onMouseLeave={closeServices}
        >
          <a href="services.html" style={linkStyle(current === "Services")}>
            Services
            <svg width="10" height="10" viewBox="0 0 12 12" style={{ transform: servicesOpen ? "rotate(180deg)" : "none", transition: "transform 200ms" }}>
              <path d="M2 4l4 4 4-4" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
          </a>
          {servicesOpen && (
            <div style={{
              position: "absolute", top: "calc(100% + 14px)", right: 0,
              background: "var(--paper-raised)",
              border: "1px solid var(--border)",
              borderRadius: 18,
              boxShadow: "var(--sh-lg)",
              padding: 10,
              minWidth: 360,
              display: "flex", flexDirection: "column", gap: 2,
            }}>
              {services.map(([label, href, blurb]) => (
                <a key={href} href={href} style={{
                  display: "block", padding: "12px 14px", borderRadius: 12,
                  textDecoration: "none", color: "var(--ink-900)",
                  transition: "background 160ms",
                }}
                onMouseEnter={e => e.currentTarget.style.background = "var(--cobalt-50)"}
                onMouseLeave={e => e.currentTarget.style.background = "transparent"}
                >
                  <div style={{ fontSize: 14, fontWeight: 600 }}>{label}</div>
                  <div style={{ fontSize: 13, color: "var(--fg-muted)", marginTop: 2, lineHeight: 1.4 }}>{blurb}</div>
                </a>
              ))}
              <a href="services.html" style={{
                marginTop: 4, padding: "12px 14px", borderRadius: 12,
                textDecoration: "none", color: "var(--cobalt-700)",
                fontSize: 13, fontWeight: 600,
                borderTop: "1px solid var(--border)",
                fontFamily: "var(--font-mono)",
                letterSpacing: "0.04em",
              }}>
                View all services →
              </a>
            </div>
          )}
        </div>

        {links.map(([label, href]) => (
          <a key={label} href={href} style={linkStyle(current === label)}>{label}</a>
        ))}

        <a
          href="https://calendly.com/shoaib-adopsify/30min"
          target="_blank"
          rel="noopener noreferrer"
          style={{
            background: "var(--ink-900)",
            color: "var(--paper)",
            padding: "10px 20px",
            borderRadius: 9999,
            fontSize: 14,
            fontWeight: 600,
            textDecoration: "none",
            display: "inline-flex",
            alignItems: "center",
            gap: 8,
            transition: "transform 180ms, box-shadow 180ms",
            boxShadow: "0 2px 0 rgba(0,0,0,0.06)",
          }}
          onMouseEnter={e => { e.currentTarget.style.transform = "translateY(-1px)"; e.currentTarget.style.boxShadow = "0 6px 18px rgba(46,91,255,0.25)"; }}
          onMouseLeave={e => { e.currentTarget.style.transform = "translateY(0)"; e.currentTarget.style.boxShadow = "0 2px 0 rgba(0,0,0,0.06)"; }}
        >
          Book a call
          <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
            <path d="M3 8h10M9 4l4 4-4 4"/>
          </svg>
        </a>
      </div>

      <button
        className="nav-toggle"
        aria-label={mobileOpen ? "Close menu" : "Open menu"}
        aria-expanded={mobileOpen}
        onClick={() => setMobileOpen(v => !v)}
        style={{
          marginLeft: "auto",
          width: 44,
          height: 44,
          borderRadius: 999,
          border: "1px solid var(--border)",
          background: dark ? "rgba(250,248,244,0.06)" : "var(--paper-raised)",
          color: fg,
          display: "grid",
          placeItems: "center",
          cursor: "pointer",
        }}
      >
          <svg width="18" height="18" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round">
            {mobileOpen ? (
              <>
                <path d="M4 4l12 12"/>
                <path d="M16 4L4 16"/>
              </>
            ) : (
              <>
                <path d="M3 5h14"/>
                <path d="M3 10h14"/>
                <path d="M3 15h14"/>
              </>
            )}
          </svg>
        </button>
    </nav>

    {mobile && mobileOpen && (
      <div style={{
        position: "fixed",
        top: 72,
        left: 0,
        right: 0,
        zIndex: 55,
        maxHeight: "calc(100vh - 72px)",
        overflowY: "auto",
        background: dark ? "var(--ink-950)" : "var(--paper)",
        borderBottom: "1px solid var(--border)",
        boxShadow: "0 18px 34px rgba(0,0,0,0.08)",
        padding: "14px 16px 22px",
      }}>
        <div style={{ display: "grid", gap: 8 }}>
          <a href="services.html" onClick={() => setMobileOpen(false)} style={{ ...linkStyle(current === "Services"), fontSize: 16, opacity: 1, padding: "10px 8px" }}>Services</a>
          {services.map(([label, href, blurb]) => (
            <a key={href} href={href} onClick={() => setMobileOpen(false)} style={{
              display: "block",
              border: "1px solid var(--border)",
              borderRadius: 12,
              padding: "10px 12px",
              textDecoration: "none",
              color: fg,
            }}>
              <div style={{ fontSize: 14, fontWeight: 600, color: fg }}>{label}</div>
              <div style={{ fontSize: 12, lineHeight: 1.5, color: "var(--fg-muted)", marginTop: 2 }}>{blurb}</div>
            </a>
          ))}

          {links.map(([label, href]) => (
            <a key={label} href={href} onClick={() => setMobileOpen(false)} style={{ ...linkStyle(current === label), fontSize: 16, opacity: 1, padding: "10px 8px" }}>{label}</a>
          ))}

          <a
            href="https://calendly.com/shoaib-adopsify/30min"
            target="_blank"
            rel="noopener noreferrer"
            onClick={() => setMobileOpen(false)}
            style={{
              marginTop: 6,
              background: "var(--ink-900)",
              color: "var(--paper)",
              padding: "13px 16px",
              borderRadius: 9999,
              fontSize: 14,
              fontWeight: 600,
              textDecoration: "none",
              display: "inline-flex",
              alignItems: "center",
              justifyContent: "center",
              gap: 8,
            }}
          >
            Book a call
          </a>
        </div>
      </div>
    )}
    </>
  );
};

window.Nav = Nav;