import { Navbar } from "./navbar";
import { Hero } from "./hero";
import { Features } from "./features";
import { Comparison } from "./comparison";
import { SplitScreen } from "./split-screen";
import { Testimonials } from "./testimonials";
import { Pricing } from "./pricing";
import { Footer } from "./footer";
 
export function AiSaasPage() {
  return (
    <div className="min-h-screen bg-black text-white selection:bg-white/20 selection:text-white font-sans">
      <Navbar />
      <main>
        <Hero />
        <Features />
        <Comparison />
        <SplitScreen />
        <Testimonials />
        <Pricing />
      </main>
      <Footer />
    </div>
  );
}

"use client";
 
import { useState } from "react";
import {
  motion,
  useScroll,
  useMotionValueEvent,
  AnimatePresence,
} from "framer-motion";
import { Menu, X, ArrowRight } from "lucide-react";
import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
 
const navItems = [
  { name: "Product", href: "#product" },
  { name: "Solutions", href: "#solutions" },
  { name: "Research", href: "#research" },
  { name: "Pricing", href: "#pricing" },
];
 
export function Navbar() {
  const { scrollY } = useScroll();
  const [scrolled, setScrolled] = useState(false);
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
 
  useMotionValueEvent(scrollY, "change", (latest) => {
    setScrolled(latest > 20);
  });
 
  return (
    <>
      <motion.nav
        initial={{ y: -100, opacity: 0 }}
        animate={{ y: 0, opacity: 1 }}
        transition={{ duration: 0.8, ease: [0.16, 1, 0.3, 1] }}
        className={cn(
          "absolute top-0 inset-x-0 z-50 flex justify-center pointer-events-none pt-6 px-4",
        )}
        // should be "fixed" instead of "absolute"
      >
        <div
          className={cn(
            "pointer-events-auto relative flex items-center justify-between w-full max-w-5xl h-14 px-4 rounded-full transition-all duration-500",
            scrolled
              ? "bg-black/80 backdrop-blur-xl border border-white/10 shadow-[0_0_40px_-10px_rgba(255,255,255,0.05)]"
              : "bg-transparent border border-transparent",
          )}
        >
          {/* Logo */}
          <div className="flex items-center gap-2">
            <div className="w-8 h-8 bg-white rounded-full flex items-center justify-center">
              <div className="w-3 h-3 bg-black rounded-sm" />
            </div>
            <span className="font-semibold text-lg tracking-tight text-white hidden sm:block">
              Nexusia
            </span>
          </div>
 
          {/* Desktop Nav */}
          <div className="hidden md:flex items-center gap-8 absolute left-1/2 -translate-x-1/2">
            {navItems.map((item) => (
              <a
                key={item.name}
                href={item.href}
                className="text-sm font-medium text-zinc-400 hover:text-white transition-colors duration-300"
              >
                {item.name}
              </a>
            ))}
          </div>
 
          {/* Actions */}
          <div className="flex items-center gap-4">
            <a
              href="#"
              className="hidden sm:block text-sm font-medium text-white hover:text-zinc-300 transition-colors"
            >
              Sign in
            </a>
            <Button
              size="sm"
              className="bg-white text-black hover:bg-zinc-200 rounded-full px-6 font-medium transition-all duration-300 hover:scale-105"
            >
              Get Started
            </Button>
 
            {/* Mobile Menu Toggle */}
            <button
              className="md:hidden text-white p-1"
              onClick={() => setIsMobileMenuOpen(true)}
            >
              <Menu className="w-6 h-6" />
            </button>
          </div>
        </div>
      </motion.nav>
 
      {/* Mobile Menu Overlay */}
      <AnimatePresence>
        {isMobileMenuOpen && (
          <motion.div
            initial={{ opacity: 0, y: -20 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: -20 }}
            className="fixed inset-0 z-[60] bg-black p-6 md:hidden flex flex-col"
          >
            <div className="flex items-center justify-between mb-12">
              <div className="flex items-center gap-2">
                <div className="w-8 h-8 bg-white rounded-full flex items-center justify-center">
                  <div className="w-3 h-3 bg-black rounded-sm" />
                </div>
                <span className="font-semibold text-lg text-white">
                  Nexusia
                </span>
              </div>
              <button
                onClick={() => setIsMobileMenuOpen(false)}
                className="p-2 bg-zinc-900 rounded-full text-zinc-400 hover:text-white"
              >
                <X className="w-5 h-5" />
              </button>
            </div>
 
            <div className="flex flex-col gap-6">
              {navItems.map((item, idx) => (
                <motion.a
                  key={item.name}
                  href={item.href}
                  initial={{ opacity: 0, x: -20 }}
                  animate={{ opacity: 1, x: 0 }}
                  transition={{ delay: idx * 0.1 }}
                  onClick={() => setIsMobileMenuOpen(false)}
                  className="text-3xl font-medium text-zinc-400 hover:text-white transition-colors flex items-center justify-between group"
                >
                  {item.name}
                  <ArrowRight className="w-6 h-6 opacity-0 group-hover:opacity-100 -translate-x-4 group-hover:translate-x-0 transition-all" />
                </motion.a>
              ))}
            </div>
 
            <div className="mt-auto">
              <Button className="w-full bg-white text-black hover:bg-zinc-200 rounded-full h-12 text-lg font-medium">
                Get Started Now
              </Button>
            </div>
          </motion.div>
        )}
      </AnimatePresence>
    </>
  );
}

