/* Variation B — Contato page */

function VbContato({ go }) {
  const [sel, setSel] = React.useState('projeto');
  const [sent, setSent] = React.useState(false);
  const [f, setF] = React.useState({ nome: '', empresa: '', email: '', tel: '', faturamento: '', desafio: '' });
  const upd = (k) => (e) => setF(prev => ({ ...prev, [k]: e.target.value }));
  const servicoLabel = sel === 'projeto' ? 'Projeto de marketing personalizado'
                      : sel === 'mentoria' ? 'Mentoria individual'
                      : 'Consultoria individual';
  const onSubmit = (e) => {
    e.preventDefault();
    const lines = [
      'Olá! Acabei de preencher o formulário no site da AS Marketing Digital e gostaria de mais informações.',
      '',
      '— Serviço de interesse: ' + servicoLabel,
      '— Nome: ' + (f.nome || '—'),
      '— Empresa: ' + (f.empresa || '—'),
      '— E-mail: ' + (f.email || '—'),
      '— WhatsApp: ' + (f.tel || '—'),
      '— Faturamento: ' + (f.faturamento || '—'),
      '',
      'Desafio atual:',
      (f.desafio || '—'),
      '',
      'Fico no aguardo para agendarmos uma conversa!',
    ];
    const url = VbWa(lines.join('\n'));
    window.open(url, '_blank', 'noopener');
    setSent(true);
  };

  return (
    <main>
      <VbPageHeader
        section="— 03 / Contato"
        eyebrow="Vamos conversar"
        title='Conte sobre o seu<br/><em>próximo ciclo</em>.'
        lede="Preencha o formulário ou fale direto pelo WhatsApp. Respondemos em até 24 horas úteis com uma proposta de conversa inicial."
      />

      <section style={{ paddingBottom: 80 }}>
        <div className="vb-wrap">
          <div style={{ display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 40, alignItems: 'start' }} className="vb-contato-grid">

            {/* FORM */}
            <div style={{
              background: 'var(--cream)',
              border: '1px solid rgba(0,0,0,0.08)',
              borderRadius: 8, padding: 48,
            }}>
              <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 28, letterSpacing: '-0.02em', margin: '0 0 8px' }}>
                Sobre o seu projeto
              </h3>
              <p style={{ color: 'rgba(0,0,0,0.65)', margin: '0 0 32px' }}>
                Quanto mais detalhe, mais útil será nosso primeiro retorno.
              </p>

              <div className="vb-field" style={{ marginBottom: 10 }}>
                <label>Qual serviço te interessa?</label>
              </div>
              <div className="vb-pick">
                {[
                  ['projeto', 'Projeto'],
                  ['mentoria', 'Mentoria'],
                  ['consultoria', 'Consultoria'],
                ].map(([id, label]) => (
                  <button type="button" key={id}
                    onClick={() => setSel(id)}
                    className={sel === id ? 'active' : ''}>
                    {label}
                  </button>
                ))}
              </div>

              {sent ? (
                <div style={{
                  background: 'var(--ink-0)', color: 'var(--bone)',
                  borderRadius: 8, padding: 32, textAlign: 'center',
                }}>
                  <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 22, marginBottom: 10 }}>Conversa aberta no WhatsApp ✓</div>
                  <div style={{ color: 'rgba(255,255,255,0.75)', marginBottom: 22 }}>Sua mensagem já está pronta. É só enviar.</div>
                  <a href={VbWa()} target="_blank" rel="noopener" className="vb-btn"
                     style={{ background: 'var(--bone)', color: 'var(--ink-0)', padding: '12px 22px', fontSize: 13 }}>
                    Reabrir WhatsApp <VbIcon.arrow size={14}/>
                  </a>
                </div>
              ) : (
                <form className="vb-form" onSubmit={onSubmit}>
                  <div className="vb-field">
                    <label>Nome completo</label>
                    <input required type="text" placeholder="Como podemos te chamar?" value={f.nome} onChange={upd('nome')}/>
                  </div>
                  <div className="vb-field">
                    <label>Empresa</label>
                    <input required type="text" placeholder="Nome da empresa" value={f.empresa} onChange={upd('empresa')}/>
                  </div>
                  <div className="vb-field">
                    <label>E-mail</label>
                    <input required type="email" placeholder="seu@email.com" value={f.email} onChange={upd('email')}/>
                  </div>
                  <div className="vb-field">
                    <label>WhatsApp</label>
                    <input type="tel" placeholder="(11) 9 0000-0000" value={f.tel} onChange={upd('tel')}/>
                  </div>
                  <div className="vb-field vb-field-full">
                    <label>Faturamento aproximado</label>
                    <input type="text" placeholder="Ex: R$ 50 mil/mês, R$ 2 milhões/ano, fique à vontade…" value={f.faturamento} onChange={upd('faturamento')}/>
                  </div>
                  <div className="vb-field vb-field-full">
                    <label>Conte sobre o desafio atual</label>
                    <textarea placeholder="O que você quer destravar? Quais canais e ferramentas usa hoje? Qual o resultado esperado?" value={f.desafio} onChange={upd('desafio')}/>
                  </div>
                  <div className="vb-field-full" style={{ display: 'flex', gap: 14, alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', marginTop: 8 }}>
                    <small style={{ color: 'rgba(0,0,0,0.5)', fontSize: 12 }}>Ao enviar, abrimos o WhatsApp com sua mensagem pronta.</small>
                    <button type="submit" className="vb-btn vb-btn-primary">
                      Enviar pelo WhatsApp <VbIcon.arrow/>
                    </button>
                  </div>
                </form>
              )}
            </div>

            {/* SIDE */}
            <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
              <div style={{
                background: 'var(--ink-0)', color: 'var(--bone)',
                borderRadius: 8, padding: 36,
                position: 'relative', overflow: 'hidden',
              }}>
                <div style={{
                  position: 'absolute', right: -80, bottom: -80, width: 240, height: 240,
                  background: 'var(--grad-brand)', borderRadius: '50%',
                  filter: 'blur(50px)', opacity: 0.5,
                }}/>
                <div style={{ position: 'relative' }}>
                  <div className="vb-eyebrow" style={{ color: 'var(--blue-sky)', marginBottom: 18 }}>
                    Diagnóstico gratuito
                  </div>
                  <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 28, lineHeight: 1.1, letterSpacing: '-0.02em', margin: '0 0 16px' }}>
                    30 minutos<br/>de conversa
                  </h3>
                  <p style={{ color: 'rgba(255,255,255,0.75)', fontSize: 14, margin: '0 0 24px', lineHeight: 1.5 }}>
                    Antes de qualquer contrato, mostramos onde estão as principais alavancas da sua operação.
                  </p>
                  <a href={VbWa(VbWaMsgs.diagnostico)} target="_blank" rel="noopener" className="vb-btn"
                     style={{ background: 'var(--bone)', color: 'var(--ink-0)', padding: '14px 22px', fontSize: 13 }}>
                    Falar no WhatsApp <VbIcon.arrow size={14}/>
                  </a>
                </div>
              </div>

              <div style={{
                background: 'var(--cream)',
                border: '1px solid rgba(0,0,0,0.08)',
                borderRadius: 8, padding: 32,
              }}>
                <div className="vb-eyebrow" style={{ marginBottom: 18 }}>Outros canais</div>
                <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 18 }}>
                  <li>
                    <div style={{ fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'rgba(0,0,0,0.5)' }}>WhatsApp</div>
                    <a href={VbWa()} target="_blank" rel="noopener" style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 17, marginTop: 4, display: 'block', color: 'var(--ink-0)' }}>{VbConfig.WA_DISPLAY}</a>
                  </li>
                  <li>
                    <div style={{ fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'rgba(0,0,0,0.5)' }}>E-mail</div>
                    <a href={'mailto:' + VbConfig.EMAIL} style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 17, marginTop: 4, display: 'block', color: 'var(--ink-0)' }}>{VbConfig.EMAIL}</a>
                  </li>
                  <li>
                    <div style={{ fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'rgba(0,0,0,0.5)' }}>Instagram</div>
                    <a href={VbConfig.INSTAGRAM} target="_blank" rel="noopener" style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 17, marginTop: 4, display: 'block', color: 'var(--ink-0)' }}>{VbConfig.INSTAGRAM_HANDLE}</a>
                  </li>
                  <li>
                    <div style={{ fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'rgba(0,0,0,0.5)' }}>YouTube</div>
                    <a href={VbConfig.YOUTUBE} target="_blank" rel="noopener" style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 17, marginTop: 4, display: 'block', color: 'var(--ink-0)' }}>{VbConfig.YOUTUBE_HANDLE}</a>
                  </li>
                  <li>
                    <div style={{ fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'rgba(0,0,0,0.5)' }}>Escritório</div>
                    <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 17, marginTop: 4 }}>Rio de Janeiro · Brasil</div>
                    <div style={{ fontSize: 13, color: 'rgba(0,0,0,0.6)', marginTop: 2 }}>Atendimento remoto para todo o país</div>
                  </li>
                </ul>
              </div>

              <div style={{
                background: 'var(--cream)',
                border: '1px solid rgba(0,0,0,0.08)',
                borderRadius: 8, padding: 32,
              }}>
                <div className="vb-eyebrow" style={{ marginBottom: 18 }}>Horário</div>
                <div style={{ fontSize: 14, lineHeight: 2, color: 'rgba(0,0,0,0.78)' }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                    <span>Seg–sex</span>
                    <span>9h às 19h</span>
                  </div>
                  <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                    <span>Sábado</span>
                    <span>9h às 13h</span>
                  </div>
                  <div style={{ display: 'flex', justifyContent: 'space-between', color: 'rgba(0,0,0,0.5)' }}>
                    <span>Domingo</span>
                    <span>Fechado</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <style>{`
        @media (max-width: 980px) { .vb-contato-grid { grid-template-columns: 1fr !important; } }
      `}</style>
    </main>
  );
}

window.VbContato = VbContato;