import Image from "next/image";
import Link from "next/link";
import { brand, type Locale } from "@/content/site";
import { libraryPath } from "@/content/libraryPaths";
import { translations } from "@/content/translations";

export function SiteFooter({ locale }: { locale: Locale }) {
  const t = translations[locale];
  const positioning = {
    fr: "Partenaire de croissance",
    en: "Growth Partner",
    ar: "شريك النمو",
  }[locale];
  const market = {
    fr: "Maroc",
    en: "Morocco",
    ar: "المغرب",
  }[locale];
  const location = locale === "ar" ? "فاس، المغرب" : `Fès, ${market}`;
  const closingLabel = {
    fr: "Parlons de la prochaine étape",
    en: "Let’s discuss the next step",
    ar: "لنتحدث عن الخطوة التالية",
  }[locale];
  return (
    <footer className="site-footer">
      <div className="footer-watermark" aria-hidden="true">YASHAL</div>
      <div className="shell footer-closing" data-reveal>
        <p className="kicker">{brand.name} — {positioning}</p>
        <h2>{t.home.finalTitle}</h2>
        <Link className="button button-light" href={`/${locale}/contact/`}>
          {closingLabel}
        </Link>
      </div>
      <div className="shell footer-grid" data-reveal>
        <div className="footer-brand">
          <Image src="/brand/yashal-logo-light.png" alt="" width={62} height={67} />
          <p className="kicker">{brand.name}</p>
          <h2>{positioning}</h2>
          <p>{location}</p>
        </div>
        <div>
          <p className="footer-label">{locale === "fr" ? "Explorer" : locale === "ar" ? "استكشف" : "Explore"}</p>
          <Link href={`/${locale}/growth-system/`}>{t.nav.growthSystem}</Link>
          <Link href={`/${locale}/solutions/`}>{t.nav.solutions}</Link>
          <Link href={`/${locale}/work/`}>{t.nav.work}</Link>
          <Link href={libraryPath(locale)}>{t.nav.knowledge}</Link>
          <Link href={`/${locale}/about/`}>{t.nav.about}</Link>
        </div>
        <div>
          <p className="footer-label">{t.nav.contact}</p>
          <a href={`mailto:${brand.email}`}>{brand.email}</a>
          <a href={`tel:${brand.phoneHref}`} dir="ltr">{brand.phone}</a>
          <a href="https://www.instagram.com/yashal.studios/" rel="noreferrer">Instagram · {brand.instagram}</a>
        </div>
        <div>
          <p className="footer-label">{locale === "fr" ? "Informations" : locale === "ar" ? "معلومات" : "Information"}</p>
          <Link href={`/${locale}/privacy/`}>
            {locale === "fr" ? "Confidentialité" : locale === "ar" ? "الخصوصية" : "Privacy"}
          </Link>
          <Link href={`/${locale}/legal/`}>
            {locale === "fr" ? "Mentions légales" : locale === "ar" ? "الإشعار القانوني" : "Legal notice"}
          </Link>
        </div>
      </div>
      <div className="shell footer-bottom" data-reveal>
        <span>© {new Date().getFullYear()} Yashal Studios</span>
        <span>{positioning} · {market}</span>
      </div>
    </footer>
  );
}