import { useEffect, useState } from "react";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { 
  Search, 
  Wrench, 
  Shield, 
  Zap, 
  CheckCircle,
  ArrowRight 
} from "lucide-react";

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

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

  const services = [
    {
      icon: Search,
      title: "Non-Destructive Testing",
      description: "Advanced testing methods for comprehensive analysis without material damage.",
      features: ["Ultrasonic Testing", "Radiographic Testing", "Magnetic Particle Testing"]
    },
    {
      icon: Wrench,
      title: "Pipeline Integrity",
      description: "Complete pipeline inspection and integrity management services.",
      features: ["Pipeline Inspection", "Integrity Assessment", "Corrosion Monitoring"]
    },
    {
      icon: Shield,
      title: "Welding Inspection",
      description: "Certified welding inspection meeting AWS and ASME standards.",
      features: ["Visual Inspection", "Weld Quality Assessment", "Code Compliance"]
    },
    {
      icon: Zap,
      title: "Pressure Vessel Testing",
      description: "Comprehensive pressure vessel inspection and testing services.",
      features: ["Hydrostatic Testing", "Thickness Measurement", "Safety Evaluation"]
    }
  ];

  return (
    <section id="services" className="light-section diagonal-cut-top py-24">
      <div 
        className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 parallax-element"
        style={{ transform: `translateY(${scrollY * 0.1}px)` }}
      >
        {/* Section Header */}
        <div className="text-center mb-16">
          <h2 className="text-4xl md:text-5xl font-bold mb-6">
            Our <span className="text-glow">Services</span>
          </h2>
          <p className="text-xl max-w-2xl mx-auto">
            Professional inspection services to keep your operations safe and compliant.
          </p>
        </div>

        {/* Services Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-16">
          {services.map((service, index) => {
            const IconComponent = service.icon;
            return (
              <Card key={index} className="industrial-card group">
                <CardHeader>
                  <div className="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mb-4 group-hover:bg-primary/20 transition-colors">
                    <IconComponent className="w-6 h-6 text-primary" />
                  </div>
                  <CardTitle className="text-xl font-bold">
                    {service.title}
                  </CardTitle>
                  <CardDescription>
                    {service.description}
                  </CardDescription>
                </CardHeader>
                <CardContent>
                  <ul className="space-y-2">
                    {service.features.map((feature, idx) => (
                      <li key={idx} className="flex items-center text-sm">
                        <CheckCircle className="w-4 h-4 text-primary mr-2 flex-shrink-0" />
                        {feature}
                      </li>
                    ))}
                  </ul>
                </CardContent>
              </Card>
            );
          })}
        </div>

        {/* CTA Section */}
        <div className="text-center">
          <div className="bg-white/50 backdrop-blur-sm border border-gray-200 rounded-2xl p-8 max-w-3xl mx-auto">
            <h3 className="text-2xl font-bold mb-4">
              Need Custom Solutions?
            </h3>
            <p className="mb-6">
              We develop tailored inspection programs to meet your specific requirements.
            </p>
            <Button className="btn-orange-glow">
              Discuss Requirements
              <ArrowRight className="w-4 h-4 ml-2" />
            </Button>
          </div>
        </div>
      </div>
    </section>
  );
};

export default Services;