import Link from "next/link";
import { getPayload } from "payload";
import config from "@payload-config";

export async function Footer() {
  const payload = await getPayload({ config });
  const settings = await payload.findGlobal({ slug: "site-settings" });

  return (
    <footer className="border-t bg-slate-900 text-slate-300">
      <div className="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8">
        <div className="grid gap-8 sm:grid-cols-2 lg:grid-cols-4">
          <div>
            <span className="text-lg font-bold text-white">
              <span className="text-amber-400">ADV</span>doors
            </span>
            <p className="mt-2 text-sm">
              Финские входные и межкомнатные двери с 1994 года.
            </p>
          </div>

          <div>
            <h3 className="font-semibold text-white">Каталог</h3>
            <ul className="mt-3 space-y-2 text-sm">
              <li>
                <Link href="/catalog?brand=KASKI" className="hover:text-white">
                  Двери KASKI
                </Link>
              </li>
              <li>
                <Link
                  href="/catalog?brand=SWEDOOR"
                  className="hover:text-white"
                >
                  Двери SWEDOOR
                </Link>
              </li>
              <li>
                <Link
                  href="/catalog?brand=ALAVUS"
                  className="hover:text-white"
                >
                  Двери ALAVUS
                </Link>
              </li>
            </ul>
          </div>

          <div>
            <h3 className="font-semibold text-white">Информация</h3>
            <ul className="mt-3 space-y-2 text-sm">
              <li>
                <Link href="/about" className="hover:text-white">
                  О компании
                </Link>
              </li>
              <li>
                <Link href="/delivery" className="hover:text-white">
                  Доставка
                </Link>
              </li>
              <li>
                <Link href="/installation" className="hover:text-white">
                  Установка
                </Link>
              </li>
              <li>
                <Link href="/warranty" className="hover:text-white">
                  Гарантия
                </Link>
              </li>
            </ul>
          </div>

          <div>
            <h3 className="font-semibold text-white">Контакты</h3>
            <ul className="mt-3 space-y-2 text-sm">
              {settings.phone && (
                <li>
                  <a
                    href={`tel:${settings.phone.replace(/\s/g, "")}`}
                    className="hover:text-white"
                  >
                    {settings.phone}
                  </a>
                </li>
              )}
              {settings.email && (
                <li>
                  <a
                    href={`mailto:${settings.email}`}
                    className="hover:text-white"
                  >
                    {settings.email}
                  </a>
                </li>
              )}
              {settings.whatsapp && (
                <li>
                  <a
                    href={`https://wa.me/${settings.whatsapp.replace(/[^0-9]/g, "")}`}
                    className="hover:text-white"
                    target="_blank"
                    rel="noopener noreferrer"
                  >
                    WhatsApp
                  </a>
                </li>
              )}
            </ul>
          </div>
        </div>

        <div className="mt-10 border-t border-slate-700 pt-6 text-center text-sm text-slate-500">
          {settings.footerText || "© ADVdoors"}
        </div>
      </div>
    </footer>
  );
}
