import Link from "next/link";
import { categories } from "@/lib/categories";
import { siteConfig, whatsappLink } from "@/lib/siteConfig";

export function Footer() {
  return (
    <footer className="mt-16 bg-brand-ink text-white">
      <div className="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8">
        <div className="grid grid-cols-2 gap-8 sm:grid-cols-4">
          <div className="col-span-2 sm:col-span-1">
            <p className="font-display text-lg font-bold">{siteConfig.name}</p>
            <p className="mt-2 max-w-xs text-sm text-white/60">{siteConfig.tagline}</p>
            <div className="mt-4 flex gap-3">
              {siteConfig.social.facebook && (
                <a
                  href={siteConfig.social.facebook}
                  target="_blank"
                  rel="noopener noreferrer"
                  aria-label="Shopp Gadgets on Facebook"
                  className="rounded-full border border-white/15 p-2 hover:border-brand-orange hover:text-brand-orange"
                >
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                    <path d="M13.5 21v-7.5h2.5l.4-3H13.5V8.4c0-.87.24-1.46 1.5-1.46h1.6V4.34C16.3 4.24 15.36 4.14 14.25 4.14c-2.32 0-3.91 1.42-3.91 4.02V10.5H8v3h2.34V21h3.16Z" />
                  </svg>
                </a>
              )}
              {siteConfig.social.instagram && (
                <a
                  href={siteConfig.social.instagram}
                  target="_blank"
                  rel="noopener noreferrer"
                  aria-label="Shopp Gadgets on Instagram"
                  className="rounded-full border border-white/15 p-2 hover:border-brand-orange hover:text-brand-orange"
                >
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.8} aria-hidden="true">
                    <rect x="3.5" y="3.5" width="17" height="17" rx="4.5" />
                    <circle cx="12" cy="12" r="4" />
                    <circle cx="17" cy="7" r="0.6" fill="currentColor" stroke="none" />
                  </svg>
                </a>
              )}
              {siteConfig.social.tiktok && (
                <a
                  href={siteConfig.social.tiktok}
                  target="_blank"
                  rel="noopener noreferrer"
                  aria-label="Shopp Gadgets on TikTok"
                  className="rounded-full border border-white/15 p-2 hover:border-brand-orange hover:text-brand-orange"
                >
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                    <path d="M16.6 5.5c.6 1.2 1.7 2.1 3 2.4v2.6c-1.3-.1-2.5-.5-3.5-1.2v6c0 2.8-2.3 5-5.1 5A5 5 0 0 1 5.9 15c0-2.7 2.2-5 5.1-5 .3 0 .6 0 .9.1v2.7a2.4 2.4 0 0 0-.9-.2 2.4 2.4 0 1 0 2.4 2.4V3h2.6c0 .9.2 1.7.6 2.5Z" />
                  </svg>
                </a>
              )}
            </div>
          </div>

          <div>
            <p className="text-sm font-semibold text-white/90">Shop</p>
            <ul className="mt-3 flex flex-col gap-2">
              {categories.map((c) => (
                <li key={c.slug}>
                  <Link href={`/category/${c.slug}`} className="text-sm text-white/60 hover:text-white">
                    {c.name}
                  </Link>
                </li>
              ))}
            </ul>
          </div>

          <div>
            <p className="text-sm font-semibold text-white/90">Help</p>
            <ul className="mt-3 flex flex-col gap-2">
              <li>
                <Link href="/track-order" className="text-sm text-white/60 hover:text-white">
                  Track my order
                </Link>
              </li>
              <li>
                <Link href="/about" className="text-sm text-white/60 hover:text-white">
                  About &amp; delivery info
                </Link>
              </li>
              <li>
                <a href={whatsappLink()} target="_blank" rel="noopener noreferrer" className="text-sm text-white/60 hover:text-white">
                  WhatsApp us
                </a>
              </li>
            </ul>
          </div>

          <div>
            <p className="text-sm font-semibold text-white/90">Contact</p>
            <ul className="mt-3 flex flex-col gap-2 text-sm text-white/60">
              <li>{siteConfig.address}</li>
              <li>{siteConfig.city}, {siteConfig.state}</li>
              <li>
                <a href={`tel:${siteConfig.contactPhone}`} className="hover:text-white">
                  {siteConfig.contactPhoneDisplay}
                </a>
              </li>
              <li>
                <a href={`mailto:${siteConfig.email}`} className="hover:text-white">
                  {siteConfig.email}
                </a>
              </li>
            </ul>
          </div>
        </div>

        <div className="mt-10 flex flex-col gap-4 border-t border-white/10 pt-6 sm:flex-row sm:items-center sm:justify-between">
          <p className="text-xs text-white/40">
            © {new Date().getFullYear()} {siteConfig.legalName}. All rights reserved.
          </p>
          <a href="#" className="text-xs text-white/40 hover:text-white">
            Designed by Heyi Afrika
          </a>
        </div>
      </div>
    </footer>
  );
}