"use client";
 
import { useState, useRef, useEffect } from "react";
import {
  motion,
  useScroll,
  useTransform,
  useSpring,
  useMotionValue,
} from "framer-motion";
import { Button } from "@/components/ui/button";
import {
  ArrowRight,
  Command,
  Cpu,
  Globe,
  Zap,
  Shield,
  Activity,
  Search,
  Menu,
  Code,
  Database,
  Layers,
  Triangle,
  Terminal,
  ChevronRight,
  Settings,
  Bell,
} from "lucide-react";
import { cn } from "@/lib/utils";
 
// Unique "Refracted" Text Component
const RefractedText = ({ text }: { text: string }) => {
  return (
    <div className="relative inline-block">
      <span className="relative z-10">{text}</span>
      <span className="absolute top-0 left-0 -translate-x-[2px] -translate-y-[1px] text-zinc-500 opacity-40 mix-blend-overlay clip-path-top">
        {text}
      </span>
      <span className="absolute top-0 left-0 translate-x-[2px] translate-y-[1px] text-zinc-600 opacity-40 mix-blend-overlay clip-path-bottom">
        {text}
      </span>
      <style jsx>{`
        .clip-path-top {
          clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
        }
        .clip-path-bottom {
          clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
        }
      `}</style>
    </div>
  );
};
 
const CompanyLogos = () => (
  <div className="flex items-center gap-8 md:gap-12 opacity-40 grayscale mix-blend-screen">
    {["NVIDIA", "Vercel", "Scale", "OpenAI", "Anthropic"].map((company) => (
      <span
        key={company}
        className="text-lg font-semibold tracking-tight text-zinc-300"
      >
        {company}
      </span>
    ))}
  </div>
);
 
