import { Navbar } from "@/components/templates/devtools/navbar";
import { Hero } from "@/components/templates/devtools/hero";
import { Features } from "@/components/templates/devtools/features";
import { Workflow } from "@/components/templates/devtools/workflow";
import { LiveDemo } from "@/components/templates/devtools/live-demo";
import { CodeTabs } from "@/components/templates/devtools/code-tabs";
import { Comparison } from "@/components/templates/devtools/comparison";
import { Preview } from "@/components/templates/devtools/preview";
import { Testimonials } from "@/components/templates/devtools/testimonials";
import { Pricing } from "@/components/templates/devtools/pricing";
import { Community } from "@/components/templates/devtools/community";
import { Footer } from "@/components/templates/devtools/footer";
 
export function Page() {
  return (
    <div className="w-full min-h-screen bg-white dark:bg-[#020202] text-zinc-900 dark:text-white selection:bg-orange-500/30">
      <Navbar />
      <Hero />
      <Features />
      <LiveDemo />
      <Workflow />
      <CodeTabs />
      <Comparison />
      <Preview />
      <Testimonials />
      <Pricing />
      <Community />
      <Footer />
    </div>
  );
}

"use client";
 
import * as React from "react";
import Link from "next/link";
import { motion, AnimatePresence } from "framer-motion";
import { cn } from "@/lib/utils";
import { Terminal, Menu, X, Github, ArrowRight, Sparkles } from "lucide-react";
import { Button } from "@/components/ui/button";
 
export function Navbar() {
  const [isOpen, setIsOpen] = React.useState(false);
  const [scrolled, setScrolled] = React.useState(false);
 
  React.useEffect(() => {
    const handleScroll = () => {
      setScrolled(window.scrollY > 20);
    };
    window.addEventListener("scroll", handleScroll);
    return () => window.removeEventListener("scroll", handleScroll);
  }, []);
 
  return (
    <nav
      className={cn(
        "absolute top-0 left-0 right-0 z-50 transition-all duration-300 border-b",
        scrolled
          ? "bg-white/90 dark:bg-[#050505]/90 backdrop-blur-md border-zinc-200 dark:border-zinc-800 py-2"
          : "bg-transparent border-transparent py-4",
      )}
    >
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div className="flex h-12 items-center justify-between">
          {/* Logo */}
          <div className="flex items-center gap-4">
            <Link href="#" className="flex items-center gap-2 group">
              <div className="relative flex h-8 w-8 items-center justify-center rounded-sm bg-amber-500/10 border border-amber-500/20 text-amber-500 transition-all group-hover:bg-amber-500 group-hover:text-black">
                <Terminal className="h-4 w-4" />
              </div>
              <div className="flex flex-col">
                <span className="font-mono text-sm font-bold tracking-wider text-zinc-900 dark:text-white uppercase group-hover:text-amber-500 transition-colors">
                  DEVTOOLS_INC
                </span>
                <span className="font-mono text-[10px] text-zinc-500 tracking-widest uppercase">
                  V2.4.0_RC
                </span>
              </div>
            </Link>
          </div>
 
          {/* Desktop Nav */}
          <div className="hidden md:block">
            <div className="flex items-center gap-8">
              {["Features", "SDKs", "Documentation", "Pricing"].map((item) => (
                <Link
                  key={item}
                  href="#"
                  className="text-xs font-mono font-medium text-zinc-600 dark:text-zinc-400 transition-colors hover:text-amber-600 dark:hover:text-amber-500 uppercase tracking-wider relative group"
                >
                  <span className="relative z-10">
                    <span className="text-amber-600 dark:text-amber-500 opacity-0 group-hover:opacity-100 transition-opacity mr-1">
                      &gt;
                    </span>
                    {item}
                  </span>
                </Link>
              ))}
            </div>
          </div>
 
          {/* Right Side */}
          <div className="hidden md:flex items-center gap-6">
            <div className="flex items-center gap-2 px-3 py-1 rounded-sm bg-zinc-100 dark:bg-zinc-900/50 border border-zinc-200 dark:border-zinc-800">
              <div className="h-1.5 w-1.5 rounded-full bg-green-500 animate-pulse" />
              <span className="text-[10px] font-mono text-zinc-600 dark:text-zinc-400 uppercase tracking-wider">
                System: Online
              </span>
            </div>
 
            <Link
              href="https://github.com"
              target="_blank"
              className="text-zinc-600 dark:text-zinc-500 hover:text-zinc-900 dark:hover:text-white transition-colors"
            >
              <Github className="h-5 w-5" />
            </Link>
 
            <Button className="bg-amber-500 text-black hover:bg-amber-400 rounded-sm font-mono uppercase text-xs font-bold tracking-wider h-9 px-6 border border-amber-400 shadow-[0_0_10px_rgba(245,158,11,0.3)] hover:shadow-[0_0_20px_rgba(245,158,11,0.5)] transition-all">
              Initialize_Key
            </Button>
          </div>
 
          {/* Mobile Menu Button */}
          <div className="md:hidden">
            <button
              onClick={() => setIsOpen(!isOpen)}
              className="text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-white p-2"
            >
              {isOpen ? (
                <X className="h-6 w-6" />
              ) : (
                <Menu className="h-6 w-6" />
              )}
            </button>
          </div>
        </div>
      </div>
 
      {/* Mobile Menu */}
      <AnimatePresence>
        {isOpen && (
          <motion.div
            initial={{ opacity: 0, height: 0 }}
            animate={{ opacity: 1, height: "auto" }}
            exit={{ opacity: 0, height: 0 }}
            className="md:hidden border-b border-zinc-200 dark:border-zinc-800 bg-white dark:bg-[#0A0A0A]"
          >
            <div className="space-y-1 px-4 pb-6 pt-2">
              {["Features", "SDKs", "Documentation", "Pricing"].map((item) => (
                <Link
                  key={item}
                  href="#"
                  className="block px-3 py-3 text-sm font-mono uppercase tracking-wider text-zinc-600 dark:text-zinc-400 hover:bg-zinc-100 dark:hover:bg-zinc-900 hover:text-amber-600 dark:hover:text-amber-500 border-l-2 border-transparent hover:border-amber-500 transition-all"
                >
                  {item}
                </Link>
              ))}
              <div className="mt-6 flex flex-col gap-3 px-3">
                <Button className="w-full bg-amber-500 text-black hover:bg-amber-400 rounded-sm font-mono uppercase text-xs font-bold tracking-wider h-10">
                  Initialize_Key
                </Button>
                <Button
                  variant="outline"
                  className="w-full justify-center border-zinc-200 dark:border-zinc-800 text-zinc-600 dark:text-zinc-400 hover:bg-zinc-100 dark:hover:bg-zinc-900 hover:text-zinc-900 dark:hover:text-white rounded-sm font-mono uppercase text-xs h-10"
                >
                  <Github className="mr-2 h-4 w-4" />
                  Star on GitHub
                </Button>
              </div>
            </div>
          </motion.div>
        )}
      </AnimatePresence>
    </nav>
  );
}

