import { navLinks, studio } from "@/data/studio";
import { Mark } from "@/components/mark";

export function SiteFooter() {
  return (
    <footer className="border-t border-line bg-ink text-cream">
      <div className="mx-auto grid max-w-6xl gap-10 px-5 py-14 sm:grid-cols-3 sm:px-6">
        <div>
          <p className="flex items-center gap-2 font-display text-2xl tracking-[0.2em]">
            <Mark className="size-6 text-cream" />
            {studio.name.toUpperCase()}
          </p>
          <p className="mt-3 max-w-xs text-sm leading-relaxed text-cream/70">
            Studio masaže u Zagrebu. Klasična, sportska, limfna drenaža i masaža
            lica.
          </p>
        </div>
        <div>
          <p className="text-xs tracking-[0.2em] text-cream/50 uppercase">
            Navigacija
          </p>
          <ul className="mt-4 space-y-2 text-sm">
            {navLinks.map((link) => (
              <li key={link.href}>
                <a href={link.href} className="hover:text-cream/80">
                  {link.label}
                </a>
              </li>
            ))}
          </ul>
        </div>
        <div>
          <p className="text-xs tracking-[0.2em] text-cream/50 uppercase">
            Kontakt
          </p>
          <p className="mt-4 text-sm leading-relaxed text-cream/80">
            {studio.address}
            <br />
            {studio.hours}
          </p>
          <a
            href={studio.phoneHref}
            className="mt-3 inline-block text-sm text-cream underline-offset-4 hover:underline"
          >
            {studio.phone}
          </a>
        </div>
      </div>
    </footer>
  );
}