// Contato.jsx — Contact section with form
const Contato = () => {
  const [form, setForm] = React.useState({ nome: '', email: '', telefone: '', especialidade: '', mensagem: '' });
  const [sent, setSent] = React.useState(false);

  const update = k => e => setForm(f => ({ ...f, [k]: e.target.value }));
  const submit = e => { e.preventDefault(); setSent(true); };

  const inputStyle = {
    fontFamily: "'Montserrat',sans-serif", fontSize: 14, color: '#1A1A2E',
    background: 'rgba(255,255,255,0.06)', border: '1.5px solid rgba(184,150,12,0.25)',
    borderRadius: 4, padding: '12px 16px', outline: 'none', width: '100%',
    boxSizing: 'border-box', transition: 'border-color 0.2s',
  };
  const labelStyle = { fontFamily: "'Montserrat',sans-serif", fontSize: 11, fontWeight: 500, letterSpacing: '0.06em', color: 'rgba(255,255,255,0.7)', marginBottom: 6, display: 'block' };

  return (
    <section id="contato" style={{ background: '#002147', padding: '100px 40px' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'start' }}>
        {/* Left: info */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 32 }}>
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 16 }}>
              <div style={{ width: 32, height: 1, background: '#B8960C' }}/>
              <span style={{ fontFamily: "'Montserrat',sans-serif", fontSize: 11, fontWeight: 500, letterSpacing: '0.2em', textTransform: 'uppercase', color: '#B8960C' }}>Entre em contato</span>
            </div>
            <h2 style={{ fontFamily: "'Alice',Georgia,serif", fontSize: 40, fontWeight: 400, color: '#fff', margin: 0, lineHeight: 1.2 }}>
              Agende sua<br/>consulta
            </h2>
          </div>
          <p style={{ fontFamily: "'Montserrat',sans-serif", fontSize: 15, color: 'rgba(255,255,255,0.65)', lineHeight: 1.8, margin: 0 }}>
            Estou disponível para atendimento presencial em Brasília e também para consultas online. Entre em contato pelo formulário ou pelo WhatsApp.
          </p>
          {[
            { label: 'WhatsApp', value: '(61) 9902-2123' },
            { label: 'Instagram', value: '@draanacarolinagrillo' },
            { label: 'Endereço', value: 'SGAS 614, Asa Sul — Brasília, DF 70200-740' },
          ].map(({ label, value }) => (
            <div key={label} style={{ display: 'flex', gap: 16, alignItems: 'flex-start' }}>
              <div style={{ width: 36, height: 36, borderRadius: 6, background: 'rgba(184,150,12,0.12)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#B8960C" strokeWidth="1.5"><circle cx="12" cy="12" r="9"/></svg>
              </div>
              <div>
                <div style={{ fontFamily: "'Montserrat',sans-serif", fontSize: 10, fontWeight: 500, color: '#B8960C', letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 3 }}>{label}</div>
                <div style={{ fontFamily: "'Montserrat',sans-serif", fontSize: 14, color: 'rgba(255,255,255,0.8)' }}>{value}</div>
              </div>
            </div>
          ))}
        </div>

        {/* Right: form */}
        <div style={{ background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(184,150,12,0.15)', borderRadius: 12, padding: 40 }}>
          {sent ? (
            <div style={{ textAlign: 'center', padding: '40px 0' }}>
              <div style={{ fontFamily: "'Alice',Georgia,serif", fontSize: 32, color: '#B8960C', marginBottom: 16 }}>Mensagem enviada!</div>
              <p style={{ fontFamily: "'Montserrat',sans-serif", fontSize: 14, color: 'rgba(255,255,255,0.65)', lineHeight: 1.7 }}>Entrarei em contato em breve para confirmar sua consulta.</p>
              <button onClick={() => setSent(false)} style={{ marginTop: 24, fontFamily: "'Montserrat',sans-serif", fontSize: 12, padding: '10px 24px', background: 'transparent', border: '1.5px solid #B8960C', color: '#B8960C', borderRadius: 4, cursor: 'pointer' }}>Nova mensagem</button>
            </div>
          ) : (
            <form onSubmit={submit} style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
                <div><label style={labelStyle}>Nome</label><input style={inputStyle} value={form.nome} onChange={update('nome')} placeholder="Seu nome completo"/></div>
                <div><label style={labelStyle}>E-mail</label><input style={inputStyle} type="email" value={form.email} onChange={update('email')} placeholder="seu@email.com"/></div>
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
                <div><label style={labelStyle}>WhatsApp</label><input style={inputStyle} value={form.telefone} onChange={update('telefone')} placeholder="(61) 9999-0000"/></div>
                <div>
                  <label style={labelStyle}>Especialidade</label>
                  <select style={{ ...inputStyle, appearance: 'none' }} value={form.especialidade} onChange={update('especialidade')}>
                    <option value="">Selecione...</option>
                    <option>Diabetes</option><option>Tireoide</option><option>Obesidade</option><option>Síndrome Metabólica</option><option>Emagrecimento</option>
                  </select>
                </div>
              </div>
              <div>
                <label style={labelStyle}>Mensagem (opcional)</label>
                <textarea style={{ ...inputStyle, minHeight: 100, resize: 'vertical' }} value={form.mensagem} onChange={update('mensagem')} placeholder="Descreva o motivo da consulta..."/>
              </div>
              <button type="submit" style={{ fontFamily: "'Montserrat',sans-serif", fontSize: 13, fontWeight: 500, letterSpacing: '0.06em', padding: '14px', background: '#B8960C', color: '#fff', border: 'none', borderRadius: 4, cursor: 'pointer' }}>
                Enviar Mensagem
              </button>
            </form>
          )}
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { Contato });