import Link from "next/link";
import { BRAND, buildSupportLink } from "@/vendor/ui/brand";

const FOOTER_LINKS = {
  Product: [
    { label: "Shop eSIMs", href: "/shop" },
    { label: "How it works", href: "/#how-it-works" },
    { label: "Help", href: "/help" },
    { label: "Dashboard", href: "/dashboard" },
  ],
  Company: [
    { label: "Contact", href: "/contact" },
    { label: "Privacy", href: "/legal/privacy" },
    { label: "Terms", href: "/legal/terms" },
    { label: "Acceptable use", href: "/legal/acceptable-use" },
  ],
};

export function StorefrontFooter() {
  return (
    <footer className="bg-sand-950 pb-8 pt-16 text-sand-400">
      <div className="mx-auto max-w-6xl px-4">
        <div className="mb-12 grid grid-cols-2 gap-8 md:grid-cols-4">
          <div className="col-span-2">
            <p className="mb-2 text-base font-semibold text-sand-50">{BRAND.name}</p>
            <p className="mb-5 max-w-xs text-sm leading-relaxed">{BRAND.tagline}</p>
            <div className="flex flex-wrap gap-2">
              <Link
                href={buildSupportLink("whatsapp", { message: `Hi ${BRAND.name}!` })}
                target="_blank"
                rel="noopener noreferrer"
                className="inline-flex items-center gap-2 rounded-full bg-leaf-500 px-4 py-2 text-sm font-semibold text-white transition-colors hover:bg-leaf-600"
              >
                WhatsApp · 24/7
              </Link>
              <Link
                href={buildSupportLink("sms")}
                className="inline-flex items-center gap-2 rounded-full border border-sand-700 bg-sand-900/60 px-4 py-2 text-sm font-semibold text-sand-200 hover:border-[var(--brand-accent)]/40"
              >
                SMS
              </Link>
              <Link
                href={`mailto:${BRAND.support.email}`}
                className="inline-flex items-center gap-2 rounded-full border border-sand-700 bg-sand-900/60 px-4 py-2 text-sm font-semibold text-sand-200 hover:border-[var(--brand-accent)]/40"
              >
                Email
              </Link>
            </div>
          </div>
          {Object.entries(FOOTER_LINKS).map(([section, links]) => (
            <div key={section}>
              <p className="mb-3 text-xs font-semibold uppercase tracking-wider text-sand-500">
                {section}
              </p>
              <ul className="space-y-2">
                {links.map((link) => (
                  <li key={link.href}>
                    <Link href={link.href} className="text-sm text-sand-400 transition-colors hover:text-sand-50">
                      {link.label}
                    </Link>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
        <div className="flex flex-col items-start justify-between gap-2 border-t border-sand-800 pt-6 md:flex-row md:items-center">
          <p className="text-xs text-sand-600">
            © {new Date().getFullYear()} {BRAND.legalName}. All rights reserved.
          </p>
          <p className="text-xs text-sand-600">Real humans. 24/7.</p>
        </div>
      </div>
    </footer>
  );
}