// ============================================================
// CONTACT: Tapform + FAQ + Footer
// ============================================================

const QUESTIONS = [
  {
    key: 'objetivo',
    label: '01',
    q: 'O que você precisa hoje?',
    options: [
      'Gerar mais clientes (tráfego)',
      'Organizar atendimento (CRM)',
      'Automatizar processos repetitivos',
      'Criar / refazer site',
      'Tudo isso junto',
      'Ainda não sei direito',
    ]
  },
  {
    key: 'porte',
    label: '02',
    q: 'Quantos clientes novos você quer fechar por mês?',
    options: [
      '1 a 5',
      '5 a 15',
      '15 a 30',
      '30 ou mais',
    ]
  },
  {
    key: 'faturamento',
    label: '03',
    q: 'Quanto fatura por mês hoje?',
    options: [
      'Até R$ 10.000',
      'R$ 10.000 – R$ 30.000',
      'R$ 30.000 – R$ 100.000',
      'R$ 100.000+',
      'Prefiro não dizer agora',
    ]
  },
  {
    key: 'canal',
    label: '04',
    q: 'Como prefere a primeira conversa?',
    options: [
      'WhatsApp',
      'Call no Google Meet',
      'E-mail',
    ]
  },
];

function Tapform() {
  const [step, setStep] = React.useState(0);
  const [answers, setAnswers] = React.useState({});
  const [contact, setContact] = React.useState({ nome: '', whatsapp: '' });
  const [done, setDone] = React.useState(false);
  const totalSteps = QUESTIONS.length + 1; // +1 for contact

  const isFinal = step === QUESTIONS.length;
  const current = QUESTIONS[step];

  function pick(opt) {
    setAnswers(prev => ({ ...prev, [current.key]: opt }));
    setTimeout(() => setStep(s => s + 1), 220);
  }
  function back() { setStep(s => Math.max(0, s - 1)); }
  function submit() {
    if (!contact.nome || !contact.whatsapp) return;
    setDone(true);
  }

  if (done) {
    return (
      <div className="tapform-wrap">
        <div className="tapform-done">
          <div className="icon"><Icon.check /></div>
          <h3>Recebido, {contact.nome.split(' ')[0]}.</h3>
          <p>
            A gente vai te chamar no WhatsApp ainda hoje. Se preferir adiantar, é só abrir a conversa agora mesmo.
          </p>
          <div style={{ marginTop: 32 }}>
            <a className="btn btn-primary" href="https://wa.me/5516997106682" target="_blank" rel="noreferrer">
              <Icon.whatsapp /> Abrir conversa agora
            </a>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="tapform-wrap">
      <div className="tapform-progress">
        {Array.from({ length: totalSteps }).map((_, i) => (
          <span key={i} className={`bar ${i < step ? 'done' : i === step ? 'current' : ''}`} />
        ))}
      </div>

      <div className="tapform-inner">

        {!isFinal && (
          <>
            <div className="tapform-step-label">{current.label} · pergunta {step + 1} de {totalSteps}</div>
            <div className="tapform-q">{current.q}</div>
            <div className="tapform-options">
              {current.options.map((opt, i) => (
                <button
                  key={opt}
                  type="button"
                  className={`tapform-option ${answers[current.key] === opt ? 'selected' : ''}`}
                  onClick={() => pick(opt)}
                >
                  <span className="key">{String.fromCharCode(65 + i)}</span>
                  <span>{opt}</span>
                </button>
              ))}
            </div>
          </>
        )}

        {isFinal && (
          <>
            <div className="tapform-step-label">05 · seus contatos · último passo</div>
            <div className="tapform-q">Beleza. Como te chamamos?</div>
            <div className="tapform-fields">
              <div className="tapform-field">
                <label>Nome</label>
                <input
                  type="text"
                  placeholder="seu nome"
                  value={contact.nome}
                  onChange={e => setContact({ ...contact, nome: e.target.value })}
                  autoFocus
                />
              </div>
              <div className="tapform-field">
                <label>WhatsApp</label>
                <input
                  type="tel"
                  placeholder="(16) 90000-0000"
                  value={contact.whatsapp}
                  onChange={e => setContact({ ...contact, whatsapp: e.target.value })}
                />
              </div>
              <div style={{ marginTop: 18 }}>
                <button className="btn btn-primary" type="button" onClick={submit}>
                  Enviar e ser chamado <Icon.arrow />
                </button>
              </div>
              <div style={{ fontFamily: 'var(--mono)', fontSize: 11, color: 'var(--ink-soft)', marginTop: 12, letterSpacing: '0.04em' }}>
                A gente responde em até 2h úteis. Sem spam, prometo.
              </div>
            </div>
          </>
        )}

        <div className="tapform-foot">
          <button className="tapform-back" onClick={back} disabled={step === 0}>
            ← voltar
          </button>
          <span style={{ fontFamily: 'var(--mono)', fontSize: 11, color: 'var(--ink-soft)', letterSpacing: '0.06em' }}>
            {step + 1} / {totalSteps}
          </span>
        </div>
      </div>
    </div>
  );
}

function CalendlyEmbed() {
  React.useEffect(() => {
    // load Calendly widget script once
    if (document.querySelector('script[data-calendly]')) return;
    const s = document.createElement('script');
    s.src = 'https://assets.calendly.com/assets/external/widget.js';
    s.async = true;
    s.setAttribute('data-calendly', 'true');
    document.body.appendChild(s);
  }, []);
  return (
    <div style={{
      background: 'var(--bg-card)',
      border: '1px solid var(--line-strong)',
      borderRadius: 'var(--radius-lg)',
      overflow: 'hidden',
      minHeight: 700
    }}>
      <div style={{
        padding: '20px 24px',
        borderBottom: '1px solid var(--line)',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
        background: 'var(--bg-elev)'
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <Icon.calendar />
          <span style={{ fontFamily: 'var(--mono)', fontSize: 12, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--ink-mute)' }}>
            agendamento direto
          </span>
        </div>
        <span style={{ fontFamily: 'var(--mono)', fontSize: 11, color: 'var(--sage)', display: 'inline-flex', alignItems: 'center', gap: 6 }}>
          <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--sage)' }}></span>
          horários ao vivo
        </span>
      </div>
      <div
        className="calendly-inline-widget"
        data-url="https://calendly.com/aptamarketingdigital/reuniao?hide_event_type_details=1&hide_gdpr_banner=1&primary_color=4D4B30"
        style={{ minWidth: '320px', height: '630px' }}
      />
    </div>
  );
}

function Contato() {
  const [mode, setMode] = React.useState('calendly'); // 'calendly' | 'form'

  return (
    <section className="section" id="contato" data-screen-label="09 Contato">
      <div className="container">
        <div className="reveal" style={{ maxWidth: 820 }}>
          <span className="eyebrow">09 · vamos conversar</span>
          <h2 className="h-section" style={{ marginTop: 18 }}>
            Agenda 30 minutos.<br />Sai com um <em>plano</em>.
          </h2>
          <p className="lead" style={{ marginTop: 22 }}>
            Diagnóstico gratuito por Google Meet. Sem proposta longa, sem cobrança escondida. Só pra entender se faz sentido a gente trabalhar junto.
          </p>

          <div style={{ display: 'flex', gap: 4, marginTop: 32, padding: 4, background: 'var(--bg-elev)', border: '1px solid var(--line)', borderRadius: 'var(--radius-pill)', width: 'fit-content' }}>
            <button
              type="button"
              onClick={() => setMode('calendly')}
              style={{
                padding: '10px 18px',
                borderRadius: 'var(--radius-pill)',
                fontSize: 13.5,
                fontWeight: 500,
                background: mode === 'calendly' ? 'var(--ink)' : 'transparent',
                color: mode === 'calendly' ? 'var(--bg)' : 'var(--ink-mute)',
                transition: 'all .2s ease'
              }}
            >
              📅 Escolher horário
            </button>
            <button
              type="button"
              onClick={() => setMode('form')}
              style={{
                padding: '10px 18px',
                borderRadius: 'var(--radius-pill)',
                fontSize: 13.5,
                fontWeight: 500,
                background: mode === 'form' ? 'var(--ink)' : 'transparent',
                color: mode === 'form' ? 'var(--bg)' : 'var(--ink-mute)',
                transition: 'all .2s ease'
              }}
            >
              💬 Responder 4 perguntas
            </button>
          </div>
        </div>

        <div style={{
          display: 'grid',
          gridTemplateColumns: mode === 'calendly' ? '1.4fr 1fr' : '1fr 1.4fr',
          gap: 32,
          marginTop: 48,
          alignItems: 'start'
        }} className="reveal contato-grid">

          {mode === 'calendly' ? (
            <>
              <CalendlyEmbed />
              <ContatoSideInfo />
            </>
          ) : (
            <>
              <ContatoSideInfo compact />
              <Tapform />
            </>
          )}

        </div>
      </div>
    </section>
  );
}

function ContatoSideInfo({ compact }) {
  return (
    <div style={{
      background: 'var(--dark)',
      color: 'var(--dark-text)',
      borderRadius: 'var(--radius-lg)',
      padding: '40px 32px',
      display: 'flex',
      flexDirection: 'column',
      gap: 28,
      position: 'sticky',
      top: 100
    }}>
      <div>
        <span className="eyebrow dark">contato direto</span>
        <h3 style={{
          fontFamily: 'var(--serif)',
          fontSize: 28,
          letterSpacing: '-0.018em',
          lineHeight: 1.1,
          marginTop: 12,
          color: 'var(--dark-text)'
        }}>
          Prefere chamar no <em style={{ color: 'var(--gold)', fontStyle: 'italic' }}>WhatsApp</em>?
        </h3>
      </div>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
        <a href="https://wa.me/5516997106682" target="_blank" rel="noreferrer"
          style={{
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'space-between',
            padding: '18px 20px',
            background: 'rgba(255,255,255,0.04)',
            border: '1px solid var(--dark-line)',
            borderRadius: 'var(--radius)',
            transition: 'background .15s ease'
          }}
          onMouseEnter={e => e.currentTarget.style.background = 'rgba(255,255,255,0.08)'}
          onMouseLeave={e => e.currentTarget.style.background = 'rgba(255,255,255,0.04)'}>
          <div>
            <div style={{ fontFamily: 'var(--mono)', fontSize: 10.5, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--dark-mute)' }}>
              WhatsApp Apta
            </div>
            <div style={{ fontFamily: 'var(--serif)', fontSize: 22, marginTop: 4, letterSpacing: '-0.01em' }}>
              Abrir conversa agora
            </div>
          </div>
          <Icon.whatsapp />
        </a>
      </div>

      {!compact && (
        <>
          <div style={{ height: 1, background: 'var(--dark-line)' }} />
          <div>
            <div style={{ fontFamily: 'var(--mono)', fontSize: 10.5, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--dark-mute)', marginBottom: 8 }}>
              E-mail
            </div>
            <a href="mailto:contato@aptamarketingdigital.com.br" style={{ fontSize: 14.5, color: 'var(--dark-text)', wordBreak: 'break-all' }}>
              contato@aptamarketingdigital.com.br
            </a>
          </div>
          <div>
            <div style={{ fontFamily: 'var(--mono)', fontSize: 10.5, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--dark-mute)', marginBottom: 8 }}>
              Horário · Ribeirão Preto / SP
            </div>
            <div style={{ fontSize: 14.5 }}>Seg – Sex · 9h às 19h</div>
          </div>
        </>
      )}

      <div style={{
        marginTop: 'auto',
        paddingTop: 20,
        borderTop: '1px solid var(--dark-line)',
        fontFamily: 'var(--mono)',
        fontSize: 11,
        letterSpacing: '0.04em',
        color: 'var(--dark-mute)',
        lineHeight: 1.6
      }}>
        <span style={{ color: 'var(--gold)' }}>// </span>
        respondemos no mesmo dia útil.<br />
        <span style={{ color: 'var(--gold)' }}>// </span>
        sem chatbot, fala com pessoa.
      </div>
    </div>
  );
}

// ============================================================
// FAQ
// ============================================================

const FAQS = [
  {
    q: 'A Apta atende fora de Ribeirão Preto?',
    a: 'Sim. Hoje atendemos clientes em Franca, Limeira, Araras, Uberaba, São Paulo capital e outras cidades. Tudo é feito remotamente — call no Google Meet pra estratégia, WhatsApp pra operação do dia a dia.'
  },
  {
    q: 'Vocês têm contrato de fidelidade?',
    a: 'Não. A gente trabalha com cobrança mensal recorrente, com nota fiscal emitida pela Apta. Se em algum mês não fizer mais sentido, basta avisar com 30 dias. Sem multa, sem letra miúda.'
  },
  {
    q: 'O que diferencia a Apta de outras agências?',
    a: 'Três coisas: (1) somos Google Partner e parceiros oficiais Kommo CRM, então temos acesso a recursos que freelancers não têm (incluindo cupom de R$1.200 em mídia pra novos anunciantes); (2) somos especialistas em implantação de IA — configuramos automações e atendimento inteligente que respondem 24/7, reduzindo custo e aumentando velocidade; (3) você fala diretamente com o sócio, não com gerente de conta intermediário.'
  },
  {
    q: 'A automação com IA substitui meu vendedor?',
    a: 'Não. Ela substitui o tempo que o seu vendedor perde respondendo "qual o preço?" 80 vezes por dia. A IA qualifica, organiza no CRM e só passa pro humano o lead que tá pronto pra comprar. O vendedor fecha mais vendendo menos.'
  },
  {
    q: 'Quanto tempo leva pra começar a ver resultado?',
    a: 'Setup técnico: 7 a 14 dias. As primeiras impressões e cliques do Google Ads começam na primeira semana — mas é importante deixar a campanha rodar 15 a 30 dias antes de tirar conclusões: o algoritmo precisa aprender, a página de destino precisa validar qualidade e a gente precisa ajustar palavras-chave, públicos e criativos com base nos primeiros dados. Otimização real (custo por lead caindo, conversão subindo) acontece a partir do segundo mês. Marketing digital não é mágica — é experimentação rápida e leitura de dados.'
  },
  {
    q: 'Vocês fazem site também?',
    a: 'Sim — Hostinger + Divi/Elementor (WordPress) ou Wix, dependendo do caso. Pra projetos novos a gente já vem entregando em stack mais moderna, com IA configurada desde o início. Conversa com a gente que a gente vê o melhor pra você.'
  },
  {
    q: 'Vocês trabalham com qualquer nicho?',
    a: 'A gente tem mais experiência com revendas de gás, distribuidoras, prestadores de serviço (advocacia, saúde, jardinagem), oficinas e e-commerce pequeno-médio. Mas o que a gente entrega — tráfego + CRM + automação — serve pra qualquer negócio que recebe lead pelo telefone, formulário ou WhatsApp.'
  },
];

function FAQ() {
  const [open, setOpen] = React.useState(0);
  return (
    <section className="section" id="faq" data-screen-label="10 FAQ">
      <div className="container">
        <div className="reveal" style={{ maxWidth: 720 }}>
          <span className="eyebrow">10 · perguntas frequentes</span>
          <h2 className="h-section" style={{ marginTop: 18 }}>
            Tá em <em>dúvida</em>?<br />Provavelmente a gente já respondeu.
          </h2>
        </div>

        <div className="faq-list reveal">
          {FAQS.map((f, i) => (
            <div className={`faq-item ${open === i ? 'open' : ''}`} key={i}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span>{f.q}</span>
                <span className="plus">+</span>
              </button>
              <div className="faq-a"><p>{f.a}</p></div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================================
// FOOTER
// ============================================================

function Footer() {
  return (
    <footer className="footer" data-screen-label="11 Footer">
      <div className="container">

        <div className="footer-grid">

          <div className="footer-brand">
            <img src={R('assets/logo-apta-full.png')} alt="Apta marketing digital" loading="lazy" decoding="async"
              style={{ height: 88, marginBottom: 24, filter: 'brightness(0) invert(1) sepia(0.1)', opacity: 0.95 }} />
            <p>
              Marketing digital + automação com IA pra pequenos negócios crescerem sem virar caos. Ribeirão Preto · SP.
            </p>
            <div style={{ marginTop: 24, display: 'flex', gap: 8, flexWrap: 'wrap' }}>
              <span className="chip dark"><span className="dot" style={{ background: 'var(--gold)' }}></span>Google Partner</span>
              <span className="chip dark"><span className="dot" style={{ background: 'var(--lavender)' }}></span>Kommo Partner</span>
            </div>
          </div>

          <div>
            <h4>Serviços</h4>
            <ul>
              <li><a href="#servicos">Google Ads</a></li>
              <li><a href="#servicos">Meta Ads</a></li>
              <li><a href="#servicos">CRM Kommo</a></li>
              <li><a href="#stack">Automação n8n + IA</a></li>
              <li><a href="#servicos">Sites e landing pages</a></li>
            </ul>
          </div>

          <div>
            <h4>Empresa</h4>
            <ul>
              <li><a href="cases.html">Cases</a></li>
              <li><a href="blog.html">Blog</a></li>
              <li><a href="#processo">Como trabalhamos</a></li>
              <li><a href="#faq">FAQ</a></li>
              <li><a href="#contato">Contato</a></li>
            </ul>
          </div>

          <div>
            <h4>Contato</h4>
            <ul>
              <li><a href="https://wa.me/5516997106682" target="_blank" rel="noreferrer">Falar no WhatsApp</a></li>
              <li><a href="mailto:contato@aptamarketingdigital.com.br">contato@aptamarketingdigital.com.br</a></li>
              <li style={{ color: 'var(--dark-mute)' }}>Ribeirão Preto · SP</li>
              <li style={{ color: 'var(--dark-mute)' }}>Seg–Sex · 9h às 19h</li>
            </ul>
          </div>

        </div>

        <div className="footer-bottom">
          <span>© 2026 Apta Marketing Digital · Ribeirão Preto · SP</span>
          <span>built with <span style={{ color: 'var(--gold)' }}>★</span> in Ribeirão Preto</span>
        </div>

      </div>
    </footer>
  );
}

Object.assign(window, { Tapform, Contato, FAQ, Footer });