import { useEffect, useRef } from 'react';
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
import { ArrowRight } from 'lucide-react';

gsap.registerPlugin(ScrollTrigger);

export default function ProductCard() {
  const sectionRef = useRef<HTMLElement>(null);
  const cardRef = useRef<HTMLDivElement>(null);
  const textRef = useRef<HTMLDivElement>(null);
  const imageRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const ctx = gsap.context(() => {
      const scrollTl = gsap.timeline({
        scrollTrigger: {
          trigger: sectionRef.current,
          start: 'top top',
          end: '+=130%',
          pin: true,
          scrub: 0.6,
        },
      });

      // ENTRANCE (0% - 30%)
      // Card container entrance
      scrollTl.fromTo(
        cardRef.current,
        { y: '110vh', scale: 0.92, rotateX: 10, opacity: 0 },
        { y: 0, scale: 1, rotateX: 0, opacity: 1, ease: 'power2.out' },
        0
      );

      // Left text entrance
      scrollTl.fromTo(
        textRef.current,
        { x: '-12vw', opacity: 0 },
        { x: 0, opacity: 1, ease: 'power2.out' },
        0.1
      );

      // Right image entrance
      scrollTl.fromTo(
        imageRef.current,
        { x: '12vw', opacity: 0 },
        { x: 0, opacity: 1, ease: 'power2.out' },
        0.12
      );

      // SETTLE (30% - 70%) - No animation needed

      // EXIT (70% - 100%)
      scrollTl.fromTo(
        cardRef.current,
        { y: 0, scale: 1, opacity: 1 },
        { y: '-18vh', scale: 0.96, opacity: 0, ease: 'power2.in' },
        0.7
      );

      scrollTl.fromTo(
        textRef.current,
        { x: 0, opacity: 1 },
        { x: '-6vw', opacity: 0, ease: 'power2.in' },
        0.7
      );

      scrollTl.fromTo(
        imageRef.current,
        { x: 0, opacity: 1 },
        { x: '6vw', opacity: 0, ease: 'power2.in' },
        0.7
      );
    }, sectionRef);

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

  return (
    <section
      id="product"
      ref={sectionRef}
      className="relative w-full h-screen bg-navy dot-grid overflow-hidden flex items-center justify-center"
    >
      {/* Section Divider at top */}
      <div className="absolute top-0 left-0 right-0 section-divider" />

      {/* Center Product Card */}
      <div
        ref={cardRef}
        className="relative w-[90vw] lg:w-[78vw] max-w-[1180px] h-auto lg:h-[56vh] bg-surface rounded-[28px] border border-white/10 overflow-hidden"
        style={{ boxShadow: '0 24px 70px rgba(0, 0, 0, 0.5)' }}
      >
        <div className="flex flex-col lg:flex-row h-full">
          {/* Left Text Block */}
          <div
            ref={textRef}
            className="flex flex-col justify-center p-8 lg:p-12 lg:w-[45%]"
          >
            <span className="font-mono text-xs tracking-[0.12em] uppercase text-brand-green mb-4">
              The Platform
            </span>
            <h2 className="font-heading font-bold text-3xl lg:text-4xl xl:text-5xl text-text-primary leading-tight mb-6">
              A command center for portfolio decisions.
            </h2>
            <p className="text-base lg:text-lg text-text-secondary leading-relaxed mb-8">
              See exposure, attribution, and cash flows in one view. Drill from
              high-level summaries to line-item holdings in seconds.
            </p>
            <a
              href="#solutions"
              className="inline-flex items-center gap-2 text-brand-green text-sm font-medium hover:gap-3 transition-all duration-300"
            >
              Explore the product
              <ArrowRight size={16} />
            </a>
          </div>

          {/* Right Image */}
          <div
            ref={imageRef}
            className="relative lg:w-[55%] h-[300px] lg:h-full p-4 lg:p-6"
          >
            <div className="relative w-full h-full rounded-[18px] overflow-hidden">
              <img
                src="/product_office.jpg"
                alt="Team collaborating on portfolio analysis"
                className="w-full h-full object-cover"
              />
              {/* Subtle overlay gradient */}
              <div className="absolute inset-0 bg-gradient-to-t from-surface/40 via-transparent to-transparent" />
            </div>
          </div>
        </div>
      </div>

      {/* Section Divider at bottom */}
      <div className="absolute bottom-0 left-0 right-0 section-divider" />
    </section>
  );
}