const Footer = () => {
  return (
    <footer className="relative pt-24 pb-10 border-t" style={{ borderColor: 'var(--rule)' }}>
      <div className="max-w-[1400px] mx-auto px-6 md:px-10">
        <div className="grid grid-cols-12 gap-x-6 gap-y-12">
          <div className="col-span-12 md:col-span-5">
            <div className="flex items-center gap-3">
              <img src="/static/img/logo.png" alt="ArchPlan" className="h-10 w-auto object-contain" />
            </div>
            <p className="mt-6 max-w-sm text-base leading-relaxed" style={{ color: 'var(--ash)' }}>
              ERP financeiro e operacional para escritórios de arquitetura. Feito por arquitetos e financeiros desde 2019.
            </p>

            <div className="mt-10">
              <DimLabel className="block mb-4">/ Newsletter mensal</DimLabel>
              <form className="flex border-b" style={{ borderColor: 'var(--rule-strong)' }} onSubmit={(e) => e.preventDefault()}>
                <input
                  type="email"
                  placeholder="seu@email.com"
                  className="flex-1 bg-transparent outline-none py-3 text-sm"
                  style={{ color: 'var(--ink)' }}
                />
                <button className="font-mono text-[10px] uppercase tracking-wider2 px-3 hov-line">
                  Assinar →
                </button>
              </form>
            </div>
          </div>

          {[
            { t: 'Produto', items: ['Funcionalidades', 'Demo', 'Preços', 'Migração', 'Integrações', 'Mudanças'] },
            { t: 'Empresa', items: ['Quem somos', 'Manifesto', 'Carreiras', 'Imprensa', 'Parcerias'] },
            { t: 'Recursos', items: ['Blog', 'Estudos de caso', 'Templates', 'Guias de proposta', 'Central de ajuda', 'Status'] },
          ].map((col) => (
            <div key={col.t} className="col-span-6 md:col-span-2">
              <DimLabel className="block mb-5">/ {col.t}</DimLabel>
              <ul className="space-y-2.5">
                {col.items.map((it) => (
                  <li key={it}><a href="#" className="text-sm hov-line">{it}</a></li>
                ))}
              </ul>
            </div>
          ))}

          <div className="col-span-12 md:col-span-1">
            <DimLabel className="block mb-5">/ Social</DimLabel>
            <ul className="space-y-2.5">
              {['Instagram', 'LinkedIn', 'YouTube'].map((it) => (
                <li key={it}><a href="#" className="text-sm hov-line">{it}</a></li>
              ))}
            </ul>
          </div>
        </div>

        {/* Big logotype */}
        <div className="mt-24 mb-8 overflow-hidden">
          <div className="font-serif font-light tracking-tightest text-[clamp(5rem,22vw,18rem)] leading-[0.85] whitespace-nowrap" style={{ color: 'var(--ink)' }}>
            ArchPlan<span style={{ color: 'var(--sepia)' }}>.</span>
          </div>
        </div>

        <div className="pt-8 border-t flex flex-wrap justify-between items-center gap-4 font-mono text-[10px] uppercase tracking-wider2" style={{ borderColor: 'var(--rule)', color: 'var(--stone)' }}>
          <div className="flex flex-wrap gap-6">
            <span>© 2026 ArchPlan Tecnologia Ltda.</span>
            <span>Plataforma Desenvolvida pela EasyTech - Facilitando a Tecnologia</span>
            <span>CNPJ 38.420.111/0001-29</span>
            <span>São Paulo · Brasil</span>
          </div>
          <div className="flex gap-6">
            <a href="#" className="hov-line">Termos</a>
            <a href="#" className="hov-line">Privacidade</a>
            <a href="#" className="hov-line">LGPD</a>
            <a href="#" className="hov-line">Status</a>
          </div>
        </div>
      </div>
    </footer>
  );
};

window.Footer = Footer;
