"use client";

import { motion } from 'framer-motion';
import { ArrowRight, Crosshair, Brain, BellRing, Ghost } from 'lucide-react';
import Link from 'next/link';
import GlitchText from '@/components/GlitchText';

const features = [
  {
    icon: Crosshair,
    title: "Always-On Radar",
    description: "Monitors dozens of auction sites simultaneously. The engine never sleeps, so you never miss an ending lot.",
  },
  {
    icon: Brain,
    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.",
  },
  {
    icon: BellRing,
    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.",
  },
  {
    icon: Ghost,
    title: "Stealth Engine",
    description: "Human-like browsing algorithms bypass standard detection, ensuring reliable intelligence gathering from any platform.",
  }
];

export default function LandingPage() {
  return (
    <div className="relative overflow-hidden w-full">
      {/* Hero Section */}
      <section className="container mx-auto px-4 pt-32 pb-24 text-center relative z-10">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8 }}
          className="max-w-4xl mx-auto"
        >
          <div className="mb-6 inline-flex items-center gap-2 px-3 py-1 rounded-full bg-primary/10 border border-primary/30 text-primary text-sm font-mono uppercase">
            <span className="w-2 h-2 rounded-full bg-primary animate-pulse"></span>
            System v4 Deployed
          </div>
          <h1 className="text-5xl md:text-7xl font-bold mb-6 tracking-tight">
            The AI Sniper That <br />
            <span className="text-primary neon-text-primary"><GlitchText text="NEVER SLEEPS" /></span>
          </h1>
          <p className="text-xl md:text-2xl text-muted-foreground mb-10 max-w-2xl mx-auto">
            BidWraith watches every global auction site, scores every lot with AI, and alerts you the moment a real deal drops.
          </p>
          
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <Link href="/dashboard" className="inline-flex items-center justify-center gap-2 bg-primary hover:bg-primary/90 text-primary-foreground px-8 py-4 rounded-md font-bold text-lg transition-all shadow-[0_0_20px_rgba(0,255,136,0.3)] hover:shadow-[0_0_30px_rgba(0,255,136,0.5)]">
              Initialize Console <ArrowRight className="w-5 h-5" />
            </Link>
            <Link href="#features" className="inline-flex items-center justify-center gap-2 bg-card hover:bg-card/80 border border-border px-8 py-4 rounded-md font-bold text-lg transition-colors">
              Read Briefing
            </Link>
          </div>
        </motion.div>
      </section>

      {/* Stats Strip */}
      <section className="border-y border-border bg-card/50 backdrop-blur-sm py-8 relative z-10">
        <div className="container mx-auto px-4">
          <div className="grid grid-cols-2 md:grid-cols-4 gap-8 text-center font-mono">
            <div>
              <div className="text-3xl font-bold text-primary mb-1">24/7</div>
              <div className="text-sm text-muted-foreground">Uptime</div>
            </div>
            <div>
              <div className="text-3xl font-bold text-accent mb-1">&lt; 1s</div>
              <div className="text-sm text-muted-foreground">Alert Latency</div>
            </div>
            <div>
              <div className="text-3xl font-bold text-primary mb-1">42</div>
              <div className="text-sm text-muted-foreground">API Endpoints</div>
            </div>
            <div>
              <div className="text-3xl font-bold text-accent mb-1">100%</div>
              <div className="text-sm text-muted-foreground">Stealth Rate</div>
            </div>
          </div>
        </div>
      </section>

      {/* Features Section */}
      <section id="features" className="py-24 relative z-10">
        <div className="container mx-auto px-4">
          <div className="text-center mb-16">
            <h2 className="text-3xl md:text-5xl font-bold mb-4">Core <span className="text-primary">Directives</span></h2>
            <p className="text-muted-foreground text-lg max-w-2xl mx-auto">Advanced architecture designed to give you an unfair advantage in the global market.</p>
          </div>
          
          <div className="grid md:grid-cols-2 gap-8 max-w-5xl mx-auto">
            {features.map((feature, idx) => (
              <motion.div
                key={idx}
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ delay: idx * 0.1 }}
                className="p-8 rounded-xl bg-card border border-border hover:border-primary/50 transition-colors group relative overflow-hidden"
              >
                <div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-transparent via-primary/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity" />
                <feature.icon className="w-12 h-12 text-primary mb-6" />
                <h3 className="text-2xl font-bold mb-3">{feature.title}</h3>
                <p className="text-muted-foreground leading-relaxed">
                  {feature.description}
                </p>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* Diagram Section */}
      <section className="py-24 bg-card/30 border-t border-border relative z-10">
         <div className="container mx-auto px-4 text-center">
            <h2 className="text-3xl md:text-4xl font-bold mb-12">The <span className="text-accent">Execution</span> Pipeline</h2>
            <div className="flex flex-col md:flex-row items-center justify-center gap-4 md:gap-8 text-lg font-mono">
              <div className="p-4 border border-border rounded bg-card w-48 shadow-[0_0_15px_rgba(251,191,36,0.1)]">Targets & Rules</div>
              <ArrowRight className="w-6 h-6 text-muted-foreground rotate-90 md:rotate-0" />
              <div className="p-4 border border-primary/50 rounded bg-primary/5 w-48 shadow-[0_0_15px_rgba(0,255,136,0.2)] text-primary">Ghost Scraper</div>
              <ArrowRight className="w-6 h-6 text-muted-foreground rotate-90 md:rotate-0" />
              <div className="p-4 border border-border rounded bg-card w-48 shadow-[0_0_15px_rgba(251,191,36,0.1)]">AI Analysis</div>
              <ArrowRight className="w-6 h-6 text-muted-foreground rotate-90 md:rotate-0" />
              <div className="p-4 border border-accent/50 rounded bg-accent/5 w-48 shadow-[0_0_15px_rgba(251,191,36,0.2)] text-accent">Real-time Alerts</div>
            </div>
         </div>
      </section>

      {/* Footer CTA */}
      <section className="py-32 text-center relative z-10">
        <h2 className="text-4xl md:text-5xl font-bold mb-8">Ready to dominate the market?</h2>
        <Link href="/dashboard" className="inline-flex items-center gap-2 text-primary hover:text-accent font-mono text-xl transition-colors">
          &gt; ACCESS_SYSTEM_NOW <span className="animate-pulse">_</span>
        </Link>
      </section>
    </div>
  );
}