/* ============================================================
   VT — Parcours POSEUR (visite technique terrain)
   Étapes : Chantier → Arrivée (GPS) → Environnement → Façades
            → Fiche de prévisite → Documents → Envoi
   Médias horodatés/géolocalisés (certif maison ; Rhino plus tard).
   ============================================================ */
const { useState, useRef, useCallback } = React;

const API = (window.VT_CONFIG && window.VT_CONFIG.api) || {};

/* ---------- utilitaires ---------- */
function nowStamp() {
  const d = new Date();
  return d.toLocaleString('fr-FR', { day:'2-digit', month:'2-digit', year:'numeric', hour:'2-digit', minute:'2-digit' });
}
function fileToDataURL(file) {
  return new Promise((res, rej) => { const r = new FileReader(); r.onload = () => res(r.result); r.onerror = rej; r.readAsDataURL(file); });
}
function getPosition(opts) {
  opts = opts || {};
  return new Promise((res) => {
    if (!navigator.geolocation || (typeof window !== 'undefined' && window.isSecureContext === false)) return res({ error:'unsupported' });
    navigator.geolocation.getCurrentPosition(
      p => res({ lat:p.coords.latitude, lng:p.coords.longitude, acc:Math.round(p.coords.accuracy), at:new Date().toISOString() }),
      e => res({ error: (e && e.code === 1) ? 'denied' : ((e && e.code === 3) ? 'timeout' : 'unavailable') }),
      { enableHighAccuracy: opts.high !== false, timeout: opts.timeout || 10000, maximumAge: opts.maxAge || 0 }
    );
  });
}
/* renvoie une position exploitable ou null (pour stamp best-effort) */
async function tryPos() { const p = await getPosition({ high:true, timeout:6000, maxAge:60000 }); return (p && !p.error) ? p : null; }
/* incruste GPS + date/heure en bas d'une photo (certif maison) */
async function stampPhoto(file, pos) {
  const dataUrl = await fileToDataURL(file);
  try {
    const img = await new Promise((res, rej) => { const i = new Image(); i.onload = () => res(i); i.onerror = rej; i.src = dataUrl; });
    const maxW = 1600;
    const scale = Math.min(1, maxW / img.width);
    const w = Math.round(img.width * scale), h = Math.round(img.height * scale);
    const c = document.createElement('canvas'); c.width = w; c.height = h;
    const ctx = c.getContext('2d');
    ctx.drawImage(img, 0, 0, w, h);
    const lines = [
      'Groupe Verlaine — Visite technique',
      nowStamp() + (pos ? '  ·  ' + pos.lat.toFixed(5) + ', ' + pos.lng.toFixed(5) + ' (±' + pos.acc + 'm)' : ''),
    ];
    const pad = Math.round(w * 0.015);
    const fs = Math.max(13, Math.round(w * 0.022));
    ctx.font = '600 ' + fs + 'px -apple-system,Segoe UI,Arial';
    const bh = fs * lines.length + pad * 2.2;
    ctx.fillStyle = 'rgba(13,28,77,0.72)';
    ctx.fillRect(0, h - bh, w, bh);
    ctx.fillStyle = '#fff'; ctx.textBaseline = 'top';
    lines.forEach((l, i) => ctx.fillText(l, pad, h - bh + pad + i * (fs * 1.15)));
    return c.toDataURL('image/jpeg', 0.82);
  } catch (e) { return dataUrl; }
}

/* ---------- petits composants ---------- */
function Field({ label, children, req }) {
  return (
    <label style={{display:'block',marginBottom:14}}>
      <span style={{display:'block',fontSize:12.5,fontWeight:700,color:'#40506b',marginBottom:5}}>{label}{req && <span style={{color:'#e11d33'}}> *</span>}</span>
      {children}
    </label>
  );
}
const inputStyle = { width:'100%', padding:'11px 12px', border:'1.5px solid #e5e9f0', borderRadius:10, fontSize:15, boxSizing:'border-box' };
const secTitleStyle = { fontSize:12, fontWeight:800, textTransform:'uppercase', letterSpacing:'.4px', color:'#40506b', margin:'0 0 8px' };
const twoCol = { display:'grid', gridTemplateColumns:'1fr 1fr', gap:10 };
function Section({ title, children }) {
  return <div style={{marginBottom:16}}><div style={secTitleStyle}>{title}</div><div className="card">{children}</div></div>;
}
function NumF({ label, unit, v, on }) {
  return <Field label={label + (unit ? ' (' + unit + ')' : '')}><input style={inputStyle} inputMode="decimal" value={v} onChange={e=>on(e.target.value)} /></Field>;
}
function Schema({ src, alt }) {
  return <img src={src} alt={alt} style={{width:'100%',borderRadius:8,border:'1px solid #eef1f5',marginBottom:12,display:'block'}} onError={e=>{e.target.style.display='none';}} />;
}

