import { Link } from "react-router-dom";
import { serviceCategories, offices, company } from "../data/content";
import { Mail, Phone, MapPin, Clock } from "lucide-react";
export default function Footer() {
  return <footer className="bg-slate-950 text-slate-200 mt-24 border-t border-slate-900">
      {
    /* Upper Grid Area */
  }
      <div className="max-w-7xl mx-auto px-5 md:px-8 py-16 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-12">
        
        {
    /* Col 1: Overview */
  }
        <div className="space-y-5">
          <Link to="/" className="flex items-center gap-2">
            <span className="w-4 h-4 rounded-sm bg-orange-500 shadow-md" />
            <span className="font-heading font-extrabold uppercase tracking-wider text-white text-lg">
              Masar<span className="text-orange-500"> NDT</span>
            </span>
          </Link>
          <p className="text-xs leading-relaxed text-slate-400 font-light">
            {company.intro}
          </p>
          <p className="text-[10px] text-slate-500 font-bold uppercase tracking-wider font-heading">
            A member of {company.legalName}
          </p>
          <div className="flex items-center gap-3.5 pt-2">
            <a href="#" className="p-2.5 bg-slate-900 hover:bg-orange-500 hover:text-white transition-all rounded-lg border border-slate-800" aria-label="LinkedIn">
              <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                <path fillRule="evenodd" d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.779-1.75-1.75s.784-1.75 1.75-1.75 1.75.779 1.75 1.75-.784 1.75-1.75 1.75zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" clipRule="evenodd" />
              </svg>
            </a>
            <a href="#" className="p-2.5 bg-slate-900 hover:bg-orange-500 hover:text-white transition-all rounded-lg border border-slate-800" aria-label="Facebook">
              <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                <path fillRule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" clipRule="evenodd" />
              </svg>
            </a>
          </div>
        </div>

        {
    /* Col 2: Services */
  }
        <div>
          <h3 className="font-heading text-xs font-bold text-white uppercase tracking-wider mb-5 border-l-2 border-orange-500 pl-3">
            Services
          </h3>
          <ul className="space-y-3 text-xs text-slate-400">
            {serviceCategories.map((s) => <li key={s.id}>
                <Link to={s.path} className="hover:text-orange-500 transition-colors duration-200 block py-0.5 font-medium">
                  {s.title}
                </Link>
              </li>)}
          </ul>
        </div>

        {
    /* Col 3: Quick Links */
  }
        <div>
          <h3 className="font-heading text-xs font-bold text-white uppercase tracking-wider mb-5 border-l-2 border-orange-500 pl-3">
            Quick Links
          </h3>
          <ul className="space-y-3 text-xs text-slate-400">
            <li><Link to="/about" className="hover:text-orange-500 transition-colors block py-0.5 font-medium">About Us</Link></li>
            <li><Link to="/industries" className="hover:text-orange-500 transition-colors block py-0.5 font-medium">Industries Served</Link></li>
            <li><Link to="/projects" className="hover:text-orange-500 transition-colors block py-0.5 font-medium">Project Showcase</Link></li>
            <li><Link to="/gallery" className="hover:text-orange-500 transition-colors block py-0.5 font-medium">Media Gallery</Link></li>
            <li><Link to="/contact" className="hover:text-orange-500 transition-colors block py-0.5 font-medium">Get in Touch</Link></li>
          </ul>
        </div>

        {
    /* Col 4: Contact & Hours */
  }
        <div className="space-y-6">
          <div>
            <h3 className="font-heading text-xs font-bold text-white uppercase tracking-wider mb-5 border-l-2 border-orange-500 pl-3">
              Contact Info
            </h3>
            <div className="space-y-3.5 text-xs text-slate-400">
              <div className="flex items-start gap-2.5">
                <MapPin className="w-4 h-4 text-orange-500 shrink-0 mt-0.5" />
                <span className="leading-relaxed font-normal">{offices[0].lines.join(", ")}</span>
              </div>
              <a href="tel:+966571033252" className="flex items-center gap-2.5 hover:text-orange-500 transition-colors font-semibold">
                <Phone className="w-4 h-4 text-orange-500 shrink-0" />
                <span>+966 57 103 3252</span>
              </a>
              <a href="mailto:sales@masarndt.com" className="flex items-center gap-2.5 hover:text-orange-500 transition-colors font-medium">
                <Mail className="w-4 h-4 text-orange-500 shrink-0" />
                <span className="break-all text-orange-500 font-semibold">{offices[0].email}</span>
              </a>
            </div>
          </div>
          <div>
            <h3 className="font-heading text-xs font-bold text-white uppercase tracking-wider mb-3 border-l-2 border-orange-500 pl-3">
              Business Hours
            </h3>
            <div className="flex items-center gap-2.5 text-xs text-slate-400 font-light">
              <Clock className="w-4 h-4 text-orange-500 shrink-0" />
              <span className="font-medium">Sun - Thu: 8:00 AM - 5:00 PM</span>
            </div>
          </div>
        </div>

      </div>

      {
    /* Bottom Copyright Area */
  }
      <div className="border-t border-slate-900 bg-slate-950 py-8 text-xs text-slate-500">
        <div className="max-w-7xl mx-auto px-5 md:px-8 flex flex-col sm:flex-row justify-between items-center gap-4 text-center sm:text-left">
          <span className="font-light">
            &copy; {(/* @__PURE__ */ new Date()).getFullYear()} Masar NDT. All rights reserved. Managed by AKMEC Group.
          </span>
          <div className="flex flex-wrap justify-center gap-4 font-bold text-[10px] uppercase tracking-wider">
            <span className="text-orange-500">ISO 9001:2015 Approved</span>
            <span className="text-slate-800">|</span>
            <Link to="/contact" className="hover:text-orange-400 transition-colors">Privacy Policy</Link>
            <span className="text-slate-800">|</span>
            <Link to="/contact" className="hover:text-orange-400 transition-colors">Terms of Use</Link>
          </div>
        </div>
      </div>
    </footer>;
}
