// Lead form (short / extended)

const COUNTRIES = [
  { c: '+33', n: 'França' },
  { c: '+41', n: 'Suíça' },
  { c: '+352', n: 'Luxemburgo' },
  { c: '+44', n: 'Reino Unido' },
  { c: '+1', n: 'EUA / Canadá' },
  { c: '+351', n: 'Portugal' },
  { c: '+49', n: 'Alemanha' },
];

const LeadForm = ({ extended = false }) => {
  const [submitted, setSubmitted] = React.useState(false);
  const [sending, setSending] = React.useState(false);
  const [error, setError] = React.useState('');
  const [data, setData] = React.useState({
    name: '', code: '+33', phone: '', email: '',
    country: 'França', stayDates: '', situation: '', consent: false,
  });

  const update = (k) => (e) => setData({ ...data, [k]: e.target.type === 'checkbox' ? e.target.checked : e.target.value });

  const submit = async (e) => {
    e.preventDefault();
    if (!data.name || !data.phone || !data.email) return;
    setSending(true);
    setError('');
    const payload = {
      _subject: `Novo pedido de avaliação — ${data.name}`,
      Nome: data.name,
      Telefone: `${data.code} ${data.phone}`,
      Email: data.email,
      'País onde vive': data.country,
      'Próxima estadia em Portugal': data.stayDates || '—',
      'Situação atual': data.situation || '—',
      Consentimento: data.consent ? 'Sim' : 'Não',
    };
    try {
      const res = await fetch('https://formsubmit.co/ajax/andre@r0.pt', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
        body: JSON.stringify(payload),
      });
      if (!res.ok) throw new Error('network');
      setSubmitted(true);
    } catch (err) {
      setError('Não foi possível enviar o pedido. Tente novamente ou contacte-nos por telefone.');
    } finally {
      setSending(false);
    }
  };

  if (submitted) {
    return (
      <div className="form-success">
        <div className="check">✓</div>
        <h3>Pedido recebido, {data.name.split(' ')[0]}.</h3>
        <p>A nossa coordenadora clínica entra em contacto consigo em menos de 24h úteis.</p>
      </div>
    );
  }

  return (
    <form className="form-card" onSubmit={submit}>
      <div style={{marginBottom:18}}>
        <span className="eyebrow">A sua avaliação</span>
        <h3 style={{fontFamily:'"Acid Grotesk", "Archivo", sans-serif', fontSize:24, fontWeight:700, letterSpacing:'-0.025em', margin:'8px 0 4px', lineHeight:1.05}}>
          Conte-nos a sua situação.
        </h3>
        <p style={{fontSize:13, color:'var(--ink-3)', margin:0, lineHeight:1.5}}>
          Resposta em 24h úteis. Os seus dados são confidenciais.
        </p>
      </div>

      <div className="field">
        <label>Nome completo</label>
        <input type="text" placeholder="Maria Silva" value={data.name} onChange={update('name')} required />
      </div>

      <div className="field">
        <label>Telefone</label>
        <div className="field-row">
          <select value={data.code} onChange={update('code')}>
            {COUNTRIES.map(c => <option key={c.c} value={c.c}>{c.c}</option>)}
          </select>
          <input type="tel" placeholder="6 12 34 56 78" value={data.phone} onChange={update('phone')} required />
        </div>
      </div>

      <div className="field">
        <label>Email</label>
        <input type="email" placeholder="maria@email.com" value={data.email} onChange={update('email')} required />
      </div>

      {extended && (
        <React.Fragment>
          <div className="field">
            <label>País onde vive</label>
            <select value={data.country} onChange={update('country')}>
              {COUNTRIES.map(c => <option key={c.n} value={c.n}>{c.n}</option>)}
            </select>
          </div>

          <div className="field">
            <label>Próxima estadia em Portugal</label>
            <input type="text" placeholder="ex: agosto 2026, 2 semanas" value={data.stayDates} onChange={update('stayDates')} />
          </div>

          <div className="field">
            <label>A sua situação atual</label>
            <textarea rows={3} placeholder="ex: Uso prótese removível há 5 anos…" value={data.situation} onChange={update('situation')} />
          </div>
        </React.Fragment>
      )}

      <label style={{display:'flex', gap:10, alignItems:'flex-start', fontSize:12, color:'var(--ink-2)', lineHeight:1.5, margin:'8px 0 16px', cursor:'pointer'}}>
        <input type="checkbox" checked={data.consent} onChange={update('consent')} style={{marginTop:3}} />
        <span>Aceito ser contactado(a) pela Clínica Parque da Cidade. Os meus dados não serão partilhados.</span>
      </label>

      {error && (
        <p style={{fontSize:13, color:'#b3261e', margin:'0 0 14px', lineHeight:1.5}}>{error}</p>
      )}

      <button type="submit" className="btn btn-primary" style={{width:'100%'}} disabled={sending}>
        {sending ? 'A enviar…' : 'Enviar pedido'}
      </button>
    </form>
  );
};

window.LeadForm = LeadForm;