export function Hero() {
  const containerRef = useRef<HTMLDivElement>(null);
 
  // Mouse interaction for subtle 3D tilt
  const mouseX = useMotionValue(0);
  const mouseY = useMotionValue(0);
 
  const handleMouseMove = (e: React.MouseEvent) => {
    const { clientX, clientY, currentTarget } = e;
    const { width, height, left, top } = currentTarget.getBoundingClientRect();
 
    const x = (clientX - left) / width - 0.5;
    const y = (clientY - top) / height - 0.5;
 
    mouseX.set(x);
    mouseY.set(y);
  };
 
  const rotateX = useSpring(useTransform(mouseY, [-0.5, 0.5], [5, -5]), {
    stiffness: 150,
    damping: 20,
  });
  const rotateY = useSpring(useTransform(mouseX, [-0.5, 0.5], [-5, 5]), {
    stiffness: 150,
    damping: 20,
  });
 
  return (
    <section
      ref={containerRef}
      className="relative min-h-[140vh] flex flex-col items-center pt-24 overflow-hidden bg-black selection:bg-white/20 selection:text-white perspective-2000"
      onMouseMove={handleMouseMove}
    >
      {/* Ambient Background */}
      <div className="absolute inset-0 z-40 pointer-events-none">
        <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[80vw] h-[500px] bg-white/[0.02] blur-[120px] rounded-full" />
        <div className="absolute inset-0 bg-[radial-gradient(circle_at_center,rgba(255,255,255,0.03)_1px,transparent_1px)] bg-[size:24px_24px] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_100%)]" />
      </div>
 
      {/* Content Container */}
      <div className="relative z-10 max-w-7xl mx-auto px-4 flex flex-col items-center text-center mb-16">
        {/* Announcement Badge */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6 }}
          className="group relative inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-zinc-900/50 border border-white/10 mb-10 backdrop-blur-md cursor-pointer overflow-hidden hover:border-white/20 transition-colors"
        >
          <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/10 to-transparent translate-x-[-100%] group-hover:translate-x-[100%] transition-transform duration-1000" />
          <span className="flex h-2 w-2 rounded-full bg-green-500 shadow-[0_0_10px_rgba(34,197,94,0.5)] animate-pulse" />
          <span className="text-sm font-medium text-zinc-300 tracking-wide">
            Nexusia 2.0 is now public
          </span>
          <ArrowRight className="w-3.5 h-3.5 text-zinc-500 ml-1 group-hover:translate-x-1 transition-transform" />
        </motion.div>
 
        {/* Massive Headline */}
        <motion.h1
          initial={{ opacity: 0, y: 30 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8, delay: 0.1 }}
          className="text-4xl md:text-7xl lg:text-9xl font-bold tracking-tighter text-white mb-8 relative z-20 leading-[0.9]"
        >
          <div className="inline-block relative">
            <RefractedText text="Constructing" />
            <div className="absolute -inset-4 bg-white/20 blur-3xl opacity-0 group-hover:opacity-20 transition-opacity duration-1000" />
          </div>
          <br />
          <span className="text-transparent bg-clip-text bg-gradient-to-b from-zinc-200 via-zinc-400 to-zinc-700">
            Intelligence.
          </span>
        </motion.h1>
 
        <motion.p
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8, delay: 0.2 }}
          className="max-w-2xl text-lg md:text-xl text-zinc-400 mb-12 leading-relaxed font-light tracking-wide"
        >
          The first AI-native operating system. Orchestrate models, data, and
          infrastructure in one{" "}
          <span className="text-white font-medium">unified dimension</span>.
        </motion.p>
 
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8, delay: 0.3 }}
          className="flex flex-col sm:flex-row items-center gap-6 mb-20"
        >
          <Button
            size="lg"
            className="h-14 px-10 rounded-full bg-white text-black hover:bg-zinc-100 text-lg font-semibold transition-all duration-300 hover:scale-105 shadow-[0_0_50px_-10px_rgba(255,255,255,0.3)] ring-4 ring-white/10 hover:ring-white/20"
          >
            Start Building
          </Button>
          <Button
            variant="outline"
            size="lg"
            className="h-14 px-10 rounded-full border-white/10 bg-white/5 text-white hover:bg-white/10 hover:text-white text-lg font-medium backdrop-blur-md transition-all duration-300 hover:scale-105"
          >
            View Architecture
          </Button>
        </motion.div>
 
        {/* Social Proof Strip */}
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ duration: 1, delay: 0.5 }}
          className="mb-24"
        >
          <p className="text-xs text-zinc-600 mb-6 uppercase tracking-[0.2em] font-medium">
            Trusted by engineering teams at
          </p>
          <CompanyLogos />
        </motion.div>
      </div>
 
      {/* 3D Interface Visualization */}
      <motion.div
        style={{
          rotateX,
          rotateY,
          transformStyle: "preserve-3d",
        }}
        className="relative w-full max-w-6xl mx-auto perspective-1000 px-4"
      >
        <div className="relative rounded-2xl border border-white/10 bg-zinc-900/50 backdrop-blur-xl shadow-2xl overflow-hidden transform-style-3d">
          {/* Window Chrome */}
          <div className="h-12 border-b border-white/10 flex items-center justify-between px-4 bg-white/[0.02]">
            <div className="flex items-center gap-2">
              <div className="flex gap-1.5">
                <div className="w-3 h-3 rounded-full bg-zinc-800" />
                <div className="w-3 h-3 rounded-full bg-zinc-800" />
                <div className="w-3 h-3 rounded-full bg-zinc-800" />
              </div>
            </div>
 
            {/* Command Bar Simulation */}
            <div className="flex-1 max-w-md mx-auto hidden md:flex items-center gap-2 px-3 py-1.5 rounded-md bg-black/20 border border-white/5 text-xs text-zinc-500">
              <Search className="w-3 h-3" />
              <span>Search for models, deployments, or logs...</span>
              <div className="ml-auto flex items-center gap-1">
                <span className="px-1 rounded bg-white/10 text-[10px]">⌘</span>
                <span className="px-1 rounded bg-white/10 text-[10px]">K</span>
              </div>
            </div>
 
            <div className="flex items-center gap-4">
              <Bell className="w-4 h-4 text-zinc-500" />
              <div className="w-6 h-6 rounded-full bg-gradient-to-tr from-zinc-700 to-zinc-600 border border-white/10" />
            </div>
          </div>
 
          {/* Main Dashboard Layout */}
          <div className="grid grid-cols-1 md:grid-cols-12 h-auto md:h-[600px] bg-black/40">
            {/* Sidebar - Hidden on Mobile */}
            <div className="hidden md:flex col-span-2 border-r border-white/5 p-3 flex-col gap-1">
              <div className="mb-4 px-2 py-1">
                <div className="text-xs font-medium text-zinc-500 uppercase tracking-wider mb-2">
                  Platform
                </div>
                {[
                  { icon: Layers, label: "Overview", active: true },
                  { icon: Cpu, label: "Deployments" },
                  { icon: Database, label: "Storage" },
                  { icon: Globe, label: "Network" },
                ].map((item, i) => (
                  <div
                    key={i}
                    className={cn(
                      "flex items-center gap-2 px-2 py-1.5 rounded-md text-sm transition-colors mb-0.5",
                      item.active
                        ? "bg-white/10 text-white"
                        : "text-zinc-500 hover:text-zinc-300 hover:bg-white/5",
                    )}
                  >
                    <item.icon className="w-4 h-4" />
                    {item.label}
                  </div>
                ))}
              </div>
 
              <div className="px-2 py-1">
                <div className="text-xs font-medium text-zinc-500 uppercase tracking-wider mb-2">
                  Observability
                </div>
                {[
                  { icon: Activity, label: "Metrics" },
                  { icon: Terminal, label: "Logs" },
                  { icon: Shield, label: "Security" },
                ].map((item, i) => (
                  <div
                    key={i}
                    className={cn(
                      "flex items-center gap-2 px-2 py-1.5 rounded-md text-sm transition-colors mb-0.5",
                      "text-zinc-500 hover:text-zinc-300 hover:bg-white/5",
                    )}
                  >
                    <item.icon className="w-4 h-4" />
                    {item.label}
                  </div>
                ))}
              </div>
 
              <div className="mt-auto pt-3 border-t border-white/5">
                <div className="flex items-center gap-2 px-2 py-1.5 text-zinc-500 text-sm hover:text-white cursor-pointer">
                  <Settings className="w-4 h-4" />
                  <span>Settings</span>
                </div>
              </div>
            </div>
 
            {/* Main Content */}
            <div className="col-span-1 md:col-span-10 p-4 md:p-6 overflow-hidden relative flex flex-col">
              {/* Breadcrumbs & Actions */}
              <div className="flex items-center justify-between mb-6">
                <div className="flex items-center gap-2 text-sm text-zinc-500">
                  <span className="text-zinc-300">Overview</span>
                  <ChevronRight className="w-4 h-4" />
                  <span>Production</span>
                </div>
                <div className="flex gap-2">
                  <div className="px-3 py-1.5 rounded-md bg-white text-black text-xs font-medium flex items-center gap-2">
                    <Zap className="w-3 h-3" />
                    Deploy New
                  </div>
                </div>
              </div>
 
              {/* Header Stats */}
              <div className="grid grid-cols-2 md:grid-cols-4 gap-3 md:gap-4 mb-6">
                {[
                  {
                    label: "Active Nodes",
                    value: "14",
                    trend: "+2",
                    sub: "us-east-1",
                  },
                  {
                    label: "Requests/sec",
                    value: "2.4k",
                    trend: "+12%",
                    sub: "Global",
                  },
                  {
                    label: "Avg. Latency",
                    value: "24ms",
                    trend: "-4ms",
                    sub: "P99",
                  },
                  {
                    label: "Success Rate",
                    value: "99.99%",
                    trend: "0%",
                    sub: "Last 24h",
                  },
                ].map((stat, i) => (
                  <div
                    key={i}
                    className="p-3 md:p-4 rounded-xl bg-white/[0.02] border border-white/5 hover:bg-white/[0.04] transition-colors group"
                  >
                    <div className="flex justify-between items-start mb-2">
                      <div className="text-zinc-500 text-[10px] md:text-xs">
                        {stat.label}
                      </div>
                      <div className="text-[10px] text-green-500 bg-green-500/10 px-1.5 py-0.5 rounded">
                        {stat.trend}
                      </div>
                    </div>
                    <div className="text-xl md:text-2xl font-semibold text-white mb-1">
                      {stat.value}
                    </div>
                    <div className="text-[10px] text-zinc-600">{stat.sub}</div>
                  </div>
                ))}
              </div>
 
              {/* Main Chart Area */}
              <div className="grid grid-cols-1 md:grid-cols-3 gap-4 flex-1 min-h-0">
                <div className="col-span-1 md:col-span-2 rounded-xl bg-white/[0.02] border border-white/5 p-4 md:p-5 relative overflow-hidden flex flex-col min-h-[200px]">
                  <div className="flex items-center justify-between mb-6">
                    <div>
                      <div className="text-sm font-medium text-white">
                        Inference Volume
                      </div>
                      <div className="text-xs text-zinc-500">
                        Total requests across all endpoints
                      </div>
                    </div>
                    <div className="flex gap-1">
                      {["1H", "24H", "7D", "30D"].map((t, i) => (
                        <div
                          key={t}
                          className={cn(
                            "px-2 py-1 rounded text-[10px] cursor-pointer",
                            i === 1
                              ? "bg-white/10 text-white"
                              : "text-zinc-500 hover:text-zinc-300",
                          )}
                        >
                          {t}
                        </div>
                      ))}
                    </div>
                  </div>
 
                  {/* Chart Visualization */}
                  <div className="flex-1 flex items-end gap-1 relative">
                    {/* Grid Lines */}
                    <div className="absolute inset-0 flex flex-col justify-between pointer-events-none">
                      {[...Array(4)].map((_, i) => (
                        <div key={i} className="w-full h-px bg-white/[0.02]" />
                      ))}
                    </div>
 
                    {[...Array(48)].map((_, i) => (
                      <motion.div
                        key={i}
                        initial={{ height: "10%" }}
                        animate={{ height: `${Math.random() * 60 + 20}%` }}
                        transition={{
                          duration: 3,
                          repeat: Infinity,
                          repeatType: "reverse",
                          delay: i * 0.05,
                        }}
                        className="flex-1 bg-zinc-800 rounded-t-[1px] hover:bg-white transition-colors"
                      />
                    ))}
                  </div>
                </div>
 
                <div className="col-span-1 flex flex-col gap-4">
                  {/* Regional Health */}
                  <div className="flex-1 rounded-xl bg-white/[0.02] border border-white/5 p-4 md:p-5">
                    <div className="text-sm font-medium text-white mb-4">
                      Regional Health
                    </div>
                    <div className="space-y-3">
                      {[
                        {
                          region: "us-east-1",
                          latency: "24ms",
                          status: "Healthy",
                        },
                        {
                          region: "eu-west-1",
                          latency: "42ms",
                          status: "Healthy",
                        },
                        {
                          region: "ap-northeast",
                          latency: "89ms",
                          status: "Degraded",
                        },
                      ].map((item, i) => (
                        <div
                          key={i}
                          className="flex items-center justify-between text-xs"
                        >
                          <div className="flex items-center gap-2">
                            <div
                              className={cn(
                                "w-1.5 h-1.5 rounded-full",
                                item.status === "Healthy"
                                  ? "bg-green-500"
                                  : "bg-yellow-500",
                              )}
                            />
                            <span className="text-zinc-300">{item.region}</span>
                          </div>
                          <div className="flex items-center gap-3">
                            <span className="text-zinc-500">
                              {item.latency}
                            </span>
                          </div>
                        </div>
                      ))}
                    </div>
                  </div>
 
                  {/* Recent Activity */}
                  <div className="flex-1 rounded-xl bg-white/[0.02] border border-white/5 p-4 md:p-5 overflow-hidden">
                    <div className="text-sm font-medium text-white mb-4">
                      Live Logs
                    </div>
                    <div className="space-y-3 font-mono text-[10px]">
                      {[
                        {
                          time: "10:42:23",
                          msg: "Deployment 'api-v2' successful",
                          type: "success",
                        },
                        {
                          time: "10:42:15",
                          msg: "Scaling up worker nodes (2 -> 4)",
                          type: "info",
                        },
                        {
                          time: "10:41:58",
                          msg: "High memory usage detected",
                          type: "warning",
                        },
                      ].map((log, i) => (
                        <div key={i} className="flex gap-2">
                          <span className="text-zinc-600">{log.time}</span>
                          <span
                            className={cn(
                              log.type === "success"
                                ? "text-green-400"
                                : log.type === "warning"
                                  ? "text-yellow-400"
                                  : "text-zinc-400",
                            )}
                          >
                            {log.msg}
                          </span>
                        </div>
                      ))}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
 
          {/* Glass Overlay Reflection */}
          <div className="absolute inset-0 bg-gradient-to-tr from-white/5 via-transparent to-transparent pointer-events-none" />
        </div>
      </motion.div>
    </section>
  );
}

