frontend/src/pages/Landing.tsx

import { useState } from "react";
import { Link } from "react-router-dom";
import { Button } from "@/components/ui/button";
import {
  Mic,
  MessageSquare,
  Zap,
  Code2,
  PanelLeft,
  Server,
  Bot,
  VolumeX,
  Settings,
  Headphones,
  User2,
  Laptop,
  Accessibility,
  Building,
  GraduationCap,
  Heart,
  Linkedin,
  Mail,
  Mic2,
} from "lucide-react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Separator } from "@/components/ui/separator";

const Landing = () => {
  const [isHeroHovered, setIsHeroHovered] = useState(false);

  return (
    <div className="min-h-screen bg-black text-white overflow-x-hidden">
      {/* Header */}
      <header className="container mx-auto py-4 px-4 flex justify-between items-center">
        <div className="flex items-center gap-2">
          <Mic className="h-6 w-6 text-purple-500" />
          <span className="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-400 via-pink-500 to-blue-500">
            VocRT
          </span>
        </div>
      </header>

      {/* Hero Section */}
      <section className="relative container mx-auto px-4 py-20 md:py-32 flex flex-col items-center text-center z-10">
        {/* Background effects */}
        <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[600px] h-[600px] bg-purple-500/20 rounded-full blur-3xl opacity-30 pointer-events-none"></div>
        <div className="absolute bottom-0 left-1/4 w-[300px] h-[300px] bg-blue-500/20 rounded-full blur-3xl opacity-20 pointer-events-none"></div>
        <div className="absolute top-1/3 right-1/4 w-[200px] h-[200px] bg-pink-500/20 rounded-full blur-3xl opacity-15 pointer-events-none"></div>

        <h1
          className="text-4xl md:text-6xl font-bold mb-6 leading-tight bg-clip-text text-transparent bg-gradient-to-r from-white via-purple-200 to-blue-200"
          onMouseEnter={() => setIsHeroHovered(true)}
          onMouseLeave={() => setIsHeroHovered(false)}
        >
          The Privacy First Voice-to-Voice AI Solution with{" "}
          <br className="hidden md:block" />
          <span
            className={`relative inline-block transition-all duration-500 ${
              isHeroHovered ? "text-purple-400" : "text-pink-400"
            }`}
          >
            Interruption Handling And RAG
            {isHeroHovered && (
              <span className="absolute -bottom-2 left-0 w-full h-0.5 bg-gradient-to-r from-purple-500 to-blue-500"></span>
            )}
          </span>
        </h1>

        <p className="text-xl text-gray-300 max-w-3xl mb-10">
          Experience seamless, real-time AI conversations. Bring AI-powered
          voice interactions directly to your website Instantly!
        </p>

        <div className="flex flex-col sm:flex-row gap-4 mb-16">
          <Link to="/chat">
            <Button
              size="lg"
              className="bg-gradient-to-r from-purple-600 to-blue-600 hover:from-purple-700 hover:to-blue-700 text-white"
            >
              <Mic className="mr-2 h-5 w-5" /> Try VocRT
            </Button>
          </Link>
          <a
            href="https://huggingface.co/anuragsingh922/VocRT"
            target="_blank"
            rel="noopener noreferrer"
          >
            <Button
              size="lg"
              variant="outline"
              className="border-white/20 hover:bg-white/5 text-black hover:text-white"
            >
              <Code2 className="mr-2 h-5 w-5" /> View on huggingface
            </Button>
          </a>
        </div>

        {/* Demo visualization */}
        <div className="relative w-full max-w-2xl mx-auto p-6 rounded-xl bg-black/40 backdrop-blur-sm border border-white/10 shadow-[0_0_25px_rgba(139,92,246,0.15)]">
          <div className="absolute -top-8 left-1/2 -translate-x-1/2 w-16 h-16 rounded-full bg-gradient-to-br from-purple-500/20 to-blue-500/20 flex items-center justify-center backdrop-blur-sm border border-white/10">
            <Mic className="h-8 w-8 text-purple-400" />
          </div>

          <div className="space-y-4">
            <div className="flex items-start gap-3">
              <div className="w-8 h-8 rounded-full bg-blue-600 flex items-center justify-center flex-shrink-0">
                <User2 className="h-4 w-4" />
              </div>
              <div className="bg-gray-800/50 rounded-lg p-3 backdrop-blur-sm border border-white/5 max-w-[80%]">
                <p>What can you help me with today?</p>
              </div>
            </div>

            <div className="flex items-start gap-3 justify-end">
              <div className="bg-purple-900/40 rounded-lg p-3 backdrop-blur-sm border border-purple-500/20 max-w-[80%]">
                <p>
                  I can assist with voice interactions, answer questions, and
                  provide real-time responses as you speak!
                </p>
              </div>
              <div className="w-8 h-8 rounded-full bg-gradient-to-r from-purple-600 to-blue-600 flex items-center justify-center flex-shrink-0">
                <Bot className="h-4 w-4" />
              </div>
            </div>

            <div className="flex items-start gap-3">
              <div className="w-8 h-8 rounded-full bg-blue-600 flex items-center justify-center flex-shrink-0">
                <User2 className="h-4 w-4" />
              </div>
              <div className="bg-gray-800/50 rounded-lg p-3 backdrop-blur-sm border border-white/5 max-w-[80%]">
                <p>But what if I need to interrupt you mid-response?</p>
              </div>
            </div>

            <div className="flex items-start gap-3 justify-end">
              <div className="bg-purple-900/40 rounded-lg p-3 backdrop-blur-sm border border-purple-500/20 max-w-[80%]">
                <p>
                  No problem! I'm designed to handle interruptions gracefully.
                  You can cut me off anytime and I'll adjust my response
                  accordingly.
                </p>
              </div>
              <div className="w-8 h-8 rounded-full bg-gradient-to-r from-purple-600 to-blue-600 flex items-center justify-center flex-shrink-0">
                <Bot className="h-4 w-4" />
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Key Features */}
      <section className="container mx-auto px-4 pb-6">
        <div className="text-center mb-16">
          <h2 className="text-3xl md:text-4xl font-bold mb-4 bg-clip-text text-transparent bg-gradient-to-r from-white to-purple-300">
            Why Choose VocRT?
          </h2>
          <p className="text-xl text-gray-400 max-w-3xl mx-auto">
            Advanced voice-to-voice technology offers unique capabilities that
            set us apart.
          </p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {[
            {
              title: "Real-Time Voice Interaction",
              description:
                "Speak naturally and receive instant AI responses without the typical delay of voice assistants.",
              icon: <Mic className="h-6 w-6 text-purple-500" />,
            },
            {
              title: "High-Quality Predefined Voices",
              description:
                "Enjoy clear, natural-sounding responses designed for optimal understanding and user experience.",
              icon: <Headphones className="h-6 w-6 text-blue-500" />,
            },
            {
              title: "Seamless Interruption Handling",
              description:
                "Interrupt in the mid-response, and it will gracefully adjust—just like a human conversation.",
              icon: <VolumeX className="h-6 w-6 text-pink-500" />,
            },
            {
              title: "Effortless Web Integration",
              description:
                "Easily integrate VocRT into any website with React-based UI for smooth, real-time interactions.",
              icon: <Code2 className="h-6 w-6 text-green-500" />,
            },
            {
              title: "Easy to Deploy",
              description:
                "Minimal setup required to integrate voice AI capabilities into your existing websites and applications.",
              icon: <Server className="h-6 w-6 text-yellow-500" />,
            },
            {
              title: "Response Customization",
              description:
                "Tailor the AI's responses to your specific needs with customizable prompts and behavior patterns.",
              icon: <Settings className="h-6 w-6 text-purple-500" />,
            },
            {
              title: "Reliable Offline Support",
              description:
                "Benefit from a robust local Whisper model for accurate speech-to-text even without an internet connection.",
              icon: <Laptop className="h-6 w-6 text-blue-500" />,
            },
            {
              title: "Seamless Conversation Flow",
              description:
                "Enjoy smooth and natural interactions with advanced prompt handling and contextual understanding.",
              icon: <MessageSquare className="h-6 w-6 text-yellow-500" />,
            },
            {
              title: "Intelligent Document Insights",
              description:
                "Leverage Retrieval-Augmented Generation to get precise, document-based responses tailored to your needs.",
              icon: <PanelLeft className="h-6 w-6 text-pink-500" />,
            },
          ].map((feature, index) => (
            <Card
              key={index}
              className="bg-gray-900/50 border-white/5 hover:border-purple-500/30 transition-all duration-300 hover:shadow-[0_0_15px_rgba(139,92,246,0.15)]"
            >
              <CardHeader>
                <div className="flex items-center gap-3">
                  {feature.icon}
                  <CardTitle className="text-xl">{feature.title}</CardTitle>
                </div>
              </CardHeader>
              <CardContent>
                <p className="text-gray-400">{feature.description}</p>
              </CardContent>
            </Card>
          ))}
        </div>
      </section>

      {/* Use Cases */}
      <section className="bg-gradient-to-b from-black to-purple-950/20 py-20">
        <div className="container mx-auto px-4">
          <div className="text-center mb-16">
            <h2 className="text-3xl md:text-4xl font-bold mb-4 bg-clip-text text-transparent bg-gradient-to-r from-white to-purple-300">
              Use Cases
            </h2>
            <p className="text-xl text-gray-400 max-w-3xl mx-auto">
              VocRT is incredibly versatile and can transform how users interact
              with your digital products.
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {[
              {
                title: "AI Voice Assistants",
                description:
                  "Power customer support, virtual agents, and interactive voice bots with natural conversation flow.",
                icon: <Bot className="h-10 w-10 text-purple-500" />,
              },
              {
                title: "Accessibility Tools",
                description:
                  "Enhance web accessibility for visually impaired users with voice-based navigation and interaction.",
                icon: <Accessibility className="h-10 w-10 text-blue-500" />,
              },
              {
                title: "Real-Time AI Assistants",
                description:
                  "Create dynamic, interruption-friendly AI agents that can assist with complex tasks and inquiries.",
                icon: <Zap className="h-10 w-10 text-yellow-500" />,
              },
              {
                title: "Automated Customer Support",
                description:
                  "Handle voice queries with smooth dialogue management and efficient resolution paths.",
                icon: <Building className="h-10 w-10 text-green-500" />,
              },
              {
                title: "Interactive Voice Applications",
                description:
                  "Improve education, healthcare, and productivity apps with voice-enabled features.",
                icon: <GraduationCap className="h-10 w-10 text-pink-500" />,
              },
              {
                title: "Personal Voice Assistants",
                description:
                  "Build customized AI companions that learn user preferences and provide personalized assistance.",
                icon: <User2 className="h-10 w-10 text-purple-500" />,
              },
            ].map((useCase, index) => (
              <div
                key={index}
                className="bg-black/40 backdrop-blur-sm rounded-xl p-6 border border-white/10 hover:border-purple-500/30 transition-all duration-300"
              >
                <div className="w-16 h-16 rounded-full bg-gray-800 flex items-center justify-center mb-6">
                  {useCase.icon}
                </div>
                <h3 className="text-xl font-semibold mb-3">{useCase.title}</h3>
                <p className="text-gray-400">{useCase.description}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Future Roadmap */}
      <section className="container mx-auto px-4 py-20">
        <div className="text-center mb-16">
          <h2 className="text-3xl md:text-4xl font-bold mb-4 bg-clip-text text-transparent bg-gradient-to-r from-white to-purple-300">
            Future Roadmap
          </h2>
          <p className="text-xl text-gray-400 max-w-3xl mx-auto">
            We're constantly innovating to make VocRT even better. Here's what's
            coming next:
          </p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-4xl mx-auto">
          {[
            {
              title: "Voice Change",
              description: "Change voice during an active conversation.",
              icon: <Mic2 className="h-6 w-6 text-green-500" />,
            },
            {
              title: "Voice Customization",
              description:
                "Select voices, upload custom prompts, and enhance personalization for your specific use case.",
              icon: <Headphones className="h-6 w-6 text-purple-500" />,
            },
          ].map((roadmap, index) => (
            <div
              key={index}
              className="flex items-start gap-4 bg-gray-900/30 p-6 rounded-lg border border-white/5"
            >
              <div className="w-12 h-12 rounded-full bg-gray-800 flex items-center justify-center flex-shrink-0">
                {roadmap.icon}
              </div>
              <div>
                <h3 className="text-xl font-semibold mb-2">{roadmap.title}</h3>
                <p className="text-gray-400">{roadmap.description}</p>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* Integration */}
      <section className="bg-gradient-to-b from-black to-blue-950/20 py-20">
        <div className="container mx-auto px-4">
          <div className="text-center mb-16">
            <h2 className="text-3xl md:text-4xl font-bold mb-4 bg-clip-text text-transparent bg-gradient-to-r from-white to-blue-300">
              Integration Made Simple
            </h2>
            <p className="text-xl text-gray-400 max-w-3xl mx-auto">
              VocRT can be seamlessly integrated into various platforms and
              environments.
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12">
            <Card className="bg-black/40 border-white/10">
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <Code2 className="h-5 w-5 text-blue-500" />
                  Web Applications
                </CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-gray-400">
                  Integrate VocRT directly into any website with minimal
                  configuration and setup.
                </p>
              </CardContent>
            </Card>

            <Card className="bg-black/40 border-white/10">
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <Bot className="h-5 w-5 text-purple-500" />
                  Existing Chatbots
                </CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-gray-400">
                  Enhance your existing chatbot solutions with real-time voice
                  capabilities and interruption handling.
                </p>
              </CardContent>
            </Card>

            <Card className="bg-black/40 border-white/10">
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <Laptop className="h-5 w-5 text-green-500" />
                  Custom Applications
                </CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-gray-400">
                  Build custom voice-enabled applications for specific business
                  needs and use cases.
                </p>
              </CardContent>
            </Card>
          </div>

          <div className="text-center">
            <p className="text-xl text-gray-300 mb-6">
              Ready to transform your user experience with voice AI?
            </p>
            <Link to="/chat">
              <Button
                size="lg"
                className="bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white"
              >
                Try VocRT
              </Button>
            </Link>
          </div>
        </div>
      </section>

      {/* Tech Stack */}
      <section className="container mx-auto px-4 py-20">
        <div className="text-center mb-12">
          <h2 className="text-3xl md:text-4xl font-bold mb-4 bg-clip-text text-transparent bg-gradient-to-r from-white to-purple-300">
            Powered By Advanced Technology
          </h2>
          <p className="text-xl text-gray-400 max-w-3xl mx-auto">
            VocRT leverages cutting-edge technologies to deliver exceptional
            voice interaction experiences.
          </p>
        </div>

        <div className="flex flex-wrap justify-center gap-4 max-w-4xl mx-auto">
          {[
            "Python",
            "Node.js",
            "React",
            "Express.js",
            "PyTorch",
            "Transformers",
            "eSpeak",
            "Whisper",
            "OpenAI",
            "Gemini",
            "gRPC",
          ].map((tech, index) => (
            <div
              key={index}
              className="px-6 py-3 bg-gray-900/60 rounded-full border border-white/10 text-white"
            >
              {tech}
            </div>
          ))}
        </div>
      </section>

      {/* Call To Action */}
      <section className="relative py-20">
        <div className="absolute inset-0 bg-gradient-to-r from-purple-900/20 to-blue-900/20 pointer-events-none"></div>

        <div className="container mx-auto px-4 relative z-10">
          <div className="max-w-3xl mx-auto text-center bg-black/50 backdrop-blur-md p-8 md:p-12 rounded-2xl border border-white/10 shadow-[0_0_30px_rgba(139,92,246,0.2)]">
            <h2 className="text-3xl md:text-4xl font-bold mb-6 bg-clip-text text-transparent bg-gradient-to-r from-white via-purple-200 to-blue-200">
              Transform Your Voice Experience Today
            </h2>
            <p className="text-xl text-gray-300 mb-8">
              Join us in revolutionizing voice interaction with AI. Experience
              the future of conversational technology.
            </p>

            <div className="flex flex-col sm:flex-row justify-center gap-4">
              <Link to="/chat">
                <Button
                  size="lg"
                  className="bg-gradient-to-r from-purple-600 to-blue-600 hover:from-purple-700 hover:to-blue-700 text-white"
                >
                  <Mic className="mr-2 h-5 w-5" /> Try VocRT
                </Button>
              </Link>
              <Link to="/demo">
                <Button
                  size="lg"
                  variant="outline"
                  className="border-white/20 hover:bg-white/5 text-black hover:text-white"
                >
                  Demo
                </Button>
              </Link>
            </div>
          </div>
        </div>
      </section>

      {/* Creator Info */}
      <section className="container mx-auto px-4 py-12">
        <div className="max-w-3xl mx-auto text-center bg-gradient-to-r from-purple-900/10 to-blue-900/10 p-8 rounded-xl border border-white/10">
          <h2 className="text-2xl md:text-3xl font-bold mb-6 text-white">
            Created by Anurag Singh
          </h2>
          <div className="flex flex-col md:flex-row justify-center items-center gap-4 text-gray-300">
            <a
              href="https://www.linkedin.com/in/anuragsingh922/"
              target="_blank"
              rel="noopener noreferrer"
              className="flex items-center gap-2 hover:text-purple-400 transition-colors"
            >
              <Linkedin className="h-5 w-5" /> LinkedIn Profile
            </a>
            <div className="hidden md:block text-white/20">|</div>
            <a
              href="mailto:[email protected]"
              className="flex items-center gap-2 hover:text-purple-400 transition-colors"
            >
              <Mail className="h-5 w-5" /> [email protected]
            </a>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="bg-black/80 backdrop-blur-md border-t border-white/10 py-12">
        <div className="container mx-auto px-4">
          <div className="flex flex-col md:flex-row justify-between items-center">
            <div className="flex items-center gap-2 mb-6 md:mb-0">
              <Mic className="h-5 w-5 text-purple-500" />
              <span className="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-400 to-blue-500">
                VocRT
              </span>
            </div>

            <div className="flex gap-8 text-gray-400">
              <a
                href="https://huggingface.co/anuragsingh922/VocRT"
                target="_blank"
                className="hover:text-white transition-colors"
              >
                HuggingFace
              </a>
              <a
                href="https://hub.docker.com/r/anuragsingh922/vocrt"
                target="_blank"
                className="hover:text-white transition-colors"
              >
                Docker
              </a>
            </div>
          </div>

          <Separator className="my-8 bg-white/10" />

          <div className="flex flex-col md:flex-row justify-between items-center text-gray-500 text-sm">
            <p>© {new Date().getFullYear()} VocRT. All rights reserved.</p>
            <div className="flex items-center gap-1 mt-4 md:mt-0">
              Made with <Heart className="h-4 w-4 text-red-500" /> by Anurag
              Singh
            </div>
          </div>
        </div>
      </footer>
    </div>
  );
};

export default Landing;