import React, { useEffect, useRef } from 'react';
import { Mail, Lock, Check } from 'lucide-react';
import { animate, stagger, random } from 'animejs';

const Hero: React.FC = () => {
  const leftContentRef = useRef<HTMLDivElement>(null);
  const glow1Ref = useRef<HTMLDivElement>(null);
  const glow2Ref = useRef<HTMLDivElement>(null);
  const cardRef = useRef<HTMLDivElement>(null);
  const streakRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (leftContentRef.current) {
      // Staggered entry for left content
      animate(leftContentRef.current.children, {
        translateY: [20, 0],
        opacity: [0, 1],
        delay: stagger(150, { start: 300 }),
        easing: 'easeOutQuad',
        duration: 800
      });
    }

    if (cardRef.current) {
      // Elastic entry for the card
      animate(cardRef.current, {
        translateX: [100, 0],
        opacity: [0, 1],
        delay: 600,
        easing: 'outElastic(1, .8)'
      });
    }

    if (streakRef.current) {
      // Bouncy entry for streak badge
      animate(streakRef.current, {
        scale: [0, 1],
        opacity: [0, 1],
        delay: 1000,
        easing: 'outElastic(1, .8)',
      }).then(() => {
        // Floating animation after entry
        animate(streakRef.current!, {
          translateY: [-10, 0],
          loop: true,
          direction: 'alternate',
          easing: 'inOutSine',
          duration: 2000
        });
      });
    }

    if (glow1Ref.current) {
      // Ambient glow animation
      animate(glow1Ref.current, {
        translateX: () => random(-30, 30),
        translateY: () => random(-30, 30),
        scale: [1, 1.2],
        duration: 4000,
        easing: 'inOutQuad',
        loop: true,
        direction: 'alternate'
      });
    }

    if (glow2Ref.current) {
      animate(glow2Ref.current, {
        translateX: () => random(-30, 30),
        translateY: () => random(-30, 30),
        scale: [1, 1.3],
        duration: 5000,
        easing: 'inOutQuad',
        loop: true,
        direction: 'alternate'
      });
    }
  }, []);

  return (
    <header className="relative pt-32 pb-20 lg:pt-48 lg:pb-32 overflow-hidden mesh-gradient">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        <div className="grid lg:grid-cols-2 gap-12 items-center">

          {/* Left Content */}
          <div ref={leftContentRef} className="space-y-8 text-center lg:text-left">
            <div className="opacity-0 inline-flex items-center gap-2 px-3 py-1 rounded-full bg-primary/10 border border-primary/20 text-primary text-xs font-semibold uppercase tracking-wider">
              <span className="w-2 h-2 rounded-full bg-primary animate-pulse"></span>
              New: AI Deck Generation
            </div>

            <h1 className="opacity-0 text-5xl lg:text-7xl font-display font-bold leading-tight tracking-tight text-white">
              <span className="text-transparent bg-clip-text bg-gradient-to-r from-primary to-emerald-400">
                Stop Doomscrolling
              </span>
              <br />
              Until You Study<br />

            </h1>

            <p className="opacity-0 text-lg text-gray-400 max-w-2xl mx-auto lg:mx-0 leading-relaxed">
              Stop doom scrolling and start learning. Nemia blocks distracting apps until you complete your daily study goals using scientifically-backed spaced repetition.
            </p>

            <div className="opacity-0 flex flex-col sm:flex-row gap-3 justify-center lg:justify-start pt-4">
              <a
                href="#install"
                className="bg-primary text-gray-900 px-8 py-4 rounded-xl font-bold text-lg hover:brightness-110 transition-all shadow-glow flex items-center justify-center gap-2"
                onClick={(e) => {
                  (window as { umami?: { track?: (eventName: string, data?: Record<string, unknown>) => void } })
                    .umami?.track?.('hero_cta_clicked', { location: 'hero' });
                  e.preventDefault();
                  document.querySelector('#install')?.scrollIntoView({ behavior: 'smooth' });
                }}
              >
                <span>Get it now</span>
              </a>
            </div>
          </div>

          {/* Right Visual (Mockups) */}
          <div className="relative mx-auto w-full max-w-md lg:max-w-full">
            {/* Background Glows */}
            <div ref={glow1Ref} className="absolute -top-10 -right-10 w-72 h-72 bg-purple-500/20 rounded-full blur-3xl"></div>
            <div ref={glow2Ref} className="absolute -bottom-10 -left-10 w-72 h-72 bg-primary/20 rounded-full blur-3xl"></div>

            {/* Main Focus Mode Card */}
            <div ref={cardRef} className="opacity-0 relative bg-surface-dark border border-gray-700 rounded-3xl p-6 shadow-2xl transform rotate-3 hover:rotate-0 transition-transform duration-500">
              <div className="flex justify-between items-center mb-8">
                <h3 className="text-xl font-bold text-white">Focus Mode</h3>
                <div className="bg-red-500/10 text-red-500 px-3 py-1 rounded-full text-xs font-bold flex items-center gap-1">
                  <Lock size={14} /> Focus Mode (Android)
                </div>
              </div>

              <div className="text-center mb-8">
                <div className="text-6xl font-display font-bold text-white mb-2">
                  <span className="text-white">22</span>
                </div>
                <p className="text-gray-400 font-medium">Cards Due</p>
                <p className="text-sm text-gray-500">(+3 tomorrow)</p>
              </div>

              <button className="w-full bg-primary text-gray-900 font-bold py-4 rounded-xl shadow-lg hover:shadow-glow transition-all mb-6">
                Review Now to Unlock
              </button>

              <div className="space-y-3">
                <div className="bg-surface-accent p-4 rounded-xl flex justify-between items-center border border-gray-700/50">
                  <div>
                    <p className="font-semibold text-sm text-white">Korean Vocab</p>
                    <p className="text-xs text-gray-500">41 Cards total</p>
                  </div>
                  <span className="text-primary text-sm font-bold">18 Due</span>
                </div>
                <div className="bg-surface-accent p-4 rounded-xl flex justify-between items-center border border-gray-700/50">
                  <div>
                    <p className="font-semibold text-sm text-white">Russian Vocab</p>
                    <p className="text-xs text-gray-500">67 Cards total</p>
                  </div>
                  <span className="text-gray-500 text-sm font-bold">0 Due</span>
                </div>
              </div>
            </div>

            {/* Streak Badge (Floating) */}
            <div ref={streakRef} className="opacity-0 absolute -bottom-6 -left-6 bg-surface-accent text-white p-4 rounded-xl shadow-xl flex items-center gap-3 border border-gray-700 z-20">
              <div className="bg-green-500 rounded-full p-1">
                <Check size={14} className="text-white" />
              </div>
              <div>
                <p className="text-xs font-bold uppercase tracking-wide opacity-70">Streak</p>
                <p className="font-bold text-lg leading-none">14 Days</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </header>
  );
};

export default Hero;