import { Badge } from "@/components/ui/badge";
import { Separator } from "@/components/ui/separator";
import { 
  Phone, 
  Mail, 
  MapPin, 
  Shield, 
  Award,
  CheckCircle 
} from "lucide-react";

const Footer = () => {
  const certifications = [
    { name: "AWS", description: "Certified Welding Inspector" },
    { name: "API", description: "Pressure Vessel & Piping" },
    { name: "ASNT", description: "Level III Certified" },
    { name: "ISO 9001", description: "Quality Management" }
  ];

  const services = [
    "Non-Destructive Testing",
    "Pipeline Integrity",
    "Welding Inspection",
    "Pressure Vessel Testing",
    "Industrial Maintenance",
    "Quality Assurance"
  ];

  return (
    <footer className="bg-background border-t border-border">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        {/* Main Footer Content */}
        <div className="py-16">
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
            {/* Company Info */}
            <div className="lg:col-span-2">
              <h3 className="text-2xl font-bold text-foreground mb-4">
                NQS <span className="text-glow">Inspection Ltd</span>
              </h3>
              <p className="text-muted-foreground mb-6 max-w-md">
                Premier industrial inspection services across Texas. Ensuring safety, 
                reliability, and integrity through cutting-edge non-destructive testing 
                and certified professional expertise.
              </p>
              
              {/* Contact Info */}
              <div className="space-y-3">
                <div className="flex items-center space-x-3">
                  <Phone className="w-4 h-4 text-primary" />
                  <span className="text-foreground font-medium">+1 (555) 123-4567</span>
                </div>
                <div className="flex items-center space-x-3">
                  <Mail className="w-4 h-4 text-primary" />
                  <span className="text-foreground">info@nqsinspection.com</span>
                </div>
                <div className="flex items-center space-x-3">
                  <MapPin className="w-4 h-4 text-primary" />
                  <span className="text-foreground">Corpus Christi, Texas</span>
                </div>
              </div>
            </div>

            {/* Services */}
            <div>
              <h4 className="text-lg font-semibold text-foreground mb-4">Our Services</h4>
              <ul className="space-y-2">
                {services.map((service, index) => (
                  <li key={index} className="flex items-center space-x-2">
                    <CheckCircle className="w-3 h-3 text-primary flex-shrink-0" />
                    <span className="text-muted-foreground text-sm">{service}</span>
                  </li>
                ))}
              </ul>
            </div>

            {/* Certifications */}
            <div>
              <h4 className="text-lg font-semibold text-foreground mb-4">Certifications</h4>
              <div className="space-y-4">
                {certifications.map((cert, index) => (
                  <div key={index} className="flex items-start space-x-3">
                    <div className="w-8 h-8 bg-primary/10 rounded-lg flex items-center justify-center flex-shrink-0">
                      <Award className="w-4 h-4 text-primary" />
                    </div>
                    <div>
                      <div className="font-medium text-primary text-sm">{cert.name}</div>
                      <div className="text-xs text-muted-foreground">{cert.description}</div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>

        <Separator className="bg-border" />

        {/* Bottom Footer */}
        <div className="py-8">
          <div className="flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0">
            {/* Copyright */}
            <div className="text-muted-foreground text-sm">
              © 2024 NQS Inspection Ltd. All rights reserved.
            </div>

            {/* Emergency Badge */}
            <div className="flex items-center space-x-4">
              <Badge 
                variant="outline" 
                className="border-primary/30 text-primary bg-primary/10 hover:bg-primary/20 animate-pulse-glow"
              >
                <Shield className="w-3 h-3 mr-1" />
                24/7 Emergency Support
              </Badge>
            </div>

            {/* Links */}
            <div className="flex space-x-6 text-sm">
              <a href="#" className="text-muted-foreground hover:text-primary transition-colors">
                Privacy Policy
              </a>
              <a href="#" className="text-muted-foreground hover:text-primary transition-colors">
                Terms of Service
              </a>
              <a href="#" className="text-muted-foreground hover:text-primary transition-colors">
                Safety Standards
              </a>
            </div>
          </div>
        </div>
      </div>
    </footer>
  );
};

export default Footer;