// ───────────────────────────────────────────────
// FAQ + Final CTA + Footer
// ───────────────────────────────────────────────

const FAQS = [
{
  q: 'Em quanto tempo começo a ver resultado?',
  a: 'As primeiras campanhas entram no ar após o onboarding, geralmente em 7 a 14 dias. Os primeiros leads chegam nas primeiras semanas. Custo por lead estabilizado e operação em ritmo consistente leva de 60 a 90 dias, isso é padrão no tráfego imobiliário, independente de quem opera.'
},
{
  q: 'Funciona para imobiliária pequena, com poucos corretores?',
  a: 'Sim, desde que haja estrutura para atender os leads com agilidade. Pesquisas de mercado mostram que leads atendidos em até 5 minutos convertem até 400% mais do que os atendidos após uma hora. O tamanho da equipe importa menos do que a velocidade e qualidade do atendimento.'
},
{
  q: 'Qual o investimento mínimo em mídia?',
  a: 'R$ 1.500 por mês para iniciar uma operação com aprendizado real. Para médio e alto padrão, recomendamos a partir de R$ 3.000 por mês, valor que permite testar mais segmentações e escalar o que funciona.'
},
{
  q: 'Quantos imóveis vocês divulgam em paralelo?',
  a: 'Trabalhamos com os imóveis prioritários da sua operação, geralmente entre 8 e 12 em paralelo, com rotação conforme disponibilidade e desempenho. A priorização faz parte do onboarding.'
},
{
  q: 'Como funciona o acompanhamento?',
  a: 'Relatório semanal via WhatsApp com análise por imóvel e por campanha. Reunião mensal de revisão estratégica. Canal direto com Paulo Pádua, sem intermediário, sem fila de atendimento.'
},
{
  q: 'Já tenho tráfego rodando com outra agência. Faz sentido conversar?',
  a: 'Fazemos o diagnóstico gratuito da operação atual antes de qualquer proposta. Se o que você tem está funcionando bem, vamos dizer isso. Se houver oportunidade real de melhoria, mostramos com dados.'
},
{
  q: 'Quais formas de pagamento?',
  a: 'A definir conforme proposta personalizada. O investimento em mídia é cobrado diretamente pelas plataformas (Meta / Google) no cartão, boleto ou pix da imobiliária. A gestão é faturada separadamente.'
}];


const FAQ = () => {
  const [open, setOpen] = React.useState(0);
  return (
    <section id="faq" className="section pp-faq">
      <div className="wrap">
        <div className="pp-faq-layout">
          <div className="pp-faq-head reveal">
            <div className="eyebrow"><span className="dot" /> Perguntas frequentes</div>
            <h2 className="section-title">
              O que perguntam<br />
              <em className="serif-italic">antes de fechar.</em>
            </h2>
            <p className="lead pp-faq-lead">
              Outras dúvidas? Fala com o Paulo direto no WhatsApp.
            </p>
            <a href="https://wa.me/5519989234242" target="_blank" rel="noopener" className="pp-faq-wa">
              <WhatsIcon />
              (19) 98923-4242
            </a>
          </div>

          <div className="pp-faq-list reveal">
            {FAQS.map((f, i) =>
            <article
              key={i}
              className={`pp-faq-item ${open === i ? 'is-open' : ''}`}>
              
                <button
                className="pp-faq-q"
                onClick={() => setOpen(open === i ? -1 : i)}
                aria-expanded={open === i}>
                
                  <span>{f.q}</span>
                  <span className="pp-faq-icon" aria-hidden="true">
                    <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
                      <path d="M3 7 H11 M7 3 V11" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" className="pp-faq-icon-v" />
                    </svg>
                  </span>
                </button>
                <div className="pp-faq-a-wrap">
                  <p className="pp-faq-a">{f.a}</p>
                </div>
              </article>
            )}
          </div>
        </div>
      </div>
    </section>);

};

