Navbar

import { useEffect, useRef, useState } from "react";
import { createPortal } from "react-dom";

const SERVICES = [
  { icon: "auto_awesome", title: "AI Optimization", desc: "AI-powered optimization across every channel — GMB, SEO, Ads, Social." },
  { icon: "explore", title: "GEO Intelligence", desc: "Hyper-local spatial targeting to reach customers where they are." },
  { icon: "location_on", title: "GMB Optimization", desc: "Maximize visibility in local search and Google Maps profiles." },
  { icon: "code", title: "Web Development", desc: "High-performance digital experiences designed to convert." },
  { icon: "search", title: "Website SEO", desc: "Authority-driven search optimization for high-intent traffic." },
  { icon: "ads_click", title: "Ads Management", desc: "Expert management for Meta and Google Ads with focus on ROAS." },
  { icon: "share", title: "Social Media", desc: "Dynamic content strategies for brand authority and engagement." },
  { icon: "brush", title: "Business Branding", desc: "Defining identity through visual design and consistent brand voice." },
  { icon: "hub", title: "CRM Development", desc: "Custom systems to streamline your sales funnel and data." },
  { icon: "smartphone", title: "App Development", desc: "Bespoke mobile applications built on cutting-edge architectures." },
];

export default function SesiumNavbar() {
  const [servicesOpen, setServicesOpen] = useState(false);
  const [mobileOpen, setMobileOpen] = useState(false);
  const hideTimeout = useRef<ReturnType<typeof setTimeout>>();
  const mobileMenuRef = useRef<HTMLDivElement>(null);
  const hamburgerRef = useRef<HTMLButtonElement>(null);

  const showMenu = () => {
    clearTimeout(hideTimeout.current);
    setServicesOpen(true);
  };
  const hideMenu = () => {
    hideTimeout.current = setTimeout(() => setServicesOpen(false), 120);
  };

  // Close mobile menu on outside click
  useEffect(() => {
    if (!mobileOpen) return;
    function onClick(e: MouseEvent) {
      const menu = mobileMenuRef.current;
      const btn = hamburgerRef.current;
      if (menu && !menu.contains(e.target as Node) && btn && !btn.contains(e.target as Node)) {
        setMobileOpen(false);
      }
    }
    document.addEventListener("click", onClick);
    return () => document.removeEventListener("click", onClick);
  }, [mobileOpen]);

  return (
    <div className="min-h-screen w-screen relative left-1/2 -translate-x-1/2 bg-[#020202]">
      <style>{`
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Plus+Jakarta+Sans:wght@700;800&display=swap');
        @import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap');

        .nav-font { font-family: 'Plus Jakarta Sans', sans-serif; letter-spacing: -0.04em; }
        .text-gradient { background: linear-gradient(180deg, #fff 0%, #a1a1aa 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

        .material-symbols-outlined {
          font-family: 'Material Symbols Outlined';
          font-weight: normal;
          font-style: normal;
          line-height: 1;
          letter-spacing: normal;
          text-transform: none;
          display: inline-block;
          white-space: nowrap;
          word-wrap: normal;
          direction: ltr;
          -webkit-font-feature-settings: 'liga';
          -webkit-font-smoothing: antialiased;
        }

        .nav-blur { position: fixed; top: 0; left: 0; right: 0; height: 70px; backdrop-filter: blur(5px) saturate(130%); -webkit-backdrop-filter: blur(5px) saturate(130%); pointer-events: none; z-index: 54; mask-image: linear-gradient(to bottom, black 0%, black 30%, transparent 100%); -webkit-mask-image: linear-gradient(to bottom, black 0%, black 30%, transparent 100%); }
        .nav-backdrop { position: fixed; top: 0; left: 0; right: 0; height: 100px; background: linear-gradient(to bottom, rgba(2,2,2,0.85) 0%, rgba(2,2,2,0.6) 50%, rgba(2,2,2,0) 100%); pointer-events: none; z-index: 55; }

        .border-beam-container { position: relative; border-radius: 9999px; padding: 1px; background: rgba(255,255,255,0.08); overflow: visible; }
        .border-beam-flare { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; pointer-events: none; overflow: hidden; }
        .border-beam-flare::after { content: ""; position: absolute; width: 160px; height: 40px; background: linear-gradient(to right, transparent, rgba(34,197,94,0.8), transparent); filter: blur(8px); offset-path: border-box; offset-rotate: auto; animation: border-beam 12s linear infinite; }
        @keyframes border-beam { 0% { offset-distance: 0%; } 100% { offset-distance: 100%; } }
        .border-beam-mask { background: #020202; border-radius: inherit; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; position: relative; z-index: 2; }

        .liquid-glass {
          background: linear-gradient(135deg, rgba(255,255,255,0.09), rgba(255,255,255,0.02));
          backdrop-filter: blur(120px) saturate(280%) brightness(1.15);
          -webkit-backdrop-filter: blur(120px) saturate(280%) brightness(1.15);
          border: 1px solid rgba(255,255,255,0.08);
          box-shadow: inset 0 1px 1px rgba(255,255,255,0.14), inset 0 -1px 24px rgba(0,0,0,0.25), 0 12px 48px rgba(0,0,0,0.65);
        }

        .ai-new-badge { position: relative; overflow: hidden; vertical-align: middle; }
        .ai-new-badge::after { content: ""; position: absolute; top: 0; left: -100%; width: 60%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent); animation: badgeShimmer 2.5s ease-in-out infinite; }
        @keyframes badgeShimmer { 0% { left: -100%; } 50% { left: 150%; } 100% { left: 150%; } }

        #mega-menu-portal {
          position: fixed;
          top: 132px;
          left: 50%;
          transform: translateX(-50%) translateY(15px);
          width: 95vw;
          max-width: 1200px;
          border-radius: 40px;
          padding: 20px 24px;
          z-index: 9999;
          pointer-events: none;
          opacity: 0;
          visibility: hidden;
          transition: all 0.4s cubic-bezier(0.22,1,0.36,1);
          background: linear-gradient(160deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.01) 35%, transparent 100%), rgba(4,4,4,0.72);
          backdrop-filter: blur(40px) saturate(140%) brightness(0.95);
          -webkit-backdrop-filter: blur(40px) saturate(140%) brightness(0.95);
          border-top: 1px solid rgba(255,255,255,0.1);
          border-left: 1px solid rgba(255,255,255,0.07);
          border-right: 1px solid rgba(255,255,255,0.05);
          border-bottom: 1px solid rgba(255,255,255,0.05);
          box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), inset 0 -1px 30px rgba(0,0,0,0.3), inset 1px 0 0 rgba(255,255,255,0.04), 0 0 0 1px rgba(0,0,0,0.4), 0 40px 80px -15px rgba(0,0,0,0.9);
        }
        #mega-menu-portal.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
        #mega-menu-portal::before {
          content: "";
          position: absolute;
          inset: 0;
          border-radius: inherit;
          background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
          background-size: 160px 160px;
          opacity: 0.03;
          pointer-events: none;
          z-index: 0;
        }
        .mega-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }

        #mobile-menu { background: linear-gradient(160deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.01) 35%, transparent 100%), rgba(4,4,4,0.92); backdrop-filter: blur(40px) saturate(140%) brightness(0.95); -webkit-backdrop-filter: blur(40px) saturate(140%) brightness(0.95); border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 0 0 1px rgba(0,0,0,0.4), 0 40px 80px -15px rgba(0,0,0,0.9); }
      `}</style>

      {/* Nav blur layers */}
      <div className="nav-blur" aria-hidden="true" />
      <div className="nav-backdrop" />

      <nav className="fixed top-0 z-[60] flex flex-col items-center mt-6 mx-auto w-[92%] max-w-7xl left-1/2 -translate-x-1/2">
        <div className="border-beam-container w-full shadow-2xl">
          <div className="border-beam-flare" />
          <div className="border-beam-mask">
            <div className="liquid-glass w-full rounded-full px-6 md:px-8 py-3 md:py-4 flex items-center justify-between relative z-10 overflow-visible">
              <div className="absolute inset-0 flex items-center justify-center pointer-events-none z-0 select-none overflow-hidden">
                <span className="text-gradient opacity-[0.04] font-extrabold text-[12vw] md:text-[10vw] lg:text-[8vw] w-full text-center whitespace-nowrap tracking-tighter uppercase nav-font">
                  Rizwan
                </span>
              </div>
              <div className="absolute inset-0 border border-white/10 rounded-full pointer-events-none opacity-40" />

              {/* Left links */}
              <div className="flex-1 flex items-center">
                <div className="hidden md:flex items-center gap-12 h-full">
                  <a className="nav-font text-[13px] font-bold text-green-400 uppercase tracking-widest cursor-pointer">
                    Home
                  </a>

                  <div
                    className="relative h-full flex items-center"
                    onMouseEnter={showMenu}
                    onMouseLeave={hideMenu}
                  >
                    <a className="nav-font text-[13px] font-bold text-gray-400 hover:text-green-400 transition-colors uppercase tracking-widest cursor-pointer">
                      Services
                    </a>
                  </div>

                  <a className="nav-font text-[13px] font-bold text-gray-400 hover:text-green-400 transition-colors uppercase tracking-widest cursor-pointer">
                    AI Solutions{" "}
                    <span
                      className="ai-new-badge"
                      style={{
                        display: "inline-flex",
                        alignItems: "center",
                        marginLeft: 5,
                        padding: "1px 7px",
                        borderRadius: 999,
                        fontSize: 9,
                        fontWeight: 700,
                        letterSpacing: "0.04em",
                        background: "linear-gradient(135deg, rgba(99,102,241,0.15), rgba(236,72,153,0.15))",
                        border: "1px solid rgba(139,92,246,0.3)",
                        backgroundClip: "padding-box",
                      }}
                    >
                      <span
                        style={{
                          background: "linear-gradient(135deg, #a78bfa, #f472b6, #38bdf8)",
                          WebkitBackgroundClip: "text",
                          WebkitTextFillColor: "transparent",
                          backgroundClip: "text",
                        }}
                      >
                        NEW
                      </span>
                    </span>
                  </a>
                </div>
              </div>

              {/* Logo */}
              <div className="flex flex-col items-center gap-2 md:gap-3 relative z-10">
                <a className="cursor-pointer">
                  <div className="w-8 h-8 md:w-10 md:h-10 bg-zinc-900 border border-white/10 rounded-xl flex items-center justify-center shadow-[0_0_20px_rgba(0,0,0,0.8)]">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24.01 24" className="w-5 h-5 md:w-6 md:h-6">
                      <path fill="#1ea14e" d="M16.75,12h0L24,0,0,12,24,24C24.29,24,16.75,12,16.75,12Z" />
                    </svg>
                  </div>
                </a>
                <div className="w-24 md:w-32 h-[2px] bg-green-500/80 shadow-[0_0_10px_rgba(34,197,94,0.5)]" />
              </div>

              {/* Right links */}
              <div className="flex-1 flex items-center justify-end">
                <div className="hidden md:flex items-center gap-10">
                  <a className="nav-font text-[13px] font-bold text-gray-400 hover:text-green-400 transition-colors uppercase tracking-widest cursor-pointer">
                    About Us
                  </a>
                  <a className="nav-font text-[13px] font-bold text-gray-400 hover:text-green-400 transition-colors uppercase tracking-widest cursor-pointer">
                    Contact Us
                  </a>
                  <a className="inline-flex items-center gap-2 bg-gradient-to-b from-green-400 to-green-600 hover:from-green-300 hover:to-green-500 text-black font-bold text-[11px] uppercase tracking-wider px-4 py-2 rounded-full transition-all shadow-[0_4px_16px_-2px_rgba(34,197,94,0.5)] whitespace-nowrap cursor-pointer">
                    <svg className="w-3.5 h-3.5 flex-shrink-0" fill="currentColor" viewBox="0 0 24 24">
                      <path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z" />
                    </svg>
                    Call Now
                  </a>
                </div>
                <button
                  ref={hamburgerRef}
                  className="md:hidden flex items-center p-2 text-gray-400 hover:text-white cursor-pointer"
                  aria-label="Open menu"
                  onClick={() => setMobileOpen((v) => !v)}
                >
                  <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path d="M4 6h16M4 12h16m-7 6h7" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" />
                  </svg>
                </button>
              </div>
            </div>
          </div>
        </div>

        {/* Mobile menu */}
        {mobileOpen && (
          <div
            ref={mobileMenuRef}
            id="mobile-menu"
            className="absolute top-full left-0 right-0 mt-4 p-6 rounded-3xl flex flex-col gap-4 text-center md:hidden"
          >
            <button
              onClick={() => setMobileOpen(false)}
              aria-label="Close menu"
              style={{
                position: "absolute",
                top: 16,
                right: 16,
                width: 32,
                height: 32,
                borderRadius: "50%",
                background: "rgba(255,255,255,0.06)",
                border: "1px solid rgba(255,255,255,0.1)",
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                cursor: "pointer",
              }}
            >
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" strokeWidth="2.5" strokeLinecap="round">
                <path d="M18 6 6 18M6 6l12 12" />
              </svg>
            </button>
            <a className="py-2 text-sm font-bold uppercase tracking-widest text-gray-300 hover:text-green-400 cursor-pointer">
              Home
            </a>
            <a className="py-2 text-sm font-bold uppercase tracking-widest text-gray-300 hover:text-green-400 cursor-pointer">
              Services
            </a>
            <a className="py-2 text-sm font-bold uppercase tracking-widest text-gray-300 hover:text-green-400 cursor-pointer">
              AI Solutions{" "}
              <span
                className="ai-new-badge"
                style={{
                  display: "inline-flex",
                  alignItems: "center",
                  marginLeft: 5,
                  padding: "1px 7px",
                  borderRadius: 999,
                  fontSize: 9,
                  fontWeight: 700,
                  letterSpacing: "0.04em",
                  background: "linear-gradient(135deg, rgba(99,102,241,0.15), rgba(236,72,153,0.15))",
                  border: "1px solid rgba(139,92,246,0.3)",
                  backgroundClip: "padding-box",
                }}
              >
                <span
                  style={{
                    background: "linear-gradient(135deg, #a78bfa, #f472b6, #38bdf8)",
                    WebkitBackgroundClip: "text",
                    WebkitTextFillColor: "transparent",
                    backgroundClip: "text",
                  }}
                >
                  NEW
                </span>
              </span>
            </a>
            <a className="py-2 text-sm font-bold uppercase tracking-widest text-gray-300 hover:text-green-400 cursor-pointer">
              About Us
            </a>
            <a className="py-2 text-sm font-bold uppercase tracking-widest text-gray-300 hover:text-green-400 cursor-pointer">
              Contact Us
            </a>
            <a className="inline-flex items-center gap-2 bg-gradient-to-b from-green-400 to-green-600 text-black font-bold text-sm px-5 py-2.5 rounded-full mx-auto shadow-[0_4px_16px_-2px_rgba(34,197,94,0.5)] cursor-pointer">
              <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
                <path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z" />
              </svg>
              Call Now
            </a>
          </div>
        )}
      </nav>

      {/* Mega menu, portaled to <body> so it isn't clipped by the nav's transform */}
      {typeof document !== "undefined" &&
        createPortal(
          <div
            id="mega-menu-portal"
            className={servicesOpen ? "is-open" : ""}
            onMouseEnter={showMenu}
            onMouseLeave={hideMenu}
          >
            <div className="mega-grid">
              {SERVICES.map((s) => (
                <a
                  key={s.title}
                  className="cursor-pointer"
                  style={{
                    display: "flex",
                    gap: 12,
                    padding: "10px 12px",
                    borderRadius: 16,
                    border: "1px solid transparent",
                    transition: "all 0.2s",
                    textDecoration: "none",
                  }}
                  onMouseOver={(e) => {
                    e.currentTarget.style.background = "rgba(255,255,255,0.04)";
                    e.currentTarget.style.borderColor = "rgba(16,185,129,0.12)";
                  }}
                  onMouseOut={(e) => {
                    e.currentTarget.style.background = "";
                    e.currentTarget.style.borderColor = "transparent";
                  }}
                >
                  <div
                    style={{
                      width: 32,
                      height: 32,
                      borderRadius: 10,
                      background: "rgba(16,185,129,0.1)",
                      border: "1px solid rgba(16,185,129,0.2)",
                      display: "flex",
                      alignItems: "center",
                      justifyContent: "center",
                      flexShrink: 0,
                    }}
                  >
                    <span className="material-symbols-outlined" style={{ color: "#34d399", fontSize: 16 }}>
                      {s.icon}
                    </span>
                  </div>
                  <div>
                    <h4
                      style={{
                        fontFamily: "'Plus Jakarta Sans', sans-serif",
                        fontSize: 11,
                        fontWeight: 700,
                        color: "#fff",
                        textTransform: "uppercase",
                        letterSpacing: "0.08em",
                        margin: "0 0 3px",
                      }}
                    >
                      {s.title}
                    </h4>
                    <p style={{ fontSize: 11, lineHeight: 1.6, color: "rgba(255,255,255,0.6)", margin: 0 }}>
                      {s.desc}
                    </p>
                  </div>
                </a>
              ))}
            </div>
          </div>,
          document.body
        )}

      <div className="flex items-center justify-center text-gray-600 text-sm" style={{ height: "calc(100vh - 80px)", fontFamily: "'Inter', sans-serif" }}>
        Your page content goes here
      </div>
    </div>
  );
}