import Link from "next/link";
import { getSiteSettings } from "@/lib/api";
import Container from "@/components/ui/Container";

// Light background (confirmed via getComputedStyle against the reference —
// not dark). Border-top 2px ink, 5-column grid with 1px dividers between
// columns, bottom legal bar. See task history for the extracted values.
export default async function Footer() {
  const site = await getSiteSettings();
  const shopLinks = site.footerColumns.find((c) => c.title === "Shop")?.links || [];
  const policyLinks = site.footerColumns.find((c) => c.title === "Policies")?.links || [];
  const companyLinks = site.footerColumns.find((c) => c.title === "Company")?.links || [];

  return (
    <footer className="bg-bg text-ink mt-auto border-t-2 border-ink grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5">
      <div className="px-[5%] lg:px-10 py-6 border-r-0 lg:border-r border-neutral-300 flex flex-col gap-3 items-start">
        <span className="font-display font-black text-xl uppercase tracking-tight">
          <span className="text-gold-600">all</span>
          <span className="text-accent-500">:</span>
          <span className="text-ink">BETs</span>
        </span>
        <div>
          <div className="font-display font-black text-lg uppercase tracking-tight">allBETs Go</div>
          <div className="text-xs text-neutral-600 mt-1.5">Merch for the BET Society — Washington DC</div>
        </div>
      </div>

      <FooterCol title="Shop" links={shopLinks} />
      <FooterCol title="Policies" links={policyLinks} />
      <FooterCol title="Company" links={companyLinks} />

      <div className="px-[5%] lg:px-10 py-6 grid gap-2 content-start">
        <span className="text-[10px] tracking-[0.2em] uppercase text-neutral-600">Newsletter</span>
        <input
          type="email"
          placeholder="Email address"
          className="bg-surface border border-divider px-2.5 py-1.5 text-sm text-ink placeholder:text-neutral-500 focus:outline-none focus:ring-2 focus:ring-accent-500"
        />
      </div>

      <div className="col-span-full border-t border-neutral-300 px-[5%] lg:px-10 py-4 flex flex-wrap items-center justify-between gap-2 text-[11px] text-neutral-600">
        <span>
          {site.companyName === "All Bets LLC" ? "© 2026 All Bets LLC. All rights reserved." : `© ${new Date().getFullYear()} ${site.companyName}. All rights reserved.`}
        </span>
        <span className="flex flex-wrap gap-4">
          <Link href="/legal" className="hover:text-ink">Privacy</Link>
          <Link href="/legal" className="hover:text-ink">Terms</Link>
          <span>18+ · Please bet responsibly</span>
        </span>
      </div>
    </footer>
  );
}

function FooterCol({ title, links }: { title: string; links: { label: string; href: string }[] }) {
  return (
    <div className="px-[5%] lg:px-10 py-6 border-r-0 lg:border-r border-neutral-300 grid gap-1.5 content-start text-sm">
      <span className="text-[10px] tracking-[0.2em] uppercase text-neutral-600 mb-1">{title}</span>
      {links.map((l) => (
        <Link key={l.href} href={l.href} className="text-ink hover:text-accent-600">
          {l.label}
        </Link>
      ))}
    </div>
  );
}