
import Image from "next/image";
import Link from "next/link";
import { Button } from "@/components/ui/button";

export default function NosotrosPage() {
  return (
    <div className="min-h-screen">
      {/* Hero Section */}
      <section className="relative py-20 bg-gradient-to-br from-[#0A2240] to-[#2C3E50]">
        <div className="container-custom">
          <div className="text-center text-white">
            <h1 className="heading-primary text-4xl md:text-6xl mb-6">
              ESCUELAS DEPORTIVAS DE CHILE
            </h1>
          </div>
        </div>
      </section>

      {/* Resumen Programático */}
      <section className="py-16 bg-white">
        <div className="container-custom">
          <div className="max-w-4xl mx-auto text-center">
            <p className="text-lg text-gray-700 leading-relaxed">
              En nuestra plataforma puedes encontrar todos los programas y enlaces hacia las escuelas 
              deportivas inscritas, obtener información de las actividades deportivas que ellas entregan. 
              De estar disponible la información, también podrás saber si aún quedan cupos para el ingreso 
              a los programas deportivos de cada una.
            </p>
          </div>
        </div>
      </section>

      {/* Team Section */}
      <section className="py-16 bg-gray-50">
        <div className="container-custom">
          <div className="text-center mb-12">
            <h2 className="heading-secondary text-3xl mb-4 text-[#0A2240]">
              Team de Escuelas Deportivas
            </h2>
          </div>

          <div className="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto">
            {/* Director */}
            <div className="text-center bg-white p-8 rounded-lg shadow-lg">
              <div className="relative w-32 h-32 mx-auto mb-4">
                <Image
                  src="https://cdn.abacus.ai/images/9cacc8f0-3724-4226-a9ff-a9ff8bd5077d.png"
                  alt="Daniel Arestizábal - Director EDChile"
                  fill
                  className="object-cover rounded-full"
                />
              </div>
              <h3 className="text-xl font-bold text-[#0A2240] mb-2">
                Director EDChile: Daniel Arestizábal
              </h3>
              <p className="text-gray-600">
                Gran amante de los deportes, Entrenador de Fútbol, administrador de escuelas deportivas.
              </p>
            </div>

            {/* Administrador Web */}
            <div className="text-center bg-white p-8 rounded-lg shadow-lg">
              <div className="relative w-32 h-32 mx-auto mb-4">
                <Image
                  src="https://cdn.abacus.ai/images/4bea356c-4dc7-4725-8a38-eb42df4e29ae.png"
                  alt="Administrador Web"
                  fill
                  className="object-cover rounded-full"
                />
              </div>
              <h3 className="text-xl font-bold text-[#0A2240] mb-2">
                Administrador Web
              </h3>
              <p className="text-gray-600">
                Gran amante de los deportes, Ex Árbitro de Básquetbol, administrador de sitio web, escuelas deportivas.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Sección Tres Columnas */}
      <section className="py-16 bg-[#2C3E50]">
        <div className="container-custom">
          <div className="text-center mb-12">
            <h2 className="heading-secondary text-3xl mb-4 text-white">
              Escuelas Deportivas Chile
            </h2>
          </div>

          <div className="grid md:grid-cols-3 gap-8">
            {/* Columna 1: Escuelas Deportivas */}
            <div className="text-center bg-white/10 backdrop-blur-sm p-8 rounded-lg">
              <div className="text-white mb-6">
                <h3 className="heading-secondary text-xl mb-4">
                  Escuelas Deportivas
                </h3>
                <div className="space-y-2 text-lg">
                  <p>«Únete a la red más grande de escuelas deportivas de Chile»</p>
                  <p>«Obtén tu certificación oficial»</p>
                  <p>«Regístrate y forma parte del futuro del deporte»</p>
                </div>
              </div>
              <Button
                asChild
                className="bg-[#0A2240] hover:bg-[#0A2240]/90 text-white px-8 py-3 rounded-md font-semibold"
              >
                <Link href="/registro-institucion">REGÍSTRATE AHORA</Link>
              </Button>
            </div>

            {/* Columna 2: Padres y Apoderados */}
            <div className="text-center bg-white/10 backdrop-blur-sm p-8 rounded-lg">
              <div className="text-white mb-6">
                <h3 className="heading-secondary text-xl mb-4">
                  Padres y Apoderados
                </h3>
                <div className="space-y-2 text-lg">
                  <p>«Encuentra la escuela deportiva ideal para tu hijo»</p>
                  <p>«Accede a información verificada y confiable»</p>
                  <p>«Conoce las mejores opciones deportivas en tu zona»</p>
                </div>
              </div>
              <Button
                asChild
                className="bg-[#0A2240] hover:bg-[#0A2240]/90 text-white px-8 py-3 rounded-md font-semibold"
              >
                <Link href="/registro-jugador">REGÍSTRATE AHORA</Link>
              </Button>
            </div>

            {/* Columna 3: Patrocinadores */}
            <div className="text-center bg-white/10 backdrop-blur-sm p-8 rounded-lg">
              <div className="text-white mb-6">
                <h3 className="heading-secondary text-xl mb-4">
                  Patrocinadores
                </h3>
                <div className="space-y-2 text-lg">
                  <p>«Apoya el desarrollo del deporte chileno»</p>
                  <p>«Conecta con las mejores escuelas deportivas del país»</p>
                  <p>«Sé parte del crecimiento deportivo nacional»</p>
                </div>
              </div>
              <Button
                asChild
                className="bg-[#0A2240] hover:bg-[#0A2240]/90 text-white px-8 py-3 rounded-md font-semibold"
              >
                <Link href="/registro-jugador">REGÍSTRATE AHORA</Link>
              </Button>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}