"use client";
 
import { motion } from "framer-motion";
import {
  Terminal,
  MessageSquare,
  Cpu,
  Shield,
  Zap,
  Activity,
  Globe,
  Lock,
  Search,
  Mic,
  Image as ImageIcon,
  BarChart3,
} from "lucide-react";
import { cn } from "@/lib/utils";
 
export function Features() {
  return (
    <section className="py-32 bg-black relative overflow-hidden">
      <div className="max-w-7xl mx-auto px-4">
        <div className="mb-24 max-w-2xl">
          <h2 className="text-4xl md:text-6xl font-bold text-white mb-8 tracking-tight">
            The complete <br />
            <span className="text-zinc-500">intelligence suite.</span>
          </h2>
          <p className="text-lg text-zinc-400 leading-relaxed">
            Not just a wrapper. A fully integrated operating system for the next
            generation of AI applications.
          </p>
        </div>
 
        <div className="grid grid-cols-1 md:grid-cols-6 md:grid-rows-4 gap-4 h-auto md:h-[900px]">
          {/* Block 1: Generative Canvas (Large Square) */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            className="md:col-span-4 md:row-span-2 relative group rounded-3xl bg-zinc-900/20 border border-white/10 overflow-hidden"
          >
            <div className="absolute inset-0 bg-gradient-to-br from-white/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
            <div className="p-8 relative z-10 h-full flex flex-col">
              <div className="flex items-center justify-between mb-6">
                <div className="flex items-center gap-3">
                  <div className="p-2 bg-white/10 rounded-lg">
                    <ImageIcon className="w-5 h-5 text-white" />
                  </div>
                  <span className="text-white font-medium">
                    Generative Canvas
                  </span>
                </div>
                <div className="px-3 py-1 rounded-full border border-white/10 text-xs text-zinc-400">
                  v2.0.4
                </div>
              </div>
 
              {/* UI Mockup */}
              <div className="flex-1 bg-black/50 border border-white/10 rounded-xl overflow-hidden relative">
                <div className="absolute top-4 left-4 right-4 flex items-center gap-4 z-20">
                  <div className="flex-1 h-10 bg-zinc-900/80 backdrop-blur rounded-lg border border-white/10 flex items-center px-4 text-xs text-zinc-400">
                    <span className="text-white mr-2">/imagine</span>
                    <span className="truncate">
                      cyberpunk city street, rain, neon lights, 8k render...
                    </span>
                  </div>
                  <div className="w-10 h-10 bg-white text-black rounded-lg flex items-center justify-center font-bold">
                    <Zap className="w-4 h-4" />
                  </div>
                </div>
 
                {/* Abstract Art Generation Animation */}
                <div className="absolute inset-0 flex items-center justify-center">
                  <div className="w-full h-full bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-zinc-800 via-black to-black opacity-50" />
                  <div className="absolute inset-0 grid grid-cols-2 gap-1 p-1">
                    {[1, 2, 3, 4].map((i) => (
                      <div
                        key={i}
                        className="bg-zinc-900/50 rounded-lg overflow-hidden relative group/img"
                      >
                        <div
                          className="absolute inset-0 bg-zinc-800 animate-pulse"
                          style={{ animationDelay: `${i * 0.2}s` }}
                        />
                        <div className="absolute bottom-2 right-2 opacity-0 group-hover/img:opacity-100 transition-opacity">
                          <div className="p-1.5 bg-black/50 backdrop-blur rounded text-white">
                            <Search className="w-3 h-3" />
                          </div>
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
              </div>
            </div>
          </motion.div>
 
          {/* Block 2: Mobile Command (Tall Rectangle) */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.1 }}
            viewport={{ once: true }}
            className="md:col-span-2 md:row-span-3 relative group rounded-3xl bg-zinc-900/20 border border-white/10 overflow-hidden"
          >
            <div className="absolute inset-0 bg-[radial-gradient(circle_at_top_right,_var(--tw-gradient-stops))] from-white/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
            <div className="p-8 relative z-10 h-full flex flex-col">
              <div className="mb-8">
                <div className="w-10 h-10 bg-white rounded-full flex items-center justify-center mb-4">
                  <MessageSquare className="w-5 h-5 text-black" />
                </div>
                <h3 className="text-xl font-semibold text-white mb-2">
                  Mobile Command
                </h3>
                <p className="text-sm text-zinc-400">
                  Full control from anywhere.
                </p>
              </div>
 
              {/* Phone Mockup */}
              <div className="flex-1 relative mx-auto w-full max-w-[240px] bg-black border border-zinc-800 rounded-[2.5rem] overflow-hidden shadow-2xl">
                <div className="absolute top-0 inset-x-0 h-6 bg-black z-20 flex justify-center">
                  <div className="w-20 h-4 bg-zinc-900 rounded-b-xl" />
                </div>
 
                <div className="p-4 pt-12 space-y-4">
                  {[1, 2, 3].map((i) => (
                    <div key={i} className="space-y-2">
                      <div className="flex gap-2">
                        <div className="w-6 h-6 rounded-full bg-zinc-800" />
                        <div className="bg-zinc-900 rounded-2xl rounded-tl-none p-3 text-[10px] text-zinc-400 w-3/4">
                          <div className="h-2 w-1/2 bg-zinc-800 rounded mb-2" />
                          <div className="h-2 w-3/4 bg-zinc-800 rounded" />
                        </div>
                      </div>
                      <div className="flex gap-2 flex-row-reverse">
                        <div className="bg-white text-black rounded-2xl rounded-tr-none p-3 text-[10px] w-2/3">
                          Generate a quarterly report summary.
                        </div>
                      </div>
                    </div>
                  ))}
                </div>
 
                {/* Bottom Action Bar */}
                <div className="absolute bottom-4 left-4 right-4 h-10 bg-zinc-900/90 backdrop-blur rounded-full flex items-center justify-between px-4 border border-white/5">
                  <Mic className="w-3 h-3 text-zinc-400" />
                  <div className="w-16 h-1 bg-zinc-700 rounded-full" />
                  <Zap className="w-3 h-3 text-white" />
                </div>
              </div>
            </div>
          </motion.div>
 
          {/* Block 3: Hardware/Infrastructure (Wide Rectangle) */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.2 }}
            viewport={{ once: true }}
            className="md:col-span-4 md:row-span-1 relative group rounded-3xl bg-zinc-900/20 border border-white/10 overflow-hidden flex flex-col md:flex-row"
          >
            <div className="p-8 flex-1 flex flex-col justify-center">
              <div className="flex items-center gap-3 mb-4">
                <Cpu className="w-6 h-6 text-white" />
                <h3 className="text-xl font-semibold text-white">
                  Neural Engine
                </h3>
              </div>
              <p className="text-sm text-zinc-400 max-w-xs">
                Dedicated H100 clusters for enterprise workloads.
                <span className="text-white block mt-1">
                  99.99% Uptime SLA.
                </span>
              </p>
            </div>
 
            {/* Server Visualization */}
            <div className="flex-1 bg-black/50 border-l border-white/10 p-6 flex items-center gap-4 overflow-hidden relative">
              <div className="absolute inset-0 bg-[linear-gradient(45deg,transparent_25%,rgba(255,255,255,0.05)_50%,transparent_75%,transparent_100%)] bg-[length:250%_250%,100%_100%] animate-[shimmer_3s_infinite]" />
              {[1, 2, 3, 4].map((i) => (
                <div
                  key={i}
                  className="flex-1 h-16 bg-zinc-900 rounded border border-white/5 flex flex-col justify-between p-2"
                >
                  <div className="flex justify-between items-center">
                    <div className="w-1.5 h-1.5 rounded-full bg-green-500 animate-pulse" />
                    <span className="text-[9px] text-zinc-500 font-mono">
                      GPU-{i}
                    </span>
                  </div>
                  <div className="w-full bg-zinc-800 h-1 rounded-full overflow-hidden">
                    <div
                      className="h-full bg-white"
                      style={{ width: `${Math.random() * 60 + 20}%` }}
                    />
                  </div>
                </div>
              ))}
            </div>
          </motion.div>
 
          {/* Block 4: Security (Small Square) */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.3 }}
            viewport={{ once: true }}
            className="md:col-span-2 md:row-span-1 relative group rounded-3xl bg-zinc-900/20 border border-white/10 overflow-hidden p-6 flex items-center gap-4"
          >
            <div className="w-12 h-12 rounded-full bg-white/5 flex items-center justify-center shrink-0">
              <Shield className="w-6 h-6 text-white" />
            </div>
            <div>
              <h4 className="text-white font-medium mb-1">SOC2 Certified</h4>
              <p className="text-xs text-zinc-500">End-to-end encryption</p>
            </div>
          </motion.div>
 
          {/* Block 5: Global Latency (Small Square) */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.4 }}
            viewport={{ once: true }}
            className="md:col-span-2 md:row-span-1 relative group rounded-3xl bg-zinc-900/20 border border-white/10 overflow-hidden p-6 flex items-center gap-4"
          >
            <div className="w-12 h-12 rounded-full bg-white/5 flex items-center justify-center shrink-0">
              <Globe className="w-6 h-6 text-white" />
            </div>
            <div>
              <h4 className="text-white font-medium mb-1">Global Edge</h4>
              <p className="text-xs text-zinc-500">35+ Regions • &lt;20ms</p>
            </div>
          </motion.div>
 
          {/* Block 6: Analytics (Small Square) */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.5 }}
            viewport={{ once: true }}
            className="md:col-span-2 md:row-span-1 relative group rounded-3xl bg-zinc-900/20 border border-white/10 overflow-hidden p-6 flex items-center gap-4"
          >
            <div className="w-12 h-12 rounded-full bg-white/5 flex items-center justify-center shrink-0">
              <BarChart3 className="w-6 h-6 text-white" />
            </div>
            <div>
              <h4 className="text-white font-medium mb-1">
                Real-time Analytics
              </h4>
              <p className="text-xs text-zinc-500">Token usage & costs</p>
            </div>
          </motion.div>
        </div>
      </div>
    </section>
  );
}

