import Link from "next/link";
import { footerLinks, site } from "@/lib/site";

export function SiteFooter() {
  return (
    <footer className="border-t border-[var(--line)] bg-[var(--panel)]">
      <div className="mx-auto grid max-w-7xl gap-12 px-5 py-16 md:grid-cols-[1.4fr_1fr_1fr] md:px-8">
        <div className="space-y-5">
          <div>
            <p className="font-heading text-2xl font-extrabold tracking-[-0.03em] text-[var(--ink)]">
              {site.name}
            </p>
            <p className="mt-3 max-w-xl text-sm leading-7 text-[var(--muted)]">
              {site.description}
            </p>
          </div>
          <p className="text-sm font-semibold text-[var(--ink)]">
            {site.name}, semua bisnis dalam satu tempat.
          </p>
        </div>

        <div>
          <p className="text-sm font-bold uppercase tracking-[0.2em] text-[var(--muted)]">
            Navigasi
          </p>
          <div className="mt-4 flex flex-col gap-3 text-sm text-[var(--ink)]">
            {footerLinks.map((item) => (
              <Link key={item.href} href={item.href} className="transition hover:text-[var(--accent)]">
                {item.label}
              </Link>
            ))}
          </div>
        </div>

        <div>
          <p className="text-sm font-bold uppercase tracking-[0.2em] text-[var(--muted)]">
            Kontak
          </p>
          <div className="mt-4 flex flex-col gap-3 text-sm text-[var(--ink)]">
            <a href={site.domain} target="_blank" rel="noreferrer">
              bizone.id
            </a>
            <a href={`mailto:${site.email}`}>{site.email}</a>
            <a href={site.whatsappHref} target="_blank" rel="noreferrer">
              {site.whatsapp}
            </a>
            <span>{site.address}</span>
          </div>
        </div>
      </div>

      <div className="border-t border-[var(--line)] px-5 py-5 text-center text-xs text-[var(--muted)] md:px-8">
        © 2026 {site.company}. All rights reserved.
      </div>
    </footer>
  );
}