
"use client";

import { useEffect, useState } from "react";
import Image from "next/image";
import Link from "next/link";
import { Button } from "@/components/ui/button";
import { motion } from "framer-motion";

export default function HeroSection() {
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    setMounted(true);
  }, []);

  if (!mounted) {
    return (
      <section className="relative min-h-[60vh] bg-[#0A2240] flex items-center">
        <div className="container-custom">
          <div className="text-white text-center">
            <h1 className="heading-primary text-4xl md:text-6xl mb-6">
              BIENVENIDOS A ESCUELAS DEPORTIVAS
            </h1>
            <p className="text-lg md:text-xl mb-8 max-w-4xl mx-auto leading-relaxed">
              Somos el primer y único centro nacional que unifica y respalda a todas las escuelas 
              deportivas del país, creando un puente entre el talento deportivo juvenil y las 
              oportunidades de desarrollo profesional.
            </p>
            <div className="flex flex-col sm:flex-row gap-4 justify-center">
              <Button asChild size="lg" variant="primary" className="rounded-full">
                <Link href="/registro-instructor">Registro Instructor</Link>
              </Button>
              <Button asChild size="lg" variant="primary" className="rounded-full">
                <Link href="/registro-institucion">Registro Institución</Link>
              </Button>
            </div>
          </div>
        </div>
      </section>
    );
  }

  return (
    <section className="relative min-h-[70vh] overflow-hidden">
      {/* Background Image */}
      <div className="absolute inset-0">
        <Image
          src="https://cdn.abacus.ai/images/620f8177-a422-48e1-9d3a-5f812fcc1391.png"
          alt="Niño jugando fútbol en Chile"
          fill
          className="object-cover object-center"
          priority
        />
        <div className="absolute inset-0 hero-overlay"></div>
      </div>

      {/* Content */}
      <div className="relative z-10 min-h-[70vh] flex items-center">
        <div className="container-custom">
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8 }}
            className="text-white text-center"
          >
            <motion.h1 
              className="heading-primary text-4xl md:text-6xl mb-6"
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.8, delay: 0.2 }}
            >
              BIENVENIDOS A ESCUELAS DEPORTIVAS
            </motion.h1>
            
            <motion.p 
              className="text-lg md:text-xl mb-8 max-w-4xl mx-auto leading-relaxed"
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.8, delay: 0.4 }}
            >
              Somos el primer y único centro nacional que unifica y respalda a todas las escuelas 
              deportivas del país, creando un puente entre el talento deportivo juvenil y las 
              oportunidades de desarrollo profesional.
            </motion.p>

            <motion.div 
              className="flex flex-col sm:flex-row gap-4 justify-center"
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.8, delay: 0.6 }}
            >
              <Button 
                asChild 
                size="lg" 
                variant="primary" 
                className="rounded-full px-8 py-3 text-lg font-semibold hover:scale-105 transition-all duration-200 shadow-lg"
              >
                <Link href="/registro-instructor">Registro Instructor</Link>
              </Button>
              <Button 
                asChild 
                size="lg" 
                variant="primary" 
                className="rounded-full px-8 py-3 text-lg font-semibold hover:scale-105 transition-all duration-200 shadow-lg"
              >
                <Link href="/registro-institucion">Registro Institución</Link>
              </Button>
            </motion.div>
          </motion.div>
        </div>
      </div>
    </section>
  );
}
