import Link from "next/link";
import { AlertTriangle } from "lucide-react";
import { BrandLogo } from "@/components/brand-logo";

const FOOTER_GROUPS = [
  {
    title: "Công cụ",
    links: [
      { label: "Tử vi trọn đời", href: "/tu-vi-tron-doi" },
      { label: "Phong thủy nhà", href: "/phong-thuy-nha" },
      { label: "Lịch âm dương", href: "/lich-am-duong" },
      { label: "Xem ngày tốt", href: "/xem-ngay-tot" },
      { label: 'Vận mệnh "Thầy"', href: "/van-menh" },
    ],
  },
  {
    title: "Hỗ trợ",
    links: [
      { label: "Liên hệ", href: "/lien-he" },
      { label: "Đăng nhập", href: "/login" },
      { label: "Đăng ký", href: "/register" },
    ],
  },
  {
    title: "Pháp lý",
    links: [
      { label: "Điều khoản", href: "/dieu-khoan" },
      { label: "Bảo mật", href: "/bao-mat" },
      { label: "Cookie", href: "/cookie" },
      { label: "Miễn trừ trách nhiệm", href: "/mien-tru-trach-nhiem" },
    ],
  },
];

export function SiteFooter() {
  return (
    <footer className="bg-bg-inset border-stroke-subtle border-t pt-16 pb-24 lg:pb-12">
      <div className="max-w-container mx-auto px-4 lg:px-6">
        <div className="mb-10 grid grid-cols-2 gap-8 lg:grid-cols-5">
          <div className="col-span-2">
            <Link href="/" className="mb-4 flex items-center gap-2.5">
              <BrandLogo />
              <span className="font-display text-lg font-semibold">Tử Vi Số</span>
            </Link>
            <p className="text-ink-secondary max-w-md text-sm leading-relaxed">
              Diễn cầm tam thế — tử vi đẩu số cổ học kết hợp AI hiện đại. 25 công cụ mệnh học miễn
              phí, dành cho người Việt.
            </p>
          </div>

          {FOOTER_GROUPS.map((group) => (
            <div key={group.title}>
              <h4 className="text-ink-primary mb-3 text-sm font-medium">{group.title}</h4>
              <ul className="text-ink-secondary space-y-2 text-sm">
                {group.links.map((link) => (
                  <li key={link.href}>
                    <Link href={link.href} className="hover:text-brand-gold transition-colors">
                      {link.label}
                    </Link>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        <div className="border-brand-red/20 bg-brand-red/5 mb-8 rounded-lg border p-4">
          <div className="text-ink-secondary flex gap-3 text-xs">
            <AlertTriangle
              className="text-brand-red-light mt-0.5 h-4 w-4 flex-shrink-0"
              aria-hidden="true"
            />
            <p>
              <span className="text-ink-primary font-medium">Tuyên bố miễn trừ trách nhiệm:</span>{" "}
              Thông tin trên trang chỉ mang tính chất tham khảo, không thay thế tư vấn chuyên môn về
              y tế, tài chính hay pháp luật. Người dùng tự chịu trách nhiệm khi áp dụng vào quyết
              định cá nhân.
            </p>
          </div>
        </div>

        <div className="border-stroke-subtle text-ink-muted flex flex-col items-start justify-between gap-4 border-t pt-6 text-xs sm:flex-row sm:items-center">
          <span>
            © 2026 Tử Vi Số · Made with <span className="text-brand-gold">◇</span> in Vietnam ·
            vi_VN
          </span>
          <div className="flex gap-4">
            <a href="#" className="hover:text-brand-gold">
              Facebook
            </a>
            <a href="#" className="hover:text-brand-gold">
              YouTube
            </a>
            <a href="#" className="hover:text-brand-gold">
              Zalo
            </a>
          </div>
        </div>
      </div>
    </footer>
  );
}