"use client";
 
import React, { useRef, useState, useEffect } from "react";
import {
  motion,
  useScroll,
  useTransform,
  useSpring,
  useMotionValue,
  useMotionTemplate,
} from "framer-motion";
import {
  ArrowRight,
  Terminal,
  Zap,
  Command,
  ChevronRight,
  Play,
  ScanLine,
  Box,
  Layers,
  Code2,
  Cpu,
  Globe,
} from "lucide-react";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";
 
function GridBackground() {
  return (
    <div className="absolute inset-0 overflow-hidden pointer-events-none">
      <div className="absolute inset-0 bg-[linear-gradient(to_right,#202020_1px,transparent_1px),linear-gradient(to_bottom,#202020_1px,transparent_1px)] bg-[size:4rem_4rem] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_100%)] opacity-20" />
      <div className="absolute top-0 left-0 right-0 h-[500px] bg-gradient-to-b from-amber-500/5 via-transparent to-transparent blur-3xl" />
    </div>
  );
}
 
function TechnicalHUD() {
  return (
    <div className="max-w-7xl mx-auto absolute inset-0 pointer-events-none select-none z-0 overflow-hidden">
      {/* Top Left */}
      <div className="absolute top-32 left-8 flex flex-col gap-2 opacity-20">
        <div className="flex items-center gap-2">
          <div className="h-2 w-2 bg-amber-500 animate-pulse" />
          <div className="font-mono text-[10px] text-amber-500 tracking-widest">
            SYS.READY
          </div>
        </div>
        <div className="h-24 w-[1px] bg-gradient-to-b from-amber-500/50 to-transparent" />
      </div>
 
      {/* Top Right */}
      <div className="absolute top-32 right-8 flex flex-col items-end gap-2 opacity-20">
        <div className="flex items-center gap-2">
          <div className="font-mono text-[10px] text-amber-500 tracking-widest">
            NET.SECURE
          </div>
          <div className="h-2 w-2 bg-amber-500 animate-pulse" />
        </div>
        <div className="h-24 w-[1px] bg-gradient-to-b from-amber-500/50 to-transparent" />
      </div>
 
      {/* Bottom Measurements */}
      <div className="absolute bottom-12 left-1/2 -translate-x-1/2 flex gap-12 opacity-20">
        {[...Array(5)].map((_, i) => (
          <div key={i} className="flex flex-col items-center gap-2 group">
            <div className="h-3 w-[1px] bg-amber-500 group-hover:h-6 transition-all duration-500" />
            <div className="font-mono text-[10px] text-amber-500">{i * 25}</div>
          </div>
        ))}
      </div>
 
      {/* Corner Brackets */}
      <div className="absolute top-24 left-4 w-8 h-8 border-t border-l border-zinc-300 dark:border-zinc-800 opacity-50" />
      <div className="absolute top-24 right-4 w-8 h-8 border-t border-r border-zinc-300 dark:border-zinc-800 opacity-50" />
      <div className="absolute bottom-8 left-4 w-8 h-8 border-b border-l border-zinc-300 dark:border-zinc-800 opacity-50" />
      <div className="absolute bottom-8 right-4 w-8 h-8 border-b border-r border-zinc-300 dark:border-zinc-800 opacity-50" />
    </div>
  );
}
 
