import Link from 'next/link';

export default function Home() {
  return (
    <main className="min-h-screen bg-gradient-to-b from-background to-muted">
      <nav className="container mx-auto px-4 py-6 flex justify-between items-center">
        <div className="text-2xl font-bold text-primary">Horux360</div>
        <div className="flex gap-4">
          <Link
            href="/login"
            className="px-4 py-2 text-foreground hover:text-primary transition"
          >
            Iniciar Sesión
          </Link>
          <Link
            href="/register"
            className="px-4 py-2 bg-primary text-primary-foreground rounded-lg hover:opacity-90 transition"
          >
            Comenzar Gratis
          </Link>
        </div>
      </nav>

      <section className="container mx-auto px-4 py-20 text-center">
        <h1 className="text-5xl font-bold mb-6">
          Controla tus finanzas con{' '}
          <span className="text-primary">inteligencia</span>
        </h1>
        <p className="text-xl text-muted-foreground mb-8 max-w-2xl mx-auto">
          La plataforma de análisis financiero para empresas mexicanas más moderna.
          Dashboard en tiempo real, control de IVA/ISR, y mucho más.
        </p>
        <Link
          href="/register"
          className="inline-block px-8 py-4 bg-primary text-primary-foreground rounded-lg text-lg font-semibold hover:opacity-90 transition"
        >
          Prueba gratis 14 días
        </Link>
      </section>

      <section className="container mx-auto px-4 py-16">
        <div className="grid md:grid-cols-4 gap-8">
          {[
            { title: 'Dashboard', desc: 'KPIs en tiempo real' },
            { title: 'Control IVA/ISR', desc: 'Cálculo automático' },
            { title: 'Conciliación', desc: 'Bancaria inteligente' },
            { title: 'Alertas', desc: 'Fiscales proactivas' },
          ].map((feature) => (
            <div
              key={feature.title}
              className="p-6 bg-card rounded-xl border shadow-sm"
            >
              <h3 className="text-lg font-semibold mb-2">{feature.title}</h3>
              <p className="text-muted-foreground">{feature.desc}</p>
            </div>
          ))}
        </div>
      </section>
    </main>
  );
}