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

gsap.registerPlugin(ScrollTrigger);

const metrics = [
  {
    value: '3+',
    label: 'Years delivering institutional analytics',
  },
  {
    value: '80%',
    label: 'Of the top 20 investment consultants rely on us',
  },
  {
    value: '6',
    label: 'Of the top 100 asset managers use our data layer',
  },
  {
    value: '$1T+',
    label: 'Assets under advisement processed on the platform',
  },
];

export default function MetricsGrid() {
  const sectionRef = useRef<HTMLElement>(null);
  const headlineRef = useRef<HTMLDivElement>(null);
  const cardRefs = 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%)
      // Headline entrance
      scrollTl.fromTo(
        headlineRef.current,
        { x: '-18vw', opacity: 0 },
        { x: 0, opacity: 1, ease: 'power2.out' },
        0
      );

      // Cards staggered entrance
      cardRefs.current.forEach((card, index) => {
        if (card) {
          const row = Math.floor(index / 2);
          const col = index % 2;
          scrollTl.fromTo(
            card,
            { x: '18vw', y: '10vh', opacity: 0 },
            { x: 0, y: 0, opacity: 1, ease: 'power2.out' },
            0.1 + (row * 2 + col) * 0.06
          );
        }
      });

      // SETTLE (30% - 70%) - Static with border shimmer via CSS

      // EXIT (70% - 100%)
      cardRefs.current.forEach((card, index) => {
        if (card) {
          scrollTl.fromTo(
            card,
            { y: 0, opacity: 1 },
            { y: '-10vh', opacity: 0, ease: 'power2.in' },
            0.7 + index * 0.02
          );
        }
      });

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

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

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

      <div className="w-full px-6 lg:px-[7vw]">
        <div className="flex flex-col lg:flex-row lg:items-center gap-12 lg:gap-16">
          {/* Left Headline Block */}
          <div ref={headlineRef} className="lg:w-[34vw]">
            <span className="font-mono text-xs tracking-[0.12em] uppercase text-brand-green mb-4 block">
              Trust
            </span>
            <h2 className="font-heading font-bold text-4xl lg:text-5xl xl:text-6xl text-text-primary leading-tight mb-6">
              Built for scale.
              <br />
              Trusted by leaders.
            </h2>
            <p className="text-base lg:text-lg text-text-secondary leading-relaxed">
              From mid-size advisors to global asset managers—Oxyfinz keeps data
              accurate and decisions fast.
            </p>
          </div>

          {/* Right Metric Cards Grid */}
          <div className="lg:w-[41vw] grid grid-cols-2 gap-4 lg:gap-5">
            {metrics.map((metric, index) => (
              <div
                key={index}
                ref={(el) => { cardRefs.current[index] = el; }}
                className="group relative p-6 lg:p-8 bg-surface rounded-3xl border border-white/10 hover:border-brand-green/30 transition-all duration-500 animate-border-shimmer"
              >
                {/* Value */}
                <div className="font-heading font-bold text-4xl lg:text-5xl xl:text-6xl text-gradient mb-3">
                  {metric.value}
                </div>

                {/* Label */}
                <p className="text-sm lg:text-base text-text-secondary leading-relaxed">
                  {metric.label}
                </p>

                {/* Hover glow */}
                <div className="absolute inset-0 rounded-3xl opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none">
                  <div className="absolute inset-0 rounded-3xl bg-gradient-to-br from-brand-green/5 to-transparent" />
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

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