/* Footer — availability status + small print */

const Footer = () => {
  const year = new Date().getFullYear();
  return (
    <footer className="border-t hairline mt-10 pb-10">
      <div className="mx-auto max-w-[1280px] px-6 md:px-10 pt-12">
        {/* Big availability mark */}
        <div className="flex flex-col md:flex-row md:items-end md:justify-between gap-8 pb-12 border-b hairline">
          <div>
            <div className="flex items-center gap-3 font-mono text-[11px] uppercase tracking-[0.18em]" style={{ color: 'var(--fg-dim)' }}>
              <span className="relative flex h-2 w-2">
                <span className="absolute inset-0 rounded-full animate-ping opacity-60" style={{ background: '#10b981' }}></span>
                <span className="relative rounded-full h-2 w-2" style={{ background: '#10b981' }}></span>
              </span>
              <span>Open to work · Q3 2026</span>
            </div>
            <p className="mt-5 font-display display-tight text-4xl md:text-6xl font-medium">
              Let's build.
            </p>
          </div>
          <div className="flex items-center gap-3">
            <a href="mailto:alex@rivera.dev" className="grid place-items-center w-12 h-12 rounded-full transition-colors" style={{ border: '1px solid var(--line-strong)' }}><I.Mail size={16} /></a>
            <a href="https://github.com" className="grid place-items-center w-12 h-12 rounded-full transition-colors" style={{ border: '1px solid var(--line-strong)' }}><I.Github size={16} /></a>
            <a href="https://linkedin.com" className="grid place-items-center w-12 h-12 rounded-full transition-colors" style={{ border: '1px solid var(--line-strong)' }}><I.Linkedin size={16} /></a>
            <a href="#top" className="grid place-items-center w-12 h-12 rounded-full transition-colors" style={{ background: 'var(--accent)', color: '#fff' }} title="Back to top"><I.ArrowUpRight size={16} className="-rotate-45" /></a>
          </div>
        </div>

        {/* Small print */}
        <div className="pt-6 flex flex-col md:flex-row md:items-center md:justify-between gap-3 font-mono text-[11px]" style={{ color: 'var(--fg-dim)' }}>
          <span>© {year} MagnAgency · All rights reserved</span>
          <span>Built by MagnAgency</span>
        </div>
      </div>
    </footer>
  );
};

window.Footer = Footer;