"use client";

import { motion } from "framer-motion";
import { Button } from "@/components/ui/button";
import { ArrowRight, Calendar } from "lucide-react";

export function Hero() {
  return (
    <section
      id="inicio"
      className="relative flex min-h-screen items-center overflow-hidden bg-gradient-to-br from-[#340649] to-[#4a0e5f] pt-20"
    >
      {/* Background Pattern */}
      <div className="absolute inset-0">
        <div className="absolute right-[-10%] top-[-20%] h-[50vw] w-[50vw] rounded-full bg-secondary/30 blur-3xl" />
      </div>

      <div className="container relative mx-auto px-4 sm:px-6 lg:px-8">
        <div className="grid items-center gap-12 lg:grid-cols-2 lg:gap-16">
          {/* Content */}
          <motion.div
            className="space-y-6 sm:space-y-8"
            initial={{ opacity: 0, x: -50 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.8 }}
          >
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: 0.2 }}
            >
              <h1 className="font-serif text-4xl font-bold leading-tight text-white sm:text-5xl lg:text-6xl xl:text-7xl">
                Gloria Niño
                <span className="mt-2 block text-2xl font-normal text-white/90 sm:text-3xl lg:text-4xl">
                  Terapeuta Emocional
                </span>
              </h1>
            </motion.div>

            <motion.p
              className="text-lg leading-relaxed text-white/90 sm:text-xl"
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: 0.4 }}
            >
              Te acompaño a sanar tus heridas emocionales y transformar tu vida a través de un
              proceso terapéutico profundo, cálido y profesional.
            </motion.p>

            <motion.div
              className="flex flex-col gap-4 pt-4 sm:flex-row"
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: 0.6 }}
            >
              <motion.div whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }}>
                <Button
                  size="lg"
                  onClick={() => {
                    const element = document.querySelector("#agendar");
                    if (element) {
                      element.scrollIntoView({ behavior: "smooth" });
                    }
                  }}
                  className="w-full bg-accent px-8 py-6 text-base text-primary hover:bg-accent/90 sm:w-auto sm:text-lg"
                >
                  <Calendar className="mr-2 h-5 w-5" />
                  Agenda tu Cita
                </Button>
              </motion.div>

              <motion.div whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }}>
                <Button
                  size="lg"
                  variant="outline"
                  onClick={() => {
                    const element = document.querySelector("#servicios");
                    if (element) {
                      element.scrollIntoView({ behavior: "smooth" });
                    }
                  }}
                  className="w-full border-[#340649] bg-[#F9F6E9] px-8 py-6 text-base text-[#340649] transition-all duration-500 hover:border-accent hover:bg-white hover:shadow-[0_8px_20px_rgba(200,166,104,0.4)] active:scale-95 sm:w-auto sm:text-lg"
                >
                  <span className="transition-colors duration-300 group-hover:text-accent">
                    Ver Servicios
                  </span>
                  <ArrowRight className="ml-2 h-5 w-5 text-[#340649] transition-all duration-300 group-hover:translate-x-1 group-hover:text-accent" />
                </Button>
              </motion.div>
            </motion.div>

            {/* Stats */}
            <motion.div
              className="grid grid-cols-3 gap-4 border-t border-white/20 pt-8"
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              transition={{ delay: 0.8 }}
            >
              <div className="text-center sm:text-left">
                <p className="font-serif text-2xl font-bold text-accent sm:text-3xl">10+</p>
                <p className="text-sm text-white/80">Años de Experiencia</p>
              </div>
              <div className="text-center sm:text-left">
                <p className="font-serif text-2xl font-bold text-accent sm:text-3xl">500+</p>
                <p className="text-sm text-white/80">Pacientes Atendidos</p>
              </div>
              <div className="text-center sm:text-left">
                <p className="font-serif text-2xl font-bold text-accent sm:text-3xl">98%</p>
                <p className="text-sm text-white/80">Satisfacción</p>
              </div>
            </motion.div>
          </motion.div>

          {/* Image */}
          <motion.div
            className="relative"
            initial={{ opacity: 0, x: 50 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.8, delay: 0.3 }}
          >
            <div className="relative">
              {/* Decorative Circle */}
              <motion.div
                className="absolute -inset-4 rounded-full bg-accent/20 blur-2xl"
                animate={{
                  scale: [1, 1.1, 1],
                  opacity: [0.3, 0.5, 0.3],
                }}
                transition={{
                  duration: 4,
                  repeat: Infinity,
                  ease: "easeInOut",
                }}
              />

              {/* Image Container */}
              <div className="relative overflow-hidden rounded-3xl bg-background shadow-2xl">
                <motion.div
                  initial={{ scale: 1.1 }}
                  animate={{ scale: 1 }}
                  transition={{ duration: 1.5 }}
                  className="aspect-[3/4] sm:aspect-[4/5]"
                >
                  <img
                    src="/gloria.png"
                    alt="Gloria Niño - Terapeuta Emocional"
                    className="h-full w-full object-cover"
                  />
                </motion.div>

                {/* Floating Badge */}
                <motion.div
                  className="absolute -bottom-6 -left-6 rounded-2xl bg-primary p-6 text-white shadow-xl"
                  initial={{ opacity: 0, y: 20 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ delay: 1 }}
                  whileHover={{ scale: 1.05 }}
                >
                  <p className="text-sm font-medium">Consultas</p>
                  <p className="font-serif text-2xl font-bold">24/7</p>
                  <p className="text-xs opacity-80">Soporte Virtual</p>
                </motion.div>
              </div>
            </div>
          </motion.div>
        </div>
      </div>

      {/* Scroll Indicator */}
      <motion.div
        className="absolute bottom-8 left-1/2 -translate-x-1/2 transform"
        animate={{
          y: [0, 10, 0],
        }}
        transition={{
          duration: 2,
          repeat: Infinity,
          ease: "easeInOut",
        }}
      >
        <div className="flex h-10 w-6 justify-center rounded-full border-2 border-white/30">
          <div className="mt-2 h-3 w-1 rounded-full bg-accent" />
        </div>
      </motion.div>
    </section>
  );
}
