// Footer.jsx + final CTA
function FinalCta() {
  return (
    <section style={{ padding: '140px 0', position: 'relative', overflow: 'hidden', background: 'var(--black)' }}>
      <div className="orb orb-sig" style={{ width: 800, height: 800, top: -300, left: '50%', transform: 'translateX(-50%)', opacity: 0.55 }} />
      <div className="wrap" style={{ position: 'relative', zIndex: 2, textAlign: 'center' }}>
        <span className="q-eyebrow" style={{ justifyContent: 'center' }}>Último passo</span>
        <h2 style={{ fontSize: 'clamp(2.4rem, 7vw, 6rem)', marginTop: 28, marginBottom: 28, maxWidth: 1000, marginLeft: 'auto', marginRight: 'auto', letterSpacing: '-0.035em' }}>
          Sua empresa pode estar<br />
          pagando mais do que deve.<br />
          <span className="grad-text-sheen">Você só descobre testando.</span>
        </h2>
        <p className="q-sub q-sub-lg" style={{ maxWidth: 560, margin: '0 auto 44px' }}>
          Diagnóstico gratuito · Sem compromisso · Resposta em até 24h úteis
        </p>
        <button
          onClick={() => document.getElementById('diagnostico')?.scrollIntoView({ behavior: 'smooth' })}
          className="btn btn-primary btn-lg"
          style={{ padding: '22px 40px', fontSize: '1rem' }}>
          Fazer diagnóstico grátis agora <span className="arrow">→</span>
        </button>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer style={{ background: 'var(--bg2)', padding: '72px 0 32px', borderTop: '1px solid var(--border)' }}>
      <div className="wrap">
        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr 1fr', gap: 48, marginBottom: 64 }} className="foot-grid">
          <div>
            <div style={{
              display: 'flex', alignItems: 'baseline', gap: 8,
              fontFamily: 'var(--display-stack)',
              fontWeight: 900, textTransform: 'uppercase',
              letterSpacing: '0.08em', fontSize: '1.1rem',
              marginBottom: 24,
            }}>
              <span style={{ display: 'inline-block', width: 10, height: 10, background: 'var(--signal)', boxShadow: '0 0 12px var(--signal)' }} />
              BUSINESS<span style={{ color: 'var(--signal)' }}>CONTROL</span>
              <sup className="fallback-glyph" style={{ fontSize: '0.45em', opacity: 0.55 }}>®</sup>
            </div>
            <p style={{ color: 'var(--t2)', maxWidth: 340, fontSize: '0.95rem' }}>
              Contabilidade não é reação, é ação.<br />
              Há 15 anos ajudando empresários a pagar menos impostos, dentro da lei.
            </p>
          </div>

          <div>
            <div className="q-micro" style={{ marginBottom: 20 }}>Serviços</div>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gap: 10 }}>
              {['Redução Tributária', 'Recuperação de Impostos', 'Impugnação Fiscal', 'Planejamento', 'Auditoria Preventiva'].map(s => (
                <li key={s}><a href="#servicos" style={{ color: 'var(--t2)', fontSize: '0.9rem' }} className="fl">{s}</a></li>
              ))}
            </ul>
          </div>

          <div>
            <div className="q-micro" style={{ marginBottom: 20 }}>Institucional</div>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gap: 10 }}>
              {['Case Real', 'Dores', 'Por que nós', 'Diagnóstico', 'Contato'].map(s => (
                <li key={s}><a href="#" style={{ color: 'var(--t2)', fontSize: '0.9rem' }} className="fl">{s}</a></li>
              ))}
            </ul>
          </div>

          <div>
            <div className="q-micro" style={{ marginBottom: 20 }}>Contato</div>
            <div style={{ display: 'grid', gap: 14 }}>
              <div>
                <div className="q-micro" style={{ color: 'var(--t3)' }}>WhatsApp</div>
                <a
                  href="https://api.whatsapp.com/send/?phone=5598981026418&text&type=phone_number&app_absent=0"
                  target="_blank" rel="noopener noreferrer"
                  style={{ fontFamily: 'var(--display-stack)', fontWeight: 700, color: 'var(--signal)', fontSize: '1rem', letterSpacing: '0.02em' }}
                >(98) 98102-6418</a>
              </div>
              <div>
                <div className="q-micro" style={{ color: 'var(--t3)' }}>E-mail</div>
                <a href="mailto:contato@businesscontrol.com.br" style={{ color: 'var(--white)', fontSize: '0.92rem' }}>contato@businesscontrol.com.br</a>
              </div>
              <div>
                <div className="q-micro" style={{ color: 'var(--t3)' }}>Endereço</div>
                <a
                  href="https://www.google.com/maps/place/Pen%C3%ADnsula+Mall+%26+Offices/data=!4m2!3m1!1s0x0:0x8e7a0e2c93949a9a?sa=X&ved=1t:2428&ictx=111"
                  target="_blank" rel="noopener noreferrer"
                  style={{ color: 'var(--t2)', fontSize: '0.9rem' }}
                >Península Mall & Offices</a>
              </div>
            </div>
          </div>
        </div>

        {/* ── MAP ── */}
        <div style={{ marginBottom: 40 }}>
          <div style={{
            display: 'flex', alignItems: 'center', justifyContent: 'space-between',
            marginBottom: 16,
          }}>
            <div className="q-micro">Como chegar</div>
            <a
              href="https://www.google.com/maps/place/Pen%C3%ADnsula+Mall+%26+Offices/data=!4m2!3m1!1s0x0:0x8e7a0e2c93949a9a?sa=X&ved=1t:2428&ictx=111"
              target="_blank" rel="noopener noreferrer"
              className="fl"
              style={{ fontSize: '0.78rem', letterSpacing: '0.12em', fontFamily: 'var(--font-mono)', textTransform: 'uppercase' }}
            >Abrir no Google Maps →</a>
          </div>
          <div style={{ position: 'relative', overflow: 'hidden', borderRadius: 0, border: '1px solid var(--border)' }}>
            <iframe
              src="https://maps.google.com/maps?cid=10266533885161806490&output=embed&hl=pt-BR"
              width="100%"
              height="280"
              style={{ display: 'block', border: 0, filter: 'grayscale(1) invert(1) brightness(0.82) contrast(0.9) hue-rotate(180deg)' }}
              allowFullScreen=""
              loading="lazy"
              referrerPolicy="no-referrer-when-downgrade"
              title="Business Control — Localização"
            />
          </div>
        </div>

        <div style={{
          paddingTop: 28, borderTop: '1px solid var(--border)',
          display: 'flex', justifyContent: 'space-between', gap: 20, flexWrap: 'wrap',
          fontFamily: 'var(--font-mono)', fontSize: '0.72rem',
          letterSpacing: '0.14em', textTransform: 'uppercase',
          color: 'var(--t3)',
        }}>
          <div>© 2024 Business Control. Todos os direitos reservados.</div>
          <div style={{ display: 'flex', gap: 24 }}>
            <span>CRC: XXXXX</span>
            <span>CNPJ: XX.XXX.XXX/0001-XX</span>
          </div>
        </div>
      </div>
      <style>{`
        .fl { transition: color .2s; }
        .fl:hover { color: var(--signal); }
        @media (max-width: 900px) {
          .foot-grid { grid-template-columns: 1fr 1fr !important; }
        }
        @media (max-width: 480px) {
          .foot-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </footer>
  );
}

window.FinalCta = FinalCta;
window.Footer = Footer;