"use client";

import { useState } from "react";
import { motion } from "framer-motion";
import { Button } from "@/components/ui/button";
import { CourseContactForm } from "@/components/forms/CourseContactForm";
import { BookOpen, Users, Calendar, TrendingUp } from "lucide-react";

const courses = [
  {
    title: "Taller de Manejo de Ansiedad",
    description:
      "Aprende técnicas prácticas para gestionar la ansiedad en el día a día y recuperar tu bienestar emocional.",
    level: "Introductorio",
    duration: "4 sesiones",
    price: "$1,200 MXN",
    image: "/courses/anxiety.jpg",
    topics: [
      "Identificar desencadenantes",
      "Técnicas de respiración",
      "Mindfulness básico",
      "Estrategias de afrontamiento",
    ],
  },
  {
    title: "Duelo y Elaboración",
    description:
      "Espacio seguro para procesar pérdidas significativas y encontrar significado en el camino de la sanación.",
    level: "Intermedio",
    duration: "8 sesiones",
    price: "$2,400 MXN",
    image: "/courses/grief.jpg",
    topics: ["Fases del duelo", "Elaboración emocional", "Rituales de cierre", "Red de apoyo"],
  },
  {
    title: "Comunicación Asertiva",
    description:
      "Desarrolla habilidades para expresar tus necesidades y límites de manera saludable en todas tus relaciones.",
    level: "Introductorio",
    duration: "6 sesiones",
    price: "$1,800 MXN",
    image: "/courses/assertive.jpg",
    topics: [
      "Estilos de comunicación",
      "Decir 'no' con empatía",
      "Establecer límites",
      "Pedir lo que necesitas",
    ],
  },
  {
    title: "Mindfulness y Meditación",
    description:
      "Conecta con el presente y cultiva la paz mental a través de prácticas de atención plena.",
    level: "Todos los niveles",
    duration: "Ongoing",
    price: "$500 MXN / sesión",
    image: "/courses/mindfulness.jpg",
    topics: ["Respiración consciente", "Meditación guiada", "Scan corporal", "Atención plena"],
  },
];

export default function CoursesPage() {
  const [contactModalOpen, setContactModalOpen] = useState(false);
  const [selectedCourse, setSelectedCourse] = useState("");

  const handleContactClick = (courseTitle: string) => {
    setSelectedCourse(courseTitle);
    setContactModalOpen(true);
    const element = document.querySelector("#contacto");
    if (element) element.scrollIntoView({ behavior: "smooth" });
  };
  return (
    <div className="min-h-screen bg-background">
      <div className="container mx-auto px-4 py-12 sm:px-6 lg:px-8">
        <motion.div
          className="mb-12 text-center"
          initial={{ opacity: 0, y: -20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6 }}
        >
          <h1 className="mb-4 font-serif text-4xl font-bold text-primary sm:text-5xl">
            Cursos y Talleres
          </h1>
          <p className="mx-auto max-w-2xl text-lg text-secondary">
            Participa en experiencias de aprendizaje en grupo que potencian tu proceso de sanación.
          </p>
          <motion.div
            className="mx-auto h-1 w-24 bg-accent"
            initial={{ width: 0 }}
            animate={{ width: 96 }}
            transition={{ duration: 0.8, delay: 0.3 }}
          />
        </motion.div>

        <div className="grid gap-8 md:grid-cols-2 lg:gap-12">
          {courses.map((course, index) => (
            <motion.div
              key={course.title}
              initial={{ opacity: 0, y: 30 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.6, delay: index * 0.1 }}
            >
              <div className="overflow-hidden rounded-2xl border-t-4 border-t-accent bg-white shadow-lg">
                <div className="flex aspect-video items-center justify-center bg-gradient-to-br from-primary to-primary/80">
                  <BookOpen className="h-24 w-24 text-white/20" />
                </div>

                <div className="p-8">
                  <div className="mb-4 flex items-start justify-between">
                    <div>
                      <h2 className="mb-2 font-serif text-2xl font-semibold text-primary">
                        {course.title}
                      </h2>
                      <p className="text-sm text-secondary">Nivel: {course.level}</p>
                    </div>
                    <div className="text-right">
                      <p className="text-2xl font-bold text-accent">{course.price}</p>
                      <p className="text-sm text-secondary">{course.duration}</p>
                    </div>
                  </div>

                  <p className="mb-6 leading-relaxed text-secondary">{course.description}</p>

                  <div className="mb-6">
                    <h3 className="mb-3 text-sm font-medium text-primary">Temarios:</h3>
                    <div className="flex flex-wrap gap-2">
                      {course.topics.map((topic, idx) => (
                        <span
                          key={idx}
                          className="rounded-full bg-primary/10 px-3 py-1 text-sm text-primary"
                        >
                          {topic}
                        </span>
                      ))}
                    </div>
                  </div>

                  <div className="mb-6 grid grid-cols-3 gap-4">
                    <div className="flex items-center gap-2 text-sm text-secondary">
                      <Users className="h-4 w-4" />
                      <span>Grupos pequeños</span>
                    </div>
                    <div className="flex items-center gap-2 text-sm text-secondary">
                      <Calendar className="h-4 w-4" />
                      <span>Inicia pronto</span>
                    </div>
                    <div className="flex items-center gap-2 text-sm text-secondary">
                      <TrendingUp className="h-4 w-4" />
                      <span>Popular</span>
                    </div>
                  </div>

                  <div className="grid grid-cols-2 gap-4">
                    <Button
                      onClick={() => handleContactClick(course.title)}
                      className="bg-primary text-white hover:bg-primary/90"
                    >
                      Más Información
                    </Button>
                    <Button
                      onClick={() => handleContactClick(course.title)}
                      className="bg-accent text-primary hover:bg-accent/90"
                    >
                      Inscribirse
                    </Button>
                  </div>
                </div>
              </div>
            </motion.div>
          ))}
        </div>

        <motion.div
          className="mt-12 rounded-2xl border bg-primary p-8 text-white"
          initial={{ opacity: 0, y: 30 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6, delay: 0.5 }}
        >
          <div className="mx-auto max-w-2xl text-center">
            <h2 className="mb-4 font-serif text-2xl font-bold">¿Buscas formación personalizada?</h2>
            <p className="mb-6 text-white/90">
              También ofrezco programas de formación diseñados específicamente para tus necesidades.
              Contáctame para crear un plan a tu medida.
            </p>
            <Button
              onClick={() => {
                const element = document.querySelector("#contacto");
                if (element) element.scrollIntoView({ behavior: "smooth" });
              }}
              className="bg-accent text-primary hover:bg-accent/90"
              size="lg"
            >
              Contactar para Diseñar Tu Plan
            </Button>
          </div>
        </motion.div>

        <div id="contacto" className="mt-16">
          <CourseContactForm />
        </div>
      </div>
    </div>
  );
}