"use client";
 
import { motion } from "framer-motion";
import {
  Zap,
  Activity,
  Server,
  Database,
  Brain,
  Gauge,
  Shield,
  Globe,
  TrendingUp,
  Cpu,
} from "lucide-react";
import { cn } from "@/lib/utils";
 
const models = [
  {
    name: "Nexusia Ultra",
    type: "Proprietary",
    latency: 24,
    cost: 0.002,
    score: 99.9,
    color: "bg-white",
  },
  {
    name: "GPT-4o",
    type: "OpenAI",
    latency: 145,
    cost: 0.03,
    score: 98.5,
    color: "bg-green-500",
  },
  {
    name: "Claude 3.5",
    type: "Anthropic",
    latency: 110,
    cost: 0.015,
    score: 97.2,
    color: "bg-orange-500",
  },
  {
    name: "Llama 3 70B",
    type: "Meta",
    latency: 45,
    cost: 0.001,
    score: 89.0,
    color: "bg-blue-500",
  },
];
 
export function Comparison() {
  return (
    <section className="py-32 bg-black relative overflow-hidden">
      {/* Background Gradients */}
      <div className="absolute top-0 left-0 w-full h-full overflow-hidden pointer-events-none">
        <div className="absolute top-1/4 left-1/4 w-[500px] h-[500px] bg-white/[0.02] blur-[120px] rounded-full" />
        <div className="absolute bottom-1/4 right-1/4 w-[500px] h-[500px] bg-white/[0.02] blur-[120px] rounded-full" />
      </div>
 
      <div className="max-w-7xl mx-auto px-4 relative z-10">
        <div className="flex flex-col md:flex-row md:items-end justify-between mb-20 gap-8">
          <div className="max-w-2xl">
            <h2 className="text-4xl md:text-6xl font-bold text-white mb-6 tracking-tight">
              Outperform <br />
              <span className="text-zinc-500">Every Benchmark.</span>
            </h2>
            <p className="text-xl text-zinc-400">
              Engineered for the millisecond. See why leading engineering teams
              are switching to Nexusia.
            </p>
          </div>
          <div className="flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-900 border border-white/10">
            <div className="w-2 h-2 rounded-full bg-green-500 animate-pulse" />
            <span className="text-xs font-mono text-zinc-400">
              LIVE BENCHMARKS
            </span>
          </div>
        </div>
 
        <div className="grid grid-cols-1 lg:grid-cols-12 gap-6">
          {/* Main Comparison Chart (Left - 8 cols) */}
          <div className="lg:col-span-8 bg-zinc-900/20 border border-white/10 rounded-3xl p-8 flex flex-col relative overflow-hidden group">
            <div className="absolute inset-0 bg-[linear-gradient(to_right,#ffffff05_1px,transparent_1px),linear-gradient(to_bottom,#ffffff05_1px,transparent_1px)] bg-[size:2rem_2rem] opacity-20" />
 
            <div className="relative z-10">
              <div className="flex items-center justify-between mb-12">
                <div>
                  <h3 className="text-2xl font-semibold text-white mb-1">
                    Latency Comparison
                  </h3>
                  <p className="text-sm text-zinc-500">
                    Time to first token (TTFT) in milliseconds
                  </p>
                </div>
                <div className="hidden sm:flex items-center gap-2 text-xs text-zinc-500">
                  <span className="w-2 h-2 rounded-full bg-white" /> Nexusia
                  <span className="w-2 h-2 rounded-full bg-zinc-700 ml-2" />{" "}
                  Competitors
                </div>
              </div>
 
              <div className="space-y-6">
                {models.map((model, i) => (
                  <div key={model.name} className="relative group/bar">
                    <div className="flex justify-between text-sm mb-2 relative z-10">
                      <div className="flex items-center gap-3">
                        <span
                          className={cn(
                            "font-medium text-lg transition-colors",
                            i === 0
                              ? "text-white"
                              : "text-zinc-400 group-hover/bar:text-zinc-200",
                          )}
                        >
                          {model.name}
                        </span>
                        {i === 0 && (
                          <span className="px-2 py-0.5 rounded bg-white text-black text-[10px] font-bold uppercase tracking-wide">
                            Fastest
                          </span>
                        )}
                      </div>
                      <div className="flex items-center gap-2">
                        <span className="font-mono text-zinc-500">
                          {model.latency}ms
                        </span>
                        {i !== 0 && (
                          <span className="text-[10px] text-red-400 bg-red-400/10 px-1.5 py-0.5 rounded">
                            {Math.round(model.latency / models[0].latency)}x
                            slower
                          </span>
                        )}
                      </div>
                    </div>
 
                    <div className="w-full h-14 bg-zinc-900/50 rounded-xl overflow-hidden relative border border-white/5">
                      <motion.div
                        initial={{ width: 0 }}
                        whileInView={{
                          width: `${(model.latency / 200) * 100}%`,
                        }}
                        transition={{
                          duration: 1.5,
                          delay: i * 0.1,
                          ease: "easeOut",
                        }}
                        className={cn(
                          "h-full relative flex items-center justify-end px-4",
                          i === 0 ? "bg-white" : "bg-zinc-800",
                        )}
                      >
                        {i === 0 && (
                          <>
                            <div className="absolute inset-0 bg-[linear-gradient(45deg,transparent_25%,rgba(0,0,0,0.1)_50%,transparent_75%,transparent_100%)] bg-[length:250%_250%,100%_100%] animate-[shimmer_2s_infinite]" />
                            <Zap className="w-5 h-5 text-black relative z-10" />
                          </>
                        )}
                      </motion.div>
 
                      {/* Grid lines overlay */}
                      <div className="absolute inset-0 flex justify-between px-4 pointer-events-none">
                        {[1, 2, 3, 4].map((line) => (
                          <div key={line} className="w-px h-full bg-white/5" />
                        ))}
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
 
          {/* Right Side - Efficiency Matrix & Stats (4 cols) */}
          <div className="lg:col-span-4 flex flex-col gap-6">
            {/* Efficiency Matrix */}
            <div className="flex-1 bg-zinc-900/20 border border-white/10 rounded-3xl p-6 relative overflow-hidden">
              <div className="absolute inset-0 bg-[radial-gradient(circle_at_top_right,_var(--tw-gradient-stops))] from-white/5 to-transparent" />
 
              <div className="relative z-10 h-full flex flex-col">
                <div className="mb-6">
                  <h3 className="text-lg font-semibold text-white">
                    Efficiency Matrix
                  </h3>
                  <p className="text-xs text-zinc-500">Cost vs. Performance</p>
                </div>
 
                <div className="flex-1 relative bg-zinc-900/50 rounded-xl border border-white/5 p-4">
                  {/* Axis Labels */}
                  <div className="absolute left-2 top-1/2 -translate-y-1/2 -rotate-90 text-[10px] text-zinc-600 font-mono uppercase tracking-wider">
                    Performance
                  </div>
                  <div className="absolute bottom-2 left-1/2 -translate-x-1/2 text-[10px] text-zinc-600 font-mono uppercase tracking-wider">
                    Cost Efficiency
                  </div>
 
                  {/* Scatter Plot */}
                  <div className="absolute inset-6">
                    {/* Grid */}
                    <div className="absolute inset-0 grid grid-cols-4 grid-rows-4 gap-4">
                      {[...Array(16)].map((_, i) => (
                        <div
                          key={i}
                          className="border-r border-t border-white/5 last:border-r-0 first:border-t-0"
                        />
                      ))}
                    </div>
 
                    {/* Points */}
                    {models.map((model, i) => (
                      <motion.div
                        key={model.name}
                        initial={{ scale: 0, opacity: 0 }}
                        whileInView={{ scale: 1, opacity: 1 }}
                        transition={{ delay: 0.5 + i * 0.1 }}
                        className={cn(
                          "absolute w-3 h-3 rounded-full border-2 border-black shadow-lg",
                          i === 0 ? "bg-white z-10" : "bg-zinc-600 z-0",
                        )}
                        style={{
                          // Simulated positions based on score (y) and cost (x - inverted)
                          top: `${100 - (model.score - 85) * 6}%`,
                          left: `${(1 / model.cost) * 0.2}%`,
                        }}
                      >
                        {i === 0 && (
                          <div className="absolute -top-8 left-1/2 -translate-x-1/2 bg-white text-black text-[10px] font-bold px-2 py-1 rounded whitespace-nowrap">
                            You are here
                          </div>
                        )}
                      </motion.div>
                    ))}
                  </div>
                </div>
              </div>
            </div>
 
            {/* Key Metric */}
            <div className="h-40 bg-white text-black rounded-3xl p-6 flex flex-col justify-between relative overflow-hidden group">
              <div className="absolute right-0 top-0 p-4 opacity-5 group-hover:opacity-10 transition-opacity">
                <TrendingUp className="w-24 h-24" />
              </div>
 
              <div className="flex items-center gap-3">
                <div className="w-10 h-10 rounded-full bg-black/5 flex items-center justify-center">
                  <Cpu className="w-5 h-5 text-black" />
                </div>
                <span className="text-sm font-medium text-zinc-600">
                  Cost Savings
                </span>
              </div>
 
              <div>
                <div className="text-5xl font-bold tracking-tighter mb-1">
                  -85%
                </div>
                <p className="text-xs text-zinc-500 font-medium">
                  vs. traditional LLM providers
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}