import { Link } from 'react-router-dom';
import { Phone, Mail, MapPin } from 'lucide-react';

const services = ['General Contracting', 'Renovation', 'Interior Finishing', 'Painting'];

export default function Footer() {
  return (
    <footer className="bg-navy text-white">
      <div className="max-w-7xl mx-auto px-6 lg:px-12 py-20">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12">
          {/* Brand */}
          <div>
            <div className="mb-5">
              <span className="font-serif text-2xl text-white block">Panama International</span>
              <span className="font-sans text-gold text-[9px] tracking-[0.3em] uppercase">Contracting Company</span>
            </div>
            <p className="font-sans text-white/55 text-sm leading-relaxed">
              Building excellence since 2015. Your trusted partner for residential and commercial construction projects.
            </p>
          </div>

          {/* Services */}
          <div>
            <h4 className="font-sans text-[10px] tracking-[0.22em] uppercase text-gold mb-5">Services</h4>
            <ul className="space-y-2.5">
              {services.map((s) => (
                <li key={s}>
                  <Link to="/services" className="font-sans text-sm text-white/55 hover:text-gold transition-colors duration-200">{s}</Link>
                </li>
              ))}
            </ul>
          </div>

          {/* Quick Links */}
          <div>
            <h4 className="font-sans text-[10px] tracking-[0.22em] uppercase text-gold mb-5">Company</h4>
            <ul className="space-y-2.5">
              {[
                { label: 'About Us', path: '/about' },
                { label: 'Portfolio', path: '/portfolio' },
                { label: 'Request a Quote', path: '/inquiries' },
                { label: 'Contact', path: '/contact' },
              ].map((l) => (
                <li key={l.path}>
                  <Link to={l.path} className="font-sans text-sm text-white/55 hover:text-gold transition-colors duration-200">{l.label}</Link>
                </li>
              ))}
            </ul>
          </div>

          {/* Contact */}
          <div>
            <h4 className="font-sans text-[10px] tracking-[0.22em] uppercase text-gold mb-5">Contact</h4>
            <ul className="space-y-4">
              <li className="flex gap-3">
                <Phone size={13} className="text-gold mt-0.5 flex-shrink-0" />
                <div>
                  <a href="tel:+97444412853" className="font-sans text-sm text-white/75 hover:text-gold transition-colors block">+974 4441 2853</a>
                </div>
              </li>
              <li className="flex gap-3">
                <Mail size={13} className="text-gold mt-0.5 flex-shrink-0" />
                <a href="mailto:info@panamaintlco.net" className="font-sans text-sm text-white/75 hover:text-gold transition-colors">info@panamaintlco.net</a>
              </li>
              <li className="flex gap-3">
                <MapPin size={13} className="text-gold mt-0.5 flex-shrink-0" />
                <span className="font-sans text-sm text-white/55">Industrial Area, Zone 57, St 531<br />Building 11, Doha, Qatar</span>
              </li>
            </ul>
          </div>
        </div>
      </div>

      <div className="w-full h-px bg-gradient-to-r from-transparent via-gold/30 to-transparent" />

      <div className="max-w-7xl mx-auto px-6 lg:px-12 py-6 flex flex-col md:flex-row items-center justify-between gap-3">
        <p className="font-sans text-xs text-white/35">&copy; {new Date().getFullYear()} Panama International Contracting Company. All rights reserved.</p>
        <p className="font-sans text-xs text-white/35">Licensed & Insured General Contractor</p>
      </div>
    </footer>
  );
}
