"use client";

import React from "react";
import Link from "next/link";
import { Mail, Phone } from "lucide-react";
import { Container } from "@/components/container";
import { LogoFull } from "@/components/logo";
import { NewsletterForm } from "@/components/newsletter-form";
import { CookieSettingsButton } from "@/components/cookie-settings-button";
import { footerColumns, legalNav, type NavItem } from "@/content/nav";
import { site, type SocialLink } from "@/content/site";

/* ------------------------------------------------------------------ */
/* Social icons (rendered from site.social — no fake URLs)            */
/* ------------------------------------------------------------------ */
function BrandGlyph({ icon }: { icon: SocialLink["icon"] }) {
  const common = "size-4";
  switch (icon) {
    case "instagram":
      return (
        <svg viewBox="0 0 24 24" className={common} fill="currentColor" aria-hidden>
          <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z" />
        </svg>
      );
    case "facebook":
      return (
        <svg viewBox="0 0 24 24" className={common} fill="currentColor" aria-hidden>
          <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z" />
        </svg>
      );
    case "linkedin":
      return (
        <svg viewBox="0 0 24 24" className={common} fill="currentColor" aria-hidden>
          <path d="M4.98 3.5A2.5 2.5 0 1 0 5 8.5a2.5 2.5 0 0 0-.02-5zM3 9h4v12H3zM9 9h3.8v1.7h.05c.53-1 1.83-2.05 3.77-2.05 4.03 0 4.78 2.65 4.78 6.1V21H21.4v-5.4c0-1.29-.02-2.95-1.8-2.95-1.8 0-2.08 1.4-2.08 2.85V21H13.7z" />
        </svg>
      );
    default:
      return null;
  }
}

function FooterLink({ link }: { link: NavItem }) {
  const cls =
    "text-sm text-muted-foreground transition-colors hover:text-foreground";
  return link.external ? (
    <a href={link.href} className={cls}>
      {link.label}
    </a>
  ) : (
    <Link href={link.href} className={cls}>
      {link.label}
    </Link>
  );
}

export function FullFooter() {
  const year = new Date().getFullYear();
  const updated = new Date().toLocaleDateString("en-US", {
    year: "numeric",
    month: "long",
  });
  const { address } = site;
  const hasAddress = Boolean(address.line1 || address.city);

  return (
    <footer className="dark relative overflow-hidden border-t border-border bg-background pt-16 pb-10 text-foreground">
      {/* Cool-to-warm gradient top hairline */}
      <div
        aria-hidden="true"
        className="pointer-events-none absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-[#4FDAF1]/60 to-transparent"
      />
      {/* Ambient background glows */}
      <div
        aria-hidden="true"
        className="pointer-events-none absolute left-1/4 top-0 -z-10 size-96 -translate-x-1/2 rounded-full bg-[#4FDAF1]/5 blur-3xl"
      />
      <div
        aria-hidden="true"
        className="pointer-events-none absolute right-1/4 bottom-0 -z-10 size-96 translate-x-1/2 rounded-full bg-[#E26B0B]/5 blur-3xl"
      />

      <Container>
        {/* Top row */}
        <div className="grid grid-cols-1 gap-10 md:grid-cols-12">
          {/* Brand */}
          <div className="flex flex-col gap-4 md:col-span-4">
            <Link href="/" aria-label="Quto AI — home" className="w-fit">
              <LogoFull variant="light" />
            </Link>
            <p className="max-w-xs text-sm text-muted-foreground">
              {site.description}
            </p>
            <div className="flex flex-col gap-1.5 text-sm">
              {site.email ? (
                <a
                  href={`mailto:${site.email}`}
                  className="inline-flex items-center gap-2 text-muted-foreground hover:text-foreground"
                >
                  <Mail className="size-4" strokeWidth={1.5} aria-hidden />
                  {site.email}
                </a>
              ) : null}
              {site.phone ? (
                <a
                  href={`tel:${site.phone.replace(/\s+/g, "")}`}
                  className="inline-flex items-center gap-2 text-muted-foreground hover:text-foreground"
                >
                  <Phone className="size-4" strokeWidth={1.5} aria-hidden />
                  {site.phone}
                </a>
              ) : null}
              {hasAddress ? (
                <p className="max-w-xs text-xs leading-relaxed text-muted-foreground">
                  {[address.line1, address.line2, address.city, address.state, address.country]
                    .filter(Boolean)
                    .join(", ")}
                </p>
              ) : null}
            </div>
            {/* Social icons — rendered from real, configured profiles only (§10) */}
            {site.social.length > 0 ? (
              <div className="mt-1 flex items-center gap-2.5">
                {site.social.map((s) => (
                  <a
                    key={s.label}
                    href={s.href}
                    aria-label={s.label}
                    title={s.label}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="flex size-9 items-center justify-center rounded-full border border-border text-muted-foreground transition-colors hover:border-[#4FDAF1]/50 hover:bg-[#4FDAF1]/10 hover:text-[#4FDAF1]"
                  >
                    <BrandGlyph icon={s.icon} />
                  </a>
                ))}
              </div>
            ) : null}
          </div>

          {/* Link columns — nested in their own grid so the number of columns
              can change (e.g. adding "Solutions") without the spans overflowing
              the 12-column parent and wrapping the newsletter to a second row. */}
          <div className="grid grid-cols-2 gap-8 sm:grid-cols-3 md:col-span-5">
            {footerColumns.map((col) => (
              <div key={col.heading}>
                <h3 className="font-display text-sm font-semibold text-foreground">
                  {col.heading}
                </h3>
                <ul className="mt-3 space-y-2.5">
                  {col.links.map((l) => (
                    <li key={`${col.heading}-${l.label}-${l.href}`}>
                      <FooterLink link={l} />
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>

          {/* Newsletter */}
          <div className="md:col-span-3">
            <h3 className="font-display text-sm font-semibold text-foreground">
              Stay in the loop
            </h3>
            <p className="mt-3 text-sm text-muted-foreground">
              Occasional updates on AI agents. No spam.
            </p>
            <div className="mt-3">
              <NewsletterForm />
            </div>
          </div>
        </div>


        {/* Bottom bar */}
        <div className="mt-12 flex flex-col gap-4 border-t border-border pt-6 text-xs text-muted-foreground md:flex-row md:items-center md:justify-between">
          <div className="flex flex-wrap items-center gap-x-3 gap-y-1">
            <span>© {year} Quto AI</span>
            {site.legalEntity ? <span>· {site.legalEntity}</span> : null}
            <span>· Updated {updated}</span>
          </div>
          <div className="flex flex-wrap items-center gap-x-4 gap-y-2">
            {legalNav.map((l) => (
              <Link
                key={l.href}
                href={l.href}
                className="transition-colors hover:text-foreground"
              >
                {l.label}
              </Link>
            ))}
            <CookieSettingsButton />
          </div>
        </div>
      </Container>
    </footer>
  );
}