sharper.ly/apps/web/app/components/ui/Footer/Footer.tsx

/* ============================================================================
   Footer - figma frame 140:7813
   ----------------------------------------------------------------------------
   ONE component for all four published variants:
     light EN 140:7812 | dark EN 140:7814 | light AR 140:8713 | dark AR 140:8685
   `surface` picks the palette and the logo cut; direction comes from `<html dir>`
   and every offset is a logical property, so the Arabic variants are the same
   markup mirrored - there is no RTL branch anywhere below.

   STYLING: Tailwind utilities for layout and spacing, tier-2 semantic tokens for
   everything that carries meaning (`text-[var(--text-primary)]`). No raw hex, no
   tier-1 primitive, no component stylesheet.

   ONE DELIBERATE DEVIATION FROM THE PUBLISHED FRAMES:
     the two EN frames disagree on the sitemap. 140:7812 carries the real IA but
     no column headings; 140:7814 carries headings but labels for pages that do
     not exist (Partners, Blog, Photo Gallery, SUQs, Pilot Initiatives,
     Research). This takes the newer IA - built from ROUTE_SLUGS, the same
     source the router is built from - and the headings. Linking the frame's
     labels verbatim is what previously shipped five dead links.

   Column headings take `--text-tertiary`, as the frames do: that token is
   already re-pointed to a readable step on the light surface (semantic.css),
   so it needs no a11y override here.
   ========================================================================= */

import { Link } from "react-router";

import type {
  FooterCopy,
  FooterLink,
  FooterPartner,
  FooterProps,
  FooterSocialLink,
} from "./types";
import {
  DEFAULT_FOOTER_COPY,
  DEFAULT_FOOTER_PARTNERS,
  DEFAULT_FOOTER_SOCIAL_LINKS,
  FOOTER_ASSETS,
  FOOTER_EU_EMBLEM_SIZE,
  FOOTER_WORDMARK_SIZE,
  defaultFooterLinkGroups,
} from "./content";
import { FooterSocialIcon } from "./FooterSocialIcon";

const cx = (...parts: readonly (string | false | undefined)[]): string =>
  parts.filter(Boolean).join(" ");

function definedOnly<T extends object>(source: Partial<T> | undefined): Partial<T> {
  if (!source) return {};
  return Object.fromEntries(
    Object.entries(source).filter(([, value]) => value !== undefined),
  ) as Partial<T>;
}

/** Visible focus ring on every interactive element, straight off the focus tokens. */
const FOCUS_RING = cx(
  "rounded-[var(--radius-control)]",
  "focus-visible:[outline:var(--focus-ring-width)_solid_var(--focus-ring-color)]",
  "focus-visible:[outline-offset:var(--focus-ring-offset)]",
);

/** Only `color` - `transition-colors` would also fade `outline-color`, which
    makes the focus ring arrive late. */
const TRANSITION =
  "transition-[color] duration-[var(--motion-duration-fast)] ease-[var(--motion-ease-standard)]";

/** Body/Large Bold links - 18/28, as the footer frame sets them. */
const LINK_CLASS = cx(
  FOCUS_RING,
  TRANSITION,
  "body-lg-bold inline-block text-[var(--text-primary)]",
  "hover:text-[var(--text-link)] hover:underline underline-offset-4",
);

/** Label/Medium - the "implemented by" label (figma 228:3035). */
const LABEL_CLASS = "label-md uppercase";

/** Body/Small Bold - the sitemap column headings (figma 140:7823 / 140:7834).
    `--text-tertiary` is already remapped to a readable step on the light
    surface, so the same token is correct on both. */
const GROUP_HEADING_CLASS = "body-sm-bold uppercase text-[var(--text-tertiary)]";

/**
 * Internal links go through the router so the footer navigates client-side;
 * anything flagged `external` stays a plain anchor and opens in a new tab.
 */
function FooterNavLink({ link, className }: { link: FooterLink; className: string }) {
  if (link.external) {
    return (
      <a href={link.href} className={className} target="_blank" rel="noopener noreferrer">
        {link.label}
      </a>
    );
  }
  return (
    <Link to={link.href} className={className} prefetch="intent">
      {link.label}
    </Link>
  );
}

