"use client"

import Image from "next/image"
import { Button } from "@/components/ui/button"
import { Card, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { CheckCircle, FileText, Shield, Clock, Calculator, Users, Download, Mail } from "lucide-react"

export default function NominaPage() {
  return (
    <div className="min-h-screen bg-background">
      {/* Hero Section */}
      <section className="relative bg-gradient-to-br from-emerald-50 to-emerald-100 py-20">
        <div className="absolute inset-0 bg-black/10"></div>
        <div className="container mx-auto px-4 relative z-10">
          <div className="grid lg:grid-cols-2 gap-12 items-center">
            <div>
              <Badge className="mb-4 bg-emerald-100 text-emerald-800 hover:bg-emerald-200">Gestión de Nómina</Badge>
              <h1 className="text-4xl lg:text-6xl font-bold text-gray-900 mb-6 text-balance">
                Genera recibos de sueldo de forma <span className="text-emerald-600">profesional</span>
              </h1>
              <p className="text-xl text-gray-600 mb-8 text-pretty">
                Simplifica la gestión de nómina con nuestra plataforma web. Crea recibos de sueldo personalizados,
                gestiona empleados y mantén todo organizado en un solo lugar.
              </p>
              <div className="flex flex-col sm:flex-row gap-4">
                <Button
                  size="lg"
                  className="bg-emerald-600 hover:bg-emerald-700 text-white"
                  onClick={() =>
                    window.open("mailto:ventas@terasolutions.com.ar?subject=Consulta sobre Nómina", "_blank")
                  }
                >
                  Comenzar Prueba Gratuita
                </Button>
                <Button
                  variant="outline"
                  size="lg"
                  className="border-emerald-600 text-emerald-600 hover:bg-emerald-50 bg-transparent"
                >
                  Ver Demo
                </Button>
              </div>
            </div>
            <div className="relative">
              <Image
                src="/recibos-app.jpg"
                alt="Aplicación móvil de recibos de sueldo"
                width={600}
                height={400}
                className="rounded-lg shadow-2xl"
              />
            </div>
          </div>
        </div>
      </section>

      {/* Features Section */}
      <section className="py-20 bg-white">
        <div className="container mx-auto px-4">
          <div className="text-center mb-16">
            <h2 className="text-3xl lg:text-4xl font-bold text-gray-900 mb-4">
              Todo lo que necesitas para gestionar nómina
            </h2>
            <p className="text-xl text-gray-600 max-w-3xl mx-auto">
              Herramientas completas para simplificar el proceso de nómina y mantener a tu equipo satisfecho
            </p>
          </div>

          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
            <Card className="border-emerald-100 hover:shadow-lg transition-shadow">
              <CardHeader>
                <FileText className="h-12 w-12 text-emerald-600 mb-4" />
                <CardTitle className="text-emerald-900">Recibos Personalizados</CardTitle>
                <CardDescription>Crea recibos de sueldo con tu marca y formato personalizado</CardDescription>
              </CardHeader>
            </Card>

            <Card className="border-emerald-100 hover:shadow-lg transition-shadow">
              <CardHeader>
                <Calculator className="h-12 w-12 text-emerald-600 mb-4" />
                <CardTitle className="text-emerald-900">Cálculos Automáticos</CardTitle>
                <CardDescription>Calcula automáticamente descuentos, aportes y contribuciones</CardDescription>
              </CardHeader>
            </Card>

            <Card className="border-emerald-100 hover:shadow-lg transition-shadow">
              <CardHeader>
                <Users className="h-12 w-12 text-emerald-600 mb-4" />
                <CardTitle className="text-emerald-900">Gestión de Empleados</CardTitle>
                <CardDescription>Administra la información de todos tus empleados en un solo lugar</CardDescription>
              </CardHeader>
            </Card>

            <Card className="border-emerald-100 hover:shadow-lg transition-shadow">
              <CardHeader>
                <Shield className="h-12 w-12 text-emerald-600 mb-4" />
                <CardTitle className="text-emerald-900">Seguridad Garantizada</CardTitle>
                <CardDescription>Datos protegidos con encriptación y respaldos automáticos</CardDescription>
              </CardHeader>
            </Card>

            <Card className="border-emerald-100 hover:shadow-lg transition-shadow">
              <CardHeader>
                <Download className="h-12 w-12 text-emerald-600 mb-4" />
                <CardTitle className="text-emerald-900">Exportación PDF</CardTitle>
                <CardDescription>Descarga recibos en formato PDF listo para imprimir o enviar</CardDescription>
              </CardHeader>
            </Card>

            <Card className="border-emerald-100 hover:shadow-lg transition-shadow">
              <CardHeader>
                <Clock className="h-12 w-12 text-emerald-600 mb-4" />
                <CardTitle className="text-emerald-900">Historial Completo</CardTitle>
                <CardDescription>Accede al historial completo de recibos y pagos de cada empleado</CardDescription>
              </CardHeader>
            </Card>
          </div>
        </div>
      </section>

      {/* Benefits Section */}
      <section className="py-20 bg-emerald-50">
        <div className="container mx-auto px-4">
          <div className="grid lg:grid-cols-2 gap-12 items-center">
            <div>
              <h2 className="text-3xl lg:text-4xl font-bold text-gray-900 mb-6">Ahorra tiempo y reduce errores</h2>
              <div className="space-y-4">
                <div className="flex items-start gap-3">
                  <CheckCircle className="h-6 w-6 text-emerald-600 mt-1 flex-shrink-0" />
                  <div>
                    <h3 className="font-semibold text-gray-900">Automatización completa</h3>
                    <p className="text-gray-600">Elimina el trabajo manual y reduce errores de cálculo</p>
                  </div>
                </div>
                <div className="flex items-start gap-3">
                  <CheckCircle className="h-6 w-6 text-emerald-600 mt-1 flex-shrink-0" />
                  <div>
                    <h3 className="font-semibold text-gray-900">Cumplimiento legal</h3>
                    <p className="text-gray-600">Mantente al día con las regulaciones laborales vigentes</p>
                  </div>
                </div>
                <div className="flex items-start gap-3">
                  <CheckCircle className="h-6 w-6 text-emerald-600 mt-1 flex-shrink-0" />
                  <div>
                    <h3 className="font-semibold text-gray-900">Acceso desde cualquier lugar</h3>
                    <p className="text-gray-600">Plataforma web accesible desde cualquier dispositivo</p>
                  </div>
                </div>
              </div>
            </div>
            <div className="relative">
              <Image
                src="/hr-team.jpg"
                alt="Equipo de recursos humanos trabajando"
                width={600}
                height={400}
                className="rounded-lg shadow-xl"
              />
            </div>
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="py-20 bg-emerald-600">
        <div className="container mx-auto px-4 text-center">
          <h2 className="text-3xl lg:text-4xl font-bold text-white mb-6">
            ¿Listo para simplificar tu gestión de nómina?
          </h2>
          <p className="text-xl text-emerald-100 mb-8 max-w-2xl mx-auto">
            Únete a cientos de empresas que ya confían en nuestra plataforma para gestionar sus nóminas
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <Button
              size="lg"
              className="bg-white text-emerald-600 hover:bg-gray-100"
              onClick={() => window.open("mailto:ventas@terasolutions.com.ar?subject=Consulta sobre Nómina", "_blank")}
            >
              <Mail className="mr-2 h-4 w-4" />
              Contactar Equipo de Ventas
            </Button>
            <Button variant="outline" size="lg" className="border-white text-white hover:bg-emerald-700 bg-transparent">
              Solicitar Demo
            </Button>
          </div>
        </div>
      </section>
    </div>
  )
}