// ── Shared SiteFooter ─────────────────────────────────────────────────────────
// Reusable footer for any non-case page. Self-contained: own font const + link.
// Usage: <SiteFooter theme={theme} />

const SITE_FOOTER_MONO = "'Space Mono', ui-monospace, monospace";

const SITE_FOOTER_LINKS = [
  { label: 'julioferracini.com', href: 'https://julioferracini.com' },
  { label: 'LinkedIn',           href: 'https://www.linkedin.com/in/julioferracini' },
  { label: 'Savee',              href: 'https://savee.com/jferracini/' },
  { label: 'Spotify',            href: 'https://open.spotify.com/user/12161191608?si=6975db67f18b4a0f&nd=1&dlsi=9e403195cdc141f6' },
  { label: 'GitHub',             href: 'https://github.com/jferracini' },
  { label: 'Email',              href: 'mailto:jferracini@gmail.com' },
];

function SiteFooterLink({ label, href, theme }) {
  const [hovered, setHovered] = React.useState(false);
  const isInternal = href.startsWith('mailto:') || href.startsWith('/');

  return (
    <a
      href={href}
      target={isInternal ? undefined : '_blank'}
      rel={isInternal ? undefined : 'noreferrer'}
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      style={{
        display: 'inline-block',
        fontFamily: SITE_FOOTER_MONO,
        fontSize: 12,
        letterSpacing: '0.08em',
        textDecoration: 'none',
        color: hovered ? theme.fg : theme.muted,
        transition: 'color 200ms ease',
        position: 'relative',
        overflow: 'hidden',
      }}
    >
      <span style={{
        display: 'inline-block',
        transition: hovered
          ? 'transform 350ms cubic-bezier(0.25, 1, 0.5, 1)'
          : 'transform 500ms cubic-bezier(0.34, 1.56, 0.64, 1)',
        transform: hovered ? 'translateY(-120%)' : 'translateY(0)',
      }}>
        {label}
      </span>
      <span style={{
        position: 'absolute',
        top: '100%',
        left: 0,
        display: 'inline-block',
        color: theme.fg,
        transition: hovered
          ? 'transform 350ms cubic-bezier(0.25, 1, 0.5, 1)'
          : 'transform 500ms cubic-bezier(0.34, 1.56, 0.64, 1)',
        transform: hovered ? 'translateY(-100%)' : 'translateY(0)',
      }}>
        {label}
      </span>
    </a>
  );
}

function SiteFooter({ theme }) {
  return (
    <footer style={{
      borderTop: `1px solid ${theme.rule}`,
      paddingTop: 96, paddingBottom: 96,
      display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start',
    }}>
      <div style={{
        fontFamily: SITE_FOOTER_MONO,
        fontSize: 12,
        color: theme.dim,
        letterSpacing: '0.12em',
      }}>
        Julio Ferracini – Staff Product Designer at Nubank
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 14 }}>
        {SITE_FOOTER_LINKS.map((l) => (
          <SiteFooterLink key={l.label} label={l.label} href={l.href} theme={theme} />
        ))}
      </div>
    </footer>
  );
}