function Footer() {
  return (
    <footer id="download" className="relative border-t border-outline overflow-hidden" data-screen-label="Footer">
      {/* Download CTA */}
      <div className="relative py-20 border-b border-outline ambient-violet">
        <div className="absolute inset-0 bg-grid pointer-events-none opacity-50" />
        <div className="relative max-w-5xl mx-auto px-6 text-center">
          <div className="code-chip text-primary mb-4">// ready-to-play</div>
          <h2 className="text-5xl md:text-7xl font-black tracking-tighter leading-[0.95]">
            Baixe agora.<br />
            <span className="text-on-surface-variant">Registre o próximo jogo.</span>
          </h2>
          <p className="mt-6 text-on-surface-variant max-w-lg mx-auto">
            Grátis para começar. Sem cartão de crédito. Sem anúncio. Só o futebol do seu craque.
          </p>
          <div className="mt-8 flex flex-wrap items-center justify-center gap-3">
            <a href="#" className="px-6 py-4 bg-primary text-on-primary rounded-xl text-[14px] font-bold flex items-center gap-2 cta-glow hover:-translate-y-0.5 transition-transform">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                <path d="M17.05 20.28c-.98.95-2.05.8-3.08.35-1.09-.46-2.09-.48-3.24 0-1.44.62-2.2.44-3.06-.35C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.53 4.08zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z"/>
              </svg>
              App Store
            </a>
            <a href="#" className="px-6 py-4 bg-surface-container border border-outline rounded-xl text-[14px] font-bold flex items-center gap-2 hover:bg-surface-container-high transition-colors">
              <Icon name="android" className="text-tertiary" size={18} />
              Google Play
            </a>
          </div>
        </div>
      </div>

      <div className="max-w-7xl mx-auto px-6 py-14 grid md:grid-cols-[1.5fr_1fr_1fr_1fr] gap-10">
        <div>
          <div className="flex items-center gap-2.5">
            <Logomark size={34} />
            <span className="text-[17px] font-black tracking-tighter">MeuCraque</span>
          </div>
          <p className="mt-4 text-[13px] text-on-surface-variant max-w-xs leading-relaxed">
            Acompanhe seu craque de perto. Construído com precisão para o futebol de base.
          </p>
          <div className="mt-6 flex items-center gap-2">
            {["tiktok", "language", "photo_camera", "forum"].map((i) => (
              <a key={i} href="#" className="w-8 h-8 rounded-lg bg-surface-container border border-outline flex items-center justify-center hover:border-primary/40 transition-colors">
                <Icon name={i} className="text-on-surface-variant" size={14} />
              </a>
            ))}
          </div>
        </div>

        {[
          { h: "Produto", links: ["Recursos", "Planos", "Roadmap", "Changelog"] },
          { h: "Empresa", links: ["Sobre", "Blog", "Imprensa", "Carreiras"] },
          { h: "Legal", links: ["Privacidade", "Termos", "Cookies", "Contato"] },
        ].map((col, i) => (
          <div key={i}>
            <h4 className="text-[11px] font-bold uppercase tracking-widest text-on-surface-variant mb-4">{col.h}</h4>
            <ul className="space-y-2">
              {col.links.map((l) => (
                <li key={l}>
                  <a href="#" className="text-[13px] text-on-surface hover:text-primary transition-colors">{l}</a>
                </li>
              ))}
            </ul>
          </div>
        ))}
      </div>

      <div className="border-t border-outline">
        <div className="max-w-7xl mx-auto px-6 py-5 flex items-center justify-between flex-wrap gap-2">
          <span className="text-[11px] text-on-surface-variant font-mono">
            © 2026 MeuCraque — Todos os direitos reservados.
          </span>
          <span className="text-[11px] text-on-surface-variant font-mono flex items-center gap-1">
            <span className="w-1.5 h-1.5 rounded-full bg-tertiary live-dot" />
            Todos os sistemas operacionais
          </span>
        </div>
      </div>
    </footer>
  );
}

window.Footer = Footer;
