import { createFileRoute, Link } from '@tanstack/react-router'
import { Button } from "@/components/ui/button"
import { ArrowRight } from "lucide-react"
import '../App.css'

export const Route = createFileRoute('/')({
  component: App
})

function App() {
  return (
    <div className="min-h-screen flex flex-col bg-gradient-to-br from-slate-150 via-slate-200 to-primary">
      {/* Navbar */}
      <header className="flex items-center justify-between px-10 py-6 border-b border-slate-700/50">
        <h1 className="text-2xl font-mono tracking-tight">Génesis</h1>
        <Link to="/login" search={{ redirect: '/planes' }}>
          <Button variant="outline" className="border-slate-500 hover:bg-slate-700/50">
            Iniciar sesión
          </Button>
        </Link>
      </header>

      {/* Hero */}
      <main className="flex-1 flex flex-col items-center justify-center text-center px-6">
        <h2 className="text-5xl md:text-6xl font-mono font-bold mb-6">
          Bienvenido a <span className="text-primary">Génesis</span>
        </h2>
        <p className="text-lg md:text-xl max-w-2xl mb-8">
          El sistema académico diseñado para transformar la gestión universitaria.
          Seguro, moderno y hecho para crecer contigo.
        </p>

        <div className="flex gap-4">
          <Link to="/login" search={{ redirect: '/planes' }}>
            <Button size="lg" className="rounded-2xl px-6 py-3 text-lg font-mono">
              Comenzar <ArrowRight className="ml-2 h-5 w-5" />
            </Button>
          </Link>
          <Button size="lg" variant="outline" className="rounded-2xl px-6 py-3 text-lg font-mono border-slate-600 hover:bg-slate-100/50">
            Conoce más
          </Button>
        </div>
      </main>

      {/* Footer */}
      <footer className="py-6 text-center text-sm border-t border-slate-700/50">
        © {new Date().getFullYear()} Génesis — Universidad La Salle
      </footer>
    </div>
  )
}