import Link from "next/link";
import { BRAND_NAME } from "@/lib/brand";
import { legalInfo } from "@/lib/legal";
import { SiteTextMap, text } from "@/lib/site-text";

function InstagramIcon() {
  return (
    <svg viewBox="0 0 24 24" aria-hidden="true" className="h-4 w-4 fill-none stroke-current stroke-[1.9]">
      <rect x="3.5" y="3.5" width="17" height="17" rx="5" />
      <circle cx="12" cy="12" r="4" />
      <circle cx="17.4" cy="6.6" r="0.9" className="fill-current stroke-none" />
    </svg>
  );
}

function FacebookIcon() {
  return (
    <svg viewBox="0 0 24 24" aria-hidden="true" className="h-4 w-4 fill-current">
      <path d="M13.2 21v-7.7h2.6l.4-3h-3V8.4c0-.9.3-1.5 1.5-1.5h1.6V4.2c-.3 0-1.2-.1-2.2-.1-2.2 0-3.7 1.3-3.7 3.8v2.4H8v3h2.4V21h2.8Z" />
    </svg>
  );
}

function TikTokIcon() {
  return (
    <svg viewBox="0 0 24 24" aria-hidden="true" className="h-4 w-4 fill-current">
      <path d="M19.321 5.562a5.122 5.122 0 0 1-2.932-2.932A5.058 5.058 0 0 1 16.445 2h-3.339v12.769a1.768 1.768 0 1 1-2.535-1.603v-3.475a5.088 5.088 0 0 0-5.088 5.088 5.088 5.088 0 0 0 5.088 5.088c2.813 0 5.088-2.275 5.088-5.088V9.17a6.376 6.376 0 0 0 3.66 1.113v-3.476a3.22 3.22 0 0 1-.968-.145Z" />
    </svg>
  );
}

type FooterProps = {
  siteText: SiteTextMap;
};

