/* global React */

function Contact() {
  const PHONE = '11 96710-6583';
  const PHONE_DIGITS = '5511967106583';

  return (
    <section className="cta-section" id="contato">
      <div className="bg-text">monte</div>
      <div className="container">
        <div className="inner">
          <div>
            <span className="eyebrow reveal" style={{ background: 'rgba(255,255,255,0.06)', borderColor: 'rgba(255,255,255,0.1)', color: '#aaa' }}>
              <span className="dot"></span> 06 · Configure seu projeto
            </span>
            <h2 className="reveal delay-1">
              Monte sua ideia.<br/>
              Veja preço e prazo <span className="accent">em tempo real</span>.
            </h2>
            <p className="lede reveal delay-2">
              Esqueça formulário longo. Em 4 etapas rápidas você seleciona
              tipo, recursos e estilo do projeto, vê uma estimativa
              instantânea e a gente responde em até 48 horas.
            </p>

            <div className="contact-row reveal delay-3">
              <a href={`tel:+${PHONE_DIGITS}`} className="contact-item">
                <span className="lab">// telefone</span>
                <span className="val">{PHONE}</span>
              </a>
              <a
                href={`https://wa.me/${PHONE_DIGITS}?text=${encodeURIComponent('Olá! Vim do site da Sistemas Club, gostaria de um orçamento.')}`}
                target="_blank" rel="noreferrer"
                className="contact-item"
              >
                <span className="lab">// whatsapp</span>
                <span className="val">{PHONE} →</span>
              </a>
              <div className="contact-item">
                <span className="lab">// resposta</span>
                <span className="val" style={{ color: 'var(--accent-2)' }}>48h úteis · seg–sex</span>
              </div>
            </div>

            <div className="contact-tip mono reveal delay-3">
              <span>// dica:</span> não tem certeza ainda? Pule etapas — a estimativa
              vai te ajudar a refinar a ideia.
            </div>
          </div>

          <div className="reveal delay-2">
            <Configurator />
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-inner">
          <Brand size={28} />
          <div>© 2026 · Feito em São Paulo</div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Contact, Footer });