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

gsap.registerPlugin(ScrollTrigger);

export default function GlobalCoverage() {
  const sectionRef = useRef<HTMLElement>(null);
  const headlineRef = useRef<HTMLDivElement>(null);
  const mapRef = 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%)
      // Map entrance
      scrollTl.fromTo(
        mapRef.current,
        { scale: 0.86, rotateX: 12, opacity: 0 },
        { scale: 1, rotateX: 0, opacity: 1, ease: 'power2.out' },
        0
      );

      // Headline entrance
      scrollTl.fromTo(
        headlineRef.current,
        { y: '-8vh', opacity: 0 },
        { y: 0, opacity: 1, ease: 'power2.out' },
        0.1
      );

      // SETTLE (30% - 70%) - Static with subtle drift animation via CSS

      // EXIT (70% - 100%)
      scrollTl.fromTo(
        mapRef.current,
        { scale: 1, opacity: 1 },
        { scale: 1.06, opacity: 0, ease: 'power2.in' },
        0.7
      );

      scrollTl.fromTo(
        headlineRef.current,
        { y: 0, opacity: 1 },
        { y: '6vh', opacity: 0, ease: 'power2.in' },
        0.7
      );
    }, sectionRef);

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

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

      {/* Headline */}
      <div ref={headlineRef} className="text-center px-6 mb-8 lg:mb-12 z-10">
        <span className="font-mono text-xs tracking-[0.12em] uppercase text-brand-green mb-4 block">
          Global Reach
        </span>
        <h2 className="font-heading font-bold text-4xl lg:text-5xl xl:text-6xl text-text-primary mb-4">
          Global coverage.
          <br />
          Local precision.
        </h2>
        <p className="text-base lg:text-lg text-text-secondary max-w-2xl mx-auto">
          Multi-currency, multi-timezone, multi-asset—normalized into one
          consistent view.
        </p>
      </div>

      {/* World Map */}
      <div
        ref={mapRef}
        className="relative w-[90vw] lg:w-[84vw] max-w-[1240px]"
        style={{ perspective: '1000px' }}
      >
        <div className="relative rounded-[22px] overflow-hidden border border-white/10 shadow-card">
          <img
            src="/world_map.jpg"
            alt="Global financial network coverage"
            className="w-full h-auto"
          />
          {/* Subtle overlay */}
          <div className="absolute inset-0 bg-gradient-to-t from-surface-elevated/50 via-transparent to-surface-elevated/20 pointer-events-none" />
        </div>

        {/* Decorative glow */}
        <div className="absolute -top-8 left-1/2 -translate-x-1/2 w-64 h-64 bg-brand-green/10 rounded-full blur-3xl" />
        <div className="absolute -bottom-8 left-1/4 w-48 h-48 bg-brand-green/5 rounded-full blur-3xl" />
        <div className="absolute -bottom-8 right-1/4 w-48 h-48 bg-brand-green/5 rounded-full blur-3xl" />
      </div>

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