import React from 'react';
import { Mail, Lock, Check } from 'lucide-react';

const Hero: React.FC = () => {
  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 className="space-y-8 text-center lg:text-left">
            <div className="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="text-5xl lg:text-7xl font-display font-bold leading-tight tracking-tight text-white">
              Unlock Apps with <br />
              <span className="text-transparent bg-clip-text bg-gradient-to-r from-primary to-emerald-400">
                Knowledge
              </span>
            </h1>
            
            <p className="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 on Android until you complete your daily study goals. Master anything with scientifically-backed spaced repetition and cloud sync.
            </p>
            
            <form 
              action="https://getlaunchlist.com/s/pAqdup" 
              method="POST"
              className="flex flex-col sm:flex-row gap-3 justify-center lg:justify-start max-w-md mx-auto lg:mx-0"
            >
              <div className="relative flex-grow">
                <Mail className="absolute left-4 top-1/2 -translate-y-1/2 text-gray-500" size={20} />
                <input 
                  type="email" 
                  name="email"
                  placeholder="Enter your email" 
                  required
                  className="w-full bg-surface-dark border border-gray-700 rounded-xl py-4 pl-12 pr-4 text-white focus:outline-none focus:border-primary transition-colors"
                />
              </div>
              <button 
                type="submit"
                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 whitespace-nowrap"
              >
                <span>Join Waitlist</span>
              </button>
            </form>
          </div>

          {/* Right Visual (Mockups) */}
          <div className="relative mx-auto w-full max-w-md lg:max-w-full">
            {/* Background Glows */}
            <div className="absolute -top-10 -right-10 w-72 h-72 bg-purple-500/20 rounded-full blur-3xl"></div>
            <div className="absolute -bottom-10 -left-10 w-72 h-72 bg-primary/20 rounded-full blur-3xl"></div>
            
            {/* Main Focus Mode Card */}
            <div className="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 className="absolute -bottom-6 -left-6 bg-surface-accent text-white p-4 rounded-xl shadow-xl flex items-center gap-3 animate-bounce 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;