// Estimation.jsx — multi-step wizard

const { useState: estUseState } = React;

function Estimation({ witty }) {
  const [step, setStep] = estUseState(1);
  const [form, setForm] = estUseState({
    type: 'Maison de village', commune: '', m2: '', rooms: '', dpe: 'Je ne sais pas',
    name: '', phone: '', email: '', consent: false,
  });
  const [done, setDone] = estUseState(false);

  const set = (k) => (e) => setForm({ ...form, [k]: e.target.value });
  const next = () => {
    if (step === 3) { setDone(true); return; }
    setStep(step + 1);
  };

  if (done) return (
    <section className="ntr-section ntr-estim" data-screen-label="Estimation / Done">
      <div className="ntr-estim-inner">
        <div className="ntr-eyebrow"><span className="ntr-rule"/> Reçu <span className="ntr-rule"/></div>
        <h2 className="ntr-h2">Merci, {form.name || 'cher voisin'}.</h2>
        <p className="ntr-lead">
          {witty
            ? "Maxime ouvre votre dossier comme un acte authentique : avec une loupe et un café. Vous êtes recontacté sous 24 h ouvrées."
            : "Votre demande est enregistrée. Maxime vous recontacte sous 24 h ouvrées avec un premier retour."}
        </p>
        <div className="ntr-estim-recap">
          <div><span>Bien</span><b>{form.type}</b></div>
          <div><span>Commune</span><b>{form.commune || '—'}</b></div>
          <div><span>Surface</span><b>{form.m2 ? form.m2 + ' m²' : '—'}</b></div>
        </div>
        <button className="ntr-btn ntr-btn--ghost" onClick={() => { setDone(false); setStep(1); }}>
          Estimer un autre bien
        </button>
      </div>
    </section>
  );

  return (
    <section className="ntr-section ntr-estim" data-screen-label={`Estimation / Étape ${step}`}>
      <div className="ntr-estim-inner">
        <div className="ntr-eyebrow"><span className="ntr-rule"/> Estimation offerte jusqu'au 31/12/2026 <span className="ntr-rule"/></div>
        <h2 className="ntr-h2">
          {witty
            ? <>Combien vaut <em>vraiment</em> votre bien ?</>
            : <>Combien vaut <em>votre bien</em> ?</>}
        </h2>
        <p className="ntr-sub">
          Un avis de valeur détaillé, basé sur le marché local et les particularités juridiques et techniques de votre bien.
          Offert jusqu'au 31/12/2026.
        </p>
        <div className="ntr-estim-card">
          <div className="ntr-estim-steps">
            {[1,2,3].map((i) => (
              <div key={i} className={'ntr-estim-step' + (i === step ? ' is-active' : i < step ? ' is-done' : '')}>
                <div className="ntr-estim-step-n">{i < step ? '✓' : '0' + i}</div>
                <div className="ntr-estim-step-l">
                  {i === 1 && 'Le bien'}
                  {i === 2 && 'Détails'}
                  {i === 3 && 'Vous'}
                </div>
              </div>
            ))}
          </div>
          {step === 1 && (
            <div className="ntr-estim-fields">
              <label className="ntr-estim-label">Type de bien
                <select className="ntr-estim-input" value={form.type} onChange={set('type')}>
                  <option>Maison de village</option><option>Mas en pierre</option>
                  <option>Maison récente</option><option>Appartement</option>
                  <option>Terrain</option><option>Propriété de caractère</option>
                </select>
              </label>
              <label className="ntr-estim-label">Commune
                <input className="ntr-estim-input" value={form.commune} onChange={set('commune')} placeholder="Vernoux-en-Vivarais"/>
              </label>
              <label className="ntr-estim-label">Surface habitable (m²)
                <input className="ntr-estim-input" type="number" value={form.m2} onChange={set('m2')} placeholder="150"/>
              </label>
            </div>
          )}
          {step === 2 && (
            <div className="ntr-estim-fields">
              <label className="ntr-estim-label">Nombre de pièces
                <input className="ntr-estim-input" type="number" value={form.rooms} onChange={set('rooms')} placeholder="5"/>
              </label>
              <label className="ntr-estim-label">DPE connu
                <select className="ntr-estim-input" value={form.dpe} onChange={set('dpe')}>
                  <option>Je ne sais pas</option>
                  <option>A</option><option>B</option><option>C</option><option>D</option>
                  <option>E</option><option>F</option><option>G</option>
                </select>
              </label>
              <div className="ntr-estim-info">
                <span>?</span> Pas de souci si vous ne savez pas. Maxime fera la démarche avec vous.
              </div>
            </div>
          )}
          {step === 3 && (
            <div className="ntr-estim-fields">
              <label className="ntr-estim-label">Votre nom
                <input className="ntr-estim-input" value={form.name} onChange={set('name')} placeholder="Prénom Nom"/>
              </label>
              <label className="ntr-estim-label">Téléphone
                <input className="ntr-estim-input" value={form.phone} onChange={set('phone')} placeholder="06 00 00 00 00"/>
              </label>
              <label className="ntr-estim-label">E-mail
                <input className="ntr-estim-input" value={form.email} onChange={set('email')} placeholder="vous@exemple.fr"/>
              </label>
            </div>
          )}
          <div className="ntr-estim-row">
            {step > 1 && <button className="ntr-btn ntr-btn--ghost" onClick={() => setStep(step - 1)}>Retour</button>}
            <button className="ntr-btn ntr-btn--primary" onClick={next}>
              {step === 3 ? 'Recevoir mon estimation' : 'Continuer'}
            </button>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Estimation = Estimation;