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 jagged-divider-bottom dark-section py-24">
      {/* 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 - Reduced filter */}
      <div className="absolute inset-0 z-10 bg-gradient-to-b from-black/60 via-black/50 to-black/70" />
      
      {/* 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/20 border border-primary/40 mb-8 backdrop-blur-sm">
            <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-white mb-6 leading-tight drop-shadow-lg">
            Quality - Safety - 
            <span className="block text-glow">Reliability</span>
          </h1>

          {/* Subheadline */}
          <p className="text-xl md:text-2xl text-gray-200 mb-8 max-w-2xl mx-auto leading-relaxed drop-shadow-md">
            Starts With You
          </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 shadow-2xl">
              Learn More
              <ArrowRight className="w-5 h-5 ml-2" />
            </Button>
          </div>

          {/* Technology Description */}
          <div className="max-w-4xl mx-auto mb-12">
            <p className="text-lg text-gray-200 leading-relaxed drop-shadow-md">
              We leverage the latest in technology and techniques to obtain the ground truth of the components inspected.
            </p>
          </div>

          {/* Trust Indicators with Organic Shape */}
          <div className="relative mt-16">
            {/* Organic Shape Background */}
            <div className="absolute inset-0 bg-black/80 backdrop-blur-sm rounded-3xl"
                 style={{
                   clipPath: 'polygon(0% 20%, 8% 0%, 18% 15%, 28% 5%, 38% 25%, 48% 10%, 58% 30%, 68% 15%, 78% 35%, 88% 20%, 100% 25%, 100% 100%, 0% 100%)'
                 }}>
            </div>
            
            {/* Trust Indicators Content */}
            <div className="relative z-10 grid grid-cols-3 gap-8 py-16 px-12">
              <div className="text-center">
                <div className="text-2xl font-bold text-glow mb-1">15+</div>
                <div className="text-gray-300 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-gray-300 text-sm">Support</div>
              </div>
              <div className="text-center">
                <div className="text-2xl font-bold text-glow mb-1">100%</div>
                <div className="text-gray-300 text-sm">Certified</div>
              </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;