'use client'

import { useEffect, useRef } from 'react'
import { gsap } from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'
import { quotes } from '@/lib/data'

gsap.registerPlugin(ScrollTrigger)

export function Quotes() {
  const sectionRef = useRef<HTMLElement>(null)

  useEffect(() => {
    const ctx = gsap.context(() => {
      const blocks = gsap.utils.toArray<HTMLElement>('.quote-block')
      blocks.forEach((block) => {
        const text = block.querySelector('.quote-text')
        const attribution = block.querySelector('.quote-attribution')

        if (text) {
          gsap.from(text, {
            y: 40,
            opacity: 0,
            duration: 1,
            ease: 'expo.out',
            scrollTrigger: {
              trigger: block,
              start: 'top 80%',
              toggleActions: 'play none none reverse',
            },
          })
        }
        if (attribution) {
          gsap.from(attribution, {
            y: 20,
            opacity: 0,
            duration: 0.7,
            delay: 0.3,
            ease: 'expo.out',
            scrollTrigger: {
              trigger: block,
              start: 'top 75%',
              toggleActions: 'play none none reverse',
            },
          })
        }
      })
    }, sectionRef)
    return () => ctx.revert()
  }, [])

  return (
    <section
      id="quotes"
      ref={sectionRef}
      className="relative w-full py-24 overflow-hidden"
      style={{ background: 'var(--bg-secondary)' }}
      aria-label="Quotes about Martin Baturina"
    >
      <div className="px-8 md:px-16 max-w-screen-xl mx-auto">
        <p className="font-body text-xs tracking-[0.4em] uppercase mb-2" style={{ color: 'var(--cyan)' }}>
          They Say
        </p>
        <h2
          className="font-display mb-16 leading-none"
          style={{ fontSize: 'clamp(3rem, 8vw, 8rem)', color: 'var(--white)' }}
        >
          Voices
        </h2>

        <div className="flex flex-col divide-y" style={{ borderColor: 'rgba(0,68,255,0.15)' }}>
          {quotes.map((q, i) => (
            <div
              key={i}
              className="quote-block py-12 grid grid-cols-1 lg:grid-cols-12 gap-8 items-start relative"
              style={{
                background: i % 2 === 0 ? 'transparent' : 'rgba(0,68,255,0.02)',
              }}
            >
              {/* Decorative quote mark */}
              <div
                className="absolute top-8 right-8 font-display leading-none select-none pointer-events-none"
                style={{
                  fontSize: 'clamp(8rem, 20vw, 20rem)',
                  color: 'var(--cyan)',
                  opacity: 0.04,
                  lineHeight: 0.8,
                }}
                aria-hidden="true"
              >
                &ldquo;
              </div>

              {/* Quote number */}
              <div className="lg:col-span-1">
                <span
                  className="font-display text-6xl opacity-20"
                  style={{ color: 'var(--cyan)' }}
                >
                  {String(i + 1).padStart(2, '0')}
                </span>
              </div>

              {/* Quote text */}
              <div className="lg:col-span-9">
                <blockquote
                  className="quote-text font-body leading-relaxed"
                  style={{
                    fontSize: 'clamp(1.1rem, 2.5vw, 2rem)',
                    color: 'var(--white)',
                    fontStyle: 'italic',
                  }}
                >
                  &ldquo;{q.text}&rdquo;
                </blockquote>
              </div>

              {/* Attribution */}
              <div className="lg:col-span-2 quote-attribution">
                <div
                  className="w-8 h-px mb-3"
                  style={{ background: 'var(--cyan)' }}
                />
                <p className="font-body text-sm font-medium" style={{ color: 'var(--white)' }}>
                  {q.author}
                </p>
                <p className="font-body text-xs uppercase tracking-widest mt-1" style={{ color: 'rgba(240,240,255,0.4)' }}>
                  {q.role}
                </p>
                <p className="font-body text-xs mt-1" style={{ color: 'rgba(240,240,255,0.25)' }}>
                  {q.year}
                </p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  )
}