/* ───────────────────────── CEMETERY · IMPORT (CSV magic + send-us-your-mess) ───────────────────────── */
function ImportModal({onClose, onComplete}){
  const [stage,setStage] = useState("choose"); // choose | dropped | mapping | importing | done | concierge
  const [pct,setPct] = useState(0);
  const [count,setCount] = useState(0);
  const TOTAL = 14287;

  // run the import animation
  useEffect(()=>{
    if(stage!=="importing") return;
    let raf, start=performance.now();
    const dur=2400;
    const tick=(t)=>{
      const e=Math.min(1,(t-start)/dur);
      const eased = 1-Math.pow(1-e,2.2);
      setPct(Math.round(eased*100));
      setCount(Math.round(eased*TOTAL));
      if(e<1) raf=requestAnimationFrame(tick); else setTimeout(()=>setStage("done"),350);
    };
    raf=requestAnimationFrame(tick);
    return ()=>cancelAnimationFrame(raf);
  },[stage]);

  const cols = [
    ["Surname, First","Name","✓ matched"],
    ["DOB / DOD","Birth & death dates","✓ matched"],
    ["Block/Lot","Plot","✓ matched"],
    ["Section","Section","✓ matched"],
    ["Vet (Y/N)","Veteran status","✓ matched"],
  ];

  return (
    <div className="overlay" onClick={(e)=>{if(e.target.classList.contains("overlay")&&stage!=="importing")onClose();}}>
      <div className="modal">
        <div className="modal-h">
          <div className="ci" style={{width:34,height:34,borderRadius:9,background:"color-mix(in oklab,var(--brand) 12%,var(--paper))",color:"var(--brand)",display:"grid",placeItems:"center",flex:"none"}}>⇪</div>
          <h3>{stage==="concierge"?"We'll do it for you":"Import your records"}</h3>
          {stage!=="importing" && <button className="x" onClick={onClose}>×</button>}
        </div>
        <div className="modal-b">

          {stage==="choose" && (
            <div className="fade-in">
              <div className="dropzone" onClick={()=>setStage("dropped")}>
                <div className="dzi">⬇</div>
                <b>Drop your spreadsheet to begin</b>
                <span>CSV or Excel — burial ledgers, index cards, plot lists</span>
                <div className="dz-sample">📄 maplewood_burials_1901-2025.csv · 1.8 MB</div>
              </div>
              <div style={{display:"flex",alignItems:"center",gap:12,margin:"18px 0"}}>
                <div style={{flex:1,height:1,background:"var(--line)"}}></div>
                <span className="muted mono" style={{fontSize:11}}>OR</span>
                <div style={{flex:1,height:1,background:"var(--line)"}}></div>
              </div>
              <div className="import-row" style={{marginBottom:0,cursor:"pointer"}} onClick={()=>setStage("concierge")}>
                <div className="fi" style={{background:"color-mix(in oklab,var(--accent) 14%,var(--paper))",color:"var(--accent)"}}>✦</div>
                <div style={{flex:1}}>
                  <div className="fn">No clean data? Send us the mess.</div>
                  <div className="muted" style={{fontSize:12.5}}>Binders, photos, hand-drawn maps — our team digitizes it for you.</div>
                </div>
                <span className="chip">→</span>
              </div>
            </div>
          )}

          {stage==="dropped" && (
            <div className="fade-in">
              <div className="import-row">
                <div className="fi">📄</div>
                <div style={{flex:1}}>
                  <div className="fn">maplewood_burials_1901-2025.csv</div>
                  <div className="fm">14,287 rows · 11 columns detected</div>
                </div>
                <span className="pill available"><i className="pd"></i>Ready</span>
              </div>
              <p className="muted" style={{fontSize:13.5,margin:"4px 0 14px"}}>We matched your columns automatically. Review and confirm:</p>
              <div className="colmap">
                {cols.map((c,i)=>(
                  <React.Fragment key={i}>
                    <div className="src">{c[0]}</div>
                    <div className="arr">→</div>
                    <div className="dst"><span className="chk">✓</span>{c[1]}</div>
                  </React.Fragment>
                ))}
              </div>
              <button className="btn primary" style={{width:"100%",justifyContent:"center"}} onClick={()=>setStage("importing")}>
                Import 14,287 records →
              </button>
            </div>
          )}

          {stage==="importing" && (
            <div className="fade-in" style={{padding:"6px 0 4px"}}>
              <div style={{textAlign:"center",marginBottom:18}}>
                <div style={{fontFamily:"var(--font-display)",fontSize:40,fontWeight:600,letterSpacing:"-0.02em"}}>{count.toLocaleString()}</div>
                <div className="muted" style={{fontSize:13}}>records imported &amp; geo-mapped</div>
              </div>
              <div className="progress"><i style={{width:`${pct}%`}}></i></div>
              <div className="prog-meta">
                <span>{["Reading rows…","Matching plots to map…","Linking families…","Flagging veterans…","Finishing…"][Math.min(4,Math.floor(pct/20))]}</span>
                <span>{pct}%</span>
              </div>
            </div>
          )}

          {stage==="done" && (
            <div className="fade-in center" style={{padding:"8px 0"}}>
              <div style={{width:60,height:60,borderRadius:"50%",background:"color-mix(in oklab,var(--ok) 16%,var(--paper))",color:"var(--ok)",display:"grid",placeItems:"center",fontSize:30,margin:"0 auto 14px"}}>✓</div>
              <h2 style={{fontSize:24}}>14,287 records, ready.</h2>
              <p className="muted" style={{maxWidth:380,margin:"8px auto 0",fontSize:14}}>Every name is searchable, mapped to your grounds, and 218 veterans are flagged for Memorial Day.</p>
              <div style={{display:"flex",gap:18,justifyContent:"center",margin:"18px 0"}}>
                <div><div style={{fontFamily:"var(--font-display)",fontWeight:600,fontSize:22}}>6</div><div className="muted mono" style={{fontSize:10}}>SECTIONS</div></div>
                <div><div style={{fontFamily:"var(--font-display)",fontWeight:600,fontSize:22}}>218</div><div className="muted mono" style={{fontSize:10}}>VETERANS</div></div>
                <div><div style={{fontFamily:"var(--font-display)",fontWeight:600,fontSize:22}}>0.4s</div><div className="muted mono" style={{fontSize:10}}>SEARCH</div></div>
              </div>
              <button className="btn primary" style={{width:"100%",justifyContent:"center"}} onClick={onComplete}>Open the grounds map →</button>
            </div>
          )}

          {stage==="concierge" && (
            <div className="fade-in">
              <p className="muted" style={{fontSize:14,marginBottom:16}}>You don't need clean data to start. Ship us whatever you have and our field team builds your archive — no spreadsheet required.</p>
              {[
                ["📦","Send your records","Mail your binders & index cards, or upload scans. Nothing gets thrown away."],
                ["📷","We photograph the grounds","Our crew geo-tags every headstone on site — even the unmarked ones."],
                ["🗂","We digitize & verify","Each name is transcribed, cross-checked, and matched to its plot on the map."],
                ["✓","Your archive goes live","You review and approve. Usually live within 2–4 weeks."],
              ].map((s,i)=>(
                <div key={i} style={{display:"flex",gap:13,padding:"11px 0",borderTop:i?"1px solid var(--line)":"none"}}>
                  <div style={{width:34,height:34,borderRadius:9,background:"var(--paper)",border:"1px solid var(--line)",display:"grid",placeItems:"center",flex:"none"}}>{s[0]}</div>
                  <div><b style={{fontSize:14}}>{s[1]}</b><p className="muted" style={{fontSize:13,marginTop:2}}>{s[2]}</p></div>
                </div>
              ))}
              <button className="btn gold" style={{width:"100%",justifyContent:"center",marginTop:16}}>Book a digitization call →</button>
              <button className="btn ghost" style={{width:"100%",justifyContent:"center",marginTop:9}} onClick={()=>setStage("choose")}>← Back</button>
            </div>
          )}

        </div>
      </div>
    </div>
  );
}

Object.assign(window, { ImportModal });