Arc Footer

"use client";

import { ArrowUpRightIcon } from "@phosphor-icons/react";
import { motion, useReducedMotion, type Transition } from "motion/react";
import { useId, useRef, useState } from "react";

import { cn } from "@/lib/utils";

export type FooterLink = { label: string; href: string; external?: boolean };
export type FooterGroup = { title: string; links: FooterLink[] };

// Flight time (s) of the marker's bow. The layout spring below settles in
// roughly the same window, so the two stay in step.
const FLIGHT = 0.35;
// Moment in the flight (0-1) when the marker reaches the label and pushes it.
const IMPACT = 0.8;
// Near-critically damped: overshoot grows with distance, so anything bouncier
// visibly sails past the target on long jumps across the footer.
const MARKER_SPRING = { type: "spring", stiffness: 800, damping: 52 } as const;

// How far (px) the marker bows away from a straight line while travelling.
// Scales with distance so short hops barely bend and long jumps swing wide.
// Capped at the column padding so a sideways swing never leaves the footer.
const BOW_MIN = 6;
const BOW_MAX = 24;
const BOW_PER_PX = 0.08;

// Where the marker sits (px) at the moment of impact: just left of the
// label, which is still at rest until the hit shoves it right. The marker
// then follows it in, so it never draws over the text.
const TOUCH_OFFSET = -5;

// The active label sits shoved to the right of the marker. On a hit it snaps
// out quickly and settles without bouncing; on leaving it slides back.
const LABEL_SHIFT = 20;
const LABEL_PUSH = { type: "spring", stiffness: 1000, damping: 60 } as const;
const LABEL_RETURN = { type: "spring", stiffness: 900, damping: 45 } as const;

type Point = { x: number; y: number };

const STILL: Point = { x: 0, y: 0 };

type Hover = {
  id: string;
  /** Bumped each time the marker reappears, so it mounts in place instead of flying in. */
  visit: number;
  /** Peak offset of the flight, perpendicular to travel. Zero means no travel. */
  bow: Point;
  /** The pointer or focus left the footer; the marker fades where it stopped. */
  hidden: boolean;
};

/** Bow sideways from the line of travel: up for moves across, left for moves down. */
function bowFor(dx: number, dy: number): Point {
  const distance = Math.hypot(dx, dy);
  if (distance < 1) return STILL;
  let nx = -dy / distance;
  let ny = dx / distance;
  if (ny > 0.01 || (Math.abs(ny) <= 0.01 && nx > 0)) {
    nx = -nx;
    ny = -ny;
  }
  const size = Math.min(BOW_MAX, BOW_MIN + distance * BOW_PER_PX);
  return { x: nx * size, y: ny * size };
}

function Marker({
  layoutId,
  bow,
  hidden,
  accent,
}: {
  layoutId: string;
  bow: Point;
  hidden: boolean;
  accent: string;
}) {
  const reduceMotion = useReducedMotion();
  const travelling = !reduceMotion && (bow.x !== 0 || bow.y !== 0);
  const flight: Transition = {
    duration: FLIGHT,
    times: [0, 0.3, IMPACT, 1],
    ease: ["easeOut", "easeInOut", "easeOut"],
  };

  return (
    <motion.span
      layoutId={layoutId}
      aria-hidden="true"
      // A travelling marker takes over from the one it replaces; a fresh one
      // pops in on the spot.
      initial={travelling ? false : { opacity: 0, scale: 0.4 }}
      // The shared-layout projection moves the marker in a straight line
      // between links; synced x/y keyframes on top bend that path into an arc.
      animate={{
        opacity: hidden ? 0 : 1,
        scale: hidden ? 0.4 : 1,
        x: travelling ? [0, bow.x, TOUCH_OFFSET, 0] : 0,
        y: travelling ? [0, bow.y, 0, 0] : 0,
      }}
      transition={
        reduceMotion
          ? { layout: { duration: 0 }, default: { duration: 0.15 } }
          : {
              layout: MARKER_SPRING,
              x: flight,
              y: flight,
              opacity: { duration: 0.15 },
              scale: { type: "spring", visualDuration: 0.25, bounce: 0.3 },
            }
      }
      className="pointer-events-none absolute top-[calc(50%-3.5px)] left-0 size-[7px]"
      style={{ backgroundColor: accent }}
    />
  );
}

/**
 * Dividers between columns: stacked on phones, a two-column grid on tablets, and
 * one row from wide containers up. Worked out per index so any column count
 * gets the right hairlines.
 */
function columnBorders(i: number, count: number) {
  const lastRow = count % 2 === 0 ? i >= count - 2 : i === count - 1;
  const last = i === count - 1;
  return cn(
    !last && "border-b",
    "@xl:border-b-0",
    !lastRow && "@xl:border-b",
    i % 2 === 0 && !last && "@xl:border-r",
    "@5xl:border-b-0",
    !last && "@5xl:border-r",
  );
}