export function Footer({ siteText }: FooterProps) {
  return (
    <footer className="mt-20 border-t border-[var(--line)] bg-[linear-gradient(180deg,#fff0f0_0%,#ffe8e8_100%)]">
      <div className="mx-auto grid w-full max-w-7xl gap-10 px-4 py-12 md:grid-cols-[1.2fr_1fr_1fr_1fr] md:px-8">
        <div className="space-y-3">
          <div className="inline-flex flex-col items-center gap-1 px-3 py-2">
            <span className="brand-wordmark text-[2.45rem] leading-none text-[var(--accent-3)] hover:text-[var(--accent-2)]">{BRAND_NAME}</span>
            <span className="brand-french-flag" role="img" aria-label="Drapeau français">
              <span className="bg-[#0055A4]" />
              <span className="bg-white" />
              <span className="bg-[#EF4135]" />
            </span>
          </div>
          <p className="max-w-md text-sm text-[var(--muted)]">{text(siteText, "footer.tagline")}</p>
          <Link href="/boutique" className="inline-flex text-sm font-semibold text-[var(--accent-3)] hover:text-[var(--accent-2)]">
            {text(siteText, "footer.ctaShop")}
          </Link>
          <div className="pt-1">
            <p className="text-xs font-semibold uppercase tracking-[0.15em] text-[var(--accent-3)]">{text(siteText, "footer.socials")}</p>
            <div className="mt-2 flex items-center gap-2">
              <a
                href="https://www.instagram.com/styluniqueoff/"
                aria-label="Instagram"
                className="inline-flex h-9 w-9 items-center justify-center rounded-full border border-[#efdbdb] bg-white text-[var(--foreground)] transition hover:border-[#f2bcbc] hover:text-[var(--accent)]"
              >
                <InstagramIcon />
              </a>
              <a
                href="https://www.facebook.com/profile.php?id=61570048451108"
                aria-label="Facebook"
                className="inline-flex h-9 w-9 items-center justify-center rounded-full border border-[#efdbdb] bg-white text-[var(--foreground)] transition hover:border-[#f2bcbc] hover:text-[var(--accent)]"
              >
                <FacebookIcon />
              </a>
              <a
                href="https://www.tiktok.com/@styluniqueoff?_r=1&_t=ZN-9585LDcXlBu"
                aria-label="TikTok"
                className="inline-flex h-9 w-9 items-center justify-center rounded-full border border-[#efdbdb] bg-white text-[var(--foreground)] transition hover:border-[#f2bcbc] hover:text-[var(--accent)]"
              >
                <TikTokIcon />
              </a>
            </div>
          </div>
        </div>

        <nav className="space-y-2 text-sm text-[var(--muted)]">
          <p className="text-xs font-semibold uppercase tracking-[0.15em] text-[var(--accent-3)]">{text(siteText, "footer.navTitle")}</p>
          <div className="flex flex-col gap-1.5">
            <Link href="/" className="w-fit hover:text-[var(--foreground)]">
              {text(siteText, "footer.nav.home")}
            </Link>
            <Link href="/boutique" className="w-fit hover:text-[var(--foreground)]">
              {text(siteText, "footer.nav.shop")}
            </Link>
            <Link href="/panier" className="w-fit hover:text-[var(--foreground)]">
              {text(siteText, "footer.nav.cart")}
            </Link>
          </div>
        </nav>

        <div className="space-y-2 text-sm text-[var(--muted)]">
          <p className="text-xs font-semibold uppercase tracking-[0.15em] text-[var(--accent-3)]">{text(siteText, "footer.commitmentTitle")}</p>
          <div className="flex flex-col gap-1.5">
            <p>{text(siteText, "footer.commitment.one")}</p>
            <p>{text(siteText, "footer.commitment.two")}</p>
            <p>{text(siteText, "footer.commitment.three")}</p>
          </div>
        </div>

        <nav className="space-y-2 text-sm text-[var(--muted)]">
          <p className="text-xs font-semibold uppercase tracking-[0.15em] text-[var(--accent-3)]">{text(siteText, "footer.legalTitle")}</p>
          <div className="flex flex-col gap-1.5">
            <Link href="/mentions-legales" className="w-fit hover:text-[var(--foreground)]">
              {text(siteText, "footer.legal.mentions")}
            </Link>
            <Link href="/politique-confidentialité" className="w-fit hover:text-[var(--foreground)]">
              {text(siteText, "footer.legal.privacy")}
            </Link>
            <Link href="/politique-cookies" className="w-fit hover:text-[var(--foreground)]">
              {text(siteText, "footer.legal.cookies")}
            </Link>
            <Link href="/preferences-cookies" className="w-fit hover:text-[var(--foreground)]">
              {text(siteText, "footer.legal.cookiesManage")}
            </Link>
            <Link href="/droits-rgpd" className="w-fit hover:text-[var(--foreground)]">
              {text(siteText, "footer.legal.rights")}
            </Link>
            <Link href="/cgu" className="w-fit hover:text-[var(--foreground)]">
              {text(siteText, "footer.legal.cgu", "CGU")}
            </Link>
            <Link href="/cgv" className="w-fit hover:text-[var(--foreground)]">
              {text(siteText, "footer.legal.cgv")}
            </Link>
          </div>
        </nav>
      </div>

      <div className="border-t border-[var(--line)]">
        <div className="mx-auto flex w-full max-w-7xl flex-wrap items-center justify-between gap-2 px-4 py-4 text-xs text-[var(--muted)] md:px-8">
          <p>
            &copy; {new Date().getFullYear()} {BRAND_NAME}. {text(siteText, "footer.copyright")}
          </p>
          <p>
            {text(siteText, "footer.rgpdContact")}{" "}
            <a href={`mailto:${legalInfo.privacyEmail}`} className="font-semibold text-[var(--accent-3)]">
              {legalInfo.privacyEmail}
            </a>
          </p>
        </div>
      </div>
    </footer>
  );
}