const WhatsIcon = () =>
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
    <path d="M20.5 3.5 A12 12 0 0 0 3.5 17.5 L2 22 L6.5 20.5 A12 12 0 0 0 20.5 3.5 Z M12 20 A8 8 0 0 1 8 19 L5.5 19.5 L6 17 A8 8 0 1 1 12 20 Z M15.5 14 L14 13 C 13.5 13.5 13 14 12 13.5 C 11 13 9.5 11 9 10 C 9 9.5 9.5 9 10 8.5 L9 7 L8 7 C 7.5 7.5 7 8 7 9 C 7 11 9 14 11.5 15 C 12.5 15.5 14 16 15 15.5 C 16 15 16 14.5 16 14 L15.5 14 Z" />
  </svg>;


// Final CTA (Bloco 14)
const FinalCTA = ({ ctaVariant = 'A' }) => {
  const [submitted, setSubmitted] = React.useState(false);
  const onSubmit = (e) => {
    e.preventDefault();
    setSubmitted(true);
  };
  return (
    <section id="diagnostico" className="section pp-final-cta">
      <div className="wrap">
        <div className="pp-final-layout">
          <div className="pp-final-left reveal">
            <div className="eyebrow"><span className="dot" /> Próximo passo</div>
            <h2 className="display pp-final-title">
              Antes de qualquer proposta,<br />
              um <em>diagnóstico gratuito</em><br />
              da sua operação atual.
            </h2>

            <ul className="pp-final-list">
              <li><CheckIcon /> Análise do seu site e dos canais que você já usa</li>
              <li><CheckIcon /> Potencial de tráfego pago para o seu perfil de imóvel e região</li>
              <li><CheckIcon /> O que seria possível construir, com números reais</li>
              <li><CheckIcon /> Sem custo. Sem compromisso. Sem script de vendas.</li>
            </ul>

            <p className="pp-final-promise">
              Se fizer sentido avançar, apresentamos proposta personalizada.
              Se não fizer, você sai da conversa com uma visão mais clara da sua
              operação de aquisição.
            </p>

            <div className="pp-final-contact">
              <div className="pp-avatar pp-final-avatar">PP</div>
              <div>
                <div className="pp-final-contact-name">Fala direto com Paulo Pádua</div>
                <div className="pp-final-contact-sub">
                  <a href="https://wa.me/5519989234242">WhatsApp (19) 98923-4242</a>
                  <span className="pp-final-sep">·</span>
                  <a href="mailto:paulo@paduapro.com.br">paulo@paduapro.com.br</a>
                </div>
              </div>
            </div>
          </div>

          <div className="pp-final-right reveal" style={{ transitionDelay: '120ms' }}>
            <div className="card card-hi pp-final-form-card">
              {!submitted ?
              <>
                  <div className="pp-form-h">
                    <div className="tag tag-accent">
                      <SparkIcon /> Diagnóstico gratuito
                    </div>
                    <div className="pp-form-h-time">Resposta em até 48h</div>
                  </div>
                  <h3 className="pp-form-title">Conte um pouco sobre a sua operação.</h3>

                  <form className="pp-form" onSubmit={onSubmit}>
                    <Field id="nome" label="Seu nome" placeholder="Como você se chama" required />
                    <Field id="imob" label="Imobiliária" placeholder="Nome da empresa" required />
                    <div className="pp-form-row">
                      <Field id="whats" label="WhatsApp" placeholder="(00) 00000-0000" required />
                      <Field id="cidade" label="Cidade" placeholder="Onde você opera" required />
                    </div>

                    <div className="pp-field">
                      <label className="pp-field-label">Faixa de imóvel principal</label>
                      <div className="pp-radio-group">
                        {['Popular', 'Médio-alto', 'Alto padrão', 'Misto'].map((v) =>
                      <label key={v} className="pp-radio">
                            <input type="radio" name="faixa" value={v} defaultChecked={v === 'Médio-alto'} />
                            <span>{v}</span>
                          </label>
                      )}
                      </div>
                    </div>

                    <div className="pp-field">
                      <label className="pp-field-label">Já investe em tráfego pago?</label>
                      <div className="pp-radio-group">
                        {['Sim, com agência', 'Sim, eu mesmo', 'Já tentei e parei', 'Nunca'].map((v) =>
                      <label key={v} className="pp-radio">
                            <input type="radio" name="trafego" value={v} defaultChecked={v === 'Já tentei e parei'} />
                            <span>{v}</span>
                          </label>
                      )}
                      </div>
                    </div>

                    <label className="pp-check">
                      <input type="checkbox" defaultChecked />
                      <span>
                        Concordo com a <a href="#">Política de Privacidade</a> e com o tratamento
                        dos meus dados conforme a LGPD.
                      </span>
                    </label>

                    <button type="submit" className="btn btn-primary btn-lg pp-form-submit">
                      {ctaVariant === 'B' ? 'Quero construir meu canal próprio' : 'Quero a análise gratuita'}
                      <ArrowIcon />
                    </button>

                    <div className="pp-form-foot">
                      <span><span className="pp-dot-live" /> Diagnóstico em até 48h</span>
                      <span>·</span>
                      <span>Sem custo, sem compromisso</span>
                    </div>
                  </form>
                </> :

              <div className="pp-form-success">
                  <div className="pp-form-success-mark">
                    <CheckIcon />
                  </div>
                  <h3>Recebido. Paulo te chama em até 48h.</h3>
                  <p>
                    No próximo passo, vamos olhar juntos a sua operação atual —
                    site, canais, perfil de imóvel — e te devolver o que pode ser
                    melhorado, com ou sem proposta da PáduaPRO.
                  </p>
                  <button className="btn btn-ghost" onClick={() => setSubmitted(false)}>
                    Enviar outro diagnóstico
                  </button>
                </div>
              }
            </div>

            {/* PS card */}
            <div className="pp-ps reveal" style={{ transitionDelay: '200ms' }}>
              <div className="pp-ps-mark">PS.</div>
              <p>
                O diagnóstico é gratuito e a conversa é sem pressão. O que não é ilimitado é a disponibilidade por região, a PáduaPRO não atende concorrentes diretos na mesma cidade. 

                <strong>A exclusividade vai para quem fechar primeiro.</strong>
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>);

};

