"use client";

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

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

  return (
    <section id="sobre-mi" className="bg-white 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">
            Sobre Mí
          </h2>
          <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>

        <div className="grid items-center gap-12 lg:grid-cols-2 lg:gap-20">
          {/* Image */}
          <motion.div
            className="relative"
            initial={{ opacity: 0, x: -50 }}
            animate={isInView ? { opacity: 1, x: 0 } : {}}
            transition={{ duration: 0.8, delay: 0.2 }}
          >
            <div className="relative overflow-hidden rounded-3xl shadow-2xl">
              <motion.div
                className="aspect-[4/5]"
                initial={{ scale: 1.1 }}
                animate={isInView ? { scale: 1 } : {}}
                transition={{ duration: 1 }}
              >
                <img
                  src="/gloria_2.png"
                  alt="Gloria Niño en sesión de terapia"
                  className="h-full w-full object-cover"
                />
              </motion.div>

              {/* Decorative Element */}
              <motion.div
                className="absolute -bottom-6 -right-6 h-32 w-32 rounded-full bg-accent/20 blur-xl"
                animate={{
                  scale: [1, 1.2, 1],
                  opacity: [0.3, 0.5, 0.3],
                }}
                transition={{
                  duration: 4,
                  repeat: Infinity,
                  ease: "easeInOut",
                }}
              />
            </div>
          </motion.div>

          {/* Content */}
          <motion.div
            className="space-y-6"
            initial={{ opacity: 0, x: 50 }}
            animate={isInView ? { opacity: 1, x: 0 } : {}}
            transition={{ duration: 0.8, delay: 0.4 }}
          >
            <h3 className="font-serif text-2xl font-semibold text-primary sm:text-3xl">
              Soy Gloria Niño, terapeuta emocional con amplia experiencia en el acompañamiento de
              procesos de duelo, ansiedad y crecimiento personal.
            </h3>

            <p className="text-lg leading-relaxed text-secondary">
              Creo firmemente que la sanación comienza cuando nos permitimos sentir y validar
              nuestras emociones en un espacio seguro. Mi enfoque se centra en brindarte
              herramientas prácticas y un apoyo empático para que puedas transformar tu vida.
            </p>

            <div className="space-y-4 pt-4">
              <motion.div
                className="flex items-start space-x-3"
                initial={{ opacity: 0, y: 10 }}
                animate={isInView ? { opacity: 1, y: 0 } : {}}
                transition={{ delay: 0.6 }}
              >
                <div className="mt-1 flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-accent/20">
                  <div className="h-2 w-2 rounded-full bg-accent" />
                </div>
                <p className="text-secondary">
                  <span className="font-semibold text-primary">Especialización:</span> Duelo,
                  ansiedad, depresión y trauma
                </p>
              </motion.div>

              <motion.div
                className="flex items-start space-x-3"
                initial={{ opacity: 0, y: 10 }}
                animate={isInView ? { opacity: 1, y: 0 } : {}}
                transition={{ delay: 0.7 }}
              >
                <div className="mt-1 flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-accent/20">
                  <div className="h-2 w-2 rounded-full bg-accent" />
                </div>
                <p className="text-secondary">
                  <span className="font-semibold text-primary">Enfoque:</span> Terapia
                  cognitivo-conductual con perspectiva humanista
                </p>
              </motion.div>

              <motion.div
                className="flex items-start space-x-3"
                initial={{ opacity: 0, y: 10 }}
                animate={isInView ? { opacity: 1, y: 0 } : {}}
                transition={{ delay: 0.8 }}
              >
                <div className="mt-1 flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-accent/20">
                  <div className="h-2 w-2 rounded-full bg-accent" />
                </div>
                <p className="text-secondary">
                  <span className="font-semibold text-primary">Modalidad:</span> Sesiones
                  presenciales y virtuales
                </p>
              </motion.div>
            </div>

            <motion.div
              className="flex flex-col gap-4 pt-6 sm:flex-row"
              initial={{ opacity: 0, y: 20 }}
              animate={isInView ? { opacity: 1, y: 0 } : {}}
              transition={{ delay: 0.9 }}
            >
              <motion.div whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }}>
                <Button
                  size="lg"
                  onClick={() => {
                    const element = document.querySelector("#servicios");
                    if (element) element.scrollIntoView({ behavior: "smooth" });
                  }}
                  className="bg-accent text-primary hover:bg-accent/90"
                >
                  <Calendar className="mr-2 h-5 w-5" />
                  Ver Servicios
                </Button>
              </motion.div>

              <motion.div whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }}>
                <Button
                  size="lg"
                  variant="outline"
                  onClick={() => {
                    const element = document.querySelector("#contacto");
                    if (element) element.scrollIntoView({ behavior: "smooth" });
                  }}
                  className="border-primary text-primary hover:bg-primary/10"
                >
                  <MessageCircle className="mr-2 h-5 w-5" />
                  Contactar
                </Button>
              </motion.div>
            </motion.div>
          </motion.div>
        </div>
      </div>
    </section>
  );
}
