import { Logo } from "../lib/primitives.jsx";

export default function Footer() {
  return (
    <footer className="relative pt-10 pb-8 border-t border-hairline" style={{ background: "oklch(0.14 0.008 60)" }}>
      <div className="wrap">
        <div className="flex items-start justify-between gap-8 flex-wrap">
          <Logo />
          <div className="flex flex-wrap items-center gap-5 font-mono text-[12px] text-fg-mute tracking-[0.03em]">
            <span>🇨🇦 Built in Canada</span>
            <span className="text-fg-faint">·</span>
            <span>Your data stays safe</span>
            <span className="text-fg-faint">·</span>
            <span>No credit card to start</span>
          </div>
        </div>
        <div className="mt-6 pt-5 border-t border-hairline flex justify-between items-center gap-4 flex-wrap font-mono text-[11px] text-fg-faint tracking-[0.04em]">
          <span>© 2026 Vibn Inc. · Made for makers, not engineers.</span>
          <div className="flex gap-[18px]">
            <a href="#" className="hover:text-fg-dim">Privacy</a>
            <a href="#" className="hover:text-fg-dim">Terms</a>
            <a href="#" className="hover:text-fg-dim">Status</a>
            <a href="#" className="hover:text-fg-dim">Changelog</a>
          </div>
        </div>
      </div>
    </footer>
  );
}