"use client";

import { motion, useScroll, useTransform } from 'framer-motion';
import { Rocket, Target, Zap, ShieldCheck, Cpu, ChevronRight } from 'lucide-react';
import Link from 'next/link';
import dynamic from 'next/dynamic';

const Hero3D = dynamic(() => import('@/components/Hero3D'), { ssr: false });

const features = [
  {
    icon: Target,
    title: "Always-On Radar",
    description: "Monitors dozens of auction sites simultaneously. The engine never sleeps, so you never miss an ending lot.",
    color: "text-blue-500",
    bg: "bg-blue-500/10"
  },
  {
    icon: Cpu,
    title: "AI-Grade Filtering",
    description: "External LLMs score and filter every lot against your precise custom targets. We drop the noise and show only true deals.",
    color: "text-purple-500",
    bg: "bg-purple-500/10"
  },
  {
    icon: Zap,
    title: "Real-Time Comms",
    description: "Instant alerts delivered via Telegram, Discord, or Email the minute a high-value lot appears or is about to close.",
    color: "text-yellow-500",
    bg: "bg-yellow-500/10"
  },
  {
    icon: ShieldCheck,
    title: "Stealth Engine",
    description: "Human-like browsing algorithms bypass standard detection, ensuring reliable intelligence gathering from any platform.",
    color: "text-green-500",
    bg: "bg-green-500/10"
  }
];

