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

const Services = () => {
  const services = [
    {
      icon: Search,
      title: "Non-Destructive Testing",
      description: "Advanced ultrasonic, radiographic, and magnetic particle testing for comprehensive material analysis without damage.",
      features: ["Ultrasonic Testing (UT)", "Radiographic Testing (RT)", "Magnetic Particle Testing (MT)", "Liquid Penetrant Testing (PT)"]
    },
    {
      icon: Wrench,
      title: "Pipeline Integrity",
      description: "Complete pipeline inspection and integrity management services ensuring optimal performance and safety compliance.",
      features: ["Pipeline Inspection", "Integrity Assessment", "Corrosion Monitoring", "Leak Detection"]
    },
    {
      icon: Shield,
      title: "Welding Inspection",
      description: "Certified welding inspection services meeting AWS and ASME standards for critical industrial applications.",
      features: ["Visual Inspection", "Weld Quality Assessment", "Code Compliance", "Documentation"]
    },
    {
      icon: Zap,
      title: "Pressure Vessel Testing",
      description: "Comprehensive pressure vessel inspection and testing services ensuring operational safety and regulatory compliance.",
      features: ["Hydrostatic Testing", "Pneumatic Testing", "Thickness Measurement", "Safety Evaluation"]
    },
    {
      icon: Settings,
      title: "Industrial Maintenance",
      description: "Preventive maintenance and inspection programs designed to maximize equipment life and minimize downtime.",
      features: ["Scheduled Inspections", "Condition Monitoring", "Maintenance Planning", "Equipment Certification"]
    },
    {
      icon: CheckCircle,
      title: "Quality Assurance",
      description: "Complete quality assurance programs ensuring your operations meet the highest industry standards and regulations.",
      features: ["Quality Control", "Standards Compliance", "Audit Services", "Training Programs"]
    }
  ];

  return (
    <section id="services" className="py-24 bg-gradient-dark">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        {/* Section Header */}
        <div className="text-center mb-16">
          <h2 className="text-4xl md:text-5xl font-bold text-foreground mb-6">
            Comprehensive Industrial 
            <span className="block text-glow">Inspection Services</span>
          </h2>
          <p className="text-xl text-muted-foreground max-w-3xl mx-auto">
            From non-destructive testing to complete integrity management, we provide 
            the expertise and technology to keep your operations safe and compliant.
          </p>
        </div>

        {/* Energy Divider */}
        <div className="w-full h-px bg-gradient-energy mb-16"></div>

        {/* Services Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 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 text-foreground">
                    {service.title}
                  </CardTitle>
                  <CardDescription className="text-muted-foreground">
                    {service.description}
                  </CardDescription>
                </CardHeader>
                <CardContent>
                  <ul className="space-y-2">
                    {service.features.map((feature, idx) => (
                      <li key={idx} className="flex items-center text-sm text-muted-foreground">
                        <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-card/50 backdrop-blur-sm border border-border rounded-2xl p-8 max-w-4xl mx-auto">
            <h3 className="text-2xl font-bold text-foreground mb-4">
              Need Custom Inspection Solutions?
            </h3>
            <p className="text-muted-foreground mb-6">
              Our experienced team can develop tailored inspection programs to meet your specific requirements and industry standards.
            </p>
            <Button className="btn-orange-glow">
              Discuss Your Requirements
              <ArrowRight className="w-4 h-4 ml-2" />
            </Button>
          </div>
        </div>
      </div>
    </section>
  );
};

export default Services;