function CtaSection() {
  return (
    <section style={{ padding: '40px 0 60px' }}>
      <div className="container">
        <div className="panel bracketed reveal" style={{
          padding: '50px 48px',
          display: 'grid',
          gridTemplateColumns: '1.1fr 1fr',
          gap: 50,
          alignItems: 'center'
        }} data-cta>

          <div>
            <h2 className="display" style={{
              fontSize: 'clamp(28px, 3.2vw, 44px)',
              margin: '0 0 16px',
              lineHeight: 1.1
            }}>
              PRONTO PARA COLOCAR<br/>
              SEU NEGÓCIO <span className="gradient-text">NO MAPA?</span>
            </h2>
            <p style={{ color: 'var(--text-dim)', maxWidth: 420, margin: '0 0 26px', fontSize: 14 }}>
              Converse com a CodeKid sobre um site para apresentar sua loja, seus serviços e seus contatos.
            </p>
            <a href="#contato" className="btn btn-primary"
               onClick={e => { e.preventDefault(); window.scrollToSection ? window.scrollToSection('contato') : (location.hash = '#contato'); }}>
              Começar Agora
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none">
                <path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" />
              </svg>
            </a>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 18 }}>
            {[
              { title: 'SEM CARÊNCIA', desc: 'Comece agora sem burocracia.', color: 'var(--cyan)', icon: <path d="M12 2 L20 6 L20 12 Q20 19 12 22 Q4 19 4 12 L4 6 Z" stroke="currentColor" strokeWidth="1.6" fill="none"/> },
              { title: 'SITE EM HTTPS', desc: 'O formulário não armazena sua mensagem neste site; abre seu aplicativo de contato.', color: 'var(--purple)', icon: <><rect x="5" y="11" width="14" height="10" rx="2" stroke="currentColor" strokeWidth="1.6" fill="none"/><path d="M8 11 V8 a4 4 0 0 1 8 0 V11" stroke="currentColor" strokeWidth="1.6" fill="none"/></> },
              { title: 'SUPORTE HUMANO', desc: 'Fale com a equipe sobre seu site.', color: 'var(--green)', icon: <><circle cx="12" cy="12" r="9" stroke="currentColor" strokeWidth="1.6" fill="none"/><path d="M8 13 Q12 16 16 13" stroke="currentColor" strokeWidth="1.6" fill="none"/><circle cx="9" cy="10" r="1" fill="currentColor"/><circle cx="15" cy="10" r="1" fill="currentColor"/></> }
            ].map((c, i) => (
              <div key={i} style={{
                padding: '14px 8px'
              }}>
                <div style={{
                  width: 44, height: 44, marginBottom: 10,
                  color: c.color,
                  filter: `drop-shadow(0 0 10px ${c.color})`
                }}>
                  <svg viewBox="0 0 24 24" fill="none" style={{ width: '100%', height: '100%' }}>{c.icon}</svg>
                </div>
                <div style={{
                  fontFamily: 'Orbitron', fontSize: 12, fontWeight: 700, letterSpacing: '0.08em', color: '#fff', marginBottom: 6
                }}>{c.title}</div>
                <div style={{ fontSize: 11, color: 'var(--text-dim)', lineHeight: 1.5 }}>{c.desc}</div>
              </div>
            ))}
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 880px) {
          [data-cta] { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

function Footer() {
  const cfg = window.CODEKID_CONTATO || {};
  const waLink = cfg.whatsapp ? 'https://wa.me/' + String(cfg.whatsapp).replace(/\D/g, '') : null;
  const linkStyle = { color: 'var(--text-dim)', fontSize: 13, textDecoration: 'none' };
  const hover = on => e => e.currentTarget.style.color = on ? '#fff' : 'var(--text-dim)';
  return (
    <footer style={{
      padding: '32px 0 48px',
      borderTop: '1px solid rgba(124,58,237,0.18)',
      marginTop: 20
    }}>
      <div className="container" style={{
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
        gap: 20,
        flexWrap: 'wrap'
      }}>
        <CodeKidLogo size={24}/>
        <nav style={{ display: 'flex', gap: 28, flexWrap: 'wrap' }}>
          {[['Soluções','solucoes'], ['Recursos','recursos'], ['Preços','precos'], ['Contato','contato']].map(([l, id]) => (
            <a key={id} href={'#' + id}
               onClick={e => { e.preventDefault(); window.scrollToSection ? window.scrollToSection(id) : (location.hash = '#' + id); }}
               style={linkStyle}
               onMouseEnter={hover(true)}
               onMouseLeave={hover(false)}>{l}</a>
          ))}
        </nav>
        <FooterSocials/>
      </div>

      {/* linha de identidade + jurídico (LGPD/confiança) */}
      <div className="container" style={{ marginTop: 26, paddingTop: 20, borderTop: '1px solid rgba(255,255,255,0.06)' }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 14, flexWrap: 'wrap' }}>
          <div style={{ fontSize: 12.5, color: 'var(--text-faint)', lineHeight: 1.7 }}>
            © 2026 CodeKid
            {waLink && <>{' · '}WhatsApp{' '}<a href={waLink} target="_blank" rel="noopener" style={{ color: 'var(--text-dim)', textDecoration: 'none' }} onMouseEnter={hover(true)} onMouseLeave={e => e.currentTarget.style.color = 'var(--text-dim)'}>Fale com a gente</a></>}
            {cfg.email && <>{' · '}<a href={'mailto:' + cfg.email} style={{ color: 'var(--text-dim)', textDecoration: 'none' }} onMouseEnter={hover(true)} onMouseLeave={e => e.currentTarget.style.color = 'var(--text-dim)'}>{cfg.email}</a></>}
          </div>
          <div style={{ display: 'flex', gap: 20, flexWrap: 'wrap' }}>
            <a href="/privacidade.html" style={linkStyle} onMouseEnter={hover(true)} onMouseLeave={hover(false)}>Política de Privacidade</a>
            <a href="/termos.html" style={linkStyle} onMouseEnter={hover(true)} onMouseLeave={hover(false)}>Termos de Uso</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

function FooterSocials() {
  const cfg = window.CODEKID_CONTATO || {};
  const socials = [
    { key: 'instagram', label: 'IG', bg: 'rgba(124,58,237,0.15)' },
    { key: 'youtube',   label: 'YT', bg: 'rgba(255,0,80,0.12)' },
    { key: 'linkedin',  label: 'In', bg: 'rgba(0,119,181,0.18)' },
    { key: 'tiktok',    label: 'TT', bg: 'rgba(0,229,255,0.12)' }
  ].filter(s => cfg[s.key]);

  if (!socials.length) return null;
  return (
    <div style={{ display: 'flex', gap: 8 }}>
      {socials.map(s => (
        <a key={s.key} href={cfg[s.key]} target="_blank" rel="noopener noreferrer" style={{
          width: 32, height: 32, borderRadius: 7, background: s.bg,
          border: '1px solid rgba(255,255,255,0.1)',
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
          fontSize: 10, fontWeight: 700, color: '#fff',
          fontFamily: 'JetBrains Mono, monospace', textDecoration: 'none'
        }}>{s.label}</a>
      ))}
    </div>
  );
}

window.CtaSection = CtaSection;
window.Footer = Footer;
window.FooterSocials = FooterSocials;