import { useEffect, useRef } from 'react';
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
import { ArrowRight, Globe } from 'lucide-react';

gsap.registerPlugin(ScrollTrigger);

export default function MultiCurrency() {
  const sectionRef = useRef<HTMLElement>(null);
  const contentRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const ctx = gsap.context(() => {
      gsap.fromTo(
        contentRef.current,
        { y: 40, opacity: 0 },
        {
          y: 0,
          opacity: 1,
          duration: 0.8,
          ease: 'power2.out',
          scrollTrigger: {
            trigger: sectionRef.current,
            start: 'top 80%',
          },
        }
      );
    }, sectionRef);

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

  return (
    <section
      ref={sectionRef}
      className="relative py-24 lg:py-32 bg-surface overflow-hidden"
    >
      {/* ASCII Grid Background */}
      <div className="absolute inset-0 ascii-grid opacity-10 dark:opacity-20" />

      <div className="relative z-10 max-w-9xl mx-auto px-6">
        <div ref={contentRef} className="text-center">
          <div className="flex items-center justify-center gap-2 mb-4">
            <Globe size={24} className="text-orange" />
          </div>
          <h2 className="font-heading font-bold text-3xl lg:text-5xl text-gray-900 dark:text-white mb-6">
            See how Multi-currency Investment
            <br />
            <span className="text-gradient-orange">works</span>
          </h2>
          <a
            href="#contact"
            className="inline-flex items-center gap-2 px-6 py-3 bg-orange text-white font-medium rounded-lg hover:bg-orange-dark transition-colors shadow-glow"
          >
            Learn More
            <ArrowRight size={18} />
          </a>
        </div>
      </div>
    </section>
  );
}