import Link from "next/link";
import { getBusinessSettings } from "@/lib/business-settings";
import { SOCIAL_PLATFORMS } from "@/lib/social-platforms";
import { SocialIcon, socialLabel } from "@/components/social-icons";

export async function SiteFooter() {
  const { address, phone, hours, social } = await getBusinessSettings();
  const hoursLines = hours.split("\n").filter(Boolean);
  const activeSocial = SOCIAL_PLATFORMS.filter(
    (platform) => social[platform].enabled && social[platform].url
  );

  return (
    <footer className="bg-rosewood text-cream">
      <div className="mx-auto grid max-w-6xl gap-10 px-6 py-14 md:grid-cols-3">
        <div>
          <p className="font-display text-lg tracking-wide-plus uppercase">Hair by Nyasia</p>
          <p className="mt-3 max-w-xs text-sm text-cream/70">
            A calm, elevated salon experience for cuts, color, and styling.
          </p>
          {activeSocial.length > 0 && (
            <div className="mt-4 flex gap-3">
              {activeSocial.map((platform) => (
                <a
                  key={platform}
                  href={social[platform].url}
                  target="_blank"
                  rel="noopener noreferrer"
                  aria-label={socialLabel(platform)}
                  className="flex h-8 w-8 items-center justify-center rounded-full bg-cream/10 text-cream transition hover:bg-cream/20"
                >
                  <SocialIcon platform={platform} className="h-4 w-4" />
                </a>
              ))}
            </div>
          )}
        </div>
        <div>
          <p className="text-xs uppercase tracking-wide-plus text-cream/60">Visit Us</p>
          <ul className="mt-3 space-y-1 text-sm text-cream/80">
            <li>{address}</li>
            <li>{phone}</li>
          </ul>
          <p className="mt-5 text-xs uppercase tracking-wide-plus text-cream/60">
            Operating Hours
          </p>
          <ul className="mt-3 space-y-1 text-sm text-cream/80">
            {hoursLines.map((line) => (
              <li key={line}>{line}</li>
            ))}
          </ul>
        </div>
        <div>
          <p className="text-xs uppercase tracking-wide-plus text-cream/60">Explore</p>
          <ul className="mt-3 space-y-1 text-sm text-cream/80">
            <li>
              <Link href="/services" className="hover:text-cream">
                Services
              </Link>
            </li>
            <li>
              <Link href="/gallery" className="hover:text-cream">
                Gallery
              </Link>
            </li>
            <li>
              <Link href="/book" className="hover:text-cream">
                Book an appointment
              </Link>
            </li>
            <li>
              <Link href="/contact" className="hover:text-cream">
                Contact
              </Link>
            </li>
          </ul>
        </div>
      </div>
      <div className="border-t border-cream/10">
        <div className="mx-auto flex max-w-6xl items-center justify-between px-6 py-4 text-xs text-cream/50">
          <span>&copy; {new Date().getFullYear()} Hair by Nyasia. All rights reserved.</span>
          <Link href="/admin/login" className="hover:text-cream/80">
            Admin
          </Link>
        </div>
      </div>
    </footer>
  );
}