import { Link } from "@tanstack/react-router";
import { Instagram, Mail, Phone, MapPin, Clock, Music2 } from "lucide-react";
import logoAsset from "@/assets/logo.jpg.asset.json";

export function SiteFooter() {
  const year = new Date().getFullYear();
  return (
    <footer className="mt-24 bg-primary text-primary-foreground">
      <div className="container-edge grid gap-12 py-16 md:grid-cols-4">
        <div className="space-y-4 md:col-span-1">
          <div className="flex items-center gap-2.5">
            <div className="grid h-11 w-11 place-items-center overflow-hidden rounded-xl bg-white ring-1 ring-white/20">
              <img src={logoAsset.url} alt="SSG Edge Projects logo" className="h-full w-full object-contain" />
            </div>
            <div className="leading-tight">
              <div className="text-sm font-bold">SSG EDGE</div>
              <div className="text-[10px] uppercase tracking-[0.18em] text-primary-foreground/60">Projects</div>
            </div>
          </div>
          <p className="text-sm text-primary-foreground/70 max-w-xs">
            Construction, facilities management, cleaning and approved insurance contractor services across South Africa.
          </p>
          <div className="flex gap-2 pt-2">
            {[
              {
                icon: Instagram,
                label: "Instagram @ssgedgeprojects",
                href: "https://www.instagram.com/ssgedgeprojects",
              },
              {
                icon: Music2,
                label: "TikTok @sibusiso.radebe15",
                href: "https://www.tiktok.com/@sibusiso.radebe15",
              },
            ].map(({ icon: Icon, label, href }) => (
              <a
                key={label}
                href={href}
                target="_blank"
                rel="noopener noreferrer"
                aria-label={label}
                className="grid h-9 w-9 place-items-center rounded-full bg-white/10 ring-1 ring-white/15 transition-colors hover:bg-white/20"
              >
                <Icon className="h-4 w-4" />
              </a>
            ))}
          </div>
        </div>

        <div>
          <h4 className="text-sm font-semibold uppercase tracking-wider text-primary-foreground">Navigate</h4>
          <ul className="mt-4 space-y-2 text-sm text-primary-foreground/75">
            <li><Link to="/" className="hover:text-primary-foreground">Home</Link></li>
            <li><Link to="/about" className="hover:text-primary-foreground">About Us</Link></li>
            <li><Link to="/services" className="hover:text-primary-foreground">Our Services</Link></li>
            <li><Link to="/contact" className="hover:text-primary-foreground">Contact</Link></li>
          </ul>
        </div>

        <div>
          <h4 className="text-sm font-semibold uppercase tracking-wider">Services</h4>
          <ul className="mt-4 space-y-2 text-sm text-primary-foreground/75">
            <li>Construction</li>
            <li>Facility Management</li>
            <li>Cleaning Services</li>
            <li>Insurance Claims</li>
          </ul>
        </div>

        <div>
          <h4 className="text-sm font-semibold uppercase tracking-wider">Get in touch</h4>
          <ul className="mt-4 space-y-3 text-sm text-primary-foreground/80">
            <li className="flex items-start gap-3">
              <Mail className="mt-0.5 h-4 w-4 shrink-0" />
              <a href="mailto:info@ssgedge.co.za" className="hover:text-primary-foreground">info@ssgedge.co.za</a>
            </li>
            <li className="flex items-start gap-3">
              <Phone className="mt-0.5 h-4 w-4 shrink-0" />
              <a href="tel:+27813308164" className="hover:text-primary-foreground">+27 81 330 8164</a>
            </li>
            <li className="flex items-start gap-3">
              <MapPin className="mt-0.5 h-4 w-4 shrink-0" />
              <span>Pimville Zone 6, Pimville, 1809, South Africa</span>
            </li>
            <li className="flex items-start gap-3">
              <Clock className="mt-0.5 h-4 w-4 shrink-0" />
              <span>
                Mon–Fri: 8:00 – 17:00<br />
                Sat: 8:00 – 13:00
              </span>
            </li>
          </ul>
        </div>
      </div>

      <div className="border-t border-white/10">
        <div className="container-edge flex flex-col items-start justify-between gap-2 py-6 text-xs text-primary-foreground/60 sm:flex-row sm:items-center">
          <p>© {year} SSG Edge Projects. All rights reserved.</p>
          <p>Building Excellence. Managing Facilities. Delivering Quality.</p>
        </div>
      </div>
    </footer>
  );
}