function ScannerInterface() {
  const [isHovered, setIsHovered] = useState(false);
  const mouseX = useMotionValue(0);
  const mouseY = useMotionValue(0);
 
  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
    const rect = e.currentTarget.getBoundingClientRect();
    mouseX.set(e.clientX - rect.left);
    mouseY.set(e.clientY - rect.top);
  };
 
  return (
    <motion.div
      initial={{ opacity: 0, scale: 0.9, rotateX: 10 }}
      animate={{ opacity: 1, scale: 1, rotateX: 0 }}
      transition={{ duration: 1, delay: 0.5 }}
      onMouseMove={handleMouseMove}
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
      className="relative w-full max-w-5xl mx-auto aspect-[16/9] perspective-1000 group"
    >
      {/* Main Container */}
      <div className="relative h-full w-full rounded-xl border border-zinc-200 dark:border-white/10 bg-zinc-50 dark:bg-[#050505] overflow-hidden shadow-2xl">
        {/* Split View: Website vs Code */}
        <div className="absolute inset-0 flex">
          {/* Left: Website Preview */}
          <div className="w-1/2 h-full border-r border-zinc-200 dark:border-white/5 bg-zinc-100 dark:bg-[#0A0A0A] p-6 relative overflow-hidden">
            {/* 3D Wireframe Grid Overlay */}
            <div className="absolute inset-0 bg-[linear-gradient(to_right,#000000_1px,transparent_1px),linear-gradient(to_bottom,#000000_1px,transparent_1px)] dark:bg-[linear-gradient(to_right,#ffffff_1px,transparent_1px),linear-gradient(to_bottom,#ffffff_1px,transparent_1px)] bg-[size:2rem_2rem] opacity-[0.03] pointer-events-none" />
 
            <div className="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1481487484168-9b930d5b7d9f?q=80&w=2661&auto=format&fit=crop')] bg-cover bg-center opacity-20 grayscale mix-blend-luminosity" />
 
            <div className="relative z-10 space-y-4">
              <div className="h-8 w-32 bg-zinc-300 dark:bg-white/10 rounded animate-pulse" />
              <div className="space-y-2">
                <div className="h-4 w-full bg-zinc-200 dark:bg-white/5 rounded" />
                <div className="h-4 w-2/3 bg-zinc-200 dark:bg-white/5 rounded" />
                <div className="h-4 w-4/5 bg-zinc-200 dark:bg-white/5 rounded" />
              </div>
              <div className="grid grid-cols-2 gap-4 mt-8">
                <div className="aspect-video bg-zinc-200 dark:bg-white/5 rounded border border-zinc-300 dark:border-white/5" />
                <div className="aspect-video bg-zinc-200 dark:bg-white/5 rounded border border-zinc-300 dark:border-white/5" />
              </div>
            </div>
 
            {/* Scanning Beam */}
            <motion.div
              animate={{ top: ["0%", "100%"] }}
              transition={{ duration: 3, repeat: Infinity, ease: "linear" }}
              className="absolute left-0 right-0 h-[2px] bg-amber-500 shadow-[0_0_20px_rgba(245,158,11,0.5)] z-20"
            >
              <div className="absolute inset-0 bg-amber-500 blur-sm" />
              {/* Scan Line Text */}
              <div className="absolute right-2 -top-6 text-[8px] font-mono text-amber-500 bg-black/50 px-1 rounded">
                SCANNING_SECTOR_01
              </div>
            </motion.div>
          </div>
 
          {/* Right: Code Extraction */}
          <div className="w-1/2 h-full bg-zinc-950 dark:bg-[#020202] p-6 font-mono text-xs md:text-sm overflow-hidden relative">
            <div className="absolute top-0 right-0 p-2 opacity-50">
              <div className="flex gap-1">
                <div className="h-2 w-2 rounded-full bg-red-500" />
                <div className="h-2 w-2 rounded-full bg-amber-500" />
                <div className="h-2 w-2 rounded-full bg-green-500" />
              </div>
            </div>
 
            <div className="space-y-1 text-zinc-400">
              <div className="flex gap-4 border-b border-white/5 pb-2 mb-4 text-zinc-500">
                <span>OUTPUT.JSON</span>
                <span>24KB</span>
                <span className="text-green-500">● LIVE</span>
              </div>
 
              <motion.div
                initial={{ opacity: 0 }}
                animate={{ opacity: 1 }}
                transition={{ staggerChildren: 0.1 }}
              >
                <div className="text-purple-400">{"{"}</div>
                <div className="pl-4">
                  <span className="text-blue-400">"status"</span>:{" "}
                  <span className="text-green-400">"success"</span>,
                </div>
                <div className="pl-4">
                  <span className="text-blue-400">"extracted_at"</span>:{" "}
                  <span className="text-amber-400">"2024-03-21T10:00:00Z"</span>
                  ,
                </div>
                <div className="pl-4">
                  <span className="text-blue-400">"data"</span>:{" "}
                  <span className="text-purple-400">{"{"}</span>
                </div>
 
                {/* Streaming Content Effect */}
                <motion.div
                  className="pl-8 border-l border-white/10 ml-4 my-2"
                  animate={{ height: ["0%", "100%"] }}
                  transition={{ duration: 3, repeat: Infinity, ease: "linear" }}
                >
                  <div>
                    <span className="text-blue-400">"headline"</span>:{" "}
                    <span className="text-amber-400">"Future of AI"</span>,
                  </div>
                  <div>
                    <span className="text-blue-400">"summary"</span>:{" "}
                    <span className="text-zinc-500">"..."</span>,
                  </div>
                  <div>
                    <span className="text-blue-400">"images"</span>:{" "}
                    <span className="text-purple-400">
                      ["img_1.jpg", "img_2.jpg"]
                    </span>
                    ,
                  </div>
                  <div>
                    <span className="text-blue-400">"sentiment"</span>:{" "}
                    <span className="text-green-400">0.98</span>
                  </div>
                </motion.div>
 
                <div className="pl-4 text-purple-400">{"}"}</div>
                <div className="text-purple-400">{"}"}</div>
              </motion.div>
            </div>
          </div>
        </div>
 
        {/* Overlay UI */}
        <div className="absolute inset-0 pointer-events-none border border-zinc-200 dark:border-white/5 rounded-xl">
          <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-16 h-16 border border-white/10 rounded-full flex items-center justify-center">
            <div className="w-1 h-1 bg-amber-500 rounded-full animate-ping" />
          </div>
          <div className="absolute bottom-4 left-4 text-[10px] font-mono text-zinc-500">
            SCANNING_ENGINE_V2
          </div>
          <div className="absolute bottom-4 right-4 text-[10px] font-mono text-amber-500">
            PROCESSING...
          </div>
        </div>
      </div>
 
      {/* Ambient Glow */}
      <div className="absolute -inset-4 bg-amber-500/20 blur-3xl -z-10 opacity-20" />
    </motion.div>
  );
}
 
