// Multi-step quote form — Carglass-inspired entry, 3 steps total
const QuoteForm = ({ variant = 'v1', onClose }) => {
  const [step, setStep] = React.useState(0);
  const [data, setData] = React.useState({
    cp: '', urgence: '', vehicule: '', nom: '', tel: '', assurance: ''
  });
  const set = (k, v) => setData((d) => ({ ...d, [k]: v }));

  const phone = '07 88 66 56 39';
  const phoneLink = 'tel:' + phone.replace(/\s/g, '');

  const WEB3FORMS_KEY = '06552b62-659f-48e9-bf0e-f90c80c06ecc';
  const [submitting, setSubmitting] = React.useState(false);
  const [submitError, setSubmitError] = React.useState('');

  const totalSteps = 3;

  const submitToWeb3Forms = async () => {
    setSubmitting(true);
    setSubmitError('');
    const urgenceLabel = { urg: 'Urgent (sous 24h)', sem: 'Cette semaine', flex: 'Flexible' }[data.urgence] || data.urgence;
    try {
      const res = await fetch('https://api.web3forms.com/submit', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
        body: JSON.stringify({
          access_key: WEB3FORMS_KEY,
          subject: `Nouveau devis Rapid Pare-Brise — ${data.nom}`,
          from_name: 'Landing Rapid Pare-Brise',
          cc: 'nortonsilva.kevin@gmail.com',
          // Champs visibles dans l'email
          'Nom complet': data.nom,
          'Téléphone': data.tel,
          'Code postal / ville': data.cp,
          'Véhicule': data.vehicule,
          'Délai souhaité': urgenceLabel,
          'Assurance': data.assurance || '(non renseignée)',
          // Anti-spam (honeypot)
          botcheck: ''
        })
      });
      const json = await res.json();
      if (json.success) {
        setStep(totalSteps);
      } else {
        setSubmitError(json.message || 'Échec de l\'envoi. Réessayez ou appelez-nous.');
      }
    } catch (e) {
      setSubmitError('Connexion impossible. Réessayez ou appelez-nous au ' + phone);
    } finally {
      setSubmitting(false);
    }
  };

  const next = () => {
    if (step === totalSteps - 1) {
      // Final step → submit to Web3Forms
      submitToWeb3Forms();
    } else {
      setStep((s) => Math.min(s + 1, totalSteps));
    }
  };
  const back = () => setStep((s) => Math.max(s - 1, 0));

  const stepValid = () => {
    if (step === 0) return data.cp.length >= 4;
    if (step === 1) return !!data.urgence && data.vehicule.trim().length > 1;
    if (step === 2) return data.nom.trim().length > 1 && data.tel.replace(/\s/g, '').length >= 10;
    return false;
  };

  return (
    <div>
      {/* STEP 0 — Carglass-inspired entry */}
      {step === 0 &&
      <div className="qf-entry">
          <h3 className="qf-entry-title">Un impact, une fissure ou plusieurs vitres endommagées&nbsp;?</h3>
          <div className="qf-entry-bars">
            <span className="qf-bar qf-bar-yellow"></span>
            <span className="qf-bar qf-bar-red"></span>
          </div>

          <div className="qf-entry-row">
            <input
            className="qf-entry-input"
            placeholder="Code postal, ville"
            maxLength="5"
            value={data.cp}
            onChange={(e) => set('cp', e.target.value.replace(/\D/g, ''))} />
          
            <button
            type="button"
            className={`qf-entry-cta ${!stepValid() ? 'is-disabled' : ''}`}
            disabled={!stepValid()}
            onClick={next}>
            
              Prendre rendez-vous
            </button>
          </div>

          <div className="qf-entry-divider"></div>

          <div className="qf-entry-phone">
            <div className="qf-entry-phone-label">Je préfère avoir quelqu'un au téléphone</div>
            <a href={phoneLink} className="qf-entry-phone-cta">
              <span className="qf-entry-phone-icon"><Icon name="phone" size={16} /></span>
              <span className="qf-entry-phone-num">{phone}</span>
            </a>
          </div>
        </div>
      }

      {/* Stepper for steps 1+ */}
      {step > 0 && step < totalSteps &&
      <div className="v1-stepper">
          {Array.from({ length: totalSteps }).map((_, i) =>
        <div key={i} className={`v1-step-dot ${i === step ? 'active' : i < step ? 'done' : ''}`} />
        )}
        </div>
      }

      {/* STEP 1 — vehicle + urgency (was old step 1) */}
      {step === 1 &&
      <div>
          <div className="v1-step-label">Étape 2 / 3</div>
          <div className="v1-step-title">Votre véhicule et le délai</div>
          <div className="v1-field">
            <label>Marque et modèle</label>
            <input className="v1-input" placeholder="Ex. Peugeot 3008"
          value={data.vehicule} onChange={(e) => set('vehicule', e.target.value)} />
          </div>
          <div className="v1-field">
            <label>Quand souhaitez-vous l'intervention&nbsp;?</label>
            <div className="v1-choices" style={{ gridTemplateColumns: '1fr 1fr 1fr' }}>
              {[
            { id: 'urg', label: 'Urgent', sub: 'Sous 24h' },
            { id: 'sem', label: 'Cette semaine' },
            { id: 'flex', label: 'Flexible' }].
            map((o) =>
            <button key={o.id} type="button"
            className={`v1-choice ${data.urgence === o.id ? 'selected' : ''}`}
            onClick={() => set('urgence', o.id)}
            style={{ flexDirection: 'column', alignItems: 'flex-start', gap: 2, padding: '12px 14px' }}>
                  <strong style={{ fontSize: 14 }}>{o.label}</strong>
                  {o.sub && <span style={{ fontSize: 12, color: 'var(--rp-muted)' }}>{o.sub}</span>}
                </button>
            )}
            </div>
          </div>
        </div>
      }

      {/* STEP 2 — coordonnées + assurance optionnelle */}
      {step === 2 &&
      <div>
          <div className="v1-step-label">Étape 3 / 3</div>
          <div className="v1-step-title">Vos coordonnées</div>
          <div className="v1-field">
            <label>Nom complet</label>
            <input className="v1-input" placeholder="Marie Durand"
          value={data.nom} onChange={(e) => set('nom', e.target.value)} />
          </div>
          <div className="v1-field">
            <label>Téléphone</label>
            <input className="v1-input" placeholder="06 12 34 56 78" type="tel"
          value={data.tel} onChange={(e) => set('tel', e.target.value)} />
          </div>
          <div className="v1-field">
            <label>Assurance <span style={{ color: 'var(--rp-muted)', fontWeight: 400 }}>(optionnel)</span></label>
            <input className="v1-input" placeholder="Axa, Macif, Crédit Mutuel, Allianz, MAAF…"
          value={data.assurance} onChange={(e) => set('assurance', e.target.value)} />
          </div>
          <div style={{
          background: '#E8F7EE', borderRadius: 10, padding: '12px 14px',
          display: 'flex', gap: 10, alignItems: 'center', fontSize: 13, color: '#1F8A4C', fontWeight: 600
        }}>
            <Icon name="check-circle" size={18} />
            <span>Aucun engagement, réponse sous 1h ouvrée</span>
          </div>
          {submitError &&
          <div style={{
            marginTop: 10, background: '#FDECEA', borderRadius: 10, padding: '10px 12px',
            color: 'var(--rp-primary-deep)', fontSize: 13, fontWeight: 600
          }}>
              {submitError}
            </div>
          }
        </div>
      }

      {step === totalSteps &&
      <div className="v1-success">
          <div className="v1-success-icon"><Icon name="check" size={28} stroke={2.5} /></div>
          <h4>Demande envoyée&nbsp;!</h4>
          <p>Un conseiller Rapid Pare-Brise vous rappelle dans l'heure pour confirmer le rendez-vous et activer votre offre.</p>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10, width: '100%', marginTop: 6 }}>
            <a href={phoneLink} className="rp-btn rp-btn-primary" style={{ justifyContent: 'center' }}>
              <Icon name="phone" size={16} /> Appeler · {phone}
            </a>
            <button type="button" className="rp-btn" style={{ justifyContent: 'center', background: '#1A1A1A', color: '#FFFFFF', border: 'none' }} onClick={() => {setStep(0);setData({ cp: '', urgence: '', vehicule: '', nom: '', tel: '', assurance: '' });}}>
              Revenir au site web
            </button>
          </div>
        </div>
      }

      {step > 0 && step < totalSteps &&
      <div className="v1-form-actions">
          <button type="button" className="v1-link-back" onClick={back}>
            <Icon name="arrow-left" size={14} /> &nbsp;Retour
          </button>
          <button type="button"
        className={`rp-btn rp-btn-primary ${!stepValid() || submitting ? 'is-disabled' : ''}`}
        disabled={!stepValid() || submitting}
        onClick={next}>
            {submitting ? 'Envoi…' : (step === totalSteps - 1 ? 'Envoyer' : 'Continuer')}
            <Icon name="arrow-right" size={14} />
          </button>
        </div>
      }
    </div>);

};

window.QuoteForm = QuoteForm;