import { useEffect, useState } from "react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { 
  Zap, 
  Radio, 
  Search, 
  Shield, 
  CheckCircle,
  Target,
  Eye,
  Wrench,
  Award,
  Camera,
  Settings
} from "lucide-react";
import Navigation from "@/components/Navigation";
import Footer from "@/components/Footer";

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

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

  const featuredMethods = [
    {
      icon: Zap,
      title: "Ultrasonic: Phased Array",
      description: "Since the early 2000's, our organization has been demonstrating the strength and reliability of PAUT inspections. This technology allows our customers to have confidence in their manufacturing deliverable with a full volumetric code compliant inspection in real-time without having to have exclusion zones or shooting windows.",
      image: "/lovable-uploads/0a023c3c-76e5-4475-a0de-b3e0891c9d50.png"
    },
    {
      icon: Target,
      title: "Ultrasonic: Time of Flight Diffraction",
      description: "Since the early 2000's, our organization has been demonstrating the strength and reliability of PAUT inspections. This technology allows our customers to have confidence in their manufacturing deliverable with a full volumetric code compliant inspection in real-time without having to have exclusion zones or shooting windows.",
      image: "/lovable-uploads/9e823547-8ef1-49cf-8796-5bdd3ef81771.png"
    },
    {
      icon: Radio,
      title: "Radiology: Computed Radiography",
      description: "By combining the granularity of control that software brings coupled with the straightforward image acquisition of traditional radiography, this technology brings the best of both worlds. Smaller exposures and smaller exclusion zones are required through the use of phosphorus imaging plates. In addition, the permanent record is stored on digital media eliminating the large storage requirement of film.",
      image: "/lovable-uploads/981f66b9-4fe6-482d-8377-9c377a293e62.png"
    }
  ];

  const currentServices = [
    { name: "RADIOGRAPHY", icon: Radio },
    { name: "COMPUTERIZED RADIOGRAPHY (CR)", icon: Camera },
    { name: "ULTRASONIC", icon: Zap },
    { name: "COMPUTERIZED ULTRASONICS (PA/TOFD)", icon: Target },
    { name: "LIQUID PENETRANT", icon: Search },
    { name: "MAGNETIC PARTICLE", icon: Shield },
    { name: "VISUAL (API)", icon: Eye },
    { name: "CWI (AWS)", icon: Award },
    { name: "ASNT NDT LEVEL III", icon: CheckCircle },
    { name: "HARDNESS TESTING", icon: Settings },
    { name: "VACUUM TESTING", icon: Search },
    { name: "VIDEO PROBE", icon: Camera },
    { name: "WELDER CERTIFICATIONS", icon: Award },
    { name: "WELDING", icon: Wrench },
    { name: "NDT TRAINING", icon: CheckCircle }
  ];

  return (
    <div className="min-h-screen bg-background">
      <Navigation />
      {/* Hero Section */}
      <section className="relative py-24 bg-background dark-section jagged-divider-bottom">
        {/* Background Image with Parallax */}
        <div 
          className="absolute inset-0 z-0 parallax-element"
          style={{
            backgroundImage: `url('/lovable-uploads/abstract.png')`,
            backgroundSize: 'cover',
            backgroundPosition: 'center',
            transform: `translateY(${scrollY * 0.1}px)`,
          }}
        />
        
        {/* Hero Overlay */}
        <div className="absolute inset-0 z-10 bg-gradient-to-b from-black/60 via-black/50 to-black/70" />
        
        <div 
          className="relative z-20 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 parallax-element"
          style={{ transform: `translateY(${scrollY * 0.1}px)` }}
        >
          <div className="text-center mb-16">
            <h1 className="text-4xl md:text-6xl font-bold text-white mb-6 drop-shadow-lg">
              Our <span className="text-glow">Methods</span>
            </h1>
            <p className="text-xl text-gray-200 max-w-3xl mx-auto leading-relaxed drop-shadow-md">
              Advanced NDT technologies and proven inspection methods delivering precise, 
              reliable results for critical infrastructure across diverse industries.
            </p>
          </div>
        </div>
      </section>

      {/* Featured Methods Section */}
      <section className="light-section py-24">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <h2 className="text-3xl md:text-4xl font-bold mb-6">
              Featured <span className="text-glow">Technologies</span>
            </h2>
            <p className="text-lg text-gray-700 max-w-2xl mx-auto">
              Cutting-edge inspection technologies that set industry standards for accuracy and efficiency.
            </p>
          </div>

          <div className="space-y-16">
            {featuredMethods.map((method, index) => {
              const IconComponent = method.icon;
              const isEven = index % 2 === 0;
              
              return (
                <div key={index} className={`grid grid-cols-1 lg:grid-cols-2 gap-12 items-center ${!isEven ? 'lg:grid-flow-col-dense' : ''}`}>
                  <div className={isEven ? 'lg:order-1' : 'lg:order-2'}>
                    <div className="flex items-center mb-6">
                      <div className="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mr-4">
                        <IconComponent className="w-6 h-6 text-primary" />
                      </div>
                      <h3 className="text-2xl font-bold">{method.title}</h3>
                    </div>
                    <p className="text-gray-700 leading-relaxed">{method.description}</p>
                  </div>
                  
                  <div className={isEven ? 'lg:order-2' : 'lg:order-1'}>
                    <div 
                      className="rounded-lg h-64 bg-cover bg-center relative overflow-hidden shadow-lg"
                      style={{
                        backgroundImage: `url('${method.image}')`,
                      }}
                    >
                      <div className="absolute inset-0 bg-gradient-to-r from-background/20 to-primary/10"></div>
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </section>

      {/* Current Services Section */}
      <section className="jagged-divider-top py-24 bg-background dark-section">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <h2 className="text-3xl md:text-4xl font-bold text-white mb-6">
              Current Services <span className="text-glow">Offered</span>
            </h2>
            <p className="text-gray-300 max-w-2xl mx-auto">
              Comprehensive NDT and inspection services covering all industry requirements 
              with certified professionals and advanced equipment.
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {currentServices.map((service, index) => {
              const IconComponent = service.icon;
              return (
                <Card key={index} className="industrial-card bg-card/80 backdrop-blur-sm border-white/20 hover:border-primary/50 transition-all duration-300">
                  <CardContent className="p-6">
                    <div className="flex items-center space-x-4">
                      <div className="w-10 h-10 bg-primary/20 rounded-lg flex items-center justify-center flex-shrink-0">
                        <IconComponent className="w-5 h-5 text-primary" />
                      </div>
                      <div>
                        <h4 className="font-semibold text-white text-sm">{service.name}</h4>
                      </div>
                    </div>
                  </CardContent>
                </Card>
              );
            })}
          </div>

          {/* Certifications and Standards */}
          <div className="mt-16">
            <div className="bg-black/60 backdrop-blur-sm rounded-2xl p-8 max-w-4xl mx-auto"
                 style={{
                   clipPath: 'polygon(0% 10%, 10% 0%, 20% 15%, 35% 5%, 50% 20%, 65% 8%, 80% 25%, 90% 12%, 100% 18%, 100% 100%, 0% 100%)'
                 }}>
              <div className="text-center relative z-10">
                <h3 className="text-2xl font-bold text-white mb-6">Industry Standards & Certifications</h3>
                <div className="flex flex-wrap justify-center gap-3">
                  <Badge variant="secondary" className="bg-primary/10 text-primary border-primary/30">
                    AWS Certified
                  </Badge>
                  <Badge variant="secondary" className="bg-primary/10 text-primary border-primary/30">
                    ASNT Level III
                  </Badge>
                  <Badge variant="secondary" className="bg-primary/10 text-primary border-primary/30">
                    API Standards
                  </Badge>
                  <Badge variant="secondary" className="bg-primary/10 text-primary border-primary/30">
                    ASME Compliant
                  </Badge>
                  <Badge variant="secondary" className="bg-primary/10 text-primary border-primary/30">
                    ISO 9001:2015
                  </Badge>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      <Footer />
    </div>
  );
};

export default Methods;