export function Hero() {
  return (
    <section className="relative min-h-[100vh] w-full overflow-hidden bg-white dark:bg-[#020202] text-zinc-900 dark:text-white selection:bg-amber-500/30 pt-32 pb-20">
      <GridBackground />
      <TechnicalHUD />
 
      <div className="relative z-10 mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 flex flex-col items-center">
        {/* Top Label */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.2 }}
          className="flex items-center gap-2 mb-8"
        >
          <div className="h-[1px] w-12 bg-gradient-to-r from-transparent to-amber-500/50" />
          <span className="text-xs font-mono text-amber-500 tracking-widest uppercase">
            Next Generation Extraction Protocol
          </span>
          <div className="h-[1px] w-12 bg-gradient-to-l from-transparent to-amber-500/50" />
        </motion.div>
 
        {/* Massive Headline */}
        <motion.h1
          initial={{ opacity: 0, y: 30 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{
            duration: 0.8,
            delay: 0.3,
            ease: [0.2, 0.65, 0.3, 0.9],
          }}
          className="text-center font-sans text-6xl md:text-8xl lg:text-9xl font-bold tracking-tighter text-zinc-900 dark:text-white mb-8 relative"
        >
          <span className="relative inline-block">
            DATA
            <span className="absolute -top-4 -right-4 text-lg font-mono font-normal text-amber-500 opacity-50">
              01
            </span>
          </span>
          <br />
          <span className="text-transparent bg-clip-text bg-gradient-to-b from-zinc-400 to-zinc-800 dark:from-zinc-200 dark:to-zinc-600">
            REFINED
          </span>
        </motion.h1>
 
        <motion.p
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8, delay: 0.5 }}
          className="text-center max-w-2xl text-lg text-zinc-600 dark:text-zinc-400 mb-12 leading-relaxed"
        >
          The universal API that transforms chaos into structure. Turn any URL
          into clean, typed JSON for your LLM pipeline.
        </motion.p>
 
        {/* Action Buttons */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8, delay: 0.6 }}
          className="flex flex-wrap justify-center gap-4 mb-20"
        >
          <Button className="h-12 px-8 bg-amber-500 text-black hover:bg-amber-400 rounded-none border-l-4 border-white font-bold tracking-wide transition-all hover:translate-x-1">
            START EXTRACTING
            <ArrowRight className="ml-2 h-4 w-4" />
          </Button>
          <Button
            variant="outline"
            className="h-12 px-8 border-zinc-200 dark:border-zinc-800 bg-zinc-100 dark:bg-zinc-900/50 text-zinc-900 dark:text-white hover:bg-zinc-200 dark:hover:bg-zinc-800 rounded-none font-mono text-xs tracking-widest uppercase"
          >
            <Terminal className="mr-2 h-4 w-4 text-amber-500" />
            View Documentation
          </Button>
        </motion.div>
 
        {/* The Scanner Interface */}
        <ScannerInterface />
 
        {/* Bottom Stats */}
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ delay: 1 }}
          className="mt-20 grid grid-cols-2 md:grid-cols-4 gap-8 w-full max-w-4xl border-t border-zinc-200 dark:border-white/5 pt-8"
        >
          {[
            { label: "Uptime", value: "99.99%" },
            { label: "Latency", value: "<50ms" },
            { label: "Daily Req", value: "10M+" },
            { label: "Success", value: "99.8%" },
          ].map((stat, i) => (
            <div key={i} className="text-center">
              <div className="text-2xl font-bold text-zinc-900 dark:text-white font-mono">
                {stat.value}
              </div>
              <div className="text-xs text-zinc-500 uppercase tracking-widest mt-1">
                {stat.label}
              </div>
            </div>
          ))}
        </motion.div>
      </div>
    </section>
  );
}

"use client";
 
import { useState } from "react";
import { motion, AnimatePresence } from "framer-motion";
import {
  Cpu,
  Globe,
  Zap,
  Shield,
  Code2,
  Workflow,
  Database,
  Lock,
  ArrowUpRight,
  Terminal,
  ArrowRight,
} from "lucide-react";
import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
 
const features = [
  {
    id: "extraction",
    title: "Intelligent Extraction",
    description:
      "Our AI engine automatically identifies and structures data from any layout.",
    icon: Cpu,
    stats: "99.9% Accuracy",
    gridArea: "md:col-span-2 md:row-span-2",
    visual: "ai-scan",
  },
  {
    id: "global",
    title: "Global Proxy Network",
    description: "Rotate through 50M+ residential IPs to bypass geo-blocks.",
    icon: Globe,
    stats: "190+ Countries",
    gridArea: "md:col-span-1 md:row-span-1",
    visual: "map",
  },
  {
    id: "speed",
    title: "Lightning Fast",
    description:
      "Optimized for speed with edge caching and parallel processing.",
    icon: Zap,
    stats: "<50ms Latency",
    gridArea: "md:col-span-1 md:row-span-1",
    visual: "graph",
  },
  {
    id: "security",
    title: "Enterprise Security",
    description: "SOC2 Type II certified with end-to-end encryption.",
    icon: Shield,
    stats: "Bank-Grade",
    gridArea: "md:col-span-2 md:row-span-1",
    visual: "shield",
  },
  {
    id: "dx",
    title: "Developer First",
    description: "Typed SDKs for every major language.",
    icon: Terminal,
    stats: "100% Typed",
    gridArea: "md:col-span-1 md:row-span-1",
    visual: "code",
  },
];
 
