import { Link } from "@tanstack/react-router";
import { Facebook, Instagram, Mail, MapPin, MessageCircle, Phone, Twitter } from "lucide-react";

export function Footer() {
  return (
    <footer className="mt-24 border-t bg-muted/30">
      <div className="mx-auto grid max-w-7xl gap-10 px-4 py-14 sm:px-6 md:grid-cols-4">
        <div>
          <div className="text-lg font-bold">Flexflares Cyber Services</div>
          <p className="mt-3 text-sm text-muted-foreground">
            Your one‑stop digital service centre in Homabay. Fast, professional, affordable.
          </p>
          <div className="mt-4 flex gap-2">
            <a aria-label="Facebook" href="#" className="rounded-lg border p-2 hover:bg-muted">
              <Facebook className="h-4 w-4" />
            </a>
            <a aria-label="Twitter" href="#" className="rounded-lg border p-2 hover:bg-muted">
              <Twitter className="h-4 w-4" />
            </a>
            <a aria-label="Instagram" href="#" className="rounded-lg border p-2 hover:bg-muted">
              <Instagram className="h-4 w-4" />
            </a>
          </div>
        </div>

        <div>
          <div className="text-sm font-semibold">Company</div>
          <ul className="mt-3 space-y-2 text-sm text-muted-foreground">
            <li><Link to="/" className="hover:text-primary">Home</Link></li>
            <li><Link to="/services" className="hover:text-primary">Services</Link></li>
            <li><Link to="/offers" className="hover:text-primary">Offers</Link></li>
            <li><Link to="/contact" className="hover:text-primary">Contact</Link></li>
            <li><Link to="/privacy" className="hover:text-primary">Privacy Policy</Link></li>
            <li><Link to="/terms" className="hover:text-primary">Terms & Conditions</Link></li>
          </ul>
        </div>

        <div>
          <div className="text-sm font-semibold">Contact</div>
          <ul className="mt-3 space-y-2 text-sm text-muted-foreground">
            <li className="flex items-start gap-2">
              <Phone className="mt-0.5 h-4 w-4 shrink-0" />
              <a href="tel:+254113910480" className="hover:text-primary">+254 113 910 480</a>
            </li>
            <li className="flex items-start gap-2">
              <MessageCircle className="mt-0.5 h-4 w-4 shrink-0" />
              <a href="https://wa.me/254717576870" className="hover:text-primary">WhatsApp +254 717 576870</a>
            </li>
            <li className="flex items-start gap-2">
              <Mail className="mt-0.5 h-4 w-4 shrink-0" />
              <a href="mailto:flexflarescyberservices@gmail.com" className="break-all hover:text-primary">
                flexflarescyberservices@gmail.com
              </a>
            </li>
            <li className="flex items-start gap-2">
              <MapPin className="mt-0.5 h-4 w-4 shrink-0" /> Homabay, Kenya
            </li>
          </ul>
        </div>

        <div>
          <div className="text-sm font-semibold">Business Hours</div>
          <p className="mt-3 text-sm text-muted-foreground">
            Monday – Sunday
            <br />
            6:00 AM – 10:00 PM
          </p>
        </div>
      </div>
      <div className="border-t py-5 text-center text-xs text-muted-foreground">
        © {new Date().getFullYear()} Flexflares Cyber Services. All rights reserved. ·{" "}
        <Link to="/admin" className="hover:text-primary">Admin</Link>
      </div>
    </footer>
  );
}