import React, { useState, useEffect, useRef } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import {
  Sparkles,
  ArrowRight,
  Play,
  Square,
  Heart,
  Cpu,
  FileText,
  ChevronDown,
  Check,
  Volume2,
  MessageSquare,
  Mic,
  Disc,
  Layers,
  Globe,
  Radio,
  Headphones,
  PlayCircle,
  Settings,
  Flame,
  Volume1,
  HelpCircle,
  User,
  ExternalLink,
  BookOpen
} from 'lucide-react';

const Github = (props) => (
  <svg viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round" className={props.className || "w-5 h-5"}>
    <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22" />
  </svg>
);

export default function LandingPage({ onTryDemo }) {
  // Collapsible FAQ Active Index
  const [activeFaq, setActiveFaq] = useState(null);

  // Mock Audio Player Demo State
  const [mockIsPlaying, setMockIsPlaying] = useState(false);
  const [mockActiveSpeaker, setMockActiveSpeaker] = useState(0);
  const [mockTimeline, setMockTimeline] = useState(0);
  const [selectedVoicePreset, setSelectedVoicePreset] = useState('podcast');
  const canvasRef = useRef(null);
  const animationFrameId = useRef(null);

  // Scroll to section helper
  const scrollToSection = (id) => {
    const element = document.getElementById(id);
    if (element) {
      element.scrollIntoView({ behavior: 'smooth' });
    }
  };

  // Mock Speech Dialogues matching preset
  const voicePresets = {
    podcast: {
      title: "Co-Hosted Tech Podcast",
      description: "Expressive debate with turn-taking and natural emphasis.",
      duration: 12,
      speakers: [
        { id: 0, name: "David (AI Host)", color: "cyan" },
        { id: 1, name: "Zira (AI Guest)", color: "purple" }
      ],
      script: [
        { spk: 0, text: "Welcome back! Today we are discussing open-source conversational AI.", time: 0 },
        { spk: 1, text: "Yes! And VibeVoice is achieving incredible zero-shot prosody matching.", time: 4 },
        { spk: 0, text: "It runs in real-time, even on a basic CPU node.", time: 8 }
      ]
    },
    audiobook: {
      title: "Atmospheric Audiobook",
      description: "Rich descriptive narration with dramatic pauses.",
      duration: 15,
      speakers: [
        { id: 0, name: "Narrator", color: "amber" }
      ],
      script: [
        { spk: 0, text: "The ancient model weights loaded slowly, breathing life into the synthesis.", time: 0 },
        { spk: 0, text: "Every voice clone whispered of a future built on neural acoustic tokens...", time: 7 }
      ]
    },
    assistant: {
      title: "High-Speed Dynamic Support Agent",
      description: "Polite, helpful customer transaction stream.",
      duration: 10,
      speakers: [
        { id: 0, name: "VibeVoice Agent", color: "emerald" },
        { id: 1, name: "User Alex", color: "rose" }
      ],
      script: [
        { spk: 0, text: "Hello! I am VibeVoice AI. I can assist with your DineDirect order.", time: 0 },
        { spk: 1, text: "Perfect. Add a dynamic voice reference for Speaker 2.", time: 4 },
        { spk: 0, text: "Certainly! Setting up customized vocal signature parameters.", time: 7 }
      ]
    }
  };

  // Switch voice preset
  useEffect(() => {
    setMockIsPlaying(false);
    setMockTimeline(0);
    setMockActiveSpeaker(0);
  }, [selectedVoicePreset]);

  // Mock play timeline tick
  useEffect(() => {
    let interval;
    if (mockIsPlaying) {
      const activePreset = voicePresets[selectedVoicePreset];
      interval = setInterval(() => {
        setMockTimeline(prev => {
          if (prev >= activePreset.duration) {
            setMockIsPlaying(false);
            return 0;
          }
          const nextVal = prev + 0.1;
          // Determine active speaker based on time
          const matchLine = [...activePreset.script].reverse().find(line => nextVal >= line.time);
          if (matchLine && matchLine.spk !== mockActiveSpeaker) {
            setMockActiveSpeaker(matchLine.spk);
          }
          return nextVal;
        });
      }, 100);
    }
    return () => clearInterval(interval);
  }, [mockIsPlaying, selectedVoicePreset, mockActiveSpeaker]);

  // Floating Particles or Voice Wave Animation for Visualizer Mock
  useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;
    const ctx = canvas.getContext('2d');
    const width = canvas.width;
    const height = canvas.height;
    let time = 0;

    const render = () => {
      time += 0.04;
      ctx.fillStyle = 'rgba(7, 9, 14, 0.15)'; // Back-sweep fade
      ctx.fillRect(0, 0, width, height);

      // Multiple colored floating sin waves
      const waves = [
        { amplitude: mockIsPlaying ? 35 : 8, speed: 1.5, color: 'rgba(0, 242, 254, 0.35)', freq: 0.015 },
        { amplitude: mockIsPlaying ? 25 : 6, speed: 2.2, color: 'rgba(162, 89, 255, 0.3)', freq: 0.02 },
        { amplitude: mockIsPlaying ? 15 : 4, speed: -1.2, color: 'rgba(255, 92, 141, 0.25)', freq: 0.01 }
      ];

      waves.forEach(w => {
        ctx.beginPath();
        ctx.lineWidth = mockIsPlaying ? 2.5 : 1.5;
        ctx.strokeStyle = w.color;
        ctx.shadowBlur = mockIsPlaying ? 8 : 0;
        ctx.shadowColor = w.color;

        for (let x = 0; x < width; x++) {
          const y = height / 2 + Math.sin(x * w.freq + time * w.speed) * w.amplitude * Math.sin(x / width * Math.PI);
          if (x === 0) ctx.moveTo(x, y);
          else ctx.lineTo(x, y);
        }
        ctx.stroke();
      });

      // Animated voice bars on left and right borders
      if (mockIsPlaying) {
        ctx.fillStyle = 'rgba(0, 242, 254, 0.15)';
        for (let i = 0; i < 15; i++) {
          const barHeight = Math.abs(Math.sin(time * 3 + i)) * 40;
          ctx.fillRect(15 + i * 8, height - barHeight - 10, 5, barHeight);
          ctx.fillRect(width - 15 - i * 8 - 5, height - barHeight - 10, 5, barHeight);
        }
      }

      animationFrameId.current = requestAnimationFrame(render);
    };

    render();
    return () => cancelAnimationFrame(animationFrameId.current);
  }, [mockIsPlaying]);

  // Framer motion containers configs
  const containerVariants = {
    hidden: { opacity: 0 },
    visible: { opacity: 1, transition: { staggerChildren: 0.15 } }
  };

  const itemVariants = {
    hidden: { opacity: 0, y: 30 },
    visible: { opacity: 1, y: 0, transition: { type: "spring", stiffness: 60 } }
  };

  // FAQ List
  const faqs = [
    {
      q: "What is VibeVoice AI?",
      a: "VibeVoice AI is an advanced, research-grade open-source neural acoustic speech model developed by Microsoft Research. It leverages multi-turn continuous speaker tokenization to generate hyper-realistic, human-like voice synthesis and dialogue streams without requiring massive GPU cluster infrastructures."
    },
    {
      q: "Is it completely open source?",
      a: "Yes, VibeVoice is fully open source. All model architectures, inference engines, and base neural weights (including the lightweight 0.5B parameter variant) are accessible on our GitHub repository and Hugging Face space for developers, researchers, and synthetic media creators."
    },
    {
      q: "Does it support multi-speaker dialogue synthesis?",
      a: "Absolutely. Rather than just speaking single phrases, VibeVoice excels at context-aware turn-taking. You can write scripts detailing conversations for two or more speakers, and the model handles transitions, conversational pauses, dynamic pacing, and speech emphasis with extreme stability."
    },
    {
      q: "Can it generate full podcast discussions?",
      a: "Yes. By providing a scripted conversation template containing Speaker IDs (e.g. Speaker 0, Speaker 1), the engine aggregates dialogue cues to model natural flow, interruptions, and pacing, producing broadcast-ready podcast tracks."
    },
    {
      q: "Does it support emotional speech synthesis and voice cloning?",
      a: "Yes. VibeVoice utilizes zero-shot speaker adaptation. By capturing or uploading a brief 10-30 second reference WAV file, it extracts pitch, vocal envelope, and prosody parameters. The model then synthesizes conversational speech matching the original speaker's vocal signature and dynamic emotional tone."
    },
    {
      q: "Can developers fine-tune the model weights?",
      a: "Yes! The repository contains full PyTorch training recipes, quantization parameters, and Hugging Face pipeline wrappers. You can fine-tune VibeVoice on custom speech datasets or scale it in commercial server clouds utilizing GPU-optimized TensorRT containers."
    },
    {
      q: "Is it suitable for research projects?",
      a: "VibeVoice was built from the ground up to support academic and commercial speech research. The architecture decouples text tokenization and acoustic prosody representation, offering researchers a clean pipeline to inspect neural audio modeling."
    }
  ];

  return (
    <div className="min-h-screen text-[#f0f3fa] selection:bg-[#00f2fe]/20 relative overflow-x-hidden font-sans">
      
      {/* Dynamic Glowing Parallax Backdrop Background */}
      <div className="fixed inset-0 overflow-hidden pointer-events-none z-0">
        <div className="absolute w-[800px] h-[800px] rounded-full top-[-300px] left-[-200px] bg-gradient-to-br from-[#00f2fe]/10 to-[#a259ff]/5 blur-[160px] animate-float-glow-1"></div>
        <div className="absolute w-[900px] h-[900px] rounded-full bottom-[-300px] right-[-200px] bg-gradient-to-br from-[#ff5c8d]/10 to-[#a259ff]/5 blur-[180px] animate-float-glow-2"></div>
        <div className="absolute w-[600px] h-[600px] rounded-full top-[40%] right-[10%] bg-gradient-to-br from-[#00f2fe]/5 to-[#ff5c8d]/5 blur-[150px] animate-[floatGlow_35s_infinite_alternate_ease-in-out]"></div>
      </div>

      {/* Modern Glassmorphic Sticky Navigation */}
      <header className="sticky top-0 z-50 bg-glass/60 backdrop-blur-xl border-b border-white/5 py-4">
        <div className="max-w-[1300px] mx-auto px-6 flex justify-between items-center">
          <div className="flex items-center gap-3 cursor-pointer" onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}>
            <Sparkles className="w-8 h-8 text-neon-cyan drop-shadow-[0_0_10px_rgba(0,242,254,0.4)]" />
            <div>
              <span className="text-xl font-bold tracking-tight">
                VibeVoice<span className="bg-gradient-to-r from-[#00f2fe] to-[#a259ff] bg-clip-text text-transparent">AI</span>
              </span>
              <span className="block text-[8.5px] text-[#8e9bb5] uppercase tracking-widest font-semibold">Microsoft Research Ecosystem</span>
            </div>
          </div>

          {/* Desktop Menu links */}
          <nav className="hidden md:flex items-center gap-8 text-xs font-semibold text-[#8e9bb5]">
            <button onClick={() => scrollToSection('about')} className="hover:text-white hover:text-shadow transition duration-200 cursor-pointer">About</button>
            <button onClick={() => scrollToSection('features')} className="hover:text-white hover:text-shadow transition duration-200 cursor-pointer">Features</button>
            <button onClick={() => scrollToSection('capabilities')} className="hover:text-white hover:text-shadow transition duration-200 cursor-pointer">Capabilities</button>
            <button onClick={() => scrollToSection('demo')} className="hover:text-white hover:text-shadow transition duration-200 cursor-pointer">Interactive Demo</button>
            <button onClick={() => scrollToSection('open-source')} className="hover:text-white hover:text-shadow transition duration-200 cursor-pointer">Open Source</button>
            <button onClick={() => scrollToSection('faq')} className="hover:text-white hover:text-shadow transition duration-200 cursor-pointer">FAQs</button>
          </nav>

          <div className="flex items-center gap-3">
            <a
              href="https://github.com"
              target="_blank"
              rel="noopener noreferrer"
              className="p-2 bg-white/4 border border-white/5 hover:border-[#00f2fe]/40 rounded-xl hover:bg-white/8 transition duration-200 cursor-pointer"
            >
              <Github className="w-4 h-4 text-white" />
            </a>
            <button
              onClick={onTryDemo}
              className="relative group overflow-hidden px-4.5 py-2 rounded-xl bg-gradient-to-r from-[#00f2fe] to-[#a259ff] text-black font-bold text-xs transition duration-200 cursor-pointer active:scale-95 shadow-[0_4px_15px_rgba(0,242,254,0.3)] hover:shadow-[0_4px_25px_rgba(0,242,254,0.5)]"
            >
              Launch Studio Workspace
            </button>
          </div>
        </div>
      </header>

      {/* 1. HERO SECTION */}
      <section className="relative z-10 pt-16 md:pt-24 pb-20 max-w-[1300px] mx-auto px-6 grid grid-cols-1 lg:grid-cols-[1.1fr_0.9fr] gap-12 items-center">
        <motion.div
          initial={{ opacity: 0, x: -50 }}
          animate={{ opacity: 1, x: 0 }}
          transition={{ duration: 0.8, ease: "easeOut" }}
          className="flex flex-col gap-6 text-left"
        >
          {/* Neon Ribbon Badge */}
          <div className="inline-flex items-center gap-2 self-start bg-[#00f2fe]/10 border border-[#00f2fe]/30 rounded-full px-4 py-1.5 text-xs text-neon-cyan select-none">
            <Radio className="w-3.5 h-3.5 animate-pulse text-neon-cyan" />
            <span className="font-bold uppercase tracking-wider text-[10px]">Active Open-Source Model: VibeVoice v1.5</span>
          </div>

          <h1 className="text-5xl md:text-7xl font-extrabold tracking-tight leading-[1.08] text-white">
            VibeVoice <span className="bg-gradient-to-r from-[#00f2fe] via-[#a259ff] to-[#ff5c8d] bg-clip-text text-transparent drop-shadow-[0_0_20px_rgba(0,242,254,0.15)]">AI</span>
          </h1>
          
          <p className="text-lg md:text-xl font-medium text-[#8e9bb5] max-w-[550px] leading-relaxed">
            Human-like conversational speech generation powered by AI. Experience the future of multi-speaker dialogue and expressive zero-shot voice synthesis.
          </p>

          <div className="flex flex-col sm:flex-row gap-4 pt-3">
            <button
              onClick={onTryDemo}
              className="flex items-center justify-center gap-2.5 px-7 py-4.5 rounded-xl bg-gradient-to-r from-[#00f2fe] to-[#a259ff] text-black font-extrabold text-sm transition duration-200 cursor-pointer hover:shadow-[0_0_25px_rgba(0,242,254,0.45)] active:scale-95 group"
            >
              Try Studio Playground
              <ArrowRight className="w-4 h-4 group-hover:translate-x-1.5 transition-transform duration-200" />
            </button>
            <a
              href="https://github.com"
              target="_blank"
              rel="noopener noreferrer"
              className="flex items-center justify-center gap-2.5 px-7 py-4.5 rounded-xl bg-white/4 border border-white/8 hover:bg-white/8 hover:border-white/15 text-white font-bold text-sm transition duration-200 cursor-pointer active:scale-95"
            >
              <Github className="w-5 h-5" />
              View on GitHub
            </a>
          </div>

          {/* Feature highlights inside Hero */}
          <div className="grid grid-cols-3 gap-6 pt-10 border-t border-white/5 max-w-[520px]">
            <div>
              <h4 className="text-2xl font-extrabold text-white">24kHz</h4>
              <p className="text-[10px] text-[#8e9bb5] uppercase tracking-wide">High-Fidelity Audio</p>
            </div>
            <div>
              <h4 className="text-2xl font-extrabold text-white">&lt; 250ms</h4>
              <p className="text-[10px] text-[#8e9bb5] uppercase tracking-wide">Dynamic Latency</p>
            </div>
            <div>
              <h4 className="text-2xl font-extrabold text-white">1.5B</h4>
              <p className="text-[10px] text-[#8e9bb5] uppercase tracking-wide">Quantized weights</p>
            </div>
          </div>
        </motion.div>

        {/* Hero Visualizer Graphic */}
        <motion.div
          initial={{ opacity: 0, scale: 0.9, y: 30 }}
          animate={{ opacity: 1, scale: 1, y: 0 }}
          transition={{ duration: 1, ease: "easeOut" }}
          className="relative flex justify-center items-center"
        >
          {/* Ambient Background Circles */}
          <div className="absolute w-[350px] h-[350px] rounded-full border border-dashed border-[#00f2fe]/20 animate-[orbSpin_40s_infinite_linear]"></div>
          <div className="absolute w-[450px] h-[450px] rounded-full border border-dashed border-[#a259ff]/10 animate-[orbSpin_60s_infinite_linear_reverse]"></div>

          {/* Central AI Orb Graphic */}
          <div className="relative w-[280px] h-[280px] rounded-full bg-glass flex items-center justify-center border border-white/10 shadow-3xl">
            {/* Spinning Holographic Waves */}
            <div className="absolute inset-4 rounded-full bg-gradient-to-tr from-[#00f2fe]/20 to-[#a259ff]/20 animate-[orbSpin_12s_infinite_linear]"></div>
            <div className="absolute inset-8 rounded-full bg-gradient-to-br from-[#ff5c8d]/15 to-[#a259ff]/10 animate-[orbSpin_8s_infinite_linear_reverse]"></div>
            
            {/* Pulsating core */}
            <div className="w-[120px] h-[120px] rounded-full bg-gradient-to-tr from-[#00f2fe] via-[#a259ff] to-[#ff5c8d] shadow-[0_0_40px_rgba(0,242,254,0.45)] animate-pulse flex items-center justify-center relative">
              <Headphones className="w-12 h-12 text-black" />
            </div>

            {/* Glowing satellites */}
            <div className="absolute top-[10%] left-[10%] w-6 h-6 rounded-full bg-[#00f2fe]/80 blur-[4px] animate-pulse"></div>
            <div className="absolute bottom-[15%] right-[12%] w-8 h-8 rounded-full bg-[#ff5c8d]/60 blur-[6px] animate-pulse"></div>
          </div>

          {/* Floating UI Audio Indicators */}
          <div className="absolute top-[15%] right-[5%] bg-glass p-3.5 rounded-2xl border border-white/10 flex items-center gap-2.5 shadow-2xl animate-[floatGlow_20s_infinite_alternate_ease-in-out]">
            <Mic className="w-4 h-4 text-[#00f2fe]" />
            <div className="text-left">
              <span className="block text-[9px] text-[#8e9bb5] uppercase font-bold tracking-wide">Cloned Vocals</span>
              <span className="text-[11px] font-bold text-white">David_Signature.wav</span>
            </div>
          </div>

          <div className="absolute bottom-[20%] left-[0%] bg-glass p-3.5 rounded-2xl border border-white/10 flex items-center gap-2.5 shadow-2xl animate-[floatGlow_22s_infinite_alternate-reverse_ease-in-out]">
            <Radio className="w-4 h-4 text-[#a259ff] animate-pulse" />
            <div className="text-left">
              <span className="block text-[9px] text-[#8e9bb5] uppercase font-bold tracking-wide">Stream Broadcast</span>
              <span className="text-[11px] font-bold text-[#00e673]">Active turn-taking</span>
            </div>
          </div>
        </motion.div>
      </section>

      {/* 2. ABOUT SECTION */}
      <section id="about" className="relative z-10 py-24 border-t border-white/5 max-w-[1300px] mx-auto px-6">
        <motion.div
          initial="hidden"
          whileInView="visible"
          viewport={{ once: true, margin: "-100px" }}
          variants={containerVariants}
          className="grid grid-cols-1 lg:grid-cols-[0.8fr_1.2fr] gap-12 items-center"
        >
          <motion.div variants={itemVariants} className="flex flex-col gap-5 text-left">
            <span className="text-xs font-bold uppercase tracking-widest text-neon-cyan">The Research Foundation</span>
            <h2 className="text-3xl md:text-4xl font-extrabold text-white leading-tight">
              A Leap Forward in Expressive Speech Synthesis
            </h2>
            <p className="text-sm text-[#8e9bb5] leading-relaxed">
              VibeVoice is an advanced open-source AI voice model developed to bridge the gap between flat, robotic speech-to-text outputs and natural, multi-speaker conversational dialogue. 
            </p>
            <div className="flex gap-4 pt-2">
              <a
                href="https://huggingface.co"
                target="_blank"
                rel="noopener noreferrer"
                className="flex items-center gap-2 text-xs font-bold text-white hover:text-neon-cyan transition duration-200"
              >
                Hugging Face Portal <ExternalLink className="w-3.5 h-3.5" />
              </a>
              <a
                href="https://github.com"
                target="_blank"
                rel="noopener noreferrer"
                className="flex items-center gap-2 text-xs font-bold text-white hover:text-neon-purple transition duration-200"
              >
                Developer Docs <BookOpen className="w-3.5 h-3.5" />
              </a>
            </div>
          </motion.div>

          <motion.div variants={itemVariants} className="grid grid-cols-1 md:grid-cols-2 gap-6 text-left">
            {/* About capability cards */}
            <div className="bg-glass p-6 rounded-2xl border border-white/5 hover:border-white/10 transition duration-300">
              <div className="w-10 h-10 rounded-xl bg-[#00f2fe]/10 flex items-center justify-center text-neon-cyan mb-4">
                <Layers className="w-5 h-5" />
              </div>
              <h3 className="text-md font-semibold text-white mb-2">Zero-Shot Cloning</h3>
              <p className="text-xs text-[#8e9bb5] leading-relaxed">
                By processing a brief, 10-second reference voice WAV, the network maps core vocal footprints to synthesize entirely new dialogue styles instantly.
              </p>
            </div>

            <div className="bg-glass p-6 rounded-2xl border border-white/5 hover:border-white/10 transition duration-300">
              <div className="w-10 h-10 rounded-xl bg-[#a259ff]/10 flex items-center justify-center text-neon-purple mb-4">
                <MessageSquare className="w-5 h-5" />
              </div>
              <h3 className="text-md font-semibold text-white mb-2">Multi-Speaker Continuity</h3>
              <p className="text-xs text-[#8e9bb5] leading-relaxed">
                Models turn-taking triggers, pauses, and context queues so speakers flow smoothly between paragraphs, simulating authentic studio atmospheres.
              </p>
            </div>

            <div className="bg-glass p-6 rounded-2xl border border-white/5 hover:border-white/10 transition duration-300">
              <div className="w-10 h-10 rounded-xl bg-[#ff5c8d]/10 flex items-center justify-center text-[#ff5c8d] mb-4">
                <Cpu className="w-5 h-5" />
              </div>
              <h3 className="text-md font-semibold text-white mb-2">Research-Grade Architecture</h3>
              <p className="text-xs text-[#8e9bb5] leading-relaxed">
                Decoupled neural acoustic tokenizers allow academic inspection and dynamic speed parameter tweaking for multi-agent experiments.
              </p>
            </div>

            <div className="bg-glass p-6 rounded-2xl border border-white/5 hover:border-white/10 transition duration-300">
              <div className="w-10 h-10 rounded-xl bg-[#00e673]/10 flex items-center justify-center text-[#00e673] mb-4">
                <Globe className="w-5 h-5" />
              </div>
              <h3 className="text-md font-semibold text-white mb-2">Open Ecosystem</h3>
              <p className="text-xs text-[#8e9bb5] leading-relaxed">
                Seamless pipeline wrappers for Hugging Face datasets and local PyTorch containers to build production speech layers.
              </p>
            </div>
          </motion.div>
        </motion.div>
      </section>

      {/* 3. FEATURES SECTION */}
      <section id="features" className="relative z-10 py-24 bg-black/30 border-t border-white/5 max-w-[1300px] mx-auto px-6">
        <div className="text-center max-w-[700px] mx-auto mb-16 flex flex-col gap-3">
          <span className="text-xs font-bold uppercase tracking-widest text-[#a259ff]">Enterprise SaaS Features</span>
          <h2 className="text-3xl md:text-5xl font-extrabold text-white">Synthesize Without Limits</h2>
          <p className="text-sm text-[#8e9bb5] leading-relaxed">
            From co-hosted podcasts to responsive gaming characters, VibeVoice AI bundles powerful acoustic capabilities out-of-the-box.
          </p>
        </div>

        <motion.div
          initial="hidden"
          whileInView="visible"
          viewport={{ once: true, margin: "-100px" }}
          variants={containerVariants}
          className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"
        >
          {/* Feature Card A */}
          <motion.div variants={itemVariants} className="bg-glass p-6 rounded-2xl border border-white/5 hover:border-[#00f2fe]/40 hover:shadow-[0_0_20px_rgba(0,242,254,0.1)] transition duration-300 text-left group">
            <div className="w-10 h-10 rounded-xl bg-[#00f2fe]/10 flex items-center justify-center text-neon-cyan mb-4 group-hover:scale-110 transition duration-300">
              <Mic className="w-5 h-5" />
            </div>
            <h3 className="text-md font-bold text-white mb-2">Multi-Speaker Dialogue</h3>
            <p className="text-xs text-[#8e9bb5] leading-relaxed">
              Generate natural conversations between multiple AI speakers. Handles realistic speaker transitions and context-aware continuity automatically.
            </p>
          </motion.div>

          {/* Feature Card B */}
          <motion.div variants={itemVariants} className="bg-glass p-6 rounded-2xl border border-white/5 hover:border-[#a259ff]/40 hover:shadow-[0_0_20px_rgba(162,89,255,0.1)] transition duration-300 text-left group">
            <div className="w-10 h-10 rounded-xl bg-[#a259ff]/10 flex items-center justify-center text-neon-purple mb-4 group-hover:scale-110 transition duration-300">
              <Headphones className="w-5 h-5" />
            </div>
            <h3 className="text-md font-bold text-white mb-2">AI Podcast Generation</h3>
            <p className="text-xs text-[#8e9bb5] leading-relaxed">
              Automatically create complete podcast-style discussions with human-like speaking flow, dynamic pacing, and interactive turn exchanges.
            </p>
          </motion.div>

          {/* Feature Card C */}
          <motion.div variants={itemVariants} className="bg-glass p-6 rounded-2xl border border-white/5 hover:border-[#ff5c8d]/40 hover:shadow-[0_0_20px_rgba(255,92,141,0.1)] transition duration-300 text-left group">
            <div className="w-10 h-10 rounded-xl bg-[#ff5c8d]/10 flex items-center justify-center text-[#ff5c8d] mb-4 group-hover:scale-110 transition duration-300">
              <Volume2 className="w-5 h-5" />
            </div>
            <h3 className="text-md font-bold text-white mb-2">Expressive Text-to-Speech</h3>
            <p className="text-xs text-[#8e9bb5] leading-relaxed">
              Emotion-aware speech synthesis capturing raw tone, breathing rhythm, natural pauses, and precise vocal emphasis.
            </p>
          </motion.div>

          {/* Feature Card D */}
          <motion.div variants={itemVariants} className="bg-glass p-6 rounded-2xl border border-white/5 hover:border-[#00e673]/40 hover:shadow-[0_0_20px_rgba(0,230,115,0.1)] transition duration-300 text-left group">
            <div className="w-10 h-10 rounded-xl bg-[#00e673]/10 flex items-center justify-center text-[#00e673] mb-4 group-hover:scale-110 transition duration-300">
              <Disc className="w-5 h-5" />
            </div>
            <h3 className="text-md font-bold text-white mb-2">Long-Form Audio</h3>
            <p className="text-xs text-[#8e9bb5] leading-relaxed">
              Stable long-duration speech generation that maintains voice quality consistency and active conversation memory across chapters.
            </p>
          </motion.div>

          {/* Feature Card E */}
          <motion.div variants={itemVariants} className="bg-glass p-6 rounded-2xl border border-white/5 hover:border-[#ffb703]/40 hover:shadow-[0_0_20px_rgba(255,183,3,0.1)] transition duration-300 text-left group">
            <div className="w-10 h-10 rounded-xl bg-[#ffb703]/10 flex items-center justify-center text-[#ffb703] mb-4 group-hover:scale-110 transition duration-300">
              <Settings className="w-5 h-5" />
            </div>
            <h3 className="text-md font-bold text-white mb-2">Voice Style Transfer</h3>
            <p className="text-xs text-[#8e9bb5] leading-relaxed">
              Vocal adaptation matching target speaker style, footprint imitation, and fast personalized AI voice mapping.
            </p>
          </motion.div>

          {/* Feature Card F */}
          <motion.div variants={itemVariants} className="bg-glass p-6 rounded-2xl border border-white/5 hover:border-[#00f2fe]/40 hover:shadow-[0_0_20px_rgba(0,242,254,0.1)] transition duration-300 text-left group">
            <div className="w-10 h-10 rounded-xl bg-[#00f2fe]/10 flex items-center justify-center text-neon-cyan mb-4 group-hover:scale-110 transition duration-300">
              <Radio className="w-5 h-5" />
            </div>
            <h3 className="text-md font-bold text-white mb-2">Conversational AI Speech</h3>
            <p className="text-xs text-[#8e9bb5] leading-relaxed">
              Human-like interaction flow, clean turn-taking logic, and advanced prosody modeling for responsive AI web support.
            </p>
          </motion.div>

          {/* Feature Card G */}
          <motion.div variants={itemVariants} className="bg-glass p-6 rounded-2xl border border-white/5 hover:border-[#a259ff]/40 hover:shadow-[0_0_20px_rgba(162,89,255,0.1)] transition duration-300 text-left group">
            <div className="w-10 h-10 rounded-xl bg-[#a259ff]/10 flex items-center justify-center text-neon-purple mb-4 group-hover:scale-110 transition duration-300">
              <Github className="w-5 h-5" />
            </div>
            <h3 className="text-md font-bold text-white mb-2">Open Source Ecosystem</h3>
            <p className="text-xs text-[#8e9bb5] leading-relaxed">
              First-class Hugging Face model hub integration, comprehensive GitHub community repositories, and developer API templates.
            </p>
          </motion.div>

          {/* Feature Card H */}
          <motion.div variants={itemVariants} className="bg-glass p-6 rounded-2xl border border-white/5 hover:border-[#ff5c8d]/40 hover:shadow-[0_0_20px_rgba(255,92,141,0.1)] transition duration-300 text-left group">
            <div className="w-10 h-10 rounded-xl bg-[#ff5c8d]/10 flex items-center justify-center text-[#ff5c8d] mb-4 group-hover:scale-110 transition duration-300">
              <Cpu className="w-5 h-5" />
            </div>
            <h3 className="text-md font-bold text-white mb-2">Research-Grade Tech</h3>
            <p className="text-xs text-[#8e9bb5] leading-relaxed">
              Designed from first principles for conversational research, scalable local inference workloads, and custom quantization setups.
            </p>
          </motion.div>
        </motion.div>
      </section>

      {/* 4. REAL WORLD USE CASES SECTION */}
      <section id="cases" className="relative z-10 py-24 border-t border-white/5 max-w-[1300px] mx-auto px-6">
        <div className="text-center max-w-[700px] mx-auto mb-16 flex flex-col gap-3">
          <span className="text-xs font-bold uppercase tracking-widest text-[#00e673]">Infinite Possibilities</span>
          <h2 className="text-3xl md:text-5xl font-extrabold text-white">Built for Creators & Engineers</h2>
          <p className="text-sm text-[#8e9bb5] leading-relaxed">
            Discover how product squads, creative developers, and researchers deploy VibeVoice AI in the wild.
          </p>
        </div>

        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4">
          {[
            { title: "AI Podcast Automation", icon: Headphones, color: "cyan" },
            { title: "Audiobook Narration", icon: BookOpen, color: "purple" },
            { title: "Virtual AI Hosts", icon: Sparkles, color: "emerald" },
            { title: "Game Character Voices", icon: Flame, color: "rose" },
            { title: "AI YouTube Narration", icon: PlayCircle, color: "amber" },
            { title: "Conversational Agents", icon: MessageSquare, color: "blue" },
            { title: "Educational Voice", icon: User, color: "cyan" },
            { title: "Synthetic Media", icon: Radio, color: "purple" },
            { title: "Voice Cloning Research", icon: Mic, color: "rose" },
            { title: "Multilingual Dialogue", icon: Globe, color: "emerald" }
          ].map((item, idx) => {
            const IconComponent = item.icon;
            const borderColors = item.color === 'cyan' ? 'hover:border-[#00f2fe]/40'
              : item.color === 'purple' ? 'hover:border-[#a259ff]/40'
              : item.color === 'emerald' ? 'hover:border-[#00e673]/40'
              : item.color === 'rose' ? 'hover:border-[#ff5c8d]/40'
              : 'hover:border-white/20';

            return (
              <motion.div
                key={idx}
                whileHover={{ scale: 1.04, y: -4 }}
                transition={{ type: "spring", stiffness: 200, damping: 10 }}
                className={`bg-glass p-5 rounded-2xl border border-white/5 cursor-pointer flex flex-col items-center justify-center text-center gap-3 ${borderColors}`}
              >
                <div className={`w-9 h-9 rounded-xl bg-white/4 flex items-center justify-center text-white`}>
                  <IconComponent className="w-4.5 h-4.5" />
                </div>
                <span className="text-xs font-semibold text-white tracking-tight">{item.title}</span>
              </motion.div>
            );
          })}
        </div>
      </section>

      {/* 5. HOW IT WORKS SECTION */}
      <section className="relative z-10 py-24 bg-black/40 border-t border-white/5 max-w-[1300px] mx-auto px-6">
        <div className="text-center max-w-[700px] mx-auto mb-16 flex flex-col gap-3">
          <span className="text-xs font-bold uppercase tracking-widest text-[#ff5c8d]">Simplifying Complexity</span>
          <h2 className="text-3xl md:text-5xl font-extrabold text-white">How It Works</h2>
          <p className="text-sm text-[#8e9bb5] leading-relaxed">
            Generate customized, context-aware speech dialogue files locally in three simple milestones.
          </p>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 relative">
          
          {/* Animated linking lines inside background */}
          <div className="hidden lg:block absolute top-[30%] left-[25%] right-[25%] h-0.5 bg-gradient-to-r from-[#00f2fe]/35 via-[#a259ff]/35 to-[#ff5c8d]/35 z-0"></div>

          {/* Step 1 */}
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.6 }}
            className="bg-glass p-8 rounded-3xl border border-white/5 text-left relative z-10 flex flex-col gap-4"
          >
            <div className="absolute top-4 right-6 text-5xl font-black text-white/5">01</div>
            <div className="w-12 h-12 rounded-2xl bg-[#00f2fe]/10 flex items-center justify-center text-neon-cyan font-bold">
              <FileText className="w-6 h-6" />
            </div>
            <h3 className="text-lg font-bold text-white">Input Text &amp; Script</h3>
            <p className="text-xs text-[#8e9bb5] leading-relaxed">
              Format your text using simple speaker tags (e.g., `Speaker 0`, `Speaker 1`). Paste dialogue script snippets directly into the studio box.
            </p>
          </motion.div>

          {/* Step 2 */}
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.6, delay: 0.2 }}
            className="bg-glass p-8 rounded-3xl border border-white/5 text-left relative z-10 flex flex-col gap-4"
          >
            <div className="absolute top-4 right-6 text-5xl font-black text-white/5">02</div>
            <div className="w-12 h-12 rounded-2xl bg-[#a259ff]/10 flex items-center justify-center text-neon-purple font-bold">
              <Cpu className="w-6 h-6" />
            </div>
            <h3 className="text-lg font-bold text-white">Acoustic Processing</h3>
            <p className="text-xs text-[#8e9bb5] leading-relaxed">
              The model maps dialogue turn-taking patterns, computes real-time prosody adjustments, and blends speakers based on custom voice signatures.
            </p>
          </motion.div>

          {/* Step 3 */}
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.6, delay: 0.4 }}
            className="bg-glass p-8 rounded-3xl border border-white/5 text-left relative z-10 flex flex-col gap-4"
          >
            <div className="absolute top-4 right-6 text-5xl font-black text-white/5">03</div>
            <div className="w-12 h-12 rounded-2xl bg-[#00e673]/10 flex items-center justify-center text-[#00e673] font-bold">
              <Volume2 className="w-6 h-6" />
            </div>
            <h3 className="text-lg font-bold text-white">Seamless Broadcast Output</h3>
            <p className="text-xs text-[#8e9bb5] leading-relaxed">
              Stream binary PCM audio chunks back to the client browser in under 250ms, then run the client packager to download the mastered WAV file.
            </p>
          </motion.div>
        </div>
      </section>

      {/* 6. TECHNICAL CAPABILITIES SECTION */}
      <section id="capabilities" className="relative z-10 py-24 border-t border-white/5 max-w-[1300px] mx-auto px-6 grid grid-cols-1 lg:grid-cols-[0.9fr_1.1fr] gap-12 items-center">
        <div className="flex flex-col gap-6 text-left">
          <span className="text-xs font-bold uppercase tracking-widest text-neon-cyan">Deep Tech Specifications</span>
          <h2 className="text-3xl md:text-5xl font-extrabold text-white leading-tight">Quantized for Low-Latency Performance</h2>
          <p className="text-sm text-[#8e9bb5] leading-relaxed">
            By shifting away from multi-gigabyte models that require expensive dedicated GPUs, VibeVoice provides extreme research scalability directly on home laptops.
          </p>
          <button onClick={onTryDemo} className="self-start flex items-center gap-2 text-xs font-bold text-[#00f2fe] hover:text-[#00f2fe]/80 group transition duration-200">
            Open the Studio Workspace now <ArrowRight className="w-3.5 h-3.5 group-hover:translate-x-1 transition-transform" />
          </button>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-left">
          {[
            { label: "Long-Context Synthesis", desc: "Stable generation beyond 30-minute scripts without memory bottlenecks." },
            { label: "Multi-Turn Dialogue", desc: "Simulates interruptions, dynamic transitions, and collaborative dialogue." },
            { label: "Context Retention", desc: "Tracks prosody style consistency across speaker exchanges." },
            { label: "Emotional Speech Modeling", desc: "Adapts speaking pace and emphasis dynamically depending on context." },
            { label: "Realistic Timing & Pauses", desc: "Injects breathing frames, silence, and natural hesitation timings." },
            { label: "High-Quality Neural TTS", desc: "Synthesizes standard 24,000Hz speech directly client-side." },
            { label: "Scalable Deployment", desc: "Supports Docker, Kubernetes deployment, and ONNX Runtime scaling." },
            { label: "GPU-Optimized Inference", desc: "Compiles cleanly to TensorRT for enterprise SaaS frameworks." }
          ].map((cap, index) => (
            <div key={index} className="bg-glass-card p-4 rounded-xl border border-white/4 flex flex-col gap-1.5 hover:border-[#00f2fe]/30 transition duration-300">
              <div className="flex items-center gap-2 text-white font-bold text-xs select-none">
                <Check className="w-4 h-4 text-[#00e673]" />
                <span>{cap.label}</span>
              </div>
              <p className="text-[11px] text-[#8e9bb5] leading-relaxed pl-6">{cap.desc}</p>
            </div>
          ))}
        </div>
      </section>

      {/* 7. DEMO SECTION */}
      <section id="demo" className="relative z-10 py-24 bg-black/40 border-t border-white/5 max-w-[1300px] mx-auto px-6">
        <div className="text-center max-w-[700px] mx-auto mb-16 flex flex-col gap-3">
          <span className="text-xs font-bold uppercase tracking-widest text-[#a259ff]">Live Visual Playground</span>
          <h2 className="text-3xl md:text-5xl font-extrabold text-white">Experience the VibeVoice flow</h2>
          <p className="text-sm text-[#8e9bb5] leading-relaxed">
            Click play below to explore interactive speaker switching, custom scripts, and visual voice-wave modulations.
          </p>
        </div>

        {/* Custom Mock Interactive Demo Component */}
        <div className="max-w-[850px] mx-auto bg-glass rounded-3xl p-6 md:p-8 border border-white/8 backdrop-blur-2xl shadow-3xl flex flex-col gap-6">
          <div className="flex flex-col md:flex-row justify-between items-center gap-4 border-b border-white/5 pb-5">
            <div className="text-left flex flex-col gap-1">
              <span className="text-[9px] text-[#8e9bb5] uppercase font-bold tracking-wider">Demo Playback Studio</span>
              <h3 className="text-md font-bold text-white flex items-center gap-2">
                <Headphones className="w-4.5 h-4.5 text-[#00f2fe] animate-pulse" />
                {voicePresets[selectedVoicePreset].title}
              </h3>
            </div>

            {/* Select Presets bar */}
            <div className="flex items-center gap-2 bg-white/4 p-1 rounded-xl border border-white/5">
              {Object.keys(voicePresets).map(presetKey => (
                <button
                  key={presetKey}
                  onClick={() => setSelectedVoicePreset(presetKey)}
                  className={`px-3 py-1.5 rounded-lg text-[10px] font-bold uppercase tracking-wider transition cursor-pointer select-none ${
                    selectedVoicePreset === presetKey 
                      ? 'bg-gradient-to-r from-[#00f2fe] to-[#a259ff] text-black shadow-md' 
                      : 'text-[#8e9bb5] hover:text-white hover:bg-white/2'
                  }`}
                >
                  {presetKey}
                </button>
              ))}
            </div>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-[1fr_240px] gap-6 items-start">
            
            {/* Visualizer Area */}
            <div className="flex flex-col gap-4 w-full">
              <div className="bg-black/40 border border-white/4 rounded-2xl p-6 min-h-[160px] flex flex-col justify-center items-center relative overflow-hidden">
                <canvas ref={canvasRef} width="500" height="100" className="w-full h-[100px]"></canvas>

                {/* Animated Orb matching active speaker */}
                {mockIsPlaying && (
                  <div className="absolute top-4 right-4 flex items-center gap-2">
                    <span className="w-2 h-2 rounded-full bg-[#ff5c8d] animate-ping"></span>
                    <span className="text-[9px] text-[#ff5c8d] font-bold uppercase tracking-wider">
                      Active: {voicePresets[selectedVoicePreset].speakers[mockActiveSpeaker]?.name || "Speaker"}
                    </span>
                  </div>
                )}
              </div>

              {/* Action play controls */}
              <div className="flex items-center gap-4 bg-white/2 p-3 rounded-2xl border border-white/4">
                <button
                  onClick={() => setMockIsPlaying(!mockIsPlaying)}
                  className="w-10 h-10 rounded-full bg-gradient-to-r from-[#00f2fe] to-[#a259ff] hover:shadow-[0_0_15px_rgba(0,242,254,0.35)] flex items-center justify-center text-black hover:scale-105 active:scale-95 transition cursor-pointer"
                >
                  {mockIsPlaying ? (
                    <Square className="w-4 h-4 fill-current" />
                  ) : (
                    <Play className="w-4 h-4 fill-current ml-0.5" />
                  )}
                </button>

                <div className="flex-1 text-left">
                  <div className="flex justify-between text-[10px] text-[#8e9bb5] mb-1">
                    <span>{mockIsPlaying ? "Playing Dynamic Dialogue Chunks..." : "Ready to playback preview"}</span>
                    <span>{Math.floor(mockTimeline)}s / {voicePresets[selectedVoicePreset].duration}s</span>
                  </div>
                  <div className="h-1.5 w-full bg-white/6 rounded-full overflow-hidden relative">
                    <div 
                      className="absolute left-0 top-0 bottom-0 bg-gradient-to-r from-[#00f2fe] to-[#a259ff] transition-all duration-100 rounded-full" 
                      style={{ width: `${(mockTimeline / voicePresets[selectedVoicePreset].duration) * 100}%` }}
                    ></div>
                  </div>
                </div>
              </div>
            </div>

            {/* Script Viewer */}
            <div className="flex flex-col gap-3 text-left w-full">
              <span className="text-[10px] text-[#8e9bb5] uppercase font-bold tracking-wider">Turn-by-Turn Transcript</span>
              <div className="bg-black/25 rounded-2xl p-4 border border-white/4 flex flex-col gap-3 max-h-[220px] overflow-y-auto">
                {voicePresets[selectedVoicePreset].script.map((line, idx) => {
                  const speakerDetails = voicePresets[selectedVoicePreset].speakers[line.spk] || { name: "Guest", color: "cyan" };
                  const colorBadge = speakerDetails.color === 'cyan' ? 'text-[#00f2fe]' 
                    : speakerDetails.color === 'purple' ? 'text-[#a259ff]'
                    : speakerDetails.color === 'amber' ? 'text-[#ffb703]'
                    : 'text-white';

                  const isActiveLine = mockIsPlaying && mockTimeline >= line.time && 
                    (idx === voicePresets[selectedVoicePreset].script.length - 1 || mockTimeline < voicePresets[selectedVoicePreset].script[idx + 1].time);

                  return (
                    <div 
                      key={idx} 
                      className={`p-2.5 rounded-xl border transition-all duration-300 ${
                        isActiveLine 
                          ? 'bg-[#00f2fe]/6 border-[#00f2fe]/20 shadow-[0_0_8px_rgba(0,242,254,0.05)]' 
                          : 'bg-transparent border-transparent opacity-50'
                      }`}
                    >
                      <span className={`block text-[9px] font-bold uppercase tracking-wider mb-0.5 ${colorBadge}`}>
                        {speakerDetails.name}
                      </span>
                      <p className="text-[11px] text-[#f0f3fa] font-mono leading-relaxed">{line.text}</p>
                    </div>
                  );
                })}
              </div>
            </div>

          </div>

          <div className="bg-[#00f2fe]/4 border border-[#00f2fe]/10 p-4 rounded-2xl flex flex-col sm:flex-row justify-between items-center gap-4 text-left">
            <div className="flex items-center gap-3">
              <Flame className="w-5 h-5 text-neon-cyan animate-bounce" />
              <div>
                <h4 className="text-xs font-bold text-white">Unlock full control over model layers</h4>
                <p className="text-[10px] text-[#8e9bb5]">Upload voice profiles, customize speeds, and download master tracks in the playground.</p>
              </div>
            </div>
            <button 
              onClick={onTryDemo}
              className="w-full sm:w-auto flex items-center justify-center gap-1.5 px-4 py-2 bg-gradient-to-r from-[#00f2fe] to-[#a259ff] text-black font-bold text-xs rounded-xl transition cursor-pointer hover:shadow-lg active:scale-95 whitespace-nowrap"
            >
              Open Studio Workspace
            </button>
          </div>

        </div>
      </section>

      {/* 8. OPEN SOURCE SECTION */}
      <section id="open-source" className="relative z-10 py-24 border-t border-white/5 max-w-[1300px] mx-auto px-6">
        <motion.div
          initial="hidden"
          whileInView="visible"
          viewport={{ once: true, margin: "-100px" }}
          variants={containerVariants}
          className="bg-glass rounded-3xl p-8 md:p-12 border border-white/8 backdrop-blur-2xl shadow-3xl text-left grid grid-cols-1 lg:grid-cols-[1fr_0.8fr] gap-12 items-center"
        >
          <motion.div variants={itemVariants} className="flex flex-col gap-5">
            <span className="text-xs font-bold uppercase tracking-widest text-[#00e673]">100% Free &amp; Open Source</span>
            <h2 className="text-3xl md:text-5xl font-extrabold text-white">Join the VibeVoice developer ecosystem</h2>
            <p className="text-sm text-[#8e9bb5] leading-relaxed">
              We believe conversational voice models should be accessible to all developers. Get instant access to pre-quantized model base checkpoints, training layers, and custom fine-tuning scripts.
            </p>
            
            <div className="flex flex-wrap gap-4 pt-2">
              <a
                href="https://github.com"
                target="_blank"
                rel="noopener noreferrer"
                className="flex items-center gap-2.5 px-5 py-3 rounded-xl bg-white/4 border border-white/8 hover:bg-white/8 hover:border-white/15 text-white font-bold text-xs transition duration-200 cursor-pointer active:scale-95"
              >
                <Github className="w-4 h-4" />
                GitHub Repository
              </a>
              <a
                href="https://huggingface.co"
                target="_blank"
                rel="noopener noreferrer"
                className="flex items-center gap-2.5 px-5 py-3 rounded-xl bg-white/4 border border-white/8 hover:bg-white/8 hover:border-white/15 text-white font-bold text-xs transition duration-200 cursor-pointer active:scale-95"
              >
                <Layers className="w-4 h-4 text-neon-cyan" />
                Hugging Face Base Models
              </a>
            </div>
          </motion.div>

          <motion.div variants={itemVariants} className="bg-black/35 rounded-2xl border border-white/4 p-6 flex flex-col gap-5">
            <h3 className="text-sm font-bold text-white uppercase tracking-wider border-b border-white/5 pb-2 flex items-center gap-2">
              <Cpu className="w-4 h-4 text-[#a259ff]" /> Model Checklist
            </h3>

            <div className="flex flex-col gap-3">
              <div className="flex items-center gap-3">
                <span className="w-2.5 h-2.5 rounded-full bg-[#00e673] shadow-[0_0_6px_#00e673]"></span>
                <span className="text-xs font-semibold text-white">Quantized 1.5B ONNX Checkpoint</span>
              </div>
              <p className="text-[10.5px] text-[#8e9bb5] leading-relaxed pl-5.5">Ideal for deployment on edge systems and low-resource CPU servers.</p>
              
              <div className="flex items-center gap-3 border-t border-dashed border-white/5 pt-3">
                <span className="w-2.5 h-2.5 rounded-full bg-[#00e673] shadow-[0_0_6px_#00e673]"></span>
                <span className="text-xs font-semibold text-white">Full PyTorch Training Recipes</span>
              </div>
              <p className="text-[10.5px] text-[#8e9bb5] leading-relaxed pl-5.5">Prepackaged datasets, gradient-accumulation code, and training layers.</p>

              <div className="flex items-center gap-3 border-t border-dashed border-white/5 pt-3">
                <span className="w-2.5 h-2.5 rounded-full bg-[#00e673] shadow-[0_0_6px_#00e673]"></span>
                <span className="text-xs font-semibold text-white">Zero-Shot Cloning Checkpoints</span>
              </div>
              <p className="text-[10.5px] text-[#8e9bb5] leading-relaxed pl-5.5">Allows robust speaker feature mapping with zero gradient training runs.</p>
            </div>
          </motion.div>
        </motion.div>
      </section>

      {/* 9. TESTIMONIALS SECTION */}
      <section className="relative z-10 py-24 bg-black/30 border-t border-white/5 max-w-[1300px] mx-auto px-6">
        <div className="text-center max-w-[700px] mx-auto mb-16 flex flex-col gap-3">
          <span className="text-xs font-bold uppercase tracking-widest text-[#00f2fe]">User Reviews</span>
          <h2 className="text-3xl md:text-5xl font-extrabold text-white">Loved by Researchers & Creators</h2>
          <p className="text-sm text-[#8e9bb5] leading-relaxed">
            Read how developers are applying VibeVoice AI to rewrite the vocal product stack.
          </p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 text-left">
          
          {/* Review 1 */}
          <div className="bg-glass p-6 rounded-2xl border border-white/5 flex flex-col gap-4 justify-between">
            <p className="text-xs text-[#8e9bb5] leading-relaxed italic">
              "We migrated all virtual co-hosts for our audiobooks to VibeVoice. The zero-shot reference cloning accuracy is astonishing; it matches emotional cadence with negligible distortion."
            </p>
            <div className="flex items-center gap-3 border-t border-white/5 pt-4">
              <div className="w-8 h-8 rounded-full bg-gradient-to-tr from-[#00f2fe] to-[#a259ff] flex items-center justify-center text-[10px] font-bold text-black font-mono select-none">
                AR
              </div>
              <div>
                <h4 className="text-xs font-bold text-white">Dr. Aris Vance</h4>
                <p className="text-[9px] text-[#8e9bb5] uppercase">AI Audio Researcher</p>
              </div>
            </div>
          </div>

          {/* Review 2 */}
          <div className="bg-glass p-6 rounded-2xl border border-white/5 flex flex-col gap-4 justify-between">
            <p className="text-xs text-[#8e9bb5] leading-relaxed italic">
              "Building responsive conversational pipelines is exceptionally straightforward. Standard WebSockets streaming audio chunks under 250ms is exactly what SaaS developers need."
            </p>
            <div className="flex items-center gap-3 border-t border-white/5 pt-4">
              <div className="w-8 h-8 rounded-full bg-gradient-to-tr from-[#a259ff] to-[#ff5c8d] flex items-center justify-center text-[10px] font-bold text-black font-mono select-none">
                KL
              </div>
              <div>
                <h4 className="text-xs font-bold text-white">Karen Lim</h4>
                <p className="text-[9px] text-[#8e9bb5] uppercase">Vocal Startup Founder</p>
              </div>
            </div>
          </div>

          {/* Review 3 */}
          <div className="bg-glass p-6 rounded-2xl border border-white/5 flex flex-col gap-4 justify-between">
            <p className="text-xs text-[#8e9bb5] leading-relaxed italic">
              "The local CPU inference speeds are a massive paradigm shift. Generating multi-speaker podcasts without scaling complex Kubernetes GPU clusters completely changed our billing models."
            </p>
            <div className="flex items-center gap-3 border-t border-white/5 pt-4">
              <div className="w-8 h-8 rounded-full bg-gradient-to-tr from-[#ff5c8d] to-[#ffb703] flex items-center justify-center text-[10px] font-bold text-black font-mono select-none">
                MB
              </div>
              <div>
                <h4 className="text-xs font-bold text-white">Marcus Brody</h4>
                <p className="text-[9px] text-[#8e9bb5] uppercase">Podcast Platform Creator</p>
              </div>
            </div>
          </div>

          {/* Review 4 */}
          <div className="bg-glass p-6 rounded-2xl border border-white/5 flex flex-col gap-4 justify-between">
            <p className="text-xs text-[#8e9bb5] leading-relaxed italic">
              "Being able to review training scripts and inspect decoupled prosody token architectures is brilliant. This model is exceptionally clean and well-structured for university research projects."
            </p>
            <div className="flex items-center gap-3 border-t border-white/5 pt-4">
              <div className="w-8 h-8 rounded-full bg-gradient-to-tr from-[#00f2fe] to-[#00e673] flex items-center justify-center text-[10px] font-bold text-black font-mono select-none">
                SC
              </div>
              <div>
                <h4 className="text-xs font-bold text-white">Sonia Chen</h4>
                <p className="text-[9px] text-[#8e9bb5] uppercase">ML PhD Scholar</p>
              </div>
            </div>
          </div>

        </div>
      </section>

      {/* 10. FAQ SECTION */}
      <section id="faq" className="relative z-10 py-24 border-t border-white/5 max-w-[850px] mx-auto px-6 text-left">
        <div className="text-center max-w-[700px] mx-auto mb-16 flex flex-col gap-3">
          <span className="text-xs font-bold uppercase tracking-widest text-[#a259ff] flex items-center justify-center gap-1.5">
            <HelpCircle className="w-3.5 h-3.5 text-[#a259ff]" /> Common Questions
          </span>
          <h2 className="text-3xl md:text-5xl font-extrabold text-white">Frequently Asked Questions</h2>
          <p className="text-sm text-[#8e9bb5]">Everything you need to know about setting up and running VibeVoice AI.</p>
        </div>

        <div className="flex flex-col gap-4">
          {faqs.map((faq, idx) => (
            <div
              key={idx}
              className="bg-glass rounded-2xl border border-white/5 hover:border-white/10 overflow-hidden transition-colors duration-200"
            >
              <button
                onClick={() => setActiveFaq(activeFaq === idx ? null : idx)}
                className="w-full flex justify-between items-center p-6 text-left font-bold text-white text-sm md:text-base cursor-pointer focus:outline-none"
              >
                <span>{faq.q}</span>
                <ChevronDown className={`w-5 h-5 text-[#8e9bb5] transition-transform duration-300 ${activeFaq === idx ? 'transform rotate-180 text-neon-cyan' : ''}`} />
              </button>

              <AnimatePresence initial={false}>
                {activeFaq === idx && (
                  <motion.div
                    initial={{ height: 0, opacity: 0 }}
                    animate={{ height: "auto", opacity: 1 }}
                    exit={{ height: 0, opacity: 0 }}
                    transition={{ duration: 0.25, ease: "easeInOut" }}
                  >
                    <div className="p-6 pt-0 border-t border-white/4 text-xs md:text-sm text-[#8e9bb5] leading-relaxed">
                      {faq.a}
                    </div>
                  </motion.div>
                )}
              </AnimatePresence>
            </div>
          ))}
        </div>
      </section>

      {/* 11. FINAL CTA SECTION */}
      <section className="relative z-10 py-28 border-t border-white/5 max-w-[1300px] mx-auto px-6 text-center">
        <div className="bg-glass rounded-3xl p-12 md:p-20 border border-white/8 relative overflow-hidden bg-gradient-to-b from-[#101830]/40 to-transparent flex flex-col items-center gap-6 shadow-3xl">
          
          <div className="absolute inset-0 pointer-events-none z-0">
            <div className="absolute w-[450px] h-[450px] rounded-full top-[-20%] left-[-10%] bg-gradient-to-br from-[#00f2fe]/10 to-transparent blur-[120px] animate-pulse"></div>
            <div className="absolute w-[450px] h-[450px] rounded-full bottom-[-20%] right-[-10%] bg-gradient-to-br from-[#a259ff]/10 to-transparent blur-[120px] animate-pulse"></div>
          </div>

          <span className="relative z-10 text-xs font-bold uppercase tracking-widest text-[#00f2fe]">Experience It Live</span>
          <h2 className="relative z-10 text-4xl md:text-6xl font-extrabold text-white tracking-tight max-w-[700px] leading-tight">
            Build the Future of Conversational Voice AI
          </h2>
          <p className="relative z-10 text-sm md:text-base text-[#8e9bb5] max-w-[520px] leading-relaxed">
            Instantly record dynamic speakers, compile realistic podcast dialogues, and master local WAV tracks completely in your browser.
          </p>

          <div className="relative z-10 flex flex-col sm:flex-row gap-4 pt-4 w-full justify-center max-w-[450px]">
            <button
              onClick={onTryDemo}
              className="flex-1 flex items-center justify-center gap-2.5 px-6 py-4 rounded-xl bg-gradient-to-r from-[#00f2fe] to-[#a259ff] text-black font-extrabold text-sm transition duration-200 cursor-pointer hover:shadow-lg active:scale-95 shadow-[0_4px_15px_rgba(0,242,254,0.25)]"
            >
              Get Started
            </button>
            <a
              href="https://github.com"
              target="_blank"
              rel="noopener noreferrer"
              className="flex-1 flex items-center justify-center gap-2.5 px-6 py-4 rounded-xl bg-white/4 border border-white/8 hover:bg-white/8 text-white font-bold text-sm transition duration-200 cursor-pointer active:scale-95"
            >
              Explore GitHub
            </a>
          </div>
        </div>
      </section>

      {/* 12. FOOTER */}
      <footer className="relative z-10 border-t border-white/5 py-12 max-w-[1300px] mx-auto px-6 text-left">
        <div className="grid grid-cols-1 md:grid-cols-4 gap-8 mb-12">
          
          <div className="flex flex-col gap-4">
            <div className="flex items-center gap-3">
              <Sparkles className="w-6 h-6 text-neon-cyan" />
              <span className="font-bold text-white text-base">VibeVoice AI</span>
            </div>
            <p className="text-[11px] text-[#8e9bb5] leading-relaxed max-w-[240px]">
              Open-source neural acoustics model for hyper-realistic conversational turn-taking, dialogue flows, and zero-shot voice cloning.
            </p>
          </div>

          <div className="flex flex-col gap-3">
            <h4 className="text-xs font-bold text-white uppercase tracking-wider">Models &amp; Weights</h4>
            <div className="flex flex-col gap-2 text-xs text-[#8e9bb5]">
              <a href="https://huggingface.co" target="_blank" rel="noopener noreferrer" className="hover:text-neon-cyan transition">VibeVoice-0.5B Checkpoint</a>
              <a href="https://huggingface.co" target="_blank" rel="noopener noreferrer" className="hover:text-neon-cyan transition">Acoustic Tokenizer 24kHz</a>
              <a href="https://huggingface.co" target="_blank" rel="noopener noreferrer" className="hover:text-neon-cyan transition">Prosody Footprint Encoder</a>
            </div>
          </div>

          <div className="flex flex-col gap-3">
            <h4 className="text-xs font-bold text-white uppercase tracking-wider">Resources</h4>
            <div className="flex flex-col gap-2 text-xs text-[#8e9bb5]">
              <a href="https://github.com" target="_blank" rel="noopener noreferrer" className="hover:text-neon-purple transition">Research Publications</a>
              <a href="https://github.com" target="_blank" rel="noopener noreferrer" className="hover:text-neon-purple transition">Inference CLI Recipes</a>
              <a href="https://github.com" target="_blank" rel="noopener noreferrer" className="hover:text-neon-purple transition">Fine-Tuning Documentation</a>
            </div>
          </div>

          <div className="flex flex-col gap-3">
            <h4 className="text-xs font-bold text-white uppercase tracking-wider">Developer Community</h4>
            <div className="flex flex-col gap-2 text-xs text-[#8e9bb5]">
              <a href="https://github.com" target="_blank" rel="noopener noreferrer" className="hover:text-[#ff5c8d] transition">GitHub Ecosystem</a>
              <a href="https://huggingface.co" target="_blank" rel="noopener noreferrer" className="hover:text-[#ff5c8d] transition">Hugging Face Discussions</a>
              <a href="https://github.com" target="_blank" rel="noopener noreferrer" className="hover:text-[#ff5c8d] transition">Contribute Code</a>
            </div>
          </div>

        </div>

        <div className="border-t border-white/5 pt-8 flex flex-col md:flex-row justify-between items-center gap-4 text-xs text-[#8e9bb5]">
          <span>© {new Date().getFullYear()} Microsoft VibeVoice AI. Research-grade open-source software license.</span>
          <div className="flex items-center gap-4">
            <a href="https://github.com" target="_blank" rel="noopener noreferrer" className="hover:text-white transition flex items-center gap-1">
              <Github className="w-3.5 h-3.5" /> GitHub
            </a>
            <span>•</span>
            <span className="flex items-center gap-1 text-[#ff5c8d]">
              Made for AI Researchers <Heart className="w-3.5 h-3.5 fill-current text-[#ff5c8d]" />
            </span>
          </div>
        </div>
      </footer>

    </div>
  );
}