import Link from "next/link";
import { getPublishedServices, getSettings } from "@/lib/cms";
import { LogoMark } from "./artwork";

export async function Footer() {
  const year = new Date().getFullYear();
  const [settings, footerServices] = await Promise.all([
    getSettings(),
    getPublishedServices(),
  ]);
  const brandParts = settings.brandName.split(" ");
  const footerTheme = settings.style.published.footer;

  return (
    <footer
      style={
        footerTheme.background || footerTheme.textColor
          ? {
              backgroundColor: footerTheme.background || undefined,
              color: footerTheme.textColor || undefined,
            }
          : undefined
      }
      className="bg-teal-ink text-white"
    >
      <div className="mx-auto w-full max-w-6xl px-6 py-16 lg:px-10 lg:py-20">
        <div className="grid gap-12 md:grid-cols-2 lg:grid-cols-[1.4fr_1fr_1fr_1.2fr]">
          {/* Brand */}
          <div>
            <Link href="/" className="flex items-center gap-2.5">
              <LogoMark className="h-9 w-9 text-amber" />
              <span className="font-display text-2xl font-bold">
                {brandParts.length > 1 ? (
                  <>
                    <span className="text-white">{brandParts[0]}</span>
                    <span className="text-teal-soft">
                      &nbsp;{brandParts.slice(1).join(" ")}
                    </span>
                  </>
                ) : (
                  <span className="text-white">{settings.brandName}</span>
                )}
              </span>
            </Link>
            <p className="mt-5 max-w-xs text-[0.95rem] leading-relaxed text-white/65">
              {settings.description}
            </p>
            <div className="mt-6 flex gap-5 text-[0.75rem] font-semibold uppercase tracking-[0.16em] text-white/80">
              <a href={settings.social.instagram} className="hover:text-amber">Instagram</a>
              <a href={settings.social.pinterest} className="hover:text-amber">Pinterest</a>
              <a href={settings.social.linkedin} className="hover:text-amber">LinkedIn</a>
            </div>
          </div>

          {/* Explore */}
          <nav aria-label="Footer">
            <h3 className="text-[0.72rem] font-bold uppercase tracking-[0.18em] text-amber">
              Explore
            </h3>
            <ul className="mt-5 space-y-3 text-[0.95rem]">
              {settings.nav.map((item) => (
                <li key={item.href}>
                  <Link href={item.href} className="text-white/70 transition-colors hover:text-white">
                    {item.label}
                  </Link>
                </li>
              ))}
            </ul>
          </nav>

          {/* Services */}
          <div>
            <h3 className="text-[0.72rem] font-bold uppercase tracking-[0.18em] text-amber">
              Services
            </h3>
            <ul className="mt-5 space-y-3 text-[0.95rem]">
              {footerServices.slice(0, 5).map((s) => (
                <li key={s.id}>
                  <Link
                    href={`/services#${s.slug}`}
                    className="text-white/70 transition-colors hover:text-white"
                  >
                    {s.title}
                  </Link>
                </li>
              ))}
            </ul>
          </div>

          {/* Contact */}
          <div>
            <h3 className="text-[0.72rem] font-bold uppercase tracking-[0.18em] text-amber">
              Studio
            </h3>
            <ul className="mt-5 space-y-3 text-[0.95rem] text-white/70">
              <li>{settings.address}</li>
              <li>
                <a
                  href={`tel:${settings.phone.replace(/[^+\d]/g, "")}`}
                  className="hover:text-white"
                >
                  {settings.phone}
                </a>
              </li>
              <li>
                <a href={`mailto:${settings.email}`} className="hover:text-white">
                  {settings.email}
                </a>
              </li>
              <li className="text-white/50">{settings.hours}</li>
            </ul>
          </div>
        </div>

        <div className="mt-16 flex flex-col gap-3 border-t border-white/15 pt-8 text-[0.8rem] text-white/45 sm:flex-row sm:items-center sm:justify-between">
          <p>© {year} {settings.brandName}. All rights reserved.</p>
          <p>{settings.tagline}.</p>
        </div>
      </div>

      {/* Giant wordmark */}
      <div className="overflow-hidden px-6 pb-10 lg:px-10" aria-hidden="true">
        <p className="select-none text-center font-display text-[18vw] font-bold leading-[0.85] tracking-tight text-white/10 lg:text-[13rem]">
          {brandParts[0]}
        </p>
      </div>
    </footer>
  );
}