import { Mail, Phone, MapPin, Linkedin, Twitter } from 'lucide-react';

export default function Footer() {
  return (
    <footer className="mt-20 bg-primary text-white py-16">
      <div className="container">
        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-12 mb-12">
          {/* Brand */}
          <div className="space-y-4">
            <h3 className="text-3xl font-bold">Oblix</h3>
            <p className="text-white/80 max-w-xs">
              Driving Growth. Managing Assets. Delivering Expertise.
            </p>
          </div>
          {/* Company */}
          <div className="space-y-4">
            <h4 className="font-semibold text-lg">Company</h4>
            <ul className="space-y-2">
              <li><a href="#about" className="text-white/80 hover:text-accent transition-colors">About Us</a></li>
              <li><a href="#services" className="text-white/80 hover:text-accent transition-colors">Services</a></li>
              <li><a href="/services/marketing" className="text-white/80 hover:text-accent transition-colors">Marketing</a></li>
              <li><a href="/services/staffing" className="text-white/80 hover:text-accent transition-colors">Staffing</a></li>
              <li><a href="/services/financial-consultation" className="text-white/80 hover:text-accent transition-colors">Financial</a></li>
            </ul>
          </div>
          {/* Resources */}
          <div className="space-y-4">
            <h4 className="font-semibold text-lg">Resources</h4>
            <ul className="space-y-2">
              <li><a href="#" className="text-white/80 hover:text-accent transition-colors">Blog</a></li>
              <li><a href="#" className="text-white/80 hover:text-accent transition-colors">Case Studies</a></li>
              <li><a href="#" className="text-white/80 hover:text-accent transition-colors">FAQs</a></li>
            </ul>
          </div>
          {/* Contact Info */}
          <div className="space-y-4">
            <h4 className="font-semibold text-lg">Contact Us</h4>
            <ul className="space-y-3 text-white/80">
              <li className="flex items-start gap-3">
                <Phone size={18} className="text-accent mt-1 flex-shrink-0" />
                <a href="tel:647-983-0755" className="hover:text-accent transition-colors">647-983-0755</a>
              </li>
              <li className="flex items-start gap-3">
                <Mail size={18} className="text-accent mt-1 flex-shrink-0" />
                <a href="mailto:info@oblix.ca" className="hover:text-accent transition-colors">info@oblix.ca</a>
              </li>
              <li className="flex items-start gap-3">
                <MapPin size={18} className="text-accent mt-1 flex-shrink-0" />
                <span>206-1945 Dundas St E, Mississauga ON, L4X2T8</span>
              </li>
            </ul>
            <div className="flex gap-4 pt-4">
              <a href="#" className="text-white/80 hover:text-accent transition-colors"><Linkedin size={22} /></a>
              <a href="#" className="text-white/80 hover:text-accent transition-colors"><Twitter size={22} /></a>
            </div>
          </div>
        </div>
        <div className="border-t border-white/20 pt-8 flex flex-col md:flex-row items-center justify-between">
          <p className="text-white/70 text-sm mb-4 md:mb-0">© 2026 Oblix. All rights reserved.</p>
          <p className="text-white/70 text-sm">Designed with ❤ in Pakistan.</p>
        </div>
      </div>
    </footer>
  );
}
