import Link from "next/link";
import { Gamepad2, Instagram, MessageCircle } from "lucide-react";
import { BrandMark } from "@/components/store/brand-mark";

export function SiteFooter({
  tagline,
  email,
  phone,
  whatsapp,
}: {
  tagline?: string | null;
  email?: string | null;
  phone?: string | null;
  whatsapp?: string | null;
}) {
  const wa = (whatsapp || "6281234567890").replace(/\D/g, "");

  return (
    <footer className="mt-24 border-t border-border bg-surface">
      <div className="container-shell grid gap-10 py-14 md:grid-cols-4">
        <div className="md:col-span-1">
          <BrandMark />
          <p className="mt-3 text-sm leading-relaxed text-muted">
            {tagline ||
              "Platform digital premium untuk top up, voucher, membership, software, dan lisensi resmi."}
          </p>
          <div className="mt-5 flex gap-3">
            <a
              href={`https://wa.me/${wa}`}
              className="rounded-xl bg-white/5 p-2.5 text-muted hover:text-accent"
              aria-label="WhatsApp"
            >
              <MessageCircle className="h-4 w-4" />
            </a>
            <a
              href="https://instagram.com/305gaming"
              className="rounded-xl bg-white/5 p-2.5 text-muted hover:text-accent"
              aria-label="Instagram"
            >
              <Instagram className="h-4 w-4" />
            </a>
            <a
              href="https://discord.gg/305gaming"
              className="rounded-xl bg-white/5 p-2.5 text-muted hover:text-accent"
              aria-label="Discord"
            >
              <Gamepad2 className="h-4 w-4" />
            </a>
          </div>
        </div>

        <div>
          <p className="mb-4 font-semibold">Belanja</p>
          <ul className="space-y-2 text-sm text-muted">
            <li>
              <Link href="/category/top-up-game" className="hover:text-text">
                Top Up Game
              </Link>
            </li>
            <li>
              <Link href="/category/voucher" className="hover:text-text">
                Voucher
              </Link>
            </li>
            <li>
              <Link href="/category/membership" className="hover:text-text">
                Membership
              </Link>
            </li>
            <li>
              <Link href="/category/lisensi" className="hover:text-text">
                Lisensi
              </Link>
            </li>
          </ul>
        </div>

        <div>
          <p className="mb-4 font-semibold">Perusahaan</p>
          <ul className="space-y-2 text-sm text-muted">
            <li>
              <Link href="/blog" className="hover:text-text">
                Artikel
              </Link>
            </li>
            <li>
              <Link href="/#faq" className="hover:text-text">
                FAQ
              </Link>
            </li>
            <li>
              <Link href="/privacy" className="hover:text-text">
                Privasi
              </Link>
            </li>
            <li>
              <Link href="/terms" className="hover:text-text">
                Syarat
              </Link>
            </li>
          </ul>
        </div>

        <div>
          <p className="mb-4 font-semibold">Support</p>
          <ul className="space-y-2 text-sm text-muted">
            <li>{phone || "WhatsApp 24/7"}</li>
            <li>{email || "support@305gamingid.com"}</li>
            <li>Respon rata-rata &lt; 5 menit</li>
          </ul>
        </div>
      </div>
      <div className="border-t border-border py-5 text-center text-xs text-muted">
        © {new Date().getFullYear()} 305 Gaming. All rights reserved.
      </div>
    </footer>
  );
}