Navbar Section 1

"use client";

import React, { useState, useEffect, useRef } from "react";
import { motion, AnimatePresence } from "motion/react";
import {
  ChevronDown,
  ArrowRight,
  Menu,
  X,
  Layers,
  Lock,
  Settings,
  Zap,
  BarChart2,
  Users,
  Code,
  Sparkles,
  BookOpen,
  Terminal,
  Activity,
  FileText,
} from "lucide-react";

// Types
interface Capability {
  title: string;
  description: string;
  icon: React.ComponentType<{ className?: string }>;
}

interface ProductItem {
  id: string;
  title: string;
  description: string;
  capabilities: Capability[];
}

// Data for dynamic capabilities list based on left item hover
const productData: Record<string, ProductItem> = {
  overview: {
    id: "overview",
    title: "Overview",
    description: "Our complete suite of visual collaboration components.",
    capabilities: [
      {
        title: "Realtime Collaboration",
        description: "Work together instantly with live presence and state sync.",
        icon: Users,
      },
      {
        title: "Content & Editing",
        description: "Create, refine, and ship with powerful collaborative tools.",
        icon: Sparkles,
      },
      {
        title: "Workflow Automation",
        description: "Automate processes and reduce friction across teams.",
        icon: Zap,
      },
      {
        title: "Permissions & Security",
        description: "Enterprise-grade security with granular access controls.",
        icon: Lock,
      },
      {
        title: "Developer Platform",
        description: "Flexible APIs and SDKs for custom builds and extensions.",
        icon: Code,
      },
      {
        title: "Insights & Analytics",
        description: "Gain clarity with advanced analytics and team reporting.",
        icon: BarChart2,
      },
    ],
  },
  "core-platform": {
    id: "core-platform",
    title: "Core Platform",
    description: "The underlying syncing and infrastructure layer.",
    capabilities: [
      {
        title: "Sub-millisecond Sync",
        description: "Global sync engine with ultra-low latency WebSocket delivery.",
        icon: Zap,
      },
      {
        title: "Conflict Resolution",
        description: "Advanced CRDT operations resolving state collisions automatically.",
        icon: Layers,
      },
      {
        title: "Offline Syncing",
        description: "Local database caching with seamless background catch-up.",
        icon: Activity,
      },
      {
        title: "Scale Infrastructure",
        description: "Supporting millions of concurrent users per room effortlessly.",
        icon: Users,
      },
      {
        title: "Edge Delivery",
        description: "Globally distributed state servers at the network edge.",
        icon: Settings,
      },
      {
        title: "Audit Logging",
        description: "Comprehensive historical logs for compliance and debugging.",
        icon: FileText,
      },
    ],
  },
  collaboration: {
    id: "collaboration",
    title: "Collaboration",
    description: "Visual elements to make multiplayer feel native.",
    capabilities: [
      {
        title: "Multiplayer Cursors",
        description: "Render high-frequency pointer movements in real-time.",
        icon: Users,
      },
      {
        title: "Live Comments & Chat",
        description: "Contextual conversation threads anywhere on your canvas.",
        icon: Sparkles,
      },
      {
        title: "Presence Avatars",
        description: "Display active online profiles with custom state badges.",
        icon: Users,
      },
      {
        title: "Co-Browsing",
        description: "Direct follow mode matching another user's viewport scale.",
        icon: Zap,
      },
      {
        title: "Interactive Polls",
        description: "Conduct rapid visual voting inside live documents.",
        icon: BarChart2,
      },
      {
        title: "Reactions & Emotes",
        description: "Lightweight floating bubbles for rapid user sentiment.",
        icon: Sparkles,
      },
    ],
  },
  automation: {
    id: "automation",
    title: "Automation",
    description: "Rules and engines that drive process workflows.",
    capabilities: [
      {
        title: "State Triggers",
        description: "Launch third-party events when document properties modify.",
        icon: Zap,
      },
      {
        title: "Workflow Builder",
        description: "No-code sequence editors to configure document review cycles.",
        icon: Settings,
      },
      {
        title: "Slack Connectors",
        description: "Pipe comments and updates straight to channel threads.",
        icon: Users,
      },
      {
        title: "Edge Handlers",
        description: "Run custom JavaScript state mutations closer to users.",
        icon: Code,
      },
      {
        title: "Webhooks Pipeline",
        description: "Secure, retried delivery of workspace payloads.",
        icon: Lock,
      },
      {
        title: "Scheduled Cleanup",
        description: "Auto-archive empty rooms and clear stale sessions.",
        icon: Activity,
      },
    ],
  },
  "developer-tools": {
    id: "developer-tools",
    title: "Developer Tools",
    description: "SDKs, debuggers, and local emulators.",
    capabilities: [
      {
        title: "Dev Console",
        description: "Inspect active memory nodes, frame rates, and payloads.",
        icon: Terminal,
      },
      {
        title: "Local Emulator",
        description: "Run disconnected environments to verify collaboration logic.",
        icon: Code,
      },
      {
        title: "CLI Scaffold",
        description: "Generate room structures and register component integrations.",
        icon: Terminal,
      },
      {
        title: "React Hooks",
        description: "Declarative React state binding with auto-throttling.",
        icon: Code,
      },
      {
        title: "Telemetry Dashboard",
        description: "Real-time metrics on packet loss and client disconnection rates.",
        icon: BarChart2,
      },
      {
        title: "Multi-Client Test",
        description: "Simulate multi-user loads in a single web browser console.",
        icon: Users,
      },
    ],
  },
  integrations: {
    id: "integrations",
    title: "Integrations",
    description: "Sync content across your operational ecosystem.",
    capabilities: [
      {
        title: "Notion Wiki Sync",
        description: "Export room summaries and decisions into your team workspace.",
        icon: FileText,
      },
      {
        title: "Figma Connect",
        description: "Pull active frames and canvas layouts directly into Velt rooms.",
        icon: Layers,
      },
      {
        title: "GitHub Actions",
        description: "Assert schema compatibility rules inside code merge cycles.",
        icon: Code,
      },
      {
        title: "Jira / Linear Link",
        description: "Turn floating comment flags directly into tickets.",
        icon: Activity,
      },
      {
        title: "Auth0 Single Sign-on",
        description: "Map enterprise identity providers with token pass-throughs.",
        icon: Lock,
      },
      {
        title: "Stripe Billing Seats",
        description: "Calculate active monthly collaborating team member accounts.",
        icon: BarChart2,
      },
    ],
  },
  security: {
    id: "security",
    title: "Security",
    description: "Enterprise compliance and privacy.",
    capabilities: [
      {
        title: "Granular ACLs",
        description: "Declare cell-level permissions based on signed user traits.",
        icon: Lock,
      },
      {
        title: "JWT Authorization",
        description: "Secure socket handshakes using short-lived cryptographed keys.",
        icon: Lock,
      },
      {
        title: "SOC2 Compliance",
        description: "Fully audited server structures and operational boundaries.",
        icon: FileText,
      },
      {
        title: "E2E Encryption",
        description: "Encrypt document payloads client-side before sync delivery.",
        icon: ShieldCheckIcon,
      },
      {
        title: "Isolated Private VPC",
        description: "Deploy dedicated client clusters on isolated private subnets.",
        icon: Layers,
      },
      {
        title: "DDoS Mitigation",
        description: "Protect websocket targets with edge connection throttling.",
        icon: Zap,
      },
    ],
  },
  analytics: {
    id: "analytics",
    title: "Analytics",
    description: "Track room interactions and user engagement.",
    capabilities: [
      {
        title: "Occupancy Heatmaps",
        description: "Locate canvas regions that receive the highest user focus.",
        icon: BarChart2,
      },
      {
        title: "MAU Dashboard",
        description: "Graph active collaborative users and channel counts.",
        icon: Activity,
      },
      {
        title: "Message Logs",
        description: "Query packet logs for custom user interactions.",
        icon: FileText,
      },
      {
        title: "Retention Analytics",
        description: "Measure how active users are returning to multiplayer sessions.",
        icon: Users,
      },
      {
        title: "Latency Reporting",
        description: "Track round-trip ping time mapped by user geographic location.",
        icon: Zap,
      },
      {
        title: "Excel/CSV Exports",
        description: "Automate delivery of collaboration traffic files.",
        icon: FileText,
      },
    ],
  },
};

