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

gsap.registerPlugin(ScrollTrigger);

export default function MobileApp() {
  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-white dark:bg-navy 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">
            <Smartphone size={24} className="text-orange" />
          </div>
          <h2 className="font-heading font-bold text-3xl lg:text-5xl text-gray-900 dark:text-white mb-4">
            App-grade your investments.
          </h2>
          <p className="text-lg text-text-secondary max-w-2xl mx-auto mb-8">
            Create a portfolio and track your investments on the go with our mobile app. Anytime, anywhere.
          </p>
          <div className="flex flex-wrap justify-center items-center gap-4">
            {/* App Store and Google Play buttons would go here */}
            <div className="w-32 h-10 bg-gray-100 dark:bg-white/10 rounded-lg flex items-center justify-center text-text-secondary text-sm">
              App Store
            </div>
            <div className="w-32 h-10 bg-gray-100 dark:bg-white/10 rounded-lg flex items-center justify-center text-text-secondary text-sm">
              Google Play
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}