import { useEffect, useRef } from "react";
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import { MapPin, BookOpen, User } from "lucide-react";
import { useReducedMotion } from "../hooks/useReducedMotion";

gsap.registerPlugin(ScrollTrigger);

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

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

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

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

  return (
    <section
      id="about"
      ref={sectionRef}
      className="relative py-32 md:py-40 px-6"
    >
      <div className="max-w-6xl mx-auto">
        {/* Section label */}
        <div className="about-reveal flex items-center gap-4 mb-16">
          <span className="text-pink-brand font-mono text-xs tracking-[0.3em] uppercase">
            001
          </span>
          <div className="flex-1 h-px bg-pink-brand/20" />
          <span className="text-grey-500 font-display text-xs tracking-[0.2em] uppercase">
            Identity
          </span>
        </div>

        {/* Main heading */}
        <h2 className="about-reveal font-display text-4xl md:text-6xl lg:text-7xl font-light text-grey-900 mb-16 leading-tight">
          A young adult from
          <br />
          <span className="text-gradient">Europe</span>
        </h2>

        {/* Content grid */}
        <div className="grid grid-cols-1 md:grid-cols-12 gap-8 md:gap-12">
          {/* Left column - main text */}
          <div className="md:col-span-7 space-y-8">
            <p className="about-reveal text-grey-600 text-lg md:text-xl leading-relaxed font-body">
              I am a curious mind navigating the intersection of technology,
              psychology, and philosophy. My work spans from low-level systems
              to sophisticated web platforms, always driven by a desire to
              understand how things work beneath the surface.
            </p>
            <p className="about-reveal text-grey-500 text-base leading-relaxed font-body">
              Reading is a core part of who I am - it shapes how I think about
              problems and approach solutions. I believe in building things that
              are both technically sound and thoughtfully designed.
            </p>
          </div>

          {/* Right column - details */}
          <div className="md:col-span-5 space-y-6">
            <div className="about-reveal group p-6 rounded-2xl bg-skin-100/50 border border-pink-brand/5 hover:border-pink-brand/15 transition-all duration-300 hover:shadow-lg hover:shadow-pink-brand/5">
              <div className="flex items-start gap-4">
                <div className="p-3 rounded-xl bg-pink-brand/10 text-pink-brand group-hover:bg-pink-brand group-hover:text-white transition-all duration-300">
                  <MapPin className="w-5 h-5" />
                </div>
                <div>
                  <h3 className="font-display font-medium text-grey-900 mb-1">
                    Location
                  </h3>
                  <p className="text-grey-500 text-sm font-body">Europe</p>
                </div>
              </div>
            </div>

            <div className="about-reveal group p-6 rounded-2xl bg-skin-100/50 border border-pink-brand/5 hover:border-pink-brand/15 transition-all duration-300 hover:shadow-lg hover:shadow-pink-brand/5">
              <div className="flex items-start gap-4">
                <div className="p-3 rounded-xl bg-pink-brand/10 text-pink-brand group-hover:bg-pink-brand group-hover:text-white transition-all duration-300">
                  <User className="w-5 h-5" />
                </div>
                <div>
                  <h3 className="font-display font-medium text-grey-900 mb-1">
                    Age
                  </h3>
                  <p className="text-grey-500 text-sm font-body">Young adult</p>
                </div>
              </div>
            </div>

            <div className="about-reveal group p-6 rounded-2xl bg-skin-100/50 border border-pink-brand/5 hover:border-pink-brand/15 transition-all duration-300 hover:shadow-lg hover:shadow-pink-brand/5">
              <div className="flex items-start gap-4">
                <div className="p-3 rounded-xl bg-pink-brand/10 text-pink-brand group-hover:bg-pink-brand group-hover:text-white transition-all duration-300">
                  <BookOpen className="w-5 h-5" />
                </div>
                <div>
                  <h3 className="font-display font-medium text-grey-900 mb-1">
                    Passion
                  </h3>
                  <p className="text-grey-500 text-sm font-body">Avid reader</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}