// ShieldCheck Icon Fallback helper
function ShieldCheckIcon({ className }: { className?: string }) {
  return (
    <svg
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
      className={className}
    >
      <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
      <path d="m9 12 2 2 4-4" />
    </svg>
  );
}

// Popular resources
const popularResources = [
  {
    title: "Platform Docs",
    description: "Technical guides & references",
    icon: BookOpen,
  },
  {
    title: "API Reference",
    description: "Explore endpoints & schemas",
    icon: Code,
  },
  {
    title: "Release Notes",
    description: "What's new and improved",
    icon: Sparkles,
  },
  {
    title: "System Status",
    description: "Live uptime & performance",
    icon: Activity,
  },
];

// Left navigation menu categories list
const productCategories = [
  { slug: "overview", label: "Overview" },
  { slug: "core-platform", label: "Core Platform" },
  { slug: "collaboration", label: "Collaboration" },
  { slug: "automation", label: "Automation" },
  { slug: "developer-tools", label: "Developer Tools" },
  { slug: "integrations", label: "Integrations" },
  { slug: "security", label: "Security" },
  { slug: "analytics", label: "Analytics" },
];

const trustedLogos = ["NVIDIA", "Column", "GitHub", "Nike", "Lemon Squeezy"];

function NavbarOneHero() {
  return (
    <section className="w-full bg-white text-black dark:bg-[#212121] dark:text-white">
      <div className="mx-auto min-h-[calc(100vh-4rem)] max-w-7xl border-x border-neutral-200 dark:border-white/20 pt-14 md:pt-20">
        <div className="mx-auto flex max-w-3xl flex-col items-center text-center">
          <a
            href="#"
            className="group mb-8 inline-flex items-center gap-2 rounded-none border border-neutral-200 px-2 py-1 text-sm text-neutral-400 transition-colors hover:text-black dark:border-white/20 dark:text-white/20 dark:hover:text-white md:px-3"
          >
            <span className="rounded-none bg-neutral-300 px-2 py-0.5 text-neutral-400 transition-colors group-hover:bg-neutral-900 group-hover:text-white dark:bg-white/10 dark:text-white">
              Hiring
            </span>
            Apply for Design Engineers
            <ArrowRight className="size-3 transition-transform group-hover:translate-x-1" />
          </a>

          <h1 className="max-w-3xl text-4xl font-semibold tracking-[-0.055em] text-black dark:text-white md:text-6xl">
            Building visual tools should be fast and simple.
          </h1>
          <p className="mt-6 max-w-xl text-base leading-relaxed text-neutral-500 dark:text-neutral-400 md:text-lg">
            Beautiful visual components ready out of the box to design and build stunning visual applications.
          </p>

          <div className="mt-10 flex flex-wrap items-center justify-center gap-4">
            <a
              href="#"
              className="rounded-none bg-black px-6 py-3 text-sm font-semibold text-white transition-colors hover:bg-neutral-800 dark:bg-white dark:text-black dark:hover:bg-neutral-200"
            >
              Get started for free
            </a>
            <a
              href="#"
              className="group flex items-center gap-2 rounded-none border border-neutral-200 px-6 py-3 text-sm font-semibold text-black transition-colors hover:bg-neutral-50 dark:border-white/20 dark:text-white dark:hover:bg-white/10"
            >
              Learn more
              <ArrowRight className="size-4 transition-transform group-hover:translate-x-1" />
            </a>
          </div>
        </div>

        {/* Big Dashboard Mockup Graphics */}
        <div className="mx-6 mt-16 border border-neutral-200 bg-neutral-50 dark:border-white/20 dark:bg-white/5 md:mx-12 md:mt-24">
          <div className="border-b border-neutral-200 px-4 py-3 dark:border-white/20">
            <div className="flex items-center gap-1.5">
              <div className="size-3 rounded-none bg-neutral-200 dark:bg-white/10" />
              <div className="size-3 rounded-none bg-neutral-200 dark:bg-white/10" />
              <div className="size-3 rounded-none bg-neutral-200 dark:bg-white/10" />
            </div>
          </div>
          <div className="aspect-[16/9] w-full px-8 py-10">
            {/* Inner Dashboard Layout */}
            <div className="grid h-full grid-cols-12 gap-4">
              <div className="col-span-3 border border-dashed border-neutral-200 p-4 dark:border-white/10">
                <div className="h-4 w-2/3 bg-neutral-200 dark:bg-white/10" />
                <div className="mt-4 space-y-2">
                  <div className="h-3 w-full bg-neutral-100 dark:bg-white/5" />
                  <div className="h-3 w-5/6 bg-neutral-100 dark:bg-white/5" />
                  <div className="h-3 w-4/5 bg-neutral-100 dark:bg-white/5" />
                </div>
              </div>
              <div className="col-span-9 border border-dashed border-neutral-200 p-4 dark:border-white/10">
                <div className="flex items-center justify-between">
                  <div className="h-4 w-1/3 bg-neutral-200 dark:bg-white/10" />
                  <div className="h-4 w-12 bg-neutral-200 dark:bg-white/10" />
                </div>
                <div className="mt-6 grid grid-cols-3 gap-4">
                  <div className="aspect-video bg-neutral-100 dark:bg-white/5" />
                  <div className="aspect-video bg-neutral-100 dark:bg-white/5" />
                  <div className="aspect-video bg-neutral-100 dark:bg-white/5" />
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* Trusted Logos Footer */}
        <div className="mx-6 mt-16 border-t border-neutral-200 py-10 dark:border-white/20 md:mx-12 md:mt-24">
          <p className="text-center text-xs font-semibold uppercase tracking-widest text-neutral-400 dark:text-neutral-500">
            Trusted by modern product teams
          </p>
          <div className="mt-8 flex flex-wrap items-center justify-center gap-x-12 gap-y-6 text-sm font-semibold text-neutral-500 dark:text-neutral-400 md:gap-x-16">
            {trustedLogos.map((logo) => (
              <span key={logo} className="hover:text-black dark:hover:text-white transition-colors duration-200">
                {logo}
              </span>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

export default function NavbarOne() {
  const [activeMenu, setActiveMenu] = useState<string | null>(null);
  const [activeCategory, setActiveCategory] = useState<string>("overview");
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
  const [mobileAccordion, setMobileAccordion] = useState<string | null>(null);
  const [hoveredLink, setHoveredLink] = useState<string | null>(null);

  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
  const triggerRef = useRef<HTMLButtonElement | null>(null);

  // Close menus when hitting Escape
  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      if (e.key === "Escape") {
        setActiveMenu(null);
        setMobileMenuOpen(false);
      }
    };
    window.addEventListener("keydown", handleKeyDown);
    return () => window.removeEventListener("keydown", handleKeyDown);
  }, []);

  const handleMouseEnter = (menuName: string) => {
    if (timeoutRef.current) clearTimeout(timeoutRef.current);
    setActiveMenu(menuName);
  };

  const handleMouseLeave = () => {
    timeoutRef.current = setTimeout(() => {
      setActiveMenu(null);
    }, 220);
  };

  const handleCategoryHover = (categorySlug: string) => {
    setActiveCategory(categorySlug);
  };

  const currentCapabilities = productData[activeCategory]?.capabilities || productData.overview.capabilities;

  return (
    <>
      <div className="w-full max-w-7xl mx-auto bg-[#060608] text-zinc-300 font-sans relative antialiased border-x border-b border-zinc-900 rounded-none overflow-visible transition-colors duration-300">
        {/* Main Header */}
        <header className="w-full flex h-16 items-center justify-between px-6 z-50 relative">
          {/* Left: SolaceUI Logo */}
          <div className="flex items-center gap-2">
            <a href="#" className="flex items-center gap-2.5 focus:outline-none group/logo">
              <svg
                width="32"
                height="19"
                viewBox="0 0 64 38"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
                className="text-white group-hover/logo:opacity-80 transition-opacity"
              >
                <path
                  d="M0 20.1032L39.8387 20.1032C44.7808 20.1032 48.7871 24.1095 48.7871 29.0516C48.7871 33.9937 44.7808 38 39.8387 38L1.56459e-06 38L0 20.1032Z"
                  fill="currentColor"
                />
                <path
                  d="M63.4968 17.8968L23.6581 17.8968C18.716 17.8968 14.7097 13.8904 14.7097 8.94839C14.7097 4.00633 18.716 0 23.6581 0L63.4968 0V17.8968Z"
                  fill="currentColor"
                />
              </svg>
              <span className="font-semibold text-base tracking-wider text-white select-none transition-colors duration-200 group-hover/logo:text-zinc-100">
                SolaceUI
              </span>
            </a>
          </div>

          {/* Center: Desktop Navigation Items */}
          <nav 
            className="hidden lg:flex items-center gap-1 text-sm font-medium relative"
            onMouseLeave={() => setHoveredLink(null)}
          >
            {/* Product Dropdown Trigger */}
            <div
              className="relative"
              onMouseEnter={() => {
                handleMouseEnter("product");
                setHoveredLink("product");
              }}
              onMouseLeave={handleMouseLeave}
            >
              <button
                ref={triggerRef}
                onClick={() => setActiveMenu(activeMenu === "product" ? null : "product")}
                className={`relative flex items-center gap-1.5 px-4 py-2 rounded-none text-zinc-300 hover:text-white transition-colors duration-200 outline-none cursor-pointer border border-transparent`}
              >
                <span className="relative z-10">Product</span>
                <ChevronDown
                  className={`h-3.5 w-3.5 opacity-60 transition-transform duration-300 relative z-10 ${
                    activeMenu === "product" ? "rotate-180 text-white opacity-90" : "rotate-0 text-zinc-400"
                  }`}
                />
                {(hoveredLink === "product" || activeMenu === "product") && (
                  <motion.div
                    layoutId="nav-hover-pill"
                    className="absolute inset-0 bg-zinc-900 border border-zinc-800 rounded-none -z-0"
                    transition={{ type: "spring", stiffness: 400, damping: 35 }}
                  />
                )}
              </button>
            </div>

            <div onMouseEnter={() => setHoveredLink("solutions")}>
              <a href="#" className="relative block px-4 py-2 text-zinc-400 hover:text-white transition-colors duration-200">
                <span className="relative z-10">Solutions</span>
                {hoveredLink === "solutions" && (
                  <motion.div
                    layoutId="nav-hover-pill"
                    className="absolute inset-0 bg-zinc-900 border border-zinc-800 rounded-none -z-0"
                    transition={{ type: "spring", stiffness: 400, damping: 35 }}
                  />
                )}
              </a>
            </div>

            <div onMouseEnter={() => setHoveredLink("enterprise")}>
              <a href="#" className="relative block px-4 py-2 text-zinc-400 hover:text-white transition-colors duration-200">
                <span className="relative z-10">Enterprise</span>
                {hoveredLink === "enterprise" && (
                  <motion.div
                    layoutId="nav-hover-pill"
                    className="absolute inset-0 bg-zinc-900 border border-zinc-800 rounded-none -z-0"
                    transition={{ type: "spring", stiffness: 400, damping: 35 }}
                  />
                )}
              </a>
            </div>

            <div onMouseEnter={() => setHoveredLink("resources")}>
              <a href="#" className="relative block px-4 py-2 text-zinc-400 hover:text-white transition-colors duration-200">
                <span className="relative z-10">Resources</span>
                {hoveredLink === "resources" && (
                  <motion.div
                    layoutId="nav-hover-pill"
                    className="absolute inset-0 bg-zinc-900 border border-zinc-800 rounded-none -z-0"
                    transition={{ type: "spring", stiffness: 400, damping: 35 }}
                  />
                )}
              </a>
            </div>

            <div onMouseEnter={() => setHoveredLink("pricing")}>
              <a href="#" className="relative block px-4 py-2 text-zinc-400 hover:text-white transition-colors duration-200">
                <span className="relative z-10">Pricing</span>
                {hoveredLink === "pricing" && (
                  <motion.div
                    layoutId="nav-hover-pill"
                    className="absolute inset-0 bg-zinc-900 border border-zinc-800 rounded-none -z-0"
                    transition={{ type: "spring", stiffness: 400, damping: 35 }}
                  />
                )}
              </a>
            </div>
          </nav>

          {/* Right: CTA Action Buttons */}
          <div className="hidden lg:flex items-center gap-4">
            <a href="#" className="text-sm font-medium text-zinc-400 hover:text-white transition-colors duration-200">
              Sign in
            </a>
            <a
              href="#"
              className="text-sm font-medium text-black bg-white border border-white rounded-none px-5 py-2 hover:bg-transparent hover:text-white transition-all duration-200 whitespace-nowrap"
            >
              Book a demo
            </a>
          </div>

          {/* Mobile Hamburger Menu Trigger */}
          <button
            onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
            className="lg:hidden flex h-10 w-10 items-center justify-center rounded-none border border-zinc-800 bg-zinc-900/40 text-zinc-400 hover:text-white focus:outline-none cursor-pointer transition-colors duration-200"
          >
            {mobileMenuOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
          </button>
        </header>

        {/* Desktop Mega Menu Dropdown */}
        <AnimatePresence>
          {activeMenu === "product" && (
            <motion.div
              initial={{ opacity: 0, y: 4, scale: 0.995 }}
              animate={{ opacity: 1, y: 0, scale: 1 }}
              exit={{ opacity: 0, y: 4, scale: 0.995 }}
              transition={{ duration: 0.15, ease: "easeOut" }}
              onMouseEnter={() => handleMouseEnter("product")}
              onMouseLeave={handleMouseLeave}
              className="absolute left-0 right-0 top-[72px] z-40 hidden lg:block rounded-none border border-zinc-800 bg-[#08080a] shadow-[0_40px_100px_rgba(0,0,0,0.95)] overflow-hidden"
            >
              {/* Grid Layout */}
              <div className="grid grid-cols-[190px_1fr_300px] divide-x divide-zinc-900/60">
                {/* Left Column: Product Selection */}
                <div className="p-6 flex flex-col justify-between bg-[#050507]">
                  <div>
                    <h3 className="text-[10px] font-bold uppercase tracking-[0.15em] text-zinc-400/80 mb-4 px-3">
                      Product
                    </h3>
                    <div className="space-y-1">
                      {productCategories.map((cat) => {
                        const isActive = activeCategory === cat.slug;
                        return (
                          <button
                            key={cat.slug}
                            onMouseEnter={() => handleCategoryHover(cat.slug)}
                            className={`w-full text-left px-4 py-2.5 rounded-none text-sm font-medium transition-all duration-150 relative cursor-pointer outline-none ${
                              isActive
                                ? "text-white"
                                : "text-zinc-500 hover:text-zinc-300"
                            }`}
                          >
                            {isActive && (
                              <motion.div
                                layoutId="active-left-pill"
                                className="absolute inset-0 bg-[#0c0c0f] border border-zinc-800 rounded-none -z-10"
                                transition={{ type: "spring", stiffness: 400, damping: 35 }}
                              />
                            )}
                            {cat.label}
                          </button>
                        );
                      })}
                    </div>
                  </div>

                  <div className="mt-8 pt-4 border-t border-zinc-900/60">
                    <p className="text-[11px] text-zinc-500 mb-1.5 px-3">
                      Looking for something specific?
                    </p>
                    <a
                      href="#"
                      className="group flex items-center gap-1.5 px-3 text-xs font-medium text-zinc-300 hover:text-white transition-colors"
                    >
                      Search all features
                      <ArrowRight className="h-3 w-3 text-zinc-500 group-hover:translate-x-1 transition-transform duration-200" />
                    </a>
                  </div>
                </div>

                {/* Middle Column: Capabilities Grid & Popular Resources */}
                <div className="p-8 flex flex-col justify-between bg-[#0c0c0f]">
                  <div>
                    <h3 className="text-[10px] font-bold uppercase tracking-[0.15em] text-zinc-400/80 mb-6 px-1">
                      Platform Capabilities
                    </h3>

                    {/* Capabilities List with dynamic Framer Motion update */}
                    <motion.div
                      key={activeCategory}
                      initial={{ opacity: 0 }}
                      animate={{ opacity: 1 }}
                      transition={{ duration: 0.2 }}
                      className="grid grid-cols-2 xl:grid-cols-3 gap-3.5"
                    >
                      {currentCapabilities.map((cap, i) => {
                        const CapIcon = cap.icon;
                        return (
                          <a
                            key={cap.title + i}
                            href="#"
                            className="group p-4 rounded-none border border-zinc-900/60 bg-zinc-950/20 hover:bg-zinc-900/30 hover:border-zinc-800/80 transition-all duration-300 flex items-start gap-3 relative overflow-hidden focus:outline-none"
                          >
                            <div className="flex-shrink-0 mt-0.5 text-zinc-500 group-hover:text-white transition-colors duration-300">
                              <CapIcon className="h-4 w-4" />
                            </div>
                            <div className="flex-grow">
                              <div className="flex items-center gap-1.5 mb-1">
                                <span className="text-[13px] font-medium text-zinc-300 group-hover:text-white transition-colors duration-200">
                                  {cap.title}
                                </span>
                                <ArrowRight className="h-3 w-3 opacity-0 -translate-x-1 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-300 text-white" />
                              </div>
                              <p className="text-[11px] leading-relaxed text-zinc-500 group-hover:text-zinc-400 transition-colors duration-200">
                                {cap.description}
                              </p>
                            </div>
                          </a>
                        );
                      })}
                    </motion.div>
                  </div>

                  {/* Bottom section: Popular Resources (Typography Focused / Iconless) */}
                  <div className="mt-10 pt-6 border-t border-zinc-900/60">
                    <h3 className="text-[10px] font-bold uppercase tracking-[0.15em] text-zinc-400/80 mb-4 px-1">
                      Popular Resources
                    </h3>
                    <div className="grid grid-cols-4 gap-6">
                      {popularResources.map((res, i) => {
                        return (
                          <a
                            key={i}
                            href="#"
                            className="group flex flex-col pt-1 hover:opacity-80 transition-opacity duration-200"
                          >
                            <span className="text-xs font-semibold text-white group-hover:underline flex items-center gap-1">
                              {res.title}
                              <ArrowRight className="h-3 w-3 opacity-0 -translate-x-1 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-200 text-zinc-400" />
                            </span>
                            <span className="text-[10px] text-zinc-500 mt-1 leading-relaxed">
                              {res.description}
                            </span>
                          </a>
                        );
                      })}
                    </div>
                  </div>
                </div>

                {/* Right Column: Customer Story */}
                <div className="p-6 bg-[#08080a] flex flex-col justify-between h-full">
                  <div>
                    <h3 className="text-[10px] font-bold uppercase tracking-[0.15em] text-zinc-400/80 mb-4 px-1">
                      Customer Story
                    </h3>

                    {/* Customer story card with custom SVG design */}
                    <div className="relative rounded-none border border-zinc-800 bg-zinc-950/40 p-5 overflow-hidden group h-[320px] flex flex-col justify-between hover:border-zinc-700 transition-all duration-300">
                      {/* SVG Graphic Background */}
                      <div className="absolute inset-0 z-0 opacity-40 group-hover:opacity-50 transition-opacity duration-300">
                        <svg width="100%" height="100%" viewBox="0 0 300 300" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <defs>
                            <pattern id="brutalist-grid" width="20" height="20" patternUnits="userSpaceOnUse">
                              <path d="M 20 0 L 0 0 0 20" fill="none" stroke="rgba(255,255,255,0.03)" strokeWidth="1" />
                            </pattern>
                          </defs>
                          <rect width="100%" height="100%" fill="url(#brutalist-grid)" />
                          <motion.path
                            d="M0 150 L300 150"
                            stroke="rgba(255,255,255,0.08)"
                            strokeWidth="1"
                            animate={{
                              scaleY: [1, 1.2, 0.8, 1],
                              opacity: [0.5, 0.8, 0.4, 0.5]
                            }}
                            transition={{
                              duration: 8,
                              repeat: Infinity,
                              ease: "easeInOut"
                            }}
                          />
                        </svg>
                      </div>

                      {/* Gradient Overlay */}
                      <div className="absolute inset-0 bg-gradient-to-t from-[#0b0b0d] via-[#0b0b0d]/70 to-transparent z-1" />

                      {/* Card Contents */}
                      <div className="relative z-10">
                        <span className="inline-block text-[9px] font-bold tracking-widest text-zinc-400 border border-zinc-800 bg-zinc-900/50 px-2 py-0.5 rounded-none uppercase mb-4">
                          Customer Story
                        </span>
                        <h4 className="text-base font-semibold leading-snug text-white tracking-tight">
                          How Northline scaled collaboration across 12 regions
                        </h4>
                      </div>

                      <div className="relative z-10 mt-auto">
                        <p className="text-xs text-zinc-400 leading-relaxed mb-4">
                          Northline unified their global teams on Velt—streamlining content ops and accelerating delivery.
                        </p>
                        <a
                          href="#"
                          className="group/link inline-flex items-center gap-1.5 text-xs font-semibold text-white hover:text-zinc-200 transition-colors"
                        >
                          Read the story
                          <ArrowRight className="h-3.5 w-3.5 text-zinc-400 group-hover/link:translate-x-1 transition-transform" />
                        </a>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </motion.div>
          )}
        </AnimatePresence>

        {/* Mobile Menu Panel */}
        <AnimatePresence>
          {mobileMenuOpen && (
            <motion.div
              initial={{ opacity: 0, height: 0 }}
              animate={{ opacity: 1, height: "auto" }}
              exit={{ opacity: 0, height: 0 }}
              transition={{ duration: 0.3 }}
              className="lg:hidden border-t border-zinc-900 bg-[#060608] z-30 relative overflow-hidden"
            >
              <div className="px-6 py-6 space-y-4 max-h-[85vh] overflow-y-auto">
                {/* Product Accordion */}
                <div className="border-b border-zinc-900 pb-4">
                  <button
                    onClick={() => setMobileAccordion(mobileAccordion === "product" ? null : "product")}
                    className="flex w-full items-center justify-between py-2 text-base font-semibold text-white outline-none"
                  >
                    Product
                    <ChevronDown
                      className={`h-4 w-4 text-zinc-500 transition-transform duration-200 ${
                        mobileAccordion === "product" ? "rotate-180" : ""
                      }`}
                    />
                  </button>

                  <AnimatePresence>
                    {mobileAccordion === "product" && (
                      <motion.div
                        initial={{ opacity: 0, height: 0 }}
                        animate={{ opacity: 1, height: "auto" }}
                        exit={{ opacity: 0, height: 0 }}
                        className="pl-2 pr-2 mt-2 space-y-4 overflow-hidden"
                      >
                        {/* Inner category selector for mobile */}
                        <div className="flex gap-2 overflow-x-auto pb-2 scrollbar-none">
                          {productCategories.map((cat) => (
                            <button
                              key={cat.slug}
                              onClick={() => setActiveCategory(cat.slug)}
                              className={`px-3 py-1.5 rounded-none text-xs font-medium whitespace-nowrap outline-none transition-all duration-150 ${
                                activeCategory === cat.slug
                                  ? "bg-zinc-800 text-white border border-zinc-700/60"
                                  : "bg-zinc-900/30 text-zinc-500 border border-transparent"
                              }`}
                            >
                              {cat.label}
                            </button>
                          ))}
                        </div>

                        {/* Capabilities in selected category */}
                        <div className="grid gap-2 grid-cols-1 sm:grid-cols-2">
                          {currentCapabilities.slice(0, 4).map((cap, i) => {
                            const CapIcon = cap.icon;
                            return (
                              <div
                                key={i}
                                className="p-3.5 rounded-none border border-zinc-900/60 bg-zinc-950/40"
                              >
                                <div className="flex items-center gap-2.5 mb-1.5">
                                  <CapIcon className="h-4 w-4 text-zinc-400" />
                                  <h4 className="text-xs font-semibold text-zinc-200">
                                    {cap.title}
                                  </h4>
                                </div>
                                <p className="text-[11px] text-zinc-500 leading-relaxed">
                                  {cap.description}
                                </p>
                              </div>
                            );
                          })}
                        </div>

                        <div className="pt-2">
                          <a
                            href="#"
                            className="flex items-center justify-center gap-1.5 py-2.5 rounded-none border border-zinc-800 bg-zinc-900/20 text-xs font-semibold text-white hover:bg-zinc-900/40 transition-colors"
                          >
                            View all product features
                            <ArrowRight className="h-3 w-3" />
                          </a>
                        </div>
                      </motion.div>
                    )}
                  </AnimatePresence>
                </div>

                {/* Regular Links */}
                <a href="#" className="block py-2 text-base font-semibold text-zinc-400 hover:text-white transition-colors">
                  Solutions
                </a>
                <a href="#" className="block py-2 text-base font-semibold text-zinc-400 hover:text-white transition-colors">
                  Enterprise
                </a>
                <a href="#" className="block py-2 text-base font-semibold text-zinc-400 hover:text-white transition-colors">
                  Resources
                </a>
                <a href="#" className="block py-2 text-base font-semibold text-zinc-400 hover:text-white transition-colors">
                  Pricing
                </a>

                {/* Mobile CTA buttons */}
                <div className="pt-6 border-t border-zinc-900 space-y-3">
                  <a
                    href="#"
                    className="flex h-11 w-full items-center justify-center rounded-none border border-zinc-800 text-sm font-medium text-zinc-400 hover:text-white hover:bg-zinc-900/20 transition-all"
                  >
                    Sign in
                  </a>
                  <a
                    href="#"
                    className="flex h-11 w-full items-center justify-center rounded-none bg-white text-sm font-medium text-black hover:bg-zinc-100 transition-all"
                  >
                    Book a demo
                  </a>
                </div>
              </div>
            </motion.div>
          )}
        </AnimatePresence>
      </div>
      <NavbarOneHero />
    </>
  );
}