import { openGatavaseChat } from "@/components/gatavase-chat";
import { Link } from "@tanstack/react-router";
import { Mail, Phone, MapPin } from "lucide-react";
import { FOOTER_GROUPS } from "@/lib/site-content";
import logo from "@/assets/gatavase-logo.png.asset.json";

export function SiteFooter() {
  return (
    <footer className="border-t border-border bg-[color-mix(in_oklab,var(--surface)_45%,transparent)]">
      <div className="mx-auto max-w-6xl px-5 py-14">
        <div className="grid gap-10 lg:grid-cols-[1.3fr_2.7fr]">
          <div>
            <Link to="/" className="flex items-center gap-2.5">
              <img
                src={logo.url}
                alt="Gatavase Corporation logo"
                width={36}
                height={36}
                loading="lazy"
                className="size-9 rounded-md object-contain"
              />
              <span className="font-display text-lg font-semibold">
                Gatavase<span className="text-primary"> Corporation</span>
              </span>
            </Link>
            <p className="mt-4 max-w-sm text-sm leading-relaxed text-muted-foreground">
              Intelligent systems for a connected Africa. From Kampala to Doha — shaping tomorrow's
              technology with African innovation and global precision.
            </p>

            <ul className="mt-6 space-y-2 text-sm text-muted-foreground">
              <li className="flex gap-2">
                <MapPin className="mt-0.5 size-4 shrink-0 text-primary" />
                Kampala HQ — Muyenga-Bukasa, Plot 68
              </li>
              <li className="flex gap-2">
                <MapPin className="mt-0.5 size-4 shrink-0 text-primary" />
                Doha — Abu Nakhla, Al Rayyan
              </li>
              <li className="flex gap-2">
                <Mail className="mt-0.5 size-4 shrink-0 text-primary" />
                <a
                  href="mailto:gazmanadvancedtechnologies@gmail.com"
                  className="break-all hover:text-foreground"
                >
                  gazmanadvancedtechnologies@gmail.com
                </a>
              </li>
              <li className="flex gap-2">
                <Phone className="mt-0.5 size-4 shrink-0 text-primary" />
                <a href="tel:+256773231138" className="hover:text-foreground">
                  +256 773 231138
                </a>
              </li>
              <li className="flex gap-2">
                <Phone className="mt-0.5 size-4 shrink-0 text-primary" />
                <a href="tel:+97433201668" className="hover:text-foreground">
                  +974 3320 1668
                </a>
              </li>
            </ul>
          </div>

          <nav aria-label="Footer" className="grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
            {FOOTER_GROUPS.map((group) => (
              <div key={group.label}>
                <p className="text-sm font-semibold">{group.label}</p>
                <ul className="mt-3 space-y-2 text-sm text-muted-foreground">
                  {group.links.map((link) => (
                    <li key={link.to}>
                      <Link to={link.to} className="transition-colors hover:text-foreground">
                        {link.label}
                      </Link>
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </nav>
        </div>
      </div>

      <div className="border-t border-border">
        <div className="mx-auto flex max-w-6xl flex-col gap-2 px-5 py-5 text-xs text-muted-foreground sm:flex-row sm:items-center sm:justify-between">
          <p>© {new Date().getFullYear()} Gatavase Corporation. All rights reserved.</p>
          <button
            type="button"
            onClick={openGatavaseChat}
            className="text-left hover:text-foreground"
          >
            Talk to Gatavase
          </button>
        </div>
      </div>
    </footer>
  );
}