function FeatureCard({
  feature,
  index,
}: {
  feature: (typeof features)[0];
  index: number;
}) {
  const [isHovered, setIsHovered] = useState(false);
 
  return (
    <motion.div
      initial={{ opacity: 1, y: 20 }}
      whileInView={{ opacity: 1, y: 0 }}
      transition={{ delay: index * 0.1 }}
      viewport={{ once: true }}
      className={cn(
        "group relative overflow-hidden rounded-none border border-zinc-200 dark:border-zinc-800 bg-zinc-50 dark:bg-[#050505] p-8 transition-all duration-500 hover:border-amber-500/50",
        feature.gridArea,
      )}
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
    >
      {/* Industrial Screws */}
      <div className="absolute top-2 left-2 h-1.5 w-1.5 rounded-full bg-zinc-200 dark:bg-zinc-800 border border-zinc-300 dark:border-zinc-700 flex items-center justify-center">
        <div className="w-full h-[0.5px] bg-zinc-400 dark:bg-zinc-900 rotate-45" />
      </div>
      <div className="absolute top-2 right-2 h-1.5 w-1.5 rounded-full bg-zinc-200 dark:bg-zinc-800 border border-zinc-300 dark:border-zinc-700 flex items-center justify-center">
        <div className="w-full h-[0.5px] bg-zinc-400 dark:bg-zinc-900 rotate-45" />
      </div>
      <div className="absolute bottom-2 left-2 h-1.5 w-1.5 rounded-full bg-zinc-200 dark:bg-zinc-800 border border-zinc-300 dark:border-zinc-700 flex items-center justify-center">
        <div className="w-full h-[0.5px] bg-zinc-400 dark:bg-zinc-900 rotate-45" />
      </div>
      <div className="absolute bottom-2 right-2 h-1.5 w-1.5 rounded-full bg-zinc-200 dark:bg-zinc-800 border border-zinc-300 dark:border-zinc-700 flex items-center justify-center">
        <div className="w-full h-[0.5px] bg-zinc-400 dark:bg-zinc-900 rotate-45" />
      </div>
 
      {/* Background Grid */}
      <div className="absolute inset-0 bg-[linear-gradient(to_right,#000000_1px,transparent_1px),linear-gradient(to_bottom,#000000_1px,transparent_1px)] dark:bg-[linear-gradient(to_right,#202020_1px,transparent_1px),linear-gradient(to_bottom,#202020_1px,transparent_1px)] bg-[size:2rem_2rem] opacity-[0.03] dark:opacity-[0.05] group-hover:opacity-[0.05] dark:group-hover:opacity-[0.1] transition-opacity" />
 
      <div className="relative z-10 h-full flex flex-col justify-between">
        <div>
          <div className="flex items-start justify-between mb-6">
            <div className="p-3 bg-zinc-100 dark:bg-zinc-900/50 border border-zinc-200 dark:border-zinc-800 group-hover:border-amber-500/50 group-hover:bg-amber-500/10 transition-colors relative overflow-hidden">
              {/* Icon Scan Effect */}
              <div className="absolute inset-0 bg-gradient-to-r from-transparent via-black/5 dark:via-white/10 to-transparent -translate-x-full group-hover:animate-[shimmer_1.5s_infinite]" />
              <feature.icon className="h-6 w-6 text-zinc-500 dark:text-zinc-400 group-hover:text-amber-600 dark:group-hover:text-amber-500 transition-colors" />
            </div>
            <div className="flex flex-col items-end gap-1">
              <div className="flex items-center gap-2 text-[10px] font-mono text-zinc-600 group-hover:text-amber-500/70 transition-colors uppercase">
                <span>MOD.ID_{index + 1}</span>
                <ArrowUpRight className="h-3 w-3" />
              </div>
              <div className="flex gap-1">
                <div className="h-1 w-1 bg-zinc-800 rounded-full group-hover:bg-amber-500 transition-colors delay-75" />
                <div className="h-1 w-1 bg-zinc-800 rounded-full group-hover:bg-amber-500 transition-colors delay-100" />
                <div className="h-1 w-1 bg-zinc-800 rounded-full group-hover:bg-amber-500 transition-colors delay-150" />
              </div>
            </div>
          </div>
 
          <h3 className="text-xl font-bold text-zinc-900 dark:text-white mb-2 font-mono tracking-tight group-hover:text-amber-600 dark:group-hover:text-amber-500 transition-colors uppercase">
            {feature.title}
          </h3>
          <p className="text-zinc-600 dark:text-zinc-400 text-sm leading-relaxed max-w-[90%] font-mono">
            {feature.description}
          </p>
        </div>
 
        {/* Visual Elements based on type */}
        <div className="mt-8 relative h-32 w-full overflow-hidden rounded-sm bg-zinc-100 dark:bg-zinc-900/30 border border-zinc-200 dark:border-zinc-800/50 group-hover:border-amber-500/20 transition-colors">
          {feature.visual === "ai-scan" && (
            <div className="absolute inset-0 flex items-center justify-center">
              <div className="w-full h-[1px] bg-amber-500/20 absolute top-1/2" />
              <div className="h-full w-[1px] bg-amber-500/20 absolute left-1/2" />
              <motion.div
                animate={{ scale: [1, 1.2, 1], opacity: [0.5, 1, 0.5] }}
                transition={{ duration: 2, repeat: Infinity }}
                className="h-16 w-16 border border-amber-500/50 rounded-full flex items-center justify-center"
              >
                <div className="h-1 w-1 bg-amber-500 rounded-full" />
              </motion.div>
              {/* Scanning Line */}
              <motion.div
                animate={{ top: ["0%", "100%"] }}
                transition={{ duration: 2, repeat: Infinity, ease: "linear" }}
                className="absolute left-0 right-0 h-[1px] bg-amber-500/50 shadow-[0_0_10px_rgba(245,158,11,0.5)]"
              />
            </div>
          )}
 
          {feature.visual === "map" && (
            <div className="absolute inset-0 p-4 grid grid-cols-6 gap-1 opacity-30">
              {[...Array(24)].map((_, i) => (
                <motion.div
                  key={i}
                  animate={{ opacity: [0.2, 0.8, 0.2] }}
                  transition={{
                    duration: Math.random() * 2 + 1,
                    repeat: Infinity,
                  }}
                  className="bg-amber-500 rounded-sm"
                />
              ))}
            </div>
          )}
 
          {feature.visual === "graph" && (
            <div className="absolute inset-0 flex items-end justify-between p-4 gap-1">
              {[40, 70, 50, 90, 60, 80, 45].map((h, i) => (
                <motion.div
                  key={i}
                  initial={{ height: 0 }}
                  whileInView={{ height: `${h}%` }}
                  transition={{ duration: 0.5, delay: i * 0.1 }}
                  className="w-full bg-zinc-300 dark:bg-zinc-800 group-hover:bg-amber-500/50 transition-colors"
                />
              ))}
            </div>
          )}
 
          {feature.visual === "shield" && (
            <div className="absolute inset-0 flex items-center justify-center">
              <div className="absolute inset-0 bg-[radial-gradient(circle_at_center,rgba(245,158,11,0.1),transparent)]" />
              <Shield className="h-12 w-12 text-zinc-300 dark:text-zinc-700 group-hover:text-amber-500/50 transition-colors" />
              <motion.div
                animate={{ rotate: 360 }}
                transition={{ duration: 10, repeat: Infinity, ease: "linear" }}
                className="absolute h-20 w-20 border border-dashed border-zinc-300 dark:border-zinc-700 group-hover:border-amber-500/30 rounded-full"
              />
            </div>
          )}
 
          {feature.visual === "code" && (
            <div className="absolute inset-0 flex items-center justify-center bg-zinc-950 dark:bg-[#0A0A0A] p-4 font-mono text-[10px] leading-relaxed select-none">
              <div className="w-full space-y-1 opacity-50 group-hover:opacity-100 transition-opacity">
                <div className="flex gap-2">
                  <span className="text-purple-400">import</span>{" "}
                  <span className="text-white">SDK</span>{" "}
                  <span className="text-purple-400">from</span>{" "}
                  <span className="text-green-400">'pkg'</span>
                </div>
                <div className="flex gap-2">
                  <span className="text-blue-400">const</span>{" "}
                  <span className="text-amber-400">data</span> ={" "}
                  <span className="text-purple-400">await</span>
                </div>
                <div className="pl-4 text-zinc-600">// Type-safe response</div>
                <div className="pl-4">
                  <span className="text-white">SDK.extract()</span>
                </div>
              </div>
            </div>
          )}
        </div>
 
        <div className="mt-4 pt-4 border-t border-zinc-200 dark:border-zinc-800 flex items-center justify-between">
          <span className="text-[10px] font-mono text-zinc-500 uppercase tracking-wider">
            Performance_Metric
          </span>
          <span className="text-xs font-mono font-bold text-zinc-900 dark:text-white group-hover:text-amber-600 dark:group-hover:text-amber-500 transition-colors">
            {feature.stats}
          </span>
        </div>
      </div>
    </motion.div>
  );
}
 
