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

gsap.registerPlugin(ScrollTrigger);

export default function DashboardPreview() {
  const sectionRef = useRef<HTMLElement>(null);
  const headlineRef = useRef<HTMLHeadingElement>(null);
  const subheadlineRef = useRef<HTMLParagraphElement>(null);
  const dashboardRef = 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,
        { y: '-10vh', opacity: 0 },
        { y: 0, opacity: 1, ease: 'power2.out' },
        0
      );

      // Dashboard entrance
      scrollTl.fromTo(
        dashboardRef.current,
        { y: '90vh', scale: 0.88, opacity: 0 },
        { y: 0, scale: 1, opacity: 1, ease: 'power2.out' },
        0.06
      );

      // Subheadline entrance
      scrollTl.fromTo(
        subheadlineRef.current,
        { y: '6vh', opacity: 0 },
        { y: 0, opacity: 1, ease: 'power2.out' },
        0.14
      );

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

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

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

      scrollTl.fromTo(
        subheadlineRef.current,
        { y: 0, opacity: 1 },
        { y: '-4vh', opacity: 0, ease: 'power2.in' },
        0.72
      );
    }, sectionRef);

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

  return (
    <section
      ref={sectionRef}
      className="relative w-full h-screen bg-navy 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 className="text-center px-6 mb-6 lg:mb-8">
        <span className="font-mono text-xs tracking-[0.12em] uppercase text-brand-green mb-4 block">
          Dashboard
        </span>
        <h2
          ref={headlineRef}
          className="font-heading font-bold text-3xl sm:text-4xl lg:text-5xl text-text-primary mb-4"
        >
          Dashboards that stay current—
          <br className="hidden sm:block" />
          so you don't chase spreadsheets.
        </h2>
        <p
          ref={subheadlineRef}
          className="text-base lg:text-lg text-text-secondary max-w-2xl mx-auto"
        >
          Real-time metrics, drill-down holdings, and cash flow timelines.
        </p>
      </div>

      {/* Dashboard Image */}
      <div
        ref={dashboardRef}
        className="relative w-[90vw] lg:w-[84vw] max-w-[1240px]"
      >
        <div className="relative rounded-[22px] border border-white/10 overflow-hidden shadow-card">
          <img
            src="/dashboard_ui.jpg"
            alt="Oxyfinz Portfolio Dashboard"
            className="w-full h-auto"
          />
          {/* Subtle gradient overlay */}
          <div className="absolute inset-0 bg-gradient-to-t from-navy/30 via-transparent to-transparent pointer-events-none" />
        </div>

        {/* Decorative elements */}
        <div className="absolute -top-4 -right-4 w-24 h-24 bg-brand-green/10 rounded-full blur-2xl" />
        <div className="absolute -bottom-4 -left-4 w-32 h-32 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>
  );
}