"use client";

import { SiteLink } from "@/components/site/site-link";

const exploreLinks = [
  { href: "/projects", label: "Projects" },
  { href: "/experience", label: "3D Experience" },
  { href: "/services", label: "Services" },
  { href: "/journal", label: "Journal" },
] as const;

const studioLinks = [
  { href: "/about", label: "About" },
  { href: "/studio", label: "Studio" },
  { href: "/team", label: "Team" },
  { href: "/awards", label: "Awards" },
  { href: "/publications", label: "Publications" },
] as const;

export function SiteFooter({
  studioName,
  location,
}: {
  studioName: string;
  location?: string | null;
}) {
  const year = new Date().getFullYear();

  return (
    <footer className="studio-footer relative overflow-hidden bg-[var(--archi-dark)] text-white">
      <div
        aria-hidden
        className="pointer-events-none absolute inset-0"
        style={{
          background:
            "radial-gradient(ellipse 55% 45% at 100% 0%, rgba(201,162,39,0.14), transparent 55%), radial-gradient(ellipse 40% 50% at 0% 100%, rgba(255,255,255,0.04), transparent 50%)",
        }}
      />
      <div className="studio-grain pointer-events-none absolute inset-0 opacity-[0.28]" />

      <div className="studio-container relative">
        <div className="flex flex-col gap-8 border-b border-white/10 py-12 sm:flex-row sm:items-end sm:justify-between sm:gap-10 sm:py-14 lg:py-16">
          <div className="max-w-xl">
            <div className="mb-5 h-px w-14 bg-gradient-to-r from-[var(--archi-gold)] to-transparent" />
            <p className="text-[0.65rem] tracking-[0.28em] text-[var(--archi-gold)] uppercase">
              Next brief
            </p>
            <h2 className="mt-3 font-[family-name:var(--font-display)] text-[clamp(1.85rem,5vw,2.75rem)] leading-[1.05] tracking-tight">
              Let&apos;s shape the next space together
            </h2>
            <p className="mt-3 max-w-md text-sm leading-relaxed text-white/45 sm:text-[0.95rem]">
              Share the site, program, or ambition — we respond with clarity and
              care.
            </p>
          </div>
          <SiteLink
            href="/contact"
            className="studio-btn-primary inline-flex min-h-12 w-full shrink-0 sm:w-auto"
          >
            Start a project
          </SiteLink>
        </div>

        <div className="grid gap-12 py-12 sm:gap-14 sm:py-14 lg:grid-cols-[minmax(0,1.4fr)_minmax(0,1fr)_minmax(0,1fr)_minmax(0,0.9fr)] lg:gap-10 lg:py-16">
          <div>
            <p className="font-[family-name:var(--font-display)] text-[clamp(1.75rem,4vw,2.5rem)] leading-none tracking-tight">
              {studioName}
            </p>
            <p className="mt-5 max-w-sm text-sm leading-7 text-white/45">
              Architecture crafted with clarity, material honesty, and lasting
              presence.
              {location ? ` Based in ${location}.` : null}
            </p>
            {location ? (
              <p className="mt-6 inline-flex items-center gap-2 text-xs tracking-[0.18em] text-white/35 uppercase">
                <span
                  aria-hidden
                  className="h-1.5 w-1.5 rounded-full bg-[var(--archi-gold)]"
                />
                {location}
              </p>
            ) : null}
          </div>

          <nav aria-label="Explore">
            <p className="text-[0.65rem] tracking-[0.24em] text-white/35 uppercase">
              Explore
            </p>
            <ul className="mt-5 space-y-1">
              {exploreLinks.map((link) => (
                <li key={link.href}>
                  <SiteLink href={link.href} className="studio-footer-link">
                    {link.label}
                  </SiteLink>
                </li>
              ))}
            </ul>
          </nav>

          <nav aria-label="Studio">
            <p className="text-[0.65rem] tracking-[0.24em] text-white/35 uppercase">
              Studio
            </p>
            <ul className="mt-5 space-y-1">
              {studioLinks.map((link) => (
                <li key={link.href}>
                  <SiteLink href={link.href} className="studio-footer-link">
                    {link.label}
                  </SiteLink>
                </li>
              ))}
            </ul>
          </nav>

          <div>
            <p className="text-[0.65rem] tracking-[0.24em] text-white/35 uppercase">
              Connect
            </p>
            <ul className="mt-5 space-y-1">
              <li>
                <SiteLink href="/contact" className="studio-footer-link">
                  Contact
                </SiteLink>
              </li>
              <li>
                <SiteLink href="/projects" className="studio-footer-link">
                  Selected work
                </SiteLink>
              </li>
            </ul>
            <SiteLink
              href="/contact"
              className="mt-8 inline-flex text-sm font-medium text-[var(--archi-gold)] transition hover:text-[var(--archi-gold-bright)]"
            >
              Inquire →
            </SiteLink>
          </div>
        </div>

        <div className="flex flex-col gap-4 border-t border-white/10 py-6 pb-[max(1.75rem,env(safe-area-inset-bottom))] sm:flex-row sm:items-center sm:justify-between sm:py-7">
          <p className="text-xs tracking-wide text-white/30">
            © {year} {studioName}. All rights reserved.
          </p>
          <p className="text-xs tracking-[0.16em] text-white/25 uppercase">
            Powered by ARCHI
          </p>
        </div>
      </div>
    </footer>
  );
}
