import React from "react";
import { Link } from "react-router-dom";
import { Badge } from "../components/ui/badge";
import { Button } from "../components/ui/button";
import { FeatureCard } from "../components/feature-card";
import { InfoCard } from "../components/info-card";
import { SectionHeader } from "../components/section-header";
import { TestimonialCard } from "../components/testimonial-card";
import {
    GraduationCap,
    Coins,
    Package,
    ShieldCheck,
    Zap,
    Trophy
} from "lucide-react";

export function Home() {
    return (
        <div className="min-h-screen bg-aurora-page text-foreground font-outfit overflow-x-hidden">
            {/* Navigation (Simple) */}
            <nav className="fixed top-0 w-full z-50 glass-card border-b border-border/50 py-4 px-8 flex justify-between items-center">
                <div className="flex items-center gap-2">
                    <div className="w-8 h-8 rounded-full bg-aurora sun-flare" />
                    <span className="text-xl font-bold tracking-tight text-primary">Aurora</span>
                </div>
                <div className="flex items-center gap-6">
                    <Link to="/dashboard" className="text-step--1 font-medium text-muted-foreground hover:text-primary transition-colors">
                        Dashboard
                    </Link>
                    <Link to="/design-system" className="text-step--1 font-medium text-muted-foreground hover:text-primary transition-colors">
                        Design System
                    </Link>

                </div>
            </nav>
            {/* Hero Section */}
            <header className="relative pt-32 pb-20 px-8 text-center max-w-5xl mx-auto space-y-10">
                <Badge variant="glass" className="mb-4 py-1.5 px-4 text-step--1 animate-in zoom-in spin-in-12 duration-700 delay-100">
                    The Ultimate Academic Strategy RPG
                </Badge>

                <h1 className="flex flex-col items-center justify-center text-step-5 font-black tracking-tighter leading-[0.9] text-primary drop-shadow-sm">
                    <span className="animate-in slide-in-from-bottom-8 fade-in duration-700 delay-200 fill-mode-both">
                        Rise to the Top
                    </span>
                    <span className="animate-in slide-in-from-bottom-8 fade-in duration-700 delay-300 fill-mode-both">
                        of the Elite Academy
                    </span>
                </h1>

                <p className="text-step--1 md:text-step-0 text-muted-foreground max-w-2xl mx-auto leading-relaxed animate-in slide-in-from-bottom-4 fade-in duration-700 delay-500 fill-mode-both">
                    Aurora is a competitive academic RPG bot where students are assigned to Classes A through D, vying for supremacy in a high-stakes elite school setting.
                </p>

                <div className="flex flex-wrap justify-center gap-6 pt-6 animate-in zoom-in-50 fade-in duration-700 delay-700 fill-mode-both">
                    <Button className="bg-primary text-primary-foreground active-press font-bold px-6">
                        Join our Server
                    </Button>
                    <Button className="bg-secondary text-primary-foreground active-press font-bold px-6">
                        Explore Documentation
                    </Button>
                </div>
            </header>

            {/* Features Section (Bento Grid) */}
            <section className="px-8 pb-32 max-w-7xl mx-auto">
                <div className="grid grid-cols-1 md:grid-cols-6 lg:grid-cols-4 gap-6">

                    {/* Class System */}
                    <FeatureCard
                        className="md:col-span-3 lg:col-span-2 delay-400"
                        title="Class Constellations"
                        category="Immersion"
                        description="You are assigned to one of the four constellations: Class A, B, C, or D. Work with your classmates to rise through the rankings and avoid expulsion."
                        icon={<GraduationCap className="w-32 h-32 text-primary" />}
                    >
                        <div className="flex gap-2 pt-2">
                            <Badge variant="secondary" className="bg-primary/10 text-primary border-primary/20">Constellation Units</Badge>
                            <Badge variant="secondary" className="bg-primary/10 text-primary border-primary/20">Special Exams</Badge>
                        </div>
                    </FeatureCard>

                    {/* Economy */}
                    <FeatureCard
                        className="md:col-span-3 lg:col-span-1 delay-500"
                        title="Astral Units"
                        category="Commerce"
                        description="Earn Astral Units through exams, tasks, and achievements. Use them to purchase privileges or influence test results."
                        icon={<Coins className="w-20 h-20 text-secondary" />}
                    />

                    {/* Inventory */}
                    <FeatureCard
                        className="md:col-span-2 lg:col-span-1 delay-500"
                        title="Inventory"
                        category="Management"
                        description="Manage vast collections of items, from common materials to legendary artifacts with unique rarities."
                        icon={<Package className="w-20 h-20 text-primary" />}
                    />

                    {/* Exams */}
                    <FeatureCard
                        className="md:col-span-2 lg:col-span-1 delay-600"
                        title="Special Exams"
                        category="Academics"
                        description="Participate in complex written and physical exams. Strategy and cooperation are key to survival."
                    >
                        <div className="space-y-2 pt-2">
                            <div className="h-1.5 w-full bg-secondary/20 rounded-full overflow-hidden">
                                <div className="h-full bg-aurora w-[65%]" />
                            </div>
                            <div className="flex justify-between text-[10px] text-muted-foreground font-bold uppercase tracking-wider">
                                <span>Island Exam</span>
                                <span>Active</span>
                            </div>
                        </div>
                    </FeatureCard>

                    {/* Trading & Social */}
                    <FeatureCard
                        className="md:col-span-3 lg:col-span-2 delay-400"
                        title="Class Constellations"
                        category="Immersion"
                        description="You are assigned to one of the four constellations: Class A, B, C, or D. Work with your classmates to rise through the rankings and avoid expulsion."
                        icon={<GraduationCap className="w-32 h-32 text-primary" />}
                    >
                        <div className="flex gap-2 pt-2">
                            <Badge variant="secondary" className="bg-primary/10 text-primary border-primary/20">Constellation Units</Badge>
                            <Badge variant="secondary" className="bg-primary/10 text-primary border-primary/20">Special Exams</Badge>
                        </div>
                    </FeatureCard>

                    {/* Tech Stack */}
                    <FeatureCard
                        className="md:col-span-6 lg:col-span-1 delay-700 bg-primary/5"
                        title="Modern Core"
                        category="Technology"
                        description="Built for speed and reliability using the most modern tech stack."
                    >
                        <div className="flex flex-wrap gap-2 text-[10px] font-bold">
                            <span className="px-2 py-1 bg-black text-white rounded">BUN 1.0+</span>
                            <span className="px-2 py-1 bg-[#5865F2] text-white rounded">DISCORD.JS</span>
                            <span className="px-2 py-1 bg-[#C5F74F] text-black rounded">DRIZZLE</span>
                            <span className="px-2 py-1 bg-[#336791] text-white rounded">POSTGRES</span>
                        </div>
                    </FeatureCard>
                </div>
            </section>

            {/* Unique Features Section */}
            <section className="px-8 py-20 bg-primary/5 border-y border-border/50">
                <div className="max-w-7xl mx-auto space-y-16">
                    <SectionHeader
                        badge="Why Aurora?"
                        title="More Than Just A Game"
                        description="Aurora isn't just about leveling up. It's a social experiment designed to test your strategic thinking, diplomacy, and resource management."
                    />

                    <div className="grid md:grid-cols-3 gap-8">
                        <InfoCard
                            icon={<Trophy className="w-6 h-6" />}
                            title="Merit-Based Society"
                            description="Your class standing determines your privileges. Earn points to rise, or lose them and face the consequences of falling behind."
                            iconWrapperClassName="bg-primary/20 text-primary"
                        />
                        <InfoCard
                            icon={<ShieldCheck className="w-6 h-6" />}
                            title="Psychological Warfare"
                            description="Form alliances, uncover spies, and execute strategies during Special Exams where trust is the most valuable currency."
                            iconWrapperClassName="bg-secondary/20 text-secondary"
                        />
                        <InfoCard
                            icon={<Zap className="w-6 h-6" />}
                            title="Dynamic World"
                            description="The school rules change based on the actions of the student body. Your decisions shape the future of the academy."
                            iconWrapperClassName="bg-primary/20 text-primary"
                        />
                    </div>
                </div>
            </section>

            {/* Testimonials Section */}
            <section className="px-8 py-32 max-w-7xl mx-auto">
                <SectionHeader
                    badge="Student Voices"
                    title="Overheard at the Academy"
                />

                <div className="grid md:grid-cols-3 gap-6">
                    <TestimonialCard
                        quote="I thought I could just grind my way to the top like other RPGs. I was wrong. The Class D exams forced me to actually talk to people and strategize."
                        author="Alex K."
                        role="Class D Representative"
                        avatarGradient="bg-gradient-to-br from-blue-500 to-purple-500"
                    />
                    <TestimonialCard
                        className="mt-8 md:mt-0"
                        quote="The economy systems are surprisingly deep. Manipulating the market during exam week is honestly the most fun I've had in a Discord server."
                        author="Sarah M."
                        role="Class B Treasurer"
                        avatarGradient="bg-gradient-to-br from-emerald-500 to-teal-500"
                    />
                    <TestimonialCard
                        quote="Aurora creates an environment where 'elite' actually means something. Maintaining Class A status is stressful but incredibly rewarding."
                        author="James R."
                        role="Class A President"
                        avatarGradient="bg-gradient-to-br from-rose-500 to-orange-500"
                    />
                </div>
            </section>

            {/* Footer */}
            <footer className="py-20 px-8 border-t border-border/50 bg-background/50">
                <div className="max-w-7xl mx-auto flex flex-col md:flex-row justify-between items-center gap-8">
                    <div className="flex flex-col items-center md:items-start gap-4">
                        <div className="flex items-center gap-2">
                            <div className="w-6 h-6 rounded-full bg-aurora" />
                            <span className="text-lg font-bold text-primary">Aurora</span>
                        </div>
                        <p className="text-step--1 text-muted-foreground text-center md:text-left">
                            © 2026 Aurora Project. Licensed under MIT.
                        </p>
                    </div>
                    <div className="flex gap-8 text-step--1 font-medium text-muted-foreground">
                        <a href="#" className="hover:text-primary transition-colors">Documentation</a>
                        <a href="#" className="hover:text-primary transition-colors">Support Server</a>
                        <a href="#" className="hover:text-primary transition-colors">Privacy Policy</a>
                    </div>
                </div>
            </footer>
        </div>
    );
}

export default Home;