/**
 * Link columns with one shared marker. Hovering or focusing a link flies the
 * marker there on a shallow arc, and when it lands it shoves the label right.
 */
export function ArcFooterNav({
  columns,
  arc = true,
  accent = "var(--foreground)",
  className,
}: {
  /** Each column stacks one or more titled groups. */
  columns: FooterGroup[][];
  /** Bow the marker's flight into an arc. False flies it in a straight line. */
  arc?: boolean;
  /** Any CSS colour for the marker. */
  accent?: string;
  className?: string;
}) {
  const reduceMotion = useReducedMotion();
  // The footer can render more than once on a page; keep each marker's
  // shared-layout animation scoped to its own instance.
  const markerId = useId();
  const navRef = useRef<HTMLElement>(null);
  const lastPoint = useRef<Point | null>(null);
  const [hover, setHover] = useState<Hover | null>(null);

  function show(el: HTMLElement, id: string) {
    const nav = navRef.current;
    if (!nav) return;
    // Measured relative to the nav and divided by its scale, so scrolling and
    // CSS-scaled previews don't skew the bow.
    const navRect = nav.getBoundingClientRect();
    const rect = el.getBoundingClientRect();
    const scale = navRect.width / nav.offsetWidth || 1;
    const point = {
      x: (rect.left - navRect.left) / scale,
      y: (rect.top + rect.height / 2 - navRect.top) / scale,
    };
    const from = lastPoint.current;
    lastPoint.current = point;

    if (hover && !hover.hidden && hover.id === id) return;
    if (!hover || hover.hidden || !from) {
      setHover({ id, visit: (hover?.visit ?? 0) + 1, bow: STILL, hidden: false });
      return;
    }
    setHover({
      id,
      visit: hover.visit,
      bow: arc ? bowFor(point.x - from.x, point.y - from.y) : STILL,
      hidden: false,
    });
  }

  function hide() {
    setHover((current) => (current ? { ...current, hidden: true } : current));
  }

  const travelling = hover !== null && (hover.bow.x !== 0 || hover.bow.y !== 0);

  return (
    <nav
      ref={navRef}
      aria-label="Footer"
      className={cn(
        "flex flex-col @xl:grid @xl:grid-cols-2 @5xl:flex @5xl:flex-row",
        className,
      )}
      onPointerLeave={hide}
      onBlur={(e) => {
        if (!e.currentTarget.contains(e.relatedTarget)) hide();
      }}
    >
      {columns.map((groups, c) => (
        <div
          key={c}
          className={cn(
            "flex flex-col gap-10 border-border px-6 py-10 @xl:gap-[50px] @xl:py-16 @xl:pr-5 @xl:pl-11",
            // Equal shares of the row, so the dividers spread evenly at any width.
            "@5xl:min-w-0 @5xl:flex-1 @5xl:basis-0 @5xl:first:pl-[54px]",
            columnBorders(c, columns.length),
          )}
        >
          {groups.map((group) => (
            <div key={group.title}>
              <h2 className="mb-[22px] text-sm leading-[1.7] text-pretty text-muted-foreground uppercase">
                {group.title}
              </h2>
              <ul className="flex flex-col gap-2.5">
                {group.links.map((link) => {
                  const id = `${group.title}/${link.label}`;
                  const current = hover?.id === id;
                  const active = current && !hover.hidden;
                  const layoutId = `${markerId}-${hover?.visit}`;
                  return (
                    <li key={link.label} className="relative">
                      {current && (
                        <Marker
                          key={layoutId}
                          layoutId={layoutId}
                          bow={hover.bow}
                          hidden={hover.hidden}
                          accent={accent}
                        />
                      )}
                      <a
                        href={link.href}
                        {...(link.external && { target: "_blank", rel: "noreferrer" })}
                        onPointerEnter={(e) => show(e.currentTarget, id)}
                        onFocus={(e) => show(e.currentTarget, id)}
                        // The ::before stretches the hit area over the row gaps,
                        // so moving down a column never drops the hover.
                        className="relative flex w-fit rounded-sm text-base leading-[1.45] tracking-[0.01em] text-foreground outline-none before:absolute before:inset-x-0 before:-inset-y-[5px] focus-visible:ring-2 focus-visible:ring-ring/50"
                      >
                        <motion.span
                          className="inline-flex items-center gap-1"
                          initial={false}
                          animate={{ x: active ? LABEL_SHIFT : 0 }}
                          transition={
                            reduceMotion
                              ? { duration: 0 }
                              : active
                                ? // Wait for the marker to arrive so the label
                                  // reads as pushed, not self-moving.
                                  { ...LABEL_PUSH, delay: travelling ? FLIGHT * IMPACT : 0 }
                                : LABEL_RETURN
                          }
                        >
                          {link.label}
                          {link.external && (
                            <ArrowUpRightIcon aria-hidden="true" className="size-3.5" />
                          )}
                        </motion.span>
                      </a>
                    </li>
                  );
                })}
              </ul>
            </div>
          ))}
        </div>
      ))}
    </nav>
  );
}