import Link from 'next/link';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { BookOpen, TrendingUp, Trophy, Target } from 'lucide-react';

export default function HomePage() {
  return (
    <div className="flex min-h-screen flex-col">
      {/* Hero Section */}
      <section className="relative overflow-hidden bg-gradient-to-b from-primary/10 to-background px-6 py-24 sm:py-32">
        <div className="container mx-auto max-w-6xl">
          <div className="mx-auto max-w-3xl text-center">
            <h1 className="text-4xl font-bold tracking-tight sm:text-6xl">
              Math Platform
            </h1>
            <p className="mt-6 text-lg leading-8 text-muted-foreground sm:text-xl">
              Domina el Álgebra Lineal con nuestra plataforma interactiva de aprendizaje.
              Ejercicios prácticos, ejemplos detallados y ranking competitivo.
            </p>
            <div className="mt-10 flex items-center justify-center gap-x-6">
              <Button asChild size="lg">
                <Link href="/register">Comenzar Gratis</Link>
              </Button>
              <Button asChild variant="outline" size="lg">
                <Link href="/login">Iniciar Sesión</Link>
              </Button>
            </div>
          </div>
        </div>
      </section>

      {/* Features Section */}
      <section className="px-6 py-24 sm:py-32">
        <div className="container mx-auto max-w-6xl">
          <div className="mx-auto max-w-2xl text-center">
            <h2 className="text-3xl font-bold tracking-tight sm:text-4xl">
              Características Principales
            </h2>
            <p className="mt-6 text-lg leading-8 text-muted-foreground">
              Todo lo que necesitas para dominar el Álgebra Lineal
            </p>
          </div>

          <div className="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-6 sm:mt-20 lg:max-w-none lg:grid-cols-3">
            {/* Feature 1 */}
            <Card className="transition-all hover:shadow-lg">
              <CardHeader>
                <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
                  <BookOpen className="h-6 w-6 text-primary" />
                </div>
                <CardTitle>3 Módulos Completos</CardTitle>
                <CardDescription>
                  Fundamentos, Sistemas y Espacios Vectoriales, y Aplicaciones de Optimización
                </CardDescription>
              </CardHeader>
              <CardContent>
                <ul className="space-y-2 text-sm text-muted-foreground">
                  <li>• Vectores y Matrices</li>
                  <li>• Sistemas de Ecuaciones</li>
                  <li>• Programación Lineal</li>
                </ul>
              </CardContent>
            </Card>

            {/* Feature 2 */}
            <Card className="transition-all hover:shadow-lg">
              <CardHeader>
                <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
                  <Target className="h-6 w-6 text-primary" />
                </div>
                <CardTitle>Ejercicios Interactivos</CardTitle>
                <CardDescription>
                  Práctica con ejercicios generados por IA y validación instantánea
                </CardDescription>
              </CardHeader>
              <CardContent>
                <ul className="space-y-2 text-sm text-muted-foreground">
                  <li>• Generación automática</li>
                  <li>• Feedback inmediato</li>
                  <li>• Dificultad adaptativa</li>
                </ul>
              </CardContent>
            </Card>

            {/* Feature 3 */}
            <Card className="transition-all hover:shadow-lg">
              <CardHeader>
                <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
                  <TrendingUp className="h-6 w-6 text-primary" />
                </div>
                <CardTitle>Ranking Competitivo</CardTitle>
                <CardDescription>
                  Compite con otros estudiantes y sube en el leaderboard
                </CardDescription>
              </CardHeader>
              <CardContent>
                <ul className="space-y-2 text-sm text-muted-foreground">
                  <li>• Ranking global y por módulo</li>
                  <li>• Sistema de puntos</li>
                  <li>• Logros y badges</li>
                </ul>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

      {/* Modules Preview */}
      <section className="bg-muted/30 px-6 py-24 sm:py-32">
        <div className="container mx-auto max-w-6xl">
          <div className="mx-auto max-w-2xl text-center">
            <h2 className="text-3xl font-bold tracking-tight sm:text-4xl">
              Módulos de Aprendizaje
            </h2>
            <p className="mt-6 text-lg leading-8 text-muted-foreground">
              Estructurado para un aprendizaje progresivo y efectivo
            </p>
          </div>

          <div className="mx-auto mt-16 grid max-w-5xl grid-cols-1 gap-8 lg:grid-cols-3">
            {/* Module 1 */}
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <span className="flex h-8 w-8 items-center justify-center rounded-full bg-primary text-primary-foreground text-sm font-bold">
                    1
                  </span>
                  Fundamentos
                </CardTitle>
                <CardDescription>Álgebra Lineal Básica</CardDescription>
              </CardHeader>
              <CardContent>
                <p className="text-sm text-muted-foreground">
                  Vectores, matrices, operaciones básicas y propiedades fundamentales.
                </p>
              </CardContent>
            </Card>

            {/* Module 2 */}
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <span className="flex h-8 w-8 items-center justify-center rounded-full bg-primary text-primary-foreground text-sm font-bold">
                    2
                  </span>
                  Sistemas
                </CardTitle>
                <CardDescription>Ecuaciones y Espacios</CardDescription>
              </CardHeader>
              <CardContent>
                <p className="text-sm text-muted-foreground">
                  Sistemas de ecuaciones lineales y espacios vectoriales.
                </p>
              </CardContent>
            </Card>

            {/* Module 3 */}
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <span className="flex h-8 w-8 items-center justify-center rounded-full bg-primary text-primary-foreground text-sm font-bold">
                    3
                  </span>
                  Aplicaciones
                </CardTitle>
                <CardDescription>Optimización</CardDescription>
              </CardHeader>
              <CardContent>
                <p className="text-sm text-muted-foreground">
                  Programación lineal y aplicaciones del mundo real.
                </p>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="px-6 py-24 sm:py-32">
        <div className="container mx-auto max-w-4xl">
          <Card className="border-primary/20 bg-primary/5">
            <CardContent className="p-12 text-center">
              <Trophy className="mx-auto mb-6 h-16 w-16 text-primary" />
              <h2 className="text-3xl font-bold tracking-tight">
                Comienza tu Aprendizaje Hoy
              </h2>
              <p className="mt-4 text-lg text-muted-foreground">
                Únete a miles de estudiantes mejorando sus habilidades en Álgebra Lineal
              </p>
              <div className="mt-10 flex items-center justify-center gap-x-6">
                <Button asChild size="lg">
                  <Link href="/register">Crear Cuenta Gratuita</Link>
                </Button>
              </div>
            </CardContent>
          </Card>
        </div>
      </section>

      {/* Footer */}
      <footer className="border-t bg-muted/30">
        <div className="container mx-auto px-6 py-12">
          <div className="grid grid-cols-1 gap-8 sm:grid-cols-2 md:grid-cols-4">
            <div>
              <h3 className="font-semibold">Math Platform</h3>
              <p className="mt-2 text-sm text-muted-foreground">
                Plataforma interactiva para el estudio de Álgebra Lineal
              </p>
            </div>
            <div>
              <h3 className="font-semibold">Recursos</h3>
              <ul className="mt-2 space-y-2 text-sm text-muted-foreground">
                <li><Link href="/modules" className="hover:text-foreground">Módulos</Link></li>
                <li><Link href="/exercises" className="hover:text-foreground">Ejercicios</Link></li>
                <li><Link href="/ranking" className="hover:text-foreground">Ranking</Link></li>
              </ul>
            </div>
            <div>
              <h3 className="font-semibold">Soporte</h3>
              <ul className="mt-2 space-y-2 text-sm text-muted-foreground">
                <li><Link href="/help" className="hover:text-foreground">Ayuda</Link></li>
                <li><Link href="/contact" className="hover:text-foreground">Contacto</Link></li>
              </ul>
            </div>
            <div>
              <h3 className="font-semibold">Legal</h3>
              <ul className="mt-2 space-y-2 text-sm text-muted-foreground">
                <li><Link href="/privacy" className="hover:text-foreground">Privacidad</Link></li>
                <li><Link href="/terms" className="hover:text-foreground">Términos</Link></li>
              </ul>
            </div>
          </div>
          <div className="mt-12 border-t pt-8 text-center text-sm text-muted-foreground">
            <p>&copy; {new Date().getFullYear()} Math Platform. Todos los derechos reservados.</p>
          </div>
        </div>
      </footer>
    </div>
  );
}