export function Features() {
  return (
    <section className="py-32 bg-white dark:bg-[#020202] text-zinc-900 dark:text-white overflow-hidden relative">
      {/* Section Header */}
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mb-20">
        <div className="flex flex-col md:flex-row md:items-end justify-between gap-8 border-b border-zinc-200 dark:border-zinc-800 pb-8">
          <div className="max-w-2xl">
            <div className="flex items-center gap-2 mb-4">
              <div className="h-1 w-1 bg-amber-500" />
              <span className="text-xs font-mono text-amber-500 tracking-widest uppercase">
                System Capabilities
              </span>
            </div>
            <h2 className="text-4xl md:text-5xl font-sans font-bold tracking-tight text-zinc-900 dark:text-white mb-4">
              Engineered for <br />
              <span className="text-zinc-500 dark:text-zinc-600">
                Scale & Precision
              </span>
            </h2>
            <p className="text-zinc-600 dark:text-zinc-400 text-lg max-w-xl">
              A complete toolkit designed for high-volume data extraction. Built
              to handle the complexity of the modern web.
            </p>
          </div>
 
          <div className="flex flex-col items-end gap-4">
            <div className="flex items-center gap-2 text-sm font-mono text-zinc-500">
              <div className="h-2 w-2 rounded-full bg-green-500 animate-pulse" />
              SYSTEM ONLINE
            </div>
            <Button
              variant="outline"
              className="rounded-none border-zinc-200 dark:border-zinc-800 hover:bg-zinc-100 dark:hover:bg-zinc-900 text-zinc-600 dark:text-zinc-300"
            >
              View Full Specs <ArrowRight className="ml-2 h-4 w-4" />
            </Button>
          </div>
        </div>
      </div>
 
      {/* Features Grid */}
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
          {features.map((feature, index) => (
            <FeatureCard key={feature.id} feature={feature} index={index} />
          ))}
        </div>
      </div>
    </section>
  );
}

"use client";
 
import { useState, useEffect } from "react";
import { motion, AnimatePresence } from "framer-motion";
import {
  Play,
  RotateCcw,
  Loader2,
  Cpu,
  Wifi,
  ShieldCheck,
  Zap,
} from "lucide-react";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";
 
const processingSteps = [
  {
    id: "ingest",
    label: "INGESTION_LAYER",
    details: "Receiving payload...",
    icon: Wifi,
    duration: 600,
  },
  {
    id: "security",
    label: "SECURITY_GATEWAY",
    details: "WAF & DDoS check...",
    icon: ShieldCheck,
    duration: 800,
  },
  {
    id: "compute",
    label: "COMPUTE_ENGINE",
    details: "JS Rendering & DOM...",
    icon: Cpu,
    duration: 1200,
  },
  {
    id: "extract",
    label: "AI_EXTRACTION",
    details: "LLM Parsing...",
    icon: Zap,
    duration: 1000,
  },
];
 
function BlinkingLed({
  delay,
  color = "bg-green-500",
}: {
  delay: number;
  color?: string;
}) {
  return (
    <div className="relative">
      <motion.div
        animate={{ opacity: [0.3, 1, 0.3] }}
        transition={{
          duration: 0.2,
          repeat: Infinity,
          repeatDelay: delay,
          repeatType: "reverse",
        }}
        className={cn(
          "h-1.5 w-1.5 rounded-full shadow-[inset_0_1px_1px_rgba(255,255,255,0.2)]",
          color,
        )}
      />
      {/* Glow Halo */}
      <motion.div
        animate={{ opacity: [0, 0.5, 0] }}
        transition={{
          duration: 0.2,
          repeat: Infinity,
          repeatDelay: delay,
          repeatType: "reverse",
        }}
        className={cn("absolute inset-0 rounded-full blur-[2px]", color)}
      />
    </div>
  );
}
 
