import Link from "next/link";
import { Globe2, Mail, MapPin, Phone } from "lucide-react";
import { contact, navigation } from "@/app/content";

export function SiteFooter() {
  return (
    <footer id="contact" className="px-4 pb-8 sm:px-6">
      <div className="mx-auto grid max-w-7xl gap-8 border-t border-[var(--surface-border)] pt-8 lg:grid-cols-[1.1fr_0.72fr_0.82fr]">
        <div className="min-w-0">
          <p className="public-display text-xl font-bold text-[var(--tour-ink)]">VR360 Như Quỳnh</p>
          <p className="mt-3 max-w-[62ch] text-sm leading-6 text-[var(--muted-foreground)]">
            Cổng số hóa di tích và không gian văn hóa Xã Như Quỳnh, tỉnh Hưng Yên bằng công nghệ VR360.
          </p>
        </div>

        <nav className="grid gap-2 text-sm" aria-label="Liên kết nhanh">
          <p className="font-bold text-[var(--tour-ink)]">Liên kết nhanh</p>
          {navigation.map((item) => (
            <Link key={item.href} href={item.href} className="w-fit text-[var(--muted-foreground)] transition-colors hover:text-[var(--tour-ink)]">
              {item.label}
            </Link>
          ))}
        </nav>

        <div className="grid gap-3 text-sm leading-6 text-[var(--muted-foreground)] lg:text-right">
          <p className="font-bold text-[var(--tour-ink)]">Thông tin liên hệ</p>
          <p className="inline-flex items-start gap-2 lg:justify-end">
            <MapPin className="mt-0.5 h-4 w-4 shrink-0 text-[var(--primary)]" strokeWidth={1.8} />
            {contact.address}
          </p>
          <a href={contact.phoneHref} className="inline-flex items-center gap-2 font-semibold text-[var(--tour-ink)] transition-colors hover:text-[var(--primary)] lg:justify-end">
            <Phone className="h-4 w-4 text-[var(--primary)]" strokeWidth={1.8} />
            {contact.phone}
          </a>
          <a
            href={contact.website}
            target="_blank"
            rel="noopener noreferrer"
            className="inline-flex items-center gap-2 font-semibold text-[var(--tour-ink)] transition-colors hover:text-[var(--primary)] lg:justify-end"
          >
            <Globe2 className="h-4 w-4 text-[var(--primary)]" strokeWidth={1.8} />
            {contact.websiteLabel}
          </a>
          <Link href="/lien-he" className="inline-flex items-center gap-2 font-semibold text-[var(--tour-ink)] transition-colors hover:text-[var(--primary)] lg:justify-end">
            <Mail className="h-4 w-4 text-[var(--primary)]" strokeWidth={1.8} />
            Gửi góp ý hoặc tư liệu
          </Link>
        </div>
      </div>
      <div className="mx-auto mt-8 max-w-7xl border-t border-[var(--surface-border)] pt-5 text-center text-sm font-semibold text-[var(--muted-foreground)]">
        © 2026 VR360 Di sản Xã Như Quỳnh.
      </div>
    </footer>
  );
}