"use client";

import { motion, useInView } from "framer-motion";
import { useRef } from "react";
import { useRouter } from "next/navigation";
import { Card, CardContent } from "@/components/ui/card";

const services = [
  {
    title: "Terapia Individual",
    description:
      "Sesiones uno a uno enfocadas en ansiedad, depresión, trauma o crecimiento personal.",
    image: "/services/icons/t_ind.png",
  },
  {
    title: "Terapia de Pareja",
    description: "Espacios para mejorar la comunicación, resolver conflictos y reconectar.",
    image: "/services/icons/t_pareja.png",
  },
  {
    title: "Talleres y Grupos",
    description: "Experiencias colectivas de sanación y aprendizaje emocional.",
    image: "/services/icons/t_fam.png",
  },
];

export function Services() {
  const ref = useRef(null);
  const isInView = useInView(ref, { once: true, margin: "-100px" });
  const router = useRouter();

  const containerVariants = {
    hidden: { opacity: 0 },
    visible: {
      opacity: 1,
      transition: {
        staggerChildren: 0.2,
      },
    },
  };

  const itemVariants = {
    hidden: { opacity: 0, y: 20 },
    visible: {
      opacity: 1,
      y: 0,
      transition: {
        duration: 0.6,
      },
    },
  };

  return (
    <section id="servicios" className="bg-background py-20 sm:py-32" ref={ref}>
      <div className="container mx-auto px-4 sm:px-6 lg:px-8">
        {/* Section Title */}
        <motion.div
          className="mb-12 text-center sm:mb-16"
          initial={{ opacity: 0, y: 20 }}
          animate={isInView ? { opacity: 1, y: 0 } : {}}
          transition={{ duration: 0.6 }}
        >
          <h2 className="mb-4 font-serif text-3xl font-bold text-primary sm:text-4xl lg:text-5xl">
            Mis Servicios
          </h2>
          <p className="mb-6 text-lg text-secondary">
            Enfoques adaptados a tus necesidades actuales
          </p>
          <motion.div
            className="mx-auto h-1 w-24 bg-accent"
            initial={{ width: 0 }}
            animate={isInView ? { width: 96 } : {}}
            transition={{ duration: 0.8, delay: 0.3 }}
          />
        </motion.div>

        {/* Services Grid */}
        <motion.div
          className="grid gap-8 md:grid-cols-3 lg:gap-12"
          variants={containerVariants}
          initial="hidden"
          animate={isInView ? "visible" : "hidden"}
        >
          {services.map((service, index) => (
            <motion.div key={service.title} variants={itemVariants}>
              <motion.div
                whileHover={{ y: -8 }}
                transition={{ type: "spring", stiffness: 300, damping: 20 }}
              >
                <Card className="h-full border-t-4 border-t-accent bg-white shadow-lg transition-shadow hover:shadow-xl">
                  <CardContent className="p-8">
                    <motion.div
                      className="mx-auto mb-6"
                      whileHover={{ scale: 1.1, rotate: 5 }}
                      transition={{ type: "spring", stiffness: 400, damping: 17 }}
                    >
                      <img
                        src={service.image}
                        alt={service.title}
                        className="h-20 w-20 object-contain"
                      />
                    </motion.div>

                    <motion.h3
                      className="mb-4 text-center font-serif text-2xl font-semibold text-primary"
                      whileHover={{ scale: 1.05 }}
                    >
                      {service.title}
                    </motion.h3>

                    <p className="text-center leading-relaxed text-secondary">
                      {service.description}
                    </p>

                    {/* Decorative Element */}
                    <motion.div
                      className="mt-6 flex justify-center"
                      initial={{ opacity: 0 }}
                      whileHover={{ opacity: 1 }}
                    >
                      <div className="h-0.5 w-16 bg-accent/50" />
                    </motion.div>
                  </CardContent>
                </Card>
              </motion.div>
            </motion.div>
          ))}
        </motion.div>

        {/* CTA */}
        <motion.div
          className="mt-12 text-center sm:mt-16"
          initial={{ opacity: 0, y: 20 }}
          animate={isInView ? { opacity: 1, y: 0 } : {}}
          transition={{ delay: 1, duration: 0.6 }}
        >
          <motion.div whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }}>
            <motion.button
              onClick={() => router.push("/servicios")}
              className="rounded-full bg-accent px-8 py-4 font-semibold text-primary transition-colors hover:bg-accent/90"
            >
              Ver Más Servicios
            </motion.button>
          </motion.div>
        </motion.div>
      </div>
    </section>
  );
}
