import Link from "next/link";
import { groupOffersByCategory } from "@/lib/angebote";
import { footerNav, mainNav, siteConfig } from "@/lib/site";
import { getOffers } from "@/lib/payload/content";

export async function Footer() {
  const offers = await getOffers();
  const groups = groupOffersByCategory(offers);

  return (
    <footer className="bg-anouma-plum text-anouma-cream-light">
      <div className="mx-auto max-w-6xl px-6 py-16 sm:px-8 lg:px-12">
        <div className="grid gap-12 sm:grid-cols-2 lg:grid-cols-4">
          <div>
            <Link href="/" className="font-serif text-2xl font-semibold tracking-[0.08em]">
              {siteConfig.name.toUpperCase()}
            </Link>
            <p className="mt-4 max-w-xs text-sm leading-relaxed text-anouma-cream-light/90">
              Räume für Verbindung — mit dir selbst, miteinander und mit der Natur.
            </p>
          </div>

          <div>
            <h3 className="text-xs font-medium uppercase tracking-[0.2em] text-anouma-cream-light/90">
              Navigation
            </h3>
            <ul className="mt-4 space-y-2.5">
              {mainNav.map((item) => (
                <li key={item.href}>
                  <Link href={item.href} className="text-sm text-anouma-cream-light/90 hover:text-white">
                    {item.title}
                  </Link>
                </li>
              ))}
              <li>
                <Link href="/termin-buchen" className="text-sm text-anouma-cream-light/90 hover:text-white">
                  Termin buchen
                </Link>
              </li>
            </ul>
          </div>

          <div>
            <h3 className="text-xs font-medium uppercase tracking-[0.2em] text-anouma-cream-light/90">
              Angebote
            </h3>
            <ul className="mt-4 space-y-2.5">
              {groups.map((group) => (
                <li key={group.category}>
                  <Link
                    href={group.offers.length === 1 ? `/angebote/${group.offers[0].slug}` : group.href}
                    className="text-sm text-anouma-cream-light/90 hover:text-white"
                  >
                    {group.label}
                  </Link>
                </li>
              ))}
            </ul>
          </div>

          <div>
            <h3 className="text-xs font-medium uppercase tracking-[0.2em] text-anouma-cream-light/90">
              Kontakt
            </h3>
            <p className="mt-4 text-sm leading-relaxed text-anouma-cream-light/90">
              Ich freue mich, von dir zu hören.
            </p>
            <Link
              href="/kontakt"
              className="mt-3 inline-block text-sm font-medium underline underline-offset-4 hover:text-white"
            >
              Zum Kontaktformular
            </Link>
          </div>
        </div>

        <div className="mt-14 flex flex-col gap-4 border-t border-anouma-cream-light/20 pt-8 text-sm text-anouma-cream-light/90 sm:flex-row sm:items-center sm:justify-between">
          <p>&copy; {new Date().getFullYear()} {siteConfig.name}</p>
          <ul className="flex flex-wrap gap-x-6 gap-y-2">
            {footerNav.map((item) => (
              <li key={item.href}>
                <Link href={item.href} className="hover:text-white">
                  {item.title}
                </Link>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </footer>
  );
}