// ui_kits/site/Footer.jsx
const Footer = () => {
  const yr = new Date().getFullYear();
  return (
    <footer className="koa-footer">
      <div className="wrap koa-footer-row">
        <span className="koa-mark-sm">
          koa<span className="koa-dot-sm" />codes
        </span>
        <span className="t-eyebrow">→ © {yr} · made on an island</span>
      </div>
      <style>{`
        .koa-footer { padding: var(--s-7) 0 var(--s-6); border-top: 1px solid var(--border); }
        .koa-footer-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); flex-wrap: wrap; }
        .koa-mark-sm { font-family: var(--font-display); font-weight: 700; font-size: 28px; }
        .koa-dot-sm { display: inline-block; width: 8px; height: 8px; background: var(--accent); border-radius: 50%; margin: 0 2px; transform: translateY(-2px); }
      `}</style>
    </footer>
  );
};

window.Footer = Footer;