import { useNavigate } from 'react-router-dom'
import { captureUTMParams } from '@/lib/analytics'
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import { ArrowRight, Mail, Inbox, Sparkles, Check, Zap } from 'lucide-react'

export function Hero() {
  const navigate = useNavigate()

  const handleCTAClick = () => {
    // Capture UTM parameters before navigation
    captureUTMParams()
    navigate('/register')
  }

  return (
    <section className="relative min-h-screen flex items-center overflow-hidden">
      {/* Background */}
      <div className="absolute inset-0 gradient-hero" />
      <div className="absolute inset-0 gradient-mesh opacity-30" />
      
      {/* Grid pattern overlay */}
      <div 
        className="absolute inset-0 opacity-10"
        style={{
          backgroundImage: `url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.4'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")`,
        }}
      />

      <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-32">
        <div className="grid lg:grid-cols-2 gap-12 items-center">
          {/* Left side - Text content */}
          <div className="text-center lg:text-left">
            <Badge className="mb-6 bg-primary-500/20 text-primary-200 border-primary-400/30">
              <Sparkles className="w-3 h-3 mr-1" />
              AI-powered email sorting
            </Badge>
            
            <h1 className="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-white leading-tight mb-6">
              Your inbox.
              <br />
              <span className="text-transparent bg-clip-text bg-gradient-to-r from-accent-400 to-primary-300">
                Finally organized.
              </span>
            </h1>
            
            <p className="text-lg sm:text-xl text-slate-300 mb-8 max-w-xl mx-auto lg:mx-0">
              EmailSorter uses AI to automatically categorize your emails. 
              Newsletters, invoices, important contacts – everything lands 
              exactly where it belongs.
            </p>

            <div className="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start mb-8">
              <Button 
                size="xl" 
                onClick={handleCTAClick}
                className="group"
              >
                Start 14-day free trial
                <ArrowRight className="w-5 h-5 ml-2 group-hover:translate-x-1 transition-transform" />
              </Button>
              <Button 
                size="xl" 
                variant="outline" 
                className="bg-white/10 border-white/20 text-white hover:bg-white/20"
                onClick={() => document.getElementById('how-it-works')?.scrollIntoView({ behavior: 'smooth' })}
              >
                See how it works
              </Button>
            </div>

            {/* Trust badges */}
            <div className="flex flex-wrap gap-6 justify-center lg:justify-start text-slate-400 text-sm">
              <div className="flex items-center gap-2">
                <Check className="w-4 h-4 text-accent-400" />
                No credit card required
              </div>
              <div className="flex items-center gap-2">
                <Check className="w-4 h-4 text-accent-400" />
                Gmail & Outlook
              </div>
              <div className="flex items-center gap-2">
                <Check className="w-4 h-4 text-accent-400" />
                GDPR compliant
              </div>
            </div>
          </div>

          {/* Right side - Visual */}
          <div className="relative hidden lg:block">
            <div className="relative">
              {/* Main card */}
              <div className="bg-white/10 backdrop-blur-xl rounded-3xl border border-white/20 p-6 shadow-2xl animate-float">
                <div className="flex items-center gap-3 mb-6">
                  <div className="w-12 h-12 rounded-xl bg-gradient-to-br from-primary-500 to-primary-700 flex items-center justify-center">
                    <Inbox className="w-6 h-6 text-white" />
                  </div>
                  <div>
                    <h3 className="font-semibold text-white">Your Inbox</h3>
                    <p className="text-sm text-slate-400">Auto-sorted</p>
                  </div>
                </div>

                {/* Email categories preview */}
                <div className="space-y-3">
                  <EmailPreview 
                    category="Important"
                    color="bg-red-500"
                    sender="John Smith"
                    subject="Meeting tomorrow at 10"
                    delay="stagger-1"
                  />
                  <EmailPreview 
                    category="Invoice"
                    color="bg-green-500"
                    sender="Amazon"
                    subject="Invoice for order #12345"
                    delay="stagger-2"
                  />
                  <EmailPreview 
                    category="Newsletter"
                    color="bg-purple-500"
                    sender="Tech Daily"
                    subject="Latest AI trends"
                    delay="stagger-3"
                  />
                  <EmailPreview 
                    category="Social"
                    color="bg-cyan-500"
                    sender="LinkedIn"
                    subject="3 new connection requests"
                    delay="stagger-4"
                  />
                </div>
              </div>

              {/* Floating badge */}
              <div className="absolute -right-4 top-1/4 bg-accent-500 text-white px-4 py-2 rounded-full text-sm font-semibold shadow-lg animate-pulse-glow">
                <Zap className="w-4 h-4 inline mr-1" />
                AI sorting
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Scroll indicator */}
      <div className="absolute bottom-8 left-1/2 -translate-x-1/2 animate-bounce">
        <div className="w-6 h-10 rounded-full border-2 border-white/30 flex justify-center pt-2">
          <div className="w-1.5 h-1.5 rounded-full bg-white/60" />
        </div>
      </div>
    </section>
  )
}

interface EmailPreviewProps {
  category: string
  color: string
  sender: string
  subject: string
  delay: string
}

function EmailPreview({ category, color, sender, subject, delay }: EmailPreviewProps) {
  return (
    <div className={`flex items-center gap-3 bg-white/5 rounded-xl p-3 border border-white/10 opacity-0 animate-[fadeIn_0.5s_ease-out_forwards] ${delay}`}>
      <div className={`w-2 h-10 rounded-full ${color}`} />
      <div className="flex-1 min-w-0">
        <div className="flex items-center gap-2 mb-0.5">
          <span className="text-sm font-medium text-white truncate">{sender}</span>
          <span className={`text-xs px-2 py-0.5 rounded ${color} text-white`}>{category}</span>
        </div>
        <p className="text-sm text-slate-400 truncate">{subject}</p>
      </div>
      <Mail className="w-4 h-4 text-slate-500 flex-shrink-0" />
    </div>
  )
}