export function Footer({
  surface = "dark",
  locale = "en",
  dir,
  linkGroups,
  socialLinks = DEFAULT_FOOTER_SOCIAL_LINKS,
  partners = DEFAULT_FOOTER_PARTNERS,
  copy: copyOverrides,
  homeHref,
  className,
  id,
}: FooterProps) {
  const isDark = surface === "dark";
  // A CMS field that has not been filled in arrives as undefined; spreading it
  // would blank the default, so only defined overrides are applied.
  const copy: FooterCopy = { ...DEFAULT_FOOTER_COPY[locale], ...definedOnly(copyOverrides) };
  const groups = linkGroups ?? defaultFooterLinkGroups(locale);
  const home = homeHref ?? `/${locale}`;

  return (
    <footer
      id={id}
      dir={dir}
      data-surface={surface}
      className={cx(
        // data-surface sets the palette, but the frame puts the footer on its
        // own ground (base/black on dark) with a rule separating it from the
        // page, so those two are stated here rather than inherited.
        "w-full border-t border-[var(--border-default)] bg-[var(--surface-footer)]",
        "px-lg pb-2xl pt-[var(--layout-section-gap)] md:px-xl",
        className,
      )}
    >
      <div className="mx-auto flex w-full max-w-[var(--layout-content-max)] flex-col gap-2xl">
        {/* ---- brand + sitemap (figma 140:7684 / 140:8686) ---------------- */}
        <div className="flex flex-col gap-2xl lg:flex-row lg:gap-3xl">
          {/* --- brand column (figma 140:7685 / 140:8687) ----------------- */}
          <div
            className={cx(
              "flex flex-col gap-md",
              // the divider sits on the inline-end of the brand block, which is
              // the left edge once <html dir="rtl"> mirrors the row.
              "lg:w-[345px] lg:shrink-0 lg:border-e lg:border-[var(--border-subtle)] lg:pe-2xl",
            )}
          >
            <Link to={home} aria-label={copy.homeLabel} className={cx(FOCUS_RING, "w-fit")}>
              <img
                src={isDark ? FOOTER_ASSETS.wordmarkInverse : FOOTER_ASSETS.wordmark}
                alt="SHARP-ER"
                width={FOOTER_WORDMARK_SIZE.width}
                height={FOOTER_WORDMARK_SIZE.height}
                className="block h-[27px] w-[196px]"
                loading="lazy"
                decoding="async"
              />
            </Link>

            <p className="body-sm text-[var(--text-secondary)]">{copy.tagline}</p>

            <p className="body-sm max-w-[46ch] text-[var(--text-primary)]">
              {copy.description}
            </p>

            {/* --- EU visibility (figma 140:7688 / 238:2325) -------------- */}
            <div className="flex items-center gap-2xs pt-2xs">
              <img
                src={isDark ? FOOTER_ASSETS.euEmblemInverse : FOOTER_ASSETS.euEmblem}
                alt={copy.euEmblemAlt}
                width={FOOTER_EU_EMBLEM_SIZE.width}
                height={FOOTER_EU_EMBLEM_SIZE.height}
                className="block h-[32px] w-[48px] shrink-0"
                loading="lazy"
                decoding="async"
              />
              <p className="body-sm-bold max-w-[24ch] text-[var(--text-primary)]">
                {copy.euStatement}
              </p>
            </div>

            {socialLinks.length > 0 && <SocialRow copy={copy} links={socialLinks} />}
          </div>

          {/* --- sitemap columns (figma 380:12402) ------------------------ */}
          <nav aria-label={copy.navLabel} className="flex flex-1 flex-col gap-2xl sm:flex-row sm:gap-0">
            {groups.map((group, index) => (
              <div
                key={group.id}
                className={cx(
                  "flex min-w-0 flex-col gap-md sm:flex-1",
                  // the rule sits on the inline-start of every column but the
                  // first, so it mirrors with the row under dir="rtl".
                  index > 0 && "sm:border-s sm:border-[var(--border-subtle)] sm:ps-xl",
                  index < groups.length - 1 && "sm:pe-xl",
                )}
              >
                <h2 className={GROUP_HEADING_CLASS}>{group.heading}</h2>
                <ul className="flex flex-col gap-lg">
                  {group.links.map((link: FooterLink, linkIndex: number) => (
                    <li key={`${link.href}-${linkIndex}`}>
                      <FooterNavLink link={link} className={LINK_CLASS} />
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </nav>
        </div>

        {/* ---- implemented-by bar (figma 228:3062 / 140:8710) ------------- */}
        {partners.length > 0 && (
          <div className="flex flex-col gap-lg border-t border-[var(--border-default)] pt-lg sm:flex-row sm:items-center sm:justify-between">
            {/* Figma paints this label background/accent on dark and
                text/secondary on light; --text-accent is the readable green. */}
            <p
              className={cx(
                LABEL_CLASS,
                "text-[var(--text-secondary)] surface-dark:text-[var(--text-accent)]",
              )}
            >
              {copy.implementedByLabel}
            </p>
            <ul className="flex flex-wrap items-center gap-lg">
              {partners.map((partner) => (
                <li key={partner.id} className="flex items-center">
                  <PartnerMark isDark={isDark} partner={partner} />
                </li>
              ))}
            </ul>
          </div>
        )}
      </div>
    </footer>
  );
}

/* ---------------------------------------------------------------------------
   Consortium logo. The three marks are shown together and never on their own
   (communication guideline), so this renders one mark of that row - each keeps
   its own designed box rather than a shared height rule.
   ------------------------------------------------------------------------ */
function PartnerMark({ isDark, partner }: { isDark: boolean; partner: FooterPartner }) {
  const image = (
    <img
      src={isDark ? partner.srcInverse : partner.src}
      alt={partner.name}
      width={partner.width}
      height={partner.height}
      style={{ width: `${partner.width}px`, height: `${partner.height}px` }}
      className="block"
      loading="lazy"
      decoding="async"
    />
  );

  if (!partner.href) return image;

  return (
    <a
      href={partner.href}
      target="_blank"
      rel="noopener noreferrer"
      className={cx(FOCUS_RING, "inline-flex")}
    >
      {image}
    </a>
  );
}

/* ---------------------------------------------------------------------------
   Social row. Not in the published frames - the draft copy asks for it, so it
   closes the brand column. The negative inline-start margin cancels the icon
   padding so the glyphs optically align with the text above them.
   ------------------------------------------------------------------------ */
function SocialRow({
  copy,
  links,
}: {
  copy: FooterCopy;
  links: readonly FooterSocialLink[];
}) {
  return (
    <div className="pt-2xs">
      <h2 className="sr-only">{copy.socialHeading}</h2>
      <ul className="-ms-2xs flex flex-wrap items-center gap-2xs">
        {links.map((link) => (
          <li key={link.platform}>
            <a
              href={link.href}
              aria-label={link.label}
              target="_blank"
              rel="noopener noreferrer"
              className={cx(
                FOCUS_RING,
                TRANSITION,
                "inline-flex items-center justify-center p-2xs",
                "text-[var(--text-secondary)] hover:text-[var(--text-link)]",
              )}
            >
              <FooterSocialIcon
                platform={link.platform}
                className="h-[var(--control-icon-size)] w-[var(--control-icon-size)]"
              />
            </a>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default Footer;

/* ============================================================================
   Footer.stories-ish - usage, as a comment only (no Storybook in this project)
   ----------------------------------------------------------------------------

   // 1. Dark English footer - the default, matches figma 140:7814.
   //    <html lang="en" dir="ltr"> already carries the direction.
   <Footer locale="en" />

   // 2. Light English footer - figma 140:7812.
   <Footer surface="light" locale="en" />

   // 3. Arabic, dark. Same markup; the RTL mirroring comes from <html dir="rtl">,
   //    so nothing is passed for direction inside the real app.
   <Footer locale="ar" />

   // 4. Light Arabic - figma 140:8713. `dir` is only needed when the footer is
   //    previewed inside a document that is not in that locale.
   <Footer surface="light" locale="ar" dir="rtl" />

   // 5. Strapi-driven: every list is a prop, so the CMS payload maps 1:1.
   <Footer
     surface="dark"
     locale="en"
     linkGroups={cms.footer.groups}
     socialLinks={cms.footer.social}
     partners={cms.footer.partners}
     copy={{ description: cms.footer.blurb }}
   />

   // 6. Sitemap-only footer, no consortium row and no social row.
   <Footer partners={[]} socialLinks={[]} />

   ========================================================================= */