export function LiveDemo() {
  const [isActive, setIsActive] = useState(false);
  const [currentStep, setCurrentStep] = useState(-1);
 
  const startSimulation = () => {
    setIsActive(true);
    setCurrentStep(0);
    processStep(0);
  };
 
  const processStep = (index: number) => {
    if (index >= processingSteps.length) {
      setTimeout(() => {
        setIsActive(false);
        setCurrentStep(processingSteps.length);
      }, 500);
      return;
    }
 
    setCurrentStep(index);
    setTimeout(() => {
      processStep(index + 1);
    }, processingSteps[index].duration);
  };
 
  const reset = () => {
    setIsActive(false);
    setCurrentStep(-1);
  };
 
  return (
    <section className="py-32 bg-white dark:bg-[#020202] text-zinc-900 dark:text-white overflow-hidden relative border-t border-zinc-200 dark:border-zinc-800">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="grid lg:grid-cols-2 gap-20 items-center">
          {/* Left: Narrative */}
          <div>
            <div className="flex items-center gap-2 mb-6">
              <div className="h-1 w-1 bg-amber-500" />
              <span className="text-xs font-mono text-amber-500 tracking-widest uppercase">
                Architecture Visualization
              </span>
            </div>
 
            <h2 className="text-4xl md:text-5xl font-sans font-bold tracking-tight text-zinc-900 dark:text-white mb-6">
              Vertical Integration <br />
              <span className="text-zinc-500 dark:text-zinc-600">
                at the Edge
              </span>
            </h2>
 
            <p className="text-zinc-600 dark:text-zinc-400 text-lg mb-10 leading-relaxed">
              Our stack is optimized for a single purpose: turning chaotic HTML
              into pristine JSON. Every request passes through our fortified,
              high-performance pipeline in milliseconds.
            </p>
 
            <div className="flex gap-4">
              <Button
                onClick={startSimulation}
                disabled={isActive}
                className="h-14 px-8 bg-amber-500 text-black hover:bg-amber-400 rounded-none font-bold tracking-wide transition-all hover:translate-x-1 disabled:opacity-50 disabled:hover:translate-x-0 shadow-[0_0_20px_rgba(245,158,11,0.3)]"
              >
                {isActive ? (
                  <>
                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                    PROCESSING REQUEST
                  </>
                ) : (
                  <>
                    <Play className="mr-2 h-4 w-4 fill-current" />
                    INITIATE SEQUENCE
                  </>
                )}
              </Button>
 
              {currentStep === processingSteps.length && (
                <Button
                  onClick={reset}
                  variant="outline"
                  className="h-14 px-6 border-zinc-200 dark:border-zinc-800 bg-zinc-100 dark:bg-zinc-900/50 text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-white hover:bg-zinc-200 dark:hover:bg-zinc-800 rounded-none font-mono text-xs tracking-widest"
                >
                  <RotateCcw className="mr-2 h-4 w-4" />
                  RESET
                </Button>
              )}
            </div>
          </div>
 
          {/* Right: Server Rack Visualization */}
          <div className="relative">
            {/* Side Beams (The "Left and Right Beam Type Thing") */}
            <div className="absolute -left-4 top-0 bottom-0 w-[1px] bg-gradient-to-b from-transparent via-zinc-800 to-transparent">
              <motion.div
                animate={{ top: ["0%", "100%"], opacity: [0, 1, 0] }}
                transition={{ duration: 3, repeat: Infinity, ease: "linear" }}
                className="absolute w-[2px] h-20 bg-amber-500/50 blur-[2px] -left-[0.5px]"
              />
            </div>
            <div className="absolute -right-4 top-0 bottom-0 w-[1px] bg-gradient-to-b from-transparent via-zinc-800 to-transparent">
              <motion.div
                animate={{ top: ["100%", "0%"], opacity: [0, 1, 0] }}
                transition={{ duration: 4, repeat: Infinity, ease: "linear" }}
                className="absolute w-[2px] h-20 bg-amber-500/50 blur-[2px] -right-[0.5px]"
              />
            </div>
 
            {/* Rack Frame */}
            <div className="relative z-10 bg-zinc-100 dark:bg-[#050505] border-x border-zinc-200 dark:border-zinc-800 p-2 shadow-2xl">
              {/* Rack Mount Rails */}
              <div className="absolute top-0 bottom-0 left-0 w-4 border-r border-zinc-200 dark:border-zinc-800 bg-zinc-200 dark:bg-[#080808] flex flex-col justify-between py-2 items-center">
                {[...Array(10)].map((_, i) => (
                  <div
                    key={i}
                    className="w-1.5 h-1.5 rounded-full bg-zinc-300 dark:bg-[#111] shadow-[inset_0_1px_1px_rgba(255,255,255,0.1)]"
                  />
                ))}
              </div>
              <div className="absolute top-0 bottom-0 right-0 w-4 border-l border-zinc-200 dark:border-zinc-800 bg-zinc-200 dark:bg-[#080808] flex flex-col justify-between py-2 items-center">
                {[...Array(10)].map((_, i) => (
                  <div
                    key={i}
                    className="w-1.5 h-1.5 rounded-full bg-zinc-300 dark:bg-[#111] shadow-[inset_0_1px_1px_rgba(255,255,255,0.1)]"
                  />
                ))}
              </div>
 
              {/* Header */}
              <div className="mx-4 flex items-center justify-between px-4 py-3 border border-zinc-200 dark:border-zinc-800 bg-zinc-50 dark:bg-[#0A0A0A] rounded-t-sm mb-2 relative overflow-hidden">
                {/* Glossy Overlay */}
                <div className="absolute inset-0 bg-gradient-to-b from-white/5 to-transparent pointer-events-none" />
 
                <div className="flex items-center gap-3 relative z-10">
                  <div className="relative">
                    <div
                      className={`h-2 w-2 rounded-full shadow-[inset_0_1px_2px_rgba(0,0,0,0.5)] ${isActive ? "bg-green-500" : "bg-zinc-300 dark:bg-zinc-800"}`}
                    />
                    {isActive && (
                      <div className="absolute inset-0 bg-green-500 rounded-full blur-[2px] animate-pulse" />
                    )}
                  </div>
                  <span className="text-[10px] font-mono text-zinc-500 dark:text-zinc-400 tracking-widest uppercase">
                    Rack_Unit_01 // Main_Blade
                  </span>
                </div>
                <div className="flex items-center gap-3 relative z-10">
                  {!isActive && (
                    <div className="flex gap-1.5">
                      <BlinkingLed delay={0.5} color="bg-amber-500" />
                      <BlinkingLed delay={1.2} color="bg-amber-500" />
                      <BlinkingLed delay={2.0} color="bg-green-500" />
                    </div>
                  )}
                  <div className="text-[10px] font-mono text-zinc-500 uppercase">
                    {isActive ? "STATUS: PROCESSING" : "STATUS: IDLE"}
                  </div>
                </div>
              </div>
 
              {/* Server Blades */}
              <div className="space-y-1 mx-4">
                {processingSteps.map((step, index) => {
                  const isCurrent = currentStep === index;
                  const isDone = currentStep > index;
 
                  return (
                    <div
                      key={step.id}
                      className={cn(
                        "relative h-16 bg-zinc-50 dark:bg-[#0A0A0A] border border-zinc-200 dark:border-zinc-800 flex items-center px-4 transition-all duration-500 overflow-hidden group",
                        isCurrent ? "border-amber-500/50" : "",
                      )}
                    >
                      {/* Blade Handle (Left) */}
                      <div className="absolute left-2 top-1/2 -translate-y-1/2 w-1 h-8 bg-zinc-300 dark:bg-zinc-800 rounded-full" />
 
                      {/* Active Progress Bar Background */}
                      {isCurrent && (
                        <motion.div
                          className="absolute inset-0 bg-amber-500/5 z-0"
                          initial={{ width: "0%" }}
                          animate={{ width: "100%" }}
                          transition={{
                            duration: step.duration / 1000,
                            ease: "linear",
                          }}
                        />
                      )}
 
                      {/* Content */}
                      <div className="relative z-10 flex items-center justify-between w-full pl-6">
                        <div className="flex items-center gap-4">
                          <div
                            className={cn(
                              "p-1.5 rounded bg-zinc-200 dark:bg-zinc-900 border border-zinc-300 dark:border-zinc-800 transition-colors duration-300",
                              isCurrent || isDone
                                ? "border-amber-500/50 text-amber-600 dark:text-amber-500"
                                : "text-zinc-400 dark:text-zinc-600",
                            )}
                          >
                            <step.icon className="h-4 w-4" />
                          </div>
                          <div>
                            <div
                              className={cn(
                                "text-[10px] font-mono font-bold tracking-wider transition-colors duration-300 uppercase",
                                isCurrent
                                  ? "text-amber-500"
                                  : isDone
                                    ? "text-zinc-400"
                                    : "text-zinc-400 dark:text-zinc-600",
                              )}
                            >
                              {step.label}
                            </div>
                            <div className="text-[10px] text-zinc-500 font-mono">
                              {isCurrent ? (
                                <span className="text-amber-500 animate-pulse">
                                  {step.details}
                                </span>
                              ) : isDone ? (
                                <span className="text-green-500">[OK]</span>
                              ) : (
                                <span className="opacity-50">Waiting...</span>
                              )}
                            </div>
                          </div>
                        </div>
 
                        {/* Status LED & Vents */}
                        <div className="flex items-center gap-4">
                          {/* Vents */}
                          <div className="flex gap-0.5">
                            {[...Array(4)].map((_, i) => (
                              <div
                                key={i}
                                className="w-0.5 h-4 bg-zinc-300 dark:bg-zinc-800"
                              />
                            ))}
                          </div>
 
                          <div className="relative">
                            <div
                              className={cn(
                                "h-1.5 w-1.5 rounded-full shadow-[inset_0_1px_2px_rgba(0,0,0,0.5)] transition-colors duration-300",
                                isCurrent
                                  ? "bg-amber-500"
                                  : isDone
                                    ? "bg-green-500"
                                    : "bg-zinc-300 dark:bg-zinc-900",
                              )}
                            />
                            {(isCurrent || isDone) && (
                              <div
                                className={cn(
                                  "absolute inset-0 rounded-full blur-[2px]",
                                  isCurrent
                                    ? "bg-amber-500 animate-pulse"
                                    : "bg-green-500",
                                )}
                              />
                            )}
                          </div>
                        </div>
                      </div>
 
                      {/* Blade Handle (Right) */}
                      <div className="absolute right-2 top-1/2 -translate-y-1/2 w-1 h-8 bg-zinc-300 dark:bg-zinc-800 rounded-full" />
                    </div>
                  );
                })}
              </div>
 
              {/* Footer / Output */}
              <div className="mt-2 mx-4 p-4 bg-zinc-100 dark:bg-[#080808] border border-zinc-200 dark:border-zinc-800 rounded-b-sm font-mono text-[10px] text-zinc-500 h-24 overflow-hidden relative">
                <div className="absolute top-2 right-2 flex gap-1">
                  <div className="h-1.5 w-1.5 rounded-full bg-zinc-300 dark:bg-zinc-800" />
                  <div className="h-1.5 w-1.5 rounded-full bg-zinc-300 dark:bg-zinc-800" />
                </div>
                <div className="space-y-1">
                  <div>System initialized. Ready for input.</div>
                  {currentStep >= 0 && (
                    <div className="text-zinc-600 dark:text-zinc-400">
                      &gt; Ingesting data stream...
                    </div>
                  )}
                  {currentStep >= 1 && (
                    <div className="text-zinc-600 dark:text-zinc-400">
                      &gt; Security checks passed.
                    </div>
                  )}
                  {currentStep >= 2 && (
                    <div className="text-zinc-600 dark:text-zinc-400">
                      &gt; Rendering JavaScript environment...
                    </div>
                  )}
                  {currentStep >= 3 && (
                    <div className="text-zinc-600 dark:text-zinc-400">
                      &gt; Extracting entities...
                    </div>
                  )}
                  {currentStep >= 4 && (
                    <div className="text-green-500">
                      &gt; Payload delivered. 200 OK.
                    </div>
                  )}
                  {!isActive && currentStep === -1 && (
                    <motion.div
                      animate={{ opacity: [0, 1, 0] }}
                      transition={{ duration: 1, repeat: Infinity }}
                      className="text-amber-500/50"
                    >
                      _
                    </motion.div>
                  )}
                </div>
              </div>
            </div>
 
            {/* Background Glows */}
            <div className="absolute -inset-4 bg-amber-500/5 blur-3xl -z-10" />
          </div>
        </div>
      </div>
    </section>
  );
}