import { Link } from "@tanstack/react-router";
import { ArrowRight, Clock, Mail, MapPin, MessageCircle, Phone, Sun } from "lucide-react";
import { EMAIL, HOURS, LOCATION, PHONE, WA, services } from "@/lib/site";

const quickLinks = [
  { to: "/", label: "Home" },
  { to: "/about", label: "About Us" },
  { to: "/services", label: "Our Services" },
  { to: "/projects", label: "Projects" },
  { to: "/faqs", label: "FAQs" },
  { to: "/contact", label: "Contact Us" },
] as const;

export function SiteFooter() {
  return (
    <footer className="bg-foreground text-background/80">
      <div className="mx-auto grid max-w-6xl gap-10 px-4 py-16 md:grid-cols-2 lg:grid-cols-4">
        <div>
          <Link to="/" className="flex items-center gap-2">
            <span className="grid h-10 w-10 place-items-center rounded-full bg-accent text-accent-foreground">
              <Sun className="h-6 w-6" />
            </span>
            <span className="leading-none">
              <span className="text-xl font-extrabold text-background">
                Fanta<span className="text-accent">Sol</span>
              </span>
              <br />
              <span className="text-[10px] font-semibold tracking-widest text-background/80">ENGINEERING LIMITED</span>
            </span>
          </Link>
          <p className="mt-4 text-sm leading-relaxed">
            Professional Electrical, Solar Energy and ICT engineering solutions for homes, businesses and industrial facilities across Kenya.
          </p>
          <div className="mt-5 flex gap-3">
            <a href={WA} target="_blank" rel="noreferrer" aria-label="WhatsApp" className="grid h-9 w-9 place-items-center rounded-full bg-background/10 transition hover:bg-accent hover:text-accent-foreground">
              <MessageCircle className="h-4 w-4" />
            </a>
            <a href={`tel:${PHONE}`} aria-label="Call us" className="grid h-9 w-9 place-items-center rounded-full bg-background/10 transition hover:bg-accent hover:text-accent-foreground">
              <Phone className="h-4 w-4" />
            </a>
            <a href={`mailto:${EMAIL}`} aria-label="Email us" className="grid h-9 w-9 place-items-center rounded-full bg-background/10 transition hover:bg-accent hover:text-accent-foreground">
              <Mail className="h-4 w-4" />
            </a>
          </div>
        </div>

        <div>
          <h3 className="text-sm font-bold uppercase tracking-widest text-background">Quick Links</h3>
          <ul className="mt-4 space-y-2.5 text-sm">
            {quickLinks.map((l) => (
              <li key={l.to}>
                <Link to={l.to} className="flex items-center gap-2 transition hover:text-accent">
                  <ArrowRight className="h-3.5 w-3.5 text-accent" />
                  {l.label}
                </Link>
              </li>
            ))}
          </ul>
        </div>

        <div>
          <h3 className="text-sm font-bold uppercase tracking-widest text-background">Our Services</h3>
          <ul className="mt-4 space-y-2.5 text-sm">
            {services.map((s) => (
              <li key={s.slug}>
                <Link to="/services/$slug" params={{ slug: s.slug }} className="flex items-center gap-2 transition hover:text-accent">
                  <ArrowRight className="h-3.5 w-3.5 text-accent" />
                  {s.title}
                </Link>
              </li>
            ))}
          </ul>
        </div>

        <div>
          <h3 className="text-sm font-bold uppercase tracking-widest text-background">Get in Touch</h3>
          <ul className="mt-4 space-y-3.5 text-sm">
            <li className="flex gap-3">
              <MapPin className="mt-0.5 h-4 w-4 shrink-0 text-accent" />
              {LOCATION}
            </li>
            <li className="flex gap-3">
              <Phone className="mt-0.5 h-4 w-4 shrink-0 text-accent" />
              <a href={`tel:${PHONE}`} className="transition hover:text-accent">
                {PHONE}
              </a>
            </li>
            <li className="flex gap-3">
              <Mail className="mt-0.5 h-4 w-4 shrink-0 text-accent" />
              <a href={`mailto:${EMAIL}`} className="transition hover:text-accent">
                {EMAIL}
              </a>
            </li>
            <li className="flex gap-3">
              <Clock className="mt-0.5 h-4 w-4 shrink-0 text-accent" />
              {HOURS}
            </li>
          </ul>
        </div>
      </div>
      <div className="border-t border-background/10">
        <div className="mx-auto flex max-w-6xl flex-col items-center justify-between gap-2 px-4 py-6 text-center text-xs md:flex-row">
          <p>© {new Date().getFullYear()} Fantasol Engineering Ltd. All rights reserved.</p>
          <p>Electrical · Solar · ICT & ELV Systems — Kenya</p>
        </div>
      </div>
    </footer>
  );
}