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

gsap.registerPlugin(ScrollTrigger);

export default function Testimonial() {
  const sectionRef = useRef<HTMLElement>(null);
  const cardRef = useRef<HTMLDivElement>(null);
  const photoRef = useRef<HTMLDivElement>(null);
  const quoteRef = useRef<HTMLDivElement>(null);

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

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

      // Photo entrance
      scrollTl.fromTo(
        photoRef.current,
        { x: '-10vw', opacity: 0 },
        { x: 0, opacity: 1, ease: 'power2.out' },
        0.1
      );

      // Quote entrance
      scrollTl.fromTo(
        quoteRef.current,
        { x: '10vw', opacity: 0 },
        { x: 0, opacity: 1, ease: 'power2.out' },
        0.12
      );

      // SETTLE (30% - 70%) - Static with subtle parallax

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

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

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

      {/* Testimonial Card */}
      <div
        ref={cardRef}
        className="relative w-[90vw] lg:w-[74vw] max-w-[1080px] h-auto lg:h-[52vh] 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 Photo */}
          <div
            ref={photoRef}
            className="lg:w-[45%] h-[250px] lg:h-full"
          >
            <img
              src="/testimonial_photo.jpg"
              alt="Sarah Chen - VP of Portfolio Analytics"
              className="w-full h-full object-cover"
            />
          </div>

          {/* Right Quote */}
          <div
            ref={quoteRef}
            className="lg:w-[55%] flex flex-col justify-center p-8 lg:p-12"
          >
            {/* Quote Icon */}
            <div className="w-12 h-12 rounded-xl bg-brand-green/10 flex items-center justify-center mb-6">
              <Quote size={24} className="text-brand-green" />
            </div>

            {/* Quote Text */}
            <blockquote className="font-heading text-xl lg:text-2xl xl:text-3xl text-text-primary leading-snug mb-8">
              "Oxyfinz cut our reporting cycle by half—and improved accuracy.
              It's become our single source of truth."
            </blockquote>

            {/* Attribution */}
            <div className="mb-6">
              <div className="font-heading font-semibold text-lg text-text-primary">
                Sarah Chen
              </div>
              <div className="text-sm text-text-secondary">
                VP of Portfolio Analytics
              </div>
            </div>

            {/* CTA Link */}
            <a
              href="#"
              className="inline-flex items-center gap-2 text-brand-green text-sm font-medium hover:gap-3 transition-all duration-300"
            >
              Read the case study
              <ArrowRight size={16} />
            </a>
          </div>
        </div>
      </div>

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