'use client'

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

gsap.registerPlugin(ScrollTrigger)

export function About() {
  const containerRef = useRef<HTMLDivElement>(null)
  const panelsRef = useRef<HTMLDivElement>(null)

  useEffect(() => {
    const ctx = gsap.context(() => {
      const panels = gsap.utils.toArray<HTMLElement>('.about-chapter')
      if (!panels.length || !containerRef.current) return

      // Pin the container and scrub through chapters
      ScrollTrigger.create({
        trigger: containerRef.current,
        pin: true,
        start: 'top top',
        end: () => `+=${panels.length * window.innerHeight}`,
        scrub: 1,
      })

      panels.forEach((panel, i) => {
        const progress = (1 / panels.length)
        const startPct = `${i * progress * 100}%`
        const endPct = `${(i + 1) * progress * 100}%`

        // Fade in panel
        gsap.fromTo(panel,
          { opacity: i === 0 ? 1 : 0, y: i === 0 ? 0 : 40 },
          {
            opacity: i === panels.length - 1 ? 1 : 0,
            y: 0,
            scrollTrigger: {
              trigger: containerRef.current,
              start: startPct,
              end: endPct,
              scrub: true,
            },
          }
        )

        // Text reveal
        const words = panel.querySelectorAll('.chapter-word')
        gsap.from(words, {
          y: '110%',
          opacity: 0,
          stagger: 0.02,
          scrollTrigger: {
            trigger: containerRef.current,
            start: startPct,
            end: `${(i * progress + progress * 0.3) * 100}%`,
            scrub: true,
          },
        })
      })
    }, containerRef)

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

  return (
    <section
      id="about"
      className="relative w-full min-h-screen overflow-hidden"
      style={{ background: 'var(--bg-primary)' }}
      aria-label="About Martin Baturina"
    >
      <div ref={containerRef} className="relative w-full h-screen overflow-hidden">
        <div ref={panelsRef} className="absolute inset-0">
          {aboutChapters.map((chapter, i) => (
            <div
              key={chapter.id}
              className="about-chapter absolute inset-0 flex items-center"
              style={{
                background: chapter.bgTint,
                opacity: i === 0 ? 1 : 0,
              }}
            >
              {/* Background city ghost text */}
              <div
                className="absolute inset-0 flex items-center justify-center pointer-events-none select-none overflow-hidden"
                aria-hidden="true"
              >
                <span
                  className="font-display text-[20vw] leading-none opacity-[0.03] whitespace-nowrap"
                  style={{ color: chapter.accentColor }}
                >
                  {chapter.city}
                </span>
              </div>

              <div className="relative z-10 w-full px-8 md:px-16 lg:px-24 max-w-screen-xl mx-auto">
                <div className="grid grid-cols-1 lg:grid-cols-12 gap-12 items-center">
                  {/* Left: timeline */}
                  <div className="lg:col-span-1 hidden lg:flex flex-col items-center gap-4">
                    <div className="w-px flex-1" style={{ background: 'rgba(240,240,255,0.1)' }} />
                    {aboutChapters.map((_, j) => (
                      <div
                        key={j}
                        className="w-2 h-2 rounded-full transition-all duration-500 flex-shrink-0"
                        style={{
                          background: j === i ? chapter.accentColor : 'rgba(240,240,255,0.2)',
                          boxShadow: j === i ? `0 0 8px 2px ${chapter.accentColor}` : 'none',
                        }}
                      />
                    ))}
                    <div className="w-px flex-1" style={{ background: 'rgba(240,240,255,0.1)' }} />
                  </div>

                  {/* Content */}
                  <div className="lg:col-span-7">
                    <div className="flex items-baseline gap-4 mb-4">
                      <span
                        className="font-body text-xs tracking-[0.4em] uppercase"
                        style={{ color: chapter.accentColor }}
                      >
                        {chapter.year}
                      </span>
                      <div
                        className="flex-1 h-px max-w-16"
                        style={{ background: chapter.accentColor }}
                      />
                    </div>

                    <h2
                      className="font-display leading-none mb-6"
                      style={{
                        fontSize: 'clamp(3rem, 8vw, 8rem)',
                        color: 'var(--white)',
                      }}
                    >
                      <span className="clip-line block">
                        {chapter.title.split(' ').map((word, wi) => (
                          <span key={wi} className="chapter-word inline-block mr-[0.2em]">
                            {word}
                          </span>
                        ))}
                      </span>
                    </h2>

                    <p
                      className="font-body text-base md:text-lg leading-relaxed max-w-xl"
                      style={{ color: 'rgba(240,240,255,0.6)' }}
                    >
                      {chapter.text}
                    </p>
                  </div>

                  {/* City label */}
                  <div className="lg:col-span-4 flex flex-col items-end justify-center hidden lg:flex">
                    <span
                      className="font-display opacity-20"
                      style={{
                        fontSize: 'clamp(3rem, 6vw, 6rem)',
                        color: chapter.accentColor,
                        writingMode: 'vertical-rl',
                        letterSpacing: '0.1em',
                      }}
                    >
                      {chapter.city}
                    </span>
                  </div>
                </div>
              </div>

              {/* Atmospheric color wash */}
              <div
                className="absolute inset-0 pointer-events-none"
                style={{
                  background: `radial-gradient(ellipse 60% 60% at 80% 50%, ${chapter.accentColor}08 0%, transparent 70%)`,
                }}
                aria-hidden="true"
              />
            </div>
          ))}
        </div>
      </div>

      {/* Top blend */}
      <div
        className="absolute top-0 left-0 right-0 h-24 pointer-events-none z-10"
        style={{ background: 'linear-gradient(to bottom, var(--bg-primary), transparent)' }}
        aria-hidden="true"
      />
    </section>
  )
}