import { Link } from "@tanstack/react-router";
import { Instagram, Linkedin, Facebook, MessageCircle } from "lucide-react";

export function SiteFooter() {
  return (
    <footer className="bg-ink text-cream mt-24">
      <div className="container-luxe py-20">
        <div className="grid gap-12 lg:grid-cols-4">
          <div className="lg:col-span-2 max-w-md">
            <div className="flex items-center gap-3">
              <span className="flex h-10 w-10 items-center justify-center rounded-full bg-gold text-ink font-display text-lg font-bold">
                Z
              </span>
              <div>
                <div className="font-display text-lg font-bold tracking-tight">ZAMELECT</div>
                <div className="text-[0.65rem] uppercase tracking-[0.28em] text-cream/60">
                  Properties
                </div>
              </div>
            </div>
            <p className="mt-6 text-sm leading-relaxed text-cream/70">
              Trusted Dubai real estate brokerage. We help investors and end-users buy,
              sell and lease across the UAE's most sought-after communities — from Palm
              Jumeirah villas to Downtown penthouses and off-plan launches.
            </p>
            <div className="mt-8 flex items-center gap-3">
              {[Instagram, Linkedin, Facebook, MessageCircle].map((Icon, i) => (
                <a
                  key={i}
                  href="#"
                  className="flex h-10 w-10 items-center justify-center rounded-full border border-cream/20 text-cream/80 transition hover:border-gold hover:text-gold"
                  aria-label="social"
                >
                  <Icon className="h-4 w-4" />
                </a>
              ))}
            </div>
          </div>

          <div>
            <h4 className="text-xs uppercase tracking-[0.28em] text-gold">Explore</h4>
            <ul className="mt-5 space-y-3 text-sm text-cream/80">
              <li><Link to="/properties" className="hover:text-gold">All Properties</Link></li>
              <li><Link to="/services" className="hover:text-gold">Services</Link></li>
              <li><Link to="/about" className="hover:text-gold">About us</Link></li>
              <li><Link to="/contact" className="hover:text-gold">Contact</Link></li>
            </ul>
          </div>

          <div>
            <h4 className="text-xs uppercase tracking-[0.28em] text-gold">Contact</h4>
            <ul className="mt-5 space-y-3 text-sm text-cream/80">
              <li>Business Bay, Dubai — UAE</li>
              <li><a href="tel:+97140000000" className="hover:text-gold">+971 4 000 0000</a></li>
              <li><a href="mailto:hello@zamelectproperties.com" className="hover:text-gold">hello@zamelectproperties.com</a></li>
              <li>Sun – Fri · 9:00 – 19:00 GST</li>
            </ul>
          </div>
        </div>

        <div className="mt-16 flex flex-col gap-4 border-t border-cream/10 pt-8 md:flex-row md:items-center md:justify-between">
          <p className="text-xs text-cream/60">
            © {new Date().getFullYear()} Zamelect Properties — Powered by Zamzam Electronics Trading LLC. RERA Registered.
          </p>
          <p className="text-xs text-cream/60">
            Luxury Dubai real estate · Off-plan · Ready · Investment advisory
          </p>
        </div>
      </div>
    </footer>
  );
}