export default function LandingPage() {
  const { scrollYProgress } = useScroll();
  const yHero = useTransform(scrollYProgress, [0, 1], ["0%", "50%"]);
  const opacityHero = useTransform(scrollYProgress, [0, 0.2], [1, 0]);

  return (
    <div className="relative w-full min-h-screen bg-background text-foreground overflow-hidden font-sans">
      
      {/* Dynamic 3D Background */}
      <div className="fixed inset-0 w-full h-[100vh] pointer-events-none -z-20">
        <Hero3D />
      </div>

      {/* Dynamic Background Blob Elements */}
      <div className="fixed top-0 left-0 w-full h-full overflow-hidden -z-10 opacity-40 pointer-events-none mix-blend-screen">
         <motion.div 
           animate={{ 
             scale: [1, 1.2, 1],
             rotate: [0, 90, 0],
           }}
           transition={{ duration: 20, repeat: Infinity, ease: "linear" }}
           className="absolute top-[-20%] left-[-10%] w-[50%] h-[50%] bg-primary/20 rounded-full blur-[140px]" 
         />
         <motion.div 
           animate={{ 
             scale: [1, 1.5, 1],
             rotate: [0, -90, 0],
           }}
           transition={{ duration: 25, repeat: Infinity, ease: "linear" }}
           className="absolute bottom-[-10%] right-[-10%] w-[50%] h-[50%] bg-accent/20 rounded-full blur-[140px]" 
         />
      </div>

      {/* Hero Section */}
      <section className="container mx-auto px-6 pt-32 pb-32 text-center relative z-10 min-h-[90vh] flex flex-col justify-center">
        <motion.div
          style={{ y: yHero, opacity: opacityHero }}
          initial={{ opacity: 0, y: 50, scale: 0.9 }}
          animate={{ opacity: 1, y: 0, scale: 1 }}
          transition={{ duration: 1, type: "spring" as const, bounce: 0.4 }}
          className="max-w-5xl mx-auto flex flex-col items-center backdrop-blur-sm bg-background/30 p-12 rounded-[3rem] border border-white/10 shadow-2xl"
        >
          <motion.div 
            initial={{ opacity: 0, scale: 0 }}
            animate={{ opacity: 1, scale: 1 }}
            transition={{ delay: 0.2, type: "spring" as const }}
            className="mb-8 inline-flex items-center gap-3 px-6 py-2 rounded-full bg-secondary/80 backdrop-blur-md text-primary font-bold text-sm shadow-[0_0_30px_rgba(139,92,246,0.3)] border border-primary/20"
          >
            <span className="flex h-3 w-3 relative">
              <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75"></span>
              <span className="relative inline-flex rounded-full h-3 w-3 bg-primary"></span>
            </span>
            System v5 Neural Engine Online
          </motion.div>
          <h1 className="text-6xl md:text-8xl font-black mb-8 tracking-tighter leading-[1.1]">
            The AI Sniper That <br />
            <span className="text-transparent bg-clip-text bg-gradient-to-br from-primary via-accent to-blue-500 drop-shadow-sm">Never Sleeps</span>
          </h1>
          <p className="text-xl md:text-2xl text-muted-foreground mb-12 max-w-3xl mx-auto leading-relaxed font-medium">
            BidWraith watches every global auction site, scores every lot with deep AI, and alerts you the moment a real deal drops. Get the ultimate edge.
          </p>
          
          <div className="flex flex-col sm:flex-row gap-6 justify-center w-full sm:w-auto">
            <Link href="/dashboard" className="group relative inline-flex items-center justify-center gap-3 bg-primary text-primary-foreground px-10 py-5 rounded-2xl font-bold text-xl transition-all hover:scale-105 shadow-[0_0_40px_rgba(139,92,246,0.5)] w-full sm:w-auto overflow-hidden">
              <motion.span 
                className="absolute inset-0 bg-white/20"
                initial={{ x: "-100%" }}
                whileHover={{ x: "100%" }}
                transition={{ duration: 0.6, ease: "easeInOut" }}
              />
              <Rocket className="w-6 h-6 group-hover:-translate-y-1 group-hover:translate-x-1 transition-transform" />
              Initialize Console
            </Link>
            <Link href="#features" className="group inline-flex items-center justify-center gap-3 bg-secondary/80 backdrop-blur-md hover:bg-secondary text-foreground border border-border px-10 py-5 rounded-2xl font-bold text-xl transition-all w-full sm:w-auto">
              Explore Tech
              <ChevronRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
            </Link>
          </div>
        </motion.div>
      </section>

      {/* Stats Strip with Scroll Reveal */}
      <section className="py-12 relative z-10">
        <motion.div 
          initial={{ opacity: 0, y: 50 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true, margin: "-100px" }}
          transition={{ duration: 0.8 }}
          className="container mx-auto px-6"
        >
          <div className="bg-secondary/60 backdrop-blur-2xl border border-white/10 rounded-3xl p-8 shadow-2xl relative overflow-hidden">
            <div className="absolute inset-0 bg-gradient-to-r from-primary/10 via-transparent to-accent/10 pointer-events-none" />
            <div className="grid grid-cols-2 md:grid-cols-4 gap-8 text-center relative z-10">
              {[
                { label: 'Uptime', value: '24/7', color: 'text-primary' },
                { label: 'Alert Latency', value: '< 1s', color: 'text-accent' },
                { label: 'API Endpoints', value: '42', color: 'text-blue-500' },
                { label: 'Stealth Rate', value: '100%', color: 'text-green-500' }
              ].map((stat, i) => (
                <motion.div 
                  key={i} 
                  whileHover={{ scale: 1.1 }}
                  className="flex flex-col items-center justify-center p-4 cursor-default"
                >
                  <motion.div 
                    initial={{ scale: 0 }}
                    whileInView={{ scale: 1 }}
                    viewport={{ once: true }}
                    transition={{ type: "spring" as const, delay: i * 0.1 }}
                    className={`text-5xl md:text-6xl font-black mb-2 drop-shadow-md ${stat.color}`}
                  >
                    {stat.value}
                  </motion.div>
                  <div className="text-sm md:text-base font-bold text-muted-foreground uppercase tracking-widest">{stat.label}</div>
                </motion.div>
              ))}
            </div>
          </div>
        </motion.div>
      </section>

      {/* Features Section */}
      <section id="features" className="py-32 relative z-10">
        <div className="container mx-auto px-6">
          <motion.div 
            initial={{ opacity: 0, scale: 0.9 }}
            whileInView={{ opacity: 1, scale: 1 }}
            viewport={{ once: true }}
            className="text-center mb-24"
          >
            <h2 className="text-5xl md:text-7xl font-extrabold mb-6 tracking-tight">Core <span className="text-transparent bg-clip-text bg-gradient-to-r from-primary to-accent">Capabilities</span></h2>
            <p className="text-muted-foreground text-2xl max-w-3xl mx-auto font-medium">Advanced architecture designed to give you an unfair advantage in the global market.</p>
          </motion.div>
          
          <div className="grid md:grid-cols-2 gap-10 max-w-6xl mx-auto">
            {features.map((feature, idx) => (
              <motion.div
                key={idx}
                initial={{ opacity: 0, y: 50, rotateX: -10 }}
                whileInView={{ opacity: 1, y: 0, rotateX: 0 }}
                viewport={{ once: true, margin: "-100px" }}
                transition={{ duration: 0.6, delay: idx * 0.1, type: "spring" as const, bounce: 0.3 }}
                whileHover={{ y: -10, scale: 1.02 }}
                className="p-12 rounded-[2.5rem] bg-card/80 backdrop-blur-xl border border-white/5 hover:border-primary/30 transition-all shadow-xl hover:shadow-2xl group relative overflow-hidden"
              >
                <div className={`absolute top-0 right-0 w-64 h-64 ${feature.bg} rounded-full blur-[80px] -z-10 group-hover:scale-150 transition-transform duration-700`} />
                <div className={`w-24 h-24 rounded-3xl ${feature.bg} flex items-center justify-center mb-8 group-hover:scale-110 group-hover:rotate-6 transition-transform duration-300 shadow-inner`}>
                  <feature.icon className={`w-12 h-12 ${feature.color}`} />
                </div>
                <h3 className="text-3xl font-black mb-4 tracking-tight">{feature.title}</h3>
                <p className="text-muted-foreground text-xl leading-relaxed font-medium">
                  {feature.description}
                </p>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* Footer CTA with 3D feel */}
      <section className="py-32 text-center relative z-10 overflow-hidden">
        <motion.div 
          initial={{ opacity: 0, y: 50 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          className="container mx-auto px-6"
        >
          <div className="relative bg-gradient-to-br from-primary/30 via-background to-accent/30 border border-white/10 pt-32 pb-24 rounded-[4rem] shadow-2xl overflow-hidden backdrop-blur-md">
            <motion.div 
              animate={{ rotate: 360 }} 
              transition={{ duration: 50, repeat: Infinity, ease: "linear" }}
              className="absolute top-[-50%] left-[-20%] w-[100%] h-[150%] bg-[url('https://grainy-gradients.vercel.app/noise.svg')] opacity-20 mix-blend-overlay pointer-events-none" 
            />
            
            <div className="relative z-10">
              <h2 className="text-6xl md:text-8xl font-black mb-12 tracking-tight drop-shadow-xl">Ready to dominate?</h2>
              <Link href="/dashboard" className="group inline-flex items-center gap-4 bg-foreground text-background font-bold text-2xl px-14 py-7 rounded-full transition-all shadow-[0_20px_50px_rgba(0,0,0,0.3)] hover:shadow-[0_20px_50px_rgba(139,92,246,0.5)] hover:-translate-y-2">
                Start Sniping Now
                <Rocket className="w-8 h-8 group-hover:translate-x-2 group-hover:-translate-y-2 transition-transform" />
              </Link>
            </div>
          </div>
        </motion.div>
      </section>
    </div>
  );
}