"use client";

import { useState } from "react";
import Image from "next/image";
import { Flame, Sparkles, Wind, Zap, Star, Monitor, ArrowRight } from "lucide-react";
import { siteContent } from "@/data/content";
import { SectionHeading } from "@/components/ui/SectionHeading";
import { Reveal } from "@/components/ui/Reveal";
import { ClassModal } from "@/components/ui/ClassModal";
import type { ClassItem } from "@/types";

const iconMap: Record<string, React.ReactNode> = {
  flame: <Flame size={20} />,
  sparkles: <Sparkles size={20} />,
  wind: <Wind size={20} />,
  zap: <Zap size={20} />,
  star: <Star size={20} />,
  monitor: <Monitor size={20} />,
};

export function Classes() {
  const { classes } = siteContent;
  const [selectedClass, setSelectedClass] = useState<ClassItem | null>(null);

  return (
    <section id="classes" className="relative section-padding bg-neutral-100 dark:bg-[#0a0a0a]">
      <div className="section-divider absolute top-0 left-0 right-0" />
      <div className="section-container">
        <Reveal>
          <SectionHeading>{classes.title}</SectionHeading>
        </Reveal>

        <div className="mt-14 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
          {classes.items.map((item) => (
            <Reveal key={item.name} className="h-full">
              <div
                className="group relative h-full min-h-[280px] cursor-pointer overflow-hidden rounded-2xl"
                onClick={() => setSelectedClass(item)}
              >
                {/* Background image */}
                {item.images && item.images[0] && (
                  <Image
                    src={item.images[0]}
                    alt={item.name}
                    fill
                    className="object-cover transition-transform duration-700 ease-out group-hover:scale-105"
                  />
                )}

                {/* Dark gradient overlay */}
                <div className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/40 to-black/10 transition-all duration-500 group-hover:from-black/95 group-hover:via-black/50" />

                {/* Rose tint on hover */}
                <div className="absolute inset-0 bg-rose-900/0 transition-all duration-500 group-hover:bg-rose-900/10" />

                {/* Content */}
                <div className="relative flex h-full flex-col justify-end p-6">
                  {/* Icon badge */}
                  <div className="mb-3 inline-flex h-9 w-9 items-center justify-center rounded-lg bg-white/10 text-white backdrop-blur-sm transition-all duration-300 group-hover:bg-rose-500/20 group-hover:text-rose-300">
                    {iconMap[item.icon]}
                  </div>

                  <h3 className="text-xl font-semibold text-white">
                    {item.name}
                  </h3>

                  <p className="mt-1.5 text-sm leading-relaxed text-white/60 line-clamp-2">
                    {item.description}
                  </p>

                  {/* Hover arrow */}
                  <div className="mt-3 flex items-center gap-1.5 text-sm font-medium text-rose-400 opacity-0 translate-y-2 transition-all duration-300 group-hover:opacity-100 group-hover:translate-y-0">
                    <span>Подробнее</span>
                    <ArrowRight size={14} />
                  </div>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>

      <ClassModal
        classItem={selectedClass}
        onClose={() => setSelectedClass(null)}
      />
    </section>
  );
}