function MediaGrid({ items, onRemove }) {
  if (!items.length) return null;
  return (
    <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:8,marginTop:10}}>
      {items.map((m, i) => (
        <div key={i} style={{position:'relative',borderRadius:10,overflow:'hidden',border:'1px solid #e5e9f0',aspectRatio:'1'}}>
          {m.kind === 'video'
            ? <video src={m.url} style={{width:'100%',height:'100%',objectFit:'cover'}} muted playsInline />
            : <img src={m.url} style={{width:'100%',height:'100%',objectFit:'cover'}} />}
          <button onClick={()=>onRemove(i)} style={{position:'absolute',top:4,right:4,background:'rgba(0,0,0,.6)',color:'#fff',border:'none',borderRadius:'50%',width:22,height:22,cursor:'pointer',fontSize:13,lineHeight:'22px'}}>×</button>
          {m.kind === 'video' && <span style={{position:'absolute',bottom:4,left:4,background:'rgba(0,0,0,.6)',color:'#fff',fontSize:10,padding:'1px 5px',borderRadius:4}}>▶ vidéo</span>}
        </div>
      ))}
    </div>
  );
}

function CaptureBtns({ onPhoto, onVideo, label }) {
  const pRef = useRef(), vRef = useRef();
  return (
    <div style={{display:'flex',gap:8}}>
      <input ref={pRef} type="file" accept="image/*" capture="environment" style={{display:'none'}} onChange={e=>{ if(e.target.files[0]) onPhoto(e.target.files[0]); e.target.value=''; }} />
      <input ref={vRef} type="file" accept="video/*" capture="environment" style={{display:'none'}} onChange={e=>{ if(e.target.files[0]) onVideo(e.target.files[0]); e.target.value=''; }} />
      <button className="btn btn-navy" style={{flex:1,padding:'12px'}} onClick={()=>pRef.current.click()}>📷 Photo</button>
      <button className="btn btn-ghost" style={{flex:1,padding:'12px'}} onClick={()=>vRef.current.click()}>🎥 Vidéo</button>
    </div>
  );
}

