"use client";

import { motion } from "framer-motion";
import { Palette, Monitor, FileImage, ArrowRight } from "lucide-react";
import Link from "next/link";

const categories = [
  {
    icon: Monitor,
    title: "Digital Art",
    description:
      "Create stunning digital masterpieces using any software of your choice. From illustrations to photo manipulations.",
    color: "from-violet-500 to-purple-600",
    bgColor: "bg-violet-50",
  },
  {
    icon: Palette,
    title: "Paintings",
    description:
      "Traditional paintings in any medium - oil, acrylic, watercolor. Capture the essence of classic artistry.",
    color: "from-orange-500 to-red-500",
    bgColor: "bg-orange-50",
  },
  {
    icon: FileImage,
    title: "Poster Making",
    description:
      "Design impactful posters that communicate powerful messages. Blend creativity with purpose.",
    color: "from-lime-500 to-green-500",
    bgColor: "bg-lime-50",
  },
];

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

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

export default function Categories() {
  return (
    <section className="py-24 bg-white">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        {/* Section Header */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.6 }}
          className="text-center mb-16"
        >
          <span className="inline-block bg-lime-400 text-black px-4 py-1.5 text-xs font-bold tracking-wider rounded-full mb-4">
            CATEGORIES
          </span>
          <h2 className="text-4xl sm:text-5xl font-black tracking-tight text-black mb-4">
            Three Ways to
            <span className="text-transparent bg-clip-text bg-gradient-to-r from-lime-400 to-lime-600">
              {" "}
              Express
            </span>
          </h2>
          <p className="text-zinc-600 text-lg max-w-2xl mx-auto">
            Choose your canvas, unleash your creativity. Each category offers a
            unique way to showcase your artistic vision.
          </p>
        </motion.div>

        {/* Categories Grid */}
        <motion.div
          variants={containerVariants}
          initial="hidden"
          whileInView="visible"
          viewport={{ once: true }}
          className="grid md:grid-cols-3 gap-8"
        >
          {categories.map((category) => (
            <motion.div
              key={category.title}
              variants={itemVariants}
              className={`group relative ${category.bgColor} rounded-3xl p-8 hover:shadow-2xl transition-all duration-500 overflow-hidden`}
            >
              {/* Background Gradient on Hover */}
              <div
                className={`absolute inset-0 bg-gradient-to-br ${category.color} opacity-0 group-hover:opacity-10 transition-opacity duration-500`}
              />

              {/* Icon */}
              <div
                className={`w-16 h-16 rounded-2xl bg-gradient-to-br ${category.color} flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300`}
              >
                <category.icon className="w-8 h-8 text-white" />
              </div>

              {/* Content */}
              <h3 className="text-2xl font-bold text-black mb-3">
                {category.title}
              </h3>
              <p className="text-zinc-600 mb-6 leading-relaxed">
                {category.description}
              </p>

              {/* Link */}
              <Link
                href="/submit"
                className="inline-flex items-center gap-2 text-black font-semibold group-hover:gap-4 transition-all"
              >
                Submit Now
                <ArrowRight className="w-4 h-4" />
              </Link>
            </motion.div>
          ))}
        </motion.div>
      </div>
    </section>
  );
}