import { useEffect, useRef } from "react";
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import { Music, Brain, Sparkles } from "lucide-react";
import { useReducedMotion } from "../hooks/useReducedMotion";

gsap.registerPlugin(ScrollTrigger);

const musicGenres = [
  "Nu-Metal",
  "Alt-Metal",
  "Scenecore",
  "Nightcore",
  "Russian Hardtekk",
  "EDM",
  "90's Music",
];

export default function InterestsSection() {
  const sectionRef = useRef<HTMLElement>(null);
  const reducedMotion = useReducedMotion();

  useEffect(() => {
    if (reducedMotion || !sectionRef.current) return;

    const ctx = gsap.context(() => {
      gsap.fromTo(
        ".interest-reveal",
        { y: 40, opacity: 0 },
        {
          y: 0,
          opacity: 1,
          duration: 0.8,
          stagger: 0.1,
          ease: "expo.out",
          scrollTrigger: {
            trigger: sectionRef.current,
            start: "top 70%",
            toggleActions: "play none none none",
          },
        },
      );

      gsap.fromTo(
        ".genre-tag",
        { scale: 0.8, opacity: 0 },
        {
          scale: 1,
          opacity: 1,
          duration: 0.6,
          stagger: 0.06,
          ease: "back.out(1.7)",
          scrollTrigger: {
            trigger: sectionRef.current,
            start: "top 60%",
            toggleActions: "play none none none",
          },
        },
      );
    }, sectionRef);

    return () => ctx.revert();
  }, [reducedMotion]);

  return (
    <section
      id="interests"
      ref={sectionRef}
      className="relative py-32 md:py-40 px-6 overflow-hidden"
    >
      {/* Background ambient */}
      {!reducedMotion && (
        <div className="absolute top-1/2 left-0 w-[600px] h-[600px] -translate-y-1/2 -translate-x-1/2 rounded-full bg-pink-brand/3 blur-[120px] pointer-events-none" />
      )}

      <div className="max-w-6xl mx-auto relative z-10">
        {/* Section label */}
        <div className="interest-reveal flex items-center gap-4 mb-16">
          <span className="text-pink-brand font-mono text-xs tracking-[0.3em] uppercase">
            002
          </span>
          <div className="flex-1 h-px bg-pink-brand/20" />
          <span className="text-grey-500 font-display text-xs tracking-[0.2em] uppercase">
            Interests
          </span>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-20">
          {/* Music */}
          <div>
            <div className="interest-reveal flex items-center gap-3 mb-8">
              <div className="p-3 rounded-xl bg-pink-brand/10 text-pink-brand">
                <Music className="w-6 h-6" />
              </div>
              <h3 className="font-display text-2xl md:text-3xl font-light text-grey-900">
                Music
              </h3>
            </div>

            <p className="interest-reveal text-grey-500 text-base leading-relaxed font-body mb-8">
              Music is essential to my rhythm. From heavy riffs to high-speed
              electronic beats, these are the sounds that fuel my focus and
              creative energy.
            </p>

            <div className="flex flex-wrap gap-3">
              {musicGenres.map((genre) => (
                <span
                  key={genre}
                  className="genre-tag px-4 py-2 rounded-full text-sm font-display text-grey-700 bg-skin-100 border border-pink-brand/10 hover:border-pink-brand/30 hover:bg-pink-brand/5 hover:text-pink-brand transition-all duration-300 cursor-default"
                >
                  {genre}
                </span>
              ))}
            </div>
          </div>

          {/* Mind */}
          <div>
            <div className="interest-reveal flex items-center gap-3 mb-8">
              <div className="p-3 rounded-xl bg-pink-brand/10 text-pink-brand">
                <Brain className="w-6 h-6" />
              </div>
              <h3 className="font-display text-2xl md:text-3xl font-light text-grey-900">
                The Mind
              </h3>
            </div>

            <p className="interest-reveal text-grey-500 text-base leading-relaxed font-body mb-8">
              Beyond code, I am deeply fascinated by how humans think, feel, and
              perceive reality. Psychology and philosophy provide the frameworks
              I use to understand complex systems - both technical and human.
            </p>

            <div className="interest-reveal grid grid-cols-2 gap-4">
              <div className="p-5 rounded-2xl bg-skin-100/50 border border-pink-brand/5 hover:border-pink-brand/15 transition-all duration-300 group">
                <Sparkles className="w-5 h-5 text-pink-brand mb-3 group-hover:scale-110 transition-transform" />
                <h4 className="font-display font-medium text-grey-900 text-sm mb-1">
                  Psychology
                </h4>
                <p className="text-grey-500 text-xs font-body">
                  Cognitive patterns & behavior
                </p>
              </div>
              <div className="p-5 rounded-2xl bg-skin-100/50 border border-pink-brand/5 hover:border-pink-brand/15 transition-all duration-300 group">
                <Sparkles className="w-5 h-5 text-pink-brand mb-3 group-hover:scale-110 transition-transform" />
                <h4 className="font-display font-medium text-grey-900 text-sm mb-1">
                  Philosophy
                </h4>
                <p className="text-grey-500 text-xs font-body">
                  Ethics, logic & existence
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