/* ---------- le parcours ---------- */
function PoseurFlow() {
  const [step, setStep] = useState(0);
  const [idProjet, setIdProjet] = useState('');
  const [chantier, setChantier] = useState(null);
  const [busy, setBusy] = useState(false);
  const [err, setErr] = useState('');

  const [arrival, setArrival] = useState(null);
  const [env, setEnv] = useState([]);          // {kind,url,file,pos,at}
  const [facades, setFacades] = useState([]);  // {media:[...]}
  const [fiche, setFiche] = useState({ ral:'', total_m2:'', surface_hab:'', chauffage:'', crepi_m2:'', commentaire:'', perimetre_ml:'', aretes_ml:'', ouvrants_ml:'', couvertines_cm:'', couronnement_ml:'', couvertines_couleur:'', nb_fenetres:'', fenetres_couleur:'', fenetres_dims:'', volet_battant_nb:'', volet_roulant:'', gonds:'', gond_diametre:'', gond_nb:'' });
  const [docs, setDocs] = useState({ cni:null, impot:null, domicile:null });
  const [sent, setSent] = useState(null);

  const setF = (k,v) => setFiche(s => ({...s,[k]:v}));

  async function loadChantier() {
    const id = parseInt(idProjet, 10);
    if (!id) { setErr('Entrez un n° de chantier valide.'); return; }
    setBusy(true); setErr('');
    try {
      const r = await fetch(API.client + '?k=' + encodeURIComponent(API.key) + '&id_project=' + id);
      const j = await r.json();
      if (!j.ok) { setErr(j.error === 'PROJECT_NOT_FOUND' ? 'Chantier introuvable.' : ('Erreur : ' + j.error)); setBusy(false); return; }
      setChantier(j);
      setFiche(s => ({ ...s, total_m2: j.total_m2 ? String(j.total_m2) : s.total_m2 }));
      setStep(1);
    } catch (e) { setErr('Connexion impossible au CRM.'); }
    setBusy(false);
  }

  async function captureArrival() {
    setBusy(true); setErr('');
    let pos = await getPosition({ high:true, timeout:8000 });
    if (pos.error === 'timeout' || pos.error === 'unavailable') pos = await getPosition({ high:false, timeout:15000, maxAge:60000 });
    setBusy(false);
    if (pos.error) {
      setErr(pos.error === 'denied'
        ? "Localisation refusée. Activez-la (Réglages ▸ Confidentialité ▸ Service de localisation, puis Safari ▸ Position « Autoriser »), puis réessayez."
        : pos.error === 'unsupported' ? "Géolocalisation indisponible sur ce navigateur."
        : "Signal GPS trop faible. Rapprochez-vous d'une fenêtre ou sortez, puis réessayez.");
      return;
    }
    setErr(''); setArrival(pos);
  }

  async function addEnv(file, kind) {
    const pos = await tryPos();
    if (kind === 'photo') {
      const url = await stampPhoto(file, pos);
      setEnv(s => [...s, { kind:'photo', url, pos, at:new Date().toISOString() }]);
    } else {
      const url = await fileToDataURL(file);
      setEnv(s => [...s, { kind:'video', url, file, pos, at:new Date().toISOString() }]);
    }
  }
  const rmEnv = i => setEnv(s => s.filter((_,k)=>k!==i));

  function addFacade() { setFacades(s => [...s, { media:[] }]); }
  async function addFacadeMedia(fi, file, kind) {
    const pos = await tryPos();
    const url = kind === 'photo' ? await stampPhoto(file, pos) : await fileToDataURL(file);
    setFacades(s => s.map((f,i)=> i===fi ? {...f, media:[...f.media, { kind, url, pos, at:new Date().toISOString() }]} : f));
  }
  const rmFacade = fi => setFacades(s => s.filter((_,i)=>i!==fi));

  async function addDoc(key, file) {
    const url = await fileToDataURL(file);
    setDocs(s => ({ ...s, [key]: { name:file.name, url } }));
  }

  async function submit() {
    setBusy(true); setErr('');
    const user = (window.VT_AUTH && window.VT_AUTH.user()) || {};
    const payload = {
      key: API.submit_key || API.key,
      id_project: chantier.id_project,
      poseur: user.email || '',
      arrival,
      fiche,
      env: env.map(m => ({ kind:m.kind, at:m.at, pos:m.pos, data:m.url })),
      facades: facades.map(f => ({ media: f.media.map(m => ({ kind:m.kind, at:m.at, pos:m.pos, data:m.url })) })),
      docs,
    };
    try {
      const r = await fetch(API.submit, { method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify(payload) });
      const j = await r.json().catch(()=>null);
      if (j && j.ok) { setSent(j); setStep(7); }
      else { setErr('Envoi refusé : ' + ((j && j.error) || 'erreur serveur') + '. (backend d’envoi en cours de mise en place)'); }
    } catch (e) { setErr('Envoi impossible (backend vt_submit.php pas encore déployé).'); }
    setBusy(false);
  }

  /* ----- rendu ----- */
  const Header = ({ n, title, sub }) => (
    <div style={{marginBottom:16}}>
      <span className="pill pill-poseur">Étape {n}/6</span>
      <h1 style={{marginTop:10}}>{title}</h1>
      {sub && <p className="sub">{sub}</p>}
    </div>
  );
  const Nav = ({ onNext, nextLabel, disabled }) => (
    <div style={{display:'flex',gap:10,marginTop:22}}>
      {step > 1 && <button className="btn btn-ghost" style={{flex:'0 0 auto'}} onClick={()=>setStep(step-1)}>← Retour</button>}
      <button className="btn btn-primary" style={{flex:1}} disabled={disabled||busy} onClick={onNext}>{nextLabel||'Continuer'}</button>
    </div>
  );

  if (step === 0) return (
    <div className="vt-wrap">
      <span className="pill pill-poseur">Espace poseur</span>
      <h1 style={{marginTop:10}}>Démarrer une visite technique</h1>
      <p className="sub">Entrez le numéro de chantier (projet CRM) pour charger la fiche.</p>
      <div className="card" style={{marginTop:18}}>
        <Field label="N° de chantier (id projet)" req>
          <input style={inputStyle} inputMode="numeric" value={idProjet} placeholder="ex. 378599" onChange={e=>setIdProjet(e.target.value.replace(/\D/g,''))} />
        </Field>
        <button className="btn btn-primary btn-block" disabled={busy} onClick={loadChantier}>{busy?'Chargement…':'Charger le chantier'}</button>
        {err && <p className="muted" style={{color:'#c0203a',marginTop:10}}>{err}</p>}
      </div>
    </div>
  );

  const clientCard = chantier && (
    <div className="card" style={{marginBottom:16,background:'#f7f9fc'}}>
      <div style={{fontWeight:800,color:'#0d1c4d'}}>{chantier.client || 'Client'} <span className="muted">· chantier {chantier.id_project}</span></div>
      <div className="muted" style={{marginTop:4,lineHeight:1.5}}>
        {chantier.adresse || 'Adresse non renseignée'}<br/>
        📞 {chantier.telephone || '—'} · Commercial : {chantier.commercial || '—'}
      </div>
    </div>
  );

  if (step === 1) { const hasPos = arrival && !arrival.skipped; return (
    <div className="vt-wrap">
      <Header n={1} title="Preuve d'arrivée" sub="Capturez votre position GPS en arrivant sur le lieu." />
      {clientCard}
      <div className="card">
        {hasPos ? (
          <div>
            <div style={{fontSize:15,fontWeight:700,color:'#1f8a5b'}}>✅ Position enregistrée</div>
            <div className="muted" style={{marginTop:6,lineHeight:1.5}}>{arrival.lat.toFixed(5)}, {arrival.lng.toFixed(5)} (±{arrival.acc} m)<br/>{nowStamp()}</div>
            <a className="btn btn-ghost btn-block" style={{marginTop:12}} target="_blank" rel="noreferrer"
               href={'https://wa.me/?text=' + encodeURIComponent('Arrivé sur le chantier ' + chantier.id_project + ' — https://maps.google.com/?q=' + arrival.lat + ',' + arrival.lng)}>Partager sur WhatsApp</a>
            <button className="btn btn-ghost btn-block" style={{marginTop:8}} onClick={captureArrival}>Recapturer</button>
          </div>
        ) : (arrival && arrival.skipped) ? (
          <div>
            <div style={{fontSize:15,fontWeight:700,color:'#b8860b'}}>⚠️ Position non captée</div>
            <div className="muted" style={{marginTop:6}}>Vous pouvez continuer, mais la preuve GPS manquera.</div>
            <button className="btn btn-navy btn-block" style={{marginTop:12}} disabled={busy} onClick={captureArrival}>{busy?'Localisation…':'📍 Réessayer la localisation'}</button>
          </div>
        ) : (
          <>
            <p className="muted" style={{marginBottom:12}}>Géolocalisation horodatée = preuve que vous êtes bien sur place.</p>
            <button className="btn btn-navy btn-block" disabled={busy} onClick={captureArrival}>{busy?'Localisation…':'📍 Capturer ma position'}</button>
          </>
        )}
      </div>
      {err && <>
        <p className="muted" style={{color:'#c0203a',marginTop:10}}>{err}</p>
        <button className="btn btn-ghost btn-block" style={{marginTop:6,fontSize:13}} onClick={()=>{ setErr(''); setArrival({ skipped:true, at:new Date().toISOString() }); }}>Continuer sans position GPS →</button>
      </>}
      <Nav onNext={()=>setStep(2)} disabled={!arrival} />
    </div>
  ); }

  if (step === 2) return (
    <div className="vt-wrap">
      <Header n={2} title="Environnement" sub="Photos + vidéos de l'environnement (rue, alentours, proche & lointain)." />
      <div className="card">
        <CaptureBtns onPhoto={f=>addEnv(f,'photo')} onVideo={f=>addEnv(f,'video')} />
        <MediaGrid items={env} onRemove={rmEnv} />
        <p className="muted" style={{marginTop:10}}>{env.length} média(s). Ajoutez plusieurs vues.</p>
      </div>
      <Nav onNext={()=>setStep(3)} disabled={env.length===0} />
    </div>
  );

  if (step === 3) return (
    <div className="vt-wrap">
      <Header n={3} title="Façades" sub="1 photo + 1 vidéo par façade à isoler." />
      {facades.map((f, fi) => (
        <div className="card" key={fi} style={{marginBottom:12}}>
          <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:8}}>
            <strong>Façade {fi+1}</strong>
            <button onClick={()=>rmFacade(fi)} className="muted" style={{background:'none',border:'none',color:'#c0203a',cursor:'pointer'}}>supprimer</button>
          </div>
          <CaptureBtns onPhoto={file=>addFacadeMedia(fi,file,'photo')} onVideo={file=>addFacadeMedia(fi,file,'video')} />
          <MediaGrid items={f.media} onRemove={()=>setFacades(s=>s.map((x,i)=>i===fi?{...x,media:x.media.slice(0,-1)}:x))} />
        </div>
      ))}
      <button className="btn btn-ghost btn-block" onClick={addFacade}>+ Ajouter une façade</button>
      <Nav onNext={()=>setStep(4)} disabled={facades.length===0} />
    </div>
  );

  if (step === 4) return (
    <div className="vt-wrap">
      <Header n={4} title="Fiche de prévisite" sub="Mesures ITE — repérez chaque cote sur le schéma." />
      {clientCard}

      <Section title="Général">
        <div style={twoCol}>
          <Field label="Total m² à isoler" req><input style={inputStyle} inputMode="decimal" value={fiche.total_m2} onChange={e=>setF('total_m2',e.target.value)} /></Field>
          <NumF label="Surface habitable" unit="m²" v={fiche.surface_hab} on={v=>setF('surface_hab',v)} />
          <Field label="RAL (couleur)"><input style={inputStyle} value={fiche.ral} onChange={e=>setF('ral',e.target.value)} placeholder="ex. 7016" /></Field>
          <NumF label="Crépi" unit="m²" v={fiche.crepi_m2} on={v=>setF('crepi_m2',v)} />
        </div>
        <Field label="Mode de chauffage actuel" req><input style={inputStyle} value={fiche.chauffage} onChange={e=>setF('chauffage',e.target.value)} placeholder="gaz, PAC, fioul…" /></Field>
      </Section>

      <Section title="Dimensions extérieures">
        <Schema src="assets/schema-dim.png" alt="Périmètre, arêtes, ouvrants, couvertines" />
        <div style={twoCol}>
          <NumF label="① Périmètre maison" unit="ML" v={fiche.perimetre_ml} on={v=>setF('perimetre_ml',v)} />
          <NumF label="② Arêtes verticales" unit="ML" v={fiche.aretes_ml} on={v=>setF('aretes_ml',v)} />
          <NumF label="③ Ouvrants" unit="ML" v={fiche.ouvrants_ml} on={v=>setF('ouvrants_ml',v)} />
          <NumF label="④ Couvertines prof." unit="cm" v={fiche.couvertines_cm} on={v=>setF('couvertines_cm',v)} />
        </div>
        <NumF label="Si profondeur < 15 cm : haut. couronnement" unit="ML" v={fiche.couronnement_ml} on={v=>setF('couronnement_ml',v)} />
        <Field label="Couleur couvertines">
          <select style={inputStyle} value={fiche.couvertines_couleur} onChange={e=>setF('couvertines_couleur',e.target.value)}>
            <option value="">—</option><option>Blanc</option><option>Gris (RAL 7016)</option>
          </select>
        </Field>
      </Section>

      <Section title="Fenêtres">
        <Schema src="assets/schema-fen.png" alt="Fenêtres profondeur / longueur" />
        <div style={twoCol}>
          <NumF label="Nombre de fenêtres" v={fiche.nb_fenetres} on={v=>setF('nb_fenetres',v)} />
          <Field label="Couleur">
            <select style={inputStyle} value={fiche.fenetres_couleur} onChange={e=>setF('fenetres_couleur',e.target.value)}>
              <option value="">—</option><option>Blanc</option><option>Gris (RAL 7016)</option>
            </select>
          </Field>
        </div>
        <Field label="Dimensions par fenêtre (profondeur × longueur, cm)">
          <textarea style={{...inputStyle,minHeight:60,resize:'vertical'}} value={fiche.fenetres_dims} onChange={e=>setF('fenetres_dims',e.target.value)} placeholder="ex. F1 20×120 · F2 20×90…" />
        </Field>
      </Section>

      <Section title="Volets & gonds">
        <Schema src="assets/schema-volet.png" alt="Volets et gonds" />
        <div style={twoCol}>
          <NumF label="Volets battants" unit="nb" v={fiche.volet_battant_nb} on={v=>setF('volet_battant_nb',v)} />
          <NumF label="Volets roulants" unit="nb" v={fiche.volet_roulant} on={v=>setF('volet_roulant',v)} />
          <NumF label="Gonds — diamètre" unit="mm" v={fiche.gond_diametre} on={v=>setF('gond_diametre',v)} />
          <NumF label="Gonds — nombre" v={fiche.gond_nb} on={v=>setF('gond_nb',v)} />
        </div>
      </Section>

      <Section title="Commentaire">
        <textarea style={{...inputStyle,minHeight:70,resize:'vertical'}} value={fiche.commentaire} onChange={e=>setF('commentaire',e.target.value)} placeholder="Modifications, crépi, particularités…" />
      </Section>

      <Nav onNext={()=>setStep(5)} disabled={!fiche.total_m2 || !fiche.chauffage} />
    </div>
  );

  if (step === 5) {
    const DocRow = ({ k, label }) => {
      const ref = useRef();
      return (
        <div className="card" style={{display:'flex',alignItems:'center',gap:12,marginBottom:10}}>
          <div style={{flex:1}}>
            <div style={{fontWeight:700}}>{label}</div>
            <div className="muted">{docs[k] ? '✅ ' + docs[k].name : 'Aucun fichier'}</div>
          </div>
          <input ref={ref} type="file" accept="image/*,application/pdf" style={{display:'none'}} onChange={e=>{ if(e.target.files[0]) addDoc(k,e.target.files[0]); e.target.value=''; }} />
          <button className="btn btn-navy" style={{padding:'10px 14px'}} onClick={()=>ref.current.click()}>{docs[k]?'Remplacer':'Ajouter'}</button>
        </div>
      );
    };
    return (
      <div className="vt-wrap">
        <Header n={5} title="Documents client" sub="Photo ou PDF de chaque justificatif." />
        <DocRow k="cni" label="CNI / Passeport" />
        <DocRow k="impot" label="Avis d'impôt" />
        <DocRow k="domicile" label="Justificatif de domicile (< 3 mois)" />
        <Nav onNext={()=>setStep(6)} nextLabel="Voir le récapitulatif" />
      </div>
    );
  }

  if (step === 6) return (
    <div className="vt-wrap">
      <Header n={6} title="Récapitulatif" sub="Vérifiez puis envoyez la visite technique." />
      {clientCard}
      <div className="card" style={{lineHeight:1.7}}>
        <div>📍 Arrivée : {arrival && !arrival.skipped ? ('✅ ' + arrival.lat.toFixed(4)+','+arrival.lng.toFixed(4)) : (arrival && arrival.skipped ? '⚠️ non captée' : '—')}</div>
        <div>🎥 Environnement : {env.length} média(s)</div>
        <div>🏠 Façades : {facades.length} ({facades.reduce((a,f)=>a+f.media.length,0)} média(s))</div>
        <div>📐 Fiche : {fiche.total_m2||'?'} m² · chauffage {fiche.chauffage||'?'}</div>
        <div>📄 Docs : {['cni','impot','domicile'].filter(k=>docs[k]).length}/3</div>
      </div>
      {err && <p className="muted" style={{color:'#c0203a',marginTop:10}}>{err}</p>}
      <button className="btn btn-primary btn-block" style={{marginTop:18}} disabled={busy} onClick={submit}>{busy?'Envoi…':'✅ Envoyer la visite technique'}</button>
      <button className="btn btn-ghost btn-block" style={{marginTop:8}} onClick={()=>setStep(5)}>← Retour</button>
    </div>
  );

  if (step === 7) return (
    <div className="center">
      <div style={{fontSize:44}}>✅</div>
      <h1>Visite technique envoyée</h1>
      <p className="sub">Chantier {chantier && chantier.id_project} — merci !</p>
      <button className="btn btn-primary" onClick={()=>{ setStep(0); setChantier(null); setIdProjet(''); setArrival(null); setEnv([]); setFacades([]); setDocs({cni:null,impot:null,domicile:null}); }}>Nouvelle visite</button>
    </div>
  );

  return null;
}