const Field = ({ id, label, placeholder, required, type = 'text' }) =>
<div className="pp-field">
    <label htmlFor={id} className="pp-field-label">
      {label} {required && <span className="pp-req">*</span>}
    </label>
    <input
    id={id}
    name={id}
    type={type}
    className="pp-input"
    placeholder={placeholder}
    required={required} />
  
  </div>;


const Footer = () =>
<footer className="pp-footer">
    <div className="wrap pp-footer-inner">
      <div className="pp-footer-brand">
        <Logo />
        <p className="pp-footer-tag">
          Operação de tráfego pago, exclusiva para imobiliárias.
          Campinas + interior paulista.
        </p>
      </div>

      <div className="pp-footer-cols">
        <div className="pp-footer-col">
          <div className="pp-footer-col-h">Operação</div>
          <a href="#metodo">Método PRO</a>
          <a href="#cases">Cases</a>
          <a href="#oferta">Oferta</a>
          <a href="#faq">FAQ</a>
        </div>
        <div className="pp-footer-col">
          <div className="pp-footer-col-h">Contato</div>
          <a href="https://wa.me/5519989234242">WhatsApp</a>
          <a href="mailto:paulo@paduapro.com.br">paulo@paduapro.com.br</a>
          <span>(19) 98923-4242</span>
        </div>
        <div className="pp-footer-col">
          <div className="pp-footer-col-h">Legal</div>
          <a href="#">Política de privacidade</a>
          <a href="#">Termos de uso</a>
          <a href="#">LGPD</a>
        </div>
      </div>
    </div>

    <div className="wrap pp-footer-bot">
      <div>© 2026 PáduaPRO · Tráfego pago para imobiliárias</div>
      <div className="pp-footer-loc">
        <span className="pp-dot-live" /> Operando em Campinas SP
      </div>
    </div>
  </footer>;


Object.assign(window, { FAQ, FinalCTA, Footer, FAQS });