import { useEffect, useState } from "react";
import { Button } from "@/components/ui/button";
import { ArrowRight, Shield, Clock } from "lucide-react";

const Hero = () => {
  const [scrollY, setScrollY] = useState(0);

  useEffect(() => {
    const handleScroll = () => setScrollY(window.scrollY);
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  return (
    <section id="home" className="relative min-h-screen flex items-center justify-center overflow-hidden">
      {/* Background Image with Parallax */}
      <div 
        className="absolute inset-0 z-0 parallax-element"
        style={{
          backgroundImage: `url('/lovable-uploads/981f66b9-4fe6-482d-8377-9c377a293e62.png')`,
          backgroundSize: 'cover',
          backgroundPosition: 'center',
          transform: `translateY(${scrollY * 0.5}px)`,
        }}
      />
      
      {/* Hero Overlay */}
      <div className="hero-overlay z-10" />
      
      {/* Content */}
      <div className="relative z-20 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <div className="max-w-4xl mx-auto">
          {/* Badge */}
          <div className="inline-flex items-center px-4 py-2 rounded-full bg-primary/10 border border-primary/30 mb-8">
            <Shield className="w-4 h-4 text-primary mr-2" />
            <span className="text-sm font-medium text-primary">Certified Industrial Inspection</span>
          </div>

          {/* Main Headline */}
          <h1 className="text-5xl md:text-7xl font-bold text-foreground mb-6 leading-tight">
            Premier Industrial 
            <span className="block text-glow">Inspection</span>
          </h1>

          {/* Subheadline */}
          <p className="text-xl md:text-2xl text-muted-foreground mb-8 max-w-2xl mx-auto leading-relaxed">
            Professional non-destructive testing and pipeline integrity services across Texas.
          </p>

          {/* CTA Buttons */}
          <div className="flex flex-col sm:flex-row gap-4 justify-center items-center mb-12">
            <Button size="lg" className="btn-orange-glow text-lg px-8 py-4">
              Schedule Inspection
              <ArrowRight className="w-5 h-5 ml-2" />
            </Button>
            <Button 
              variant="outline" 
              size="lg" 
              className="text-lg px-8 py-4 border-primary/30 text-primary hover:bg-primary/10"
            >
              <Clock className="w-5 h-5 mr-2" />
              24/7 Emergency
            </Button>
          </div>

          {/* Trust Indicators */}
          <div className="grid grid-cols-3 gap-8 mt-16">
            <div className="text-center">
              <div className="text-2xl font-bold text-glow mb-1">15+</div>
              <div className="text-muted-foreground text-sm">Years</div>
            </div>
            <div className="text-center">
              <div className="text-2xl font-bold text-glow mb-1">24/7</div>
              <div className="text-muted-foreground text-sm">Support</div>
            </div>
            <div className="text-center">
              <div className="text-2xl font-bold text-glow mb-1">100%</div>
              <div className="text-muted-foreground text-sm">Certified</div>
            </div>
          </div>
        </div>
      </div>

      {/* Energy Flow Effect */}
      <div className="absolute bottom-0 left-0 right-0 h-1 energy-flow bg-gradient-energy"></div>
    </section>
  );
};

export default Hero;