import { useState, lazy, Suspense } from "react";
import { Button } from "@/components/ui/button";
import { ArrowRight, Play, Zap, Clock, TrendingUp } from "lucide-react";
import heroImage from "@/assets/hero-automation.jpg";

// Lazy load contact form for better performance
const ContactFormModal = lazy(() => 
  import("@/components/ContactFormModal").then(module => ({ 
    default: module.ContactFormModal 
  }))
);

export function Hero() {
  const [showContactForm, setShowContactForm] = useState(false);

  return (
    <>
      <section 
        className="relative min-h-screen flex items-center justify-center overflow-hidden pt-20"
        itemScope 
        itemType="https://schema.org/Organization"
      >
        {/* Background gradient */}
        <div className="absolute inset-0 subtle-gradient"></div>
        
        {/* Floating elements for visual interest */}
        <div className="absolute top-20 left-10 w-20 h-20 bg-primary/10 rounded-full animate-float opacity-50" aria-hidden="true"></div>
        <div className="absolute bottom-32 right-16 w-16 h-16 bg-primary/20 rounded-full animate-float opacity-60" style={{ animationDelay: '2s' }} aria-hidden="true"></div>
        <div className="absolute top-1/3 right-1/4 w-12 h-12 bg-primary/15 rounded-full animate-float opacity-40" style={{ animationDelay: '4s' }} aria-hidden="true"></div>

        <div className="container mx-auto px-4 relative z-10">
          <div className="grid lg:grid-cols-2 gap-12 items-center">
            {/* Left column - Content */}
            <header className="space-y-8 animate-slide-up">
              <div className="space-y-4">
                <div 
                  className="inline-flex items-center gap-2 bg-accent/50 backdrop-blur-sm px-4 py-2 rounded-full text-sm font-medium text-accent-foreground border border-accent-foreground/20"
                  role="banner"
                >
                  <Zap className="w-4 h-4" aria-hidden="true" />
                  <span itemProp="description">AI-Powered Lead Automation</span>
                </div>
                
                <h1 
                  className="text-4xl md:text-5xl lg:text-6xl font-bold leading-tight"
                  itemProp="name"
                >
                  Never Miss Another{" "}
                  <span className="text-gradient">High-Value Lead</span>{" "}
                  Again
                </h1>
                
                <p 
                  className="text-xl text-muted-foreground leading-relaxed max-w-2xl"
                  itemProp="description"
                >
                  Transform your service business with done-for-you automated systems that respond to leads in under 60 seconds, qualify prospects instantly, and convert more inquiries into paying customers.
                </p>
              </div>

              {/* Stats row */}
              <div className="grid grid-cols-3 gap-6 py-6" role="group" aria-label="Key performance metrics">
                <div className="text-center" itemScope itemType="https://schema.org/QuantitativeValue">
                  <div className="text-2xl font-bold text-primary" itemProp="value">&lt;60s</div>
                  <div className="text-sm text-muted-foreground" itemProp="unitText">Response Time</div>
                </div>
                <div className="text-center" itemScope itemType="https://schema.org/QuantitativeValue">
                  <div className="text-2xl font-bold text-primary" itemProp="value">30%+</div>
                  <div className="text-sm text-muted-foreground" itemProp="unitText">More Bookings</div>
                </div>
                <div className="text-center" itemScope itemType="https://schema.org/QuantitativeValue">
                  <div className="text-2xl font-bold text-primary" itemProp="value">24/7</div>
                  <div className="text-sm text-muted-foreground" itemProp="unitText">AI Coverage</div>
                </div>
              </div>

              {/* CTA buttons */}
              <div className="flex flex-col sm:flex-row gap-4" role="group" aria-label="Call to action buttons">
                <Button 
                  variant="hero" 
                  size="xl" 
                  className="group" 
                  onClick={() => setShowContactForm(true)}
                  aria-label="Get your free business automation audit"
                >
                  Get Your Free Audit
                  <ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" aria-hidden="true" />
                </Button>
                
                <Button 
                  variant="minimal" 
                  size="xl" 
                  className="group"
                  aria-label="Watch product demonstration video"
                >
                  <Play className="w-5 h-5" aria-hidden="true" />
                  Watch Demo
                </Button>
              </div>
              
              {/* Trust indicators */}
              <div className="flex items-center gap-6 pt-4 text-sm text-muted-foreground" role="group" aria-label="Trust indicators">
                <div className="flex items-center gap-2">
                  <Clock className="w-4 h-4" aria-hidden="true" />
                  <span>Setup in 48 hours</span>
                </div>
                <div className="flex items-center gap-2">
                  <TrendingUp className="w-4 h-4" aria-hidden="true" />
                  <span>30-day guarantee</span>
                </div>
              </div>
            </header>

            {/* Right column - Hero image */}
            <div className="relative lg:order-first order-last animate-fade-in" style={{ animationDelay: '0.3s' }}>
              <figure className="relative">
                {/* Glow effect behind image */}
                <div className="absolute inset-0 hero-gradient opacity-20 blur-3xl rounded-3xl" aria-hidden="true"></div>
                
                {/* Main image */}
                <img
                  src={heroImage}
                  alt="Automated business systems dashboard showing AI-powered lead management with real-time analytics, response times, and conversion tracking for service businesses"
                  className="relative z-10 w-full h-auto rounded-2xl shadow-elegant hover:shadow-glow transition-smooth transform hover:scale-105"
                  loading="eager"
                  fetchPriority="high"
                  width="800"
                  height="600"
                  style={{
                    aspectRatio: '4/3',
                    objectFit: 'cover',
                    maxWidth: '100%',
                    height: 'auto'
                  }}
                  itemProp="image"
                  decoding="async"
                />
                
                {/* Floating badges */}
                <div 
                  className="absolute -top-4 -left-4 bg-background border border-border rounded-lg p-3 shadow-elegant animate-float"
                  role="img"
                  aria-label="Live leads counter showing 47 new leads"
                >
                  <div className="text-xs font-medium text-muted-foreground">Live Leads</div>
                  <div className="text-lg font-bold text-primary">+47</div>
                </div>
                
                <div 
                  className="absolute -bottom-4 -right-4 bg-background border border-border rounded-lg p-3 shadow-elegant animate-float" 
                  style={{ animationDelay: '1s' }}
                  role="img"
                  aria-label="Response time indicator showing 23 seconds"
                >
                  <div className="text-xs font-medium text-muted-foreground">Response Time</div>
                  <div className="text-lg font-bold text-primary">23s</div>
                </div>
              </figure>
            </div>
          </div>
        </div>
      </section>
      
      <Suspense fallback={<div className="sr-only">Loading contact form...</div>}>
        <ContactFormModal 
          isOpen={showContactForm} 
          onClose={() => setShowContactForm(false)} 
        />
      </Suspense>
    </>
  );
}