// SF Logistics — v2 Apply (luxury editorial multi-step)

function ApplyFlow({ setPage }) {
  const [step, setStep] = React.useState(0);
  const [data, setData] = React.useState({
    applicantType: "",
    firstName: "", lastName: "", email: "", phone: "",
    city: "", state: "", dob: "", ssn: "",
    cdlClass: "Class A", licenseNum: "", licenseState: "", licenseExpiry: "",
    medCardExpiry: "", endorsements: [],
    yearsOTR: "", accidents: "0",
    hasTruck: "",
    truckYear: "", truckMake: "", truckModel: "", truckVin: "",
    trailerType: "", trailerYear: "",
    interest: "",
    docs: { cdlFront: false, cdlBack: false, medical: false, ssn: false, coi: false }
  });

  const update = (k, v) => setData(d => ({ ...d, [k]: v }));
  const toggleEndorse = (e) => setData(d => ({ ...d, endorsements: d.endorsements.includes(e) ? d.endorsements.filter(x=>x!==e) : [...d.endorsements, e] }));
  const setDoc = (k) => setData(d => ({ ...d, docs: { ...d.docs, [k]: true } }));

  const steps = [
    { num: "01", lbl: "Type" },
    { num: "02", lbl: "Personal" },
    { num: "03", lbl: "License" },
    { num: "04", lbl: "Experience" },
    { num: "05", lbl: "Equipment" },
    { num: "06", lbl: "Docs" },
    { num: "07", lbl: "Review" },
  ];

  const persistApplication = () => {
    const yearMap = { "< 1": 0, "1–2": 2, "3–5": 4, "6–9": 7, "10–14": 12, "15+": 15 };
    const typeMap = {
      "owner-operator": "Owner-Operator",
      "company": "Company Driver",
      "lease-purchase": "Lease Purchase",
      "dispatch": "Dispatch Only",
    };
    const interestMap = { "lease": "Lease", "lease-purchase": "Lease-purchase", "company": "Company truck" };
    const fullName = `${data.firstName} ${data.lastName}`.trim() || "Applicant";
    const truckStr = data.hasTruck === "yes"
      ? `${data.truckYear || ""} ${data.truckMake || ""} ${data.truckModel || ""}`.replace(/\s+/g, " ").trim() || "—"
      : null;
    const driverLead = {
      id: `DRV-${Math.floor(2200 + Math.random() * 7800)}`,
      name: fullName,
      type: typeMap[data.applicantType] || "Owner-Operator",
      city: data.city || "—",
      state: data.state || "—",
      phone: data.phone || "—",
      email: data.email || "—",
      years: yearMap[data.yearsOTR] ?? 0,
      accidents: parseInt(data.accidents, 10) || 0,
      cdl: data.cdlClass || "Class A",
      endorsements: (data.endorsements || []).filter(e => e !== "None"),
      hasTruck: data.hasTruck === "yes",
      truck: truckStr,
      trailer: data.hasTruck === "yes" ? data.trailerType : null,
      leaseInterest: data.hasTruck === "no" ? (interestMap[data.interest] || null) : null,
      appliedAt: new Date().toLocaleString("en-US", { month: "short", day: "numeric", year: "numeric", hour: "numeric", minute: "2-digit" }).replace(",", " ·"),
      status: "new",
      phase: "applied",
      isLead: true,
      submittedAt: Date.now(),
    };
    try {
      const stored = JSON.parse(localStorage.getItem("SFL_LEADS_DRIVERS") || "[]");
      stored.unshift(driverLead);
      localStorage.setItem("SFL_LEADS_DRIVERS", JSON.stringify(stored));
    } catch (e) {}
  };

  const next = () => {
    if (step === steps.length - 1) persistApplication();
    setStep(s => Math.min(s + 1, steps.length));
  };
  const prev = () => setStep(s => Math.max(s - 1, 0));
  const canNext = (() => {
    if (step === 0) return !!data.applicantType;
    if (step === 1) return data.firstName && data.lastName && data.email && data.phone && data.city && data.state;
    if (step === 4) return !!data.hasTruck;
    return true;
  })();

  if (step >= steps.length) {
    return (
      <div className="apply-shell">
        <div className="apply-card success">
          <div className="success-mark">✓</div>
          <div className="ref">REF #SFL-{Math.floor(Math.random() * 90000 + 10000)} · MAY 8, 2026</div>
          <h1>You're in <span className="it">the queue.</span></h1>
          <p>Thanks {data.firstName || "driver"}. Recruiting will call you at <strong>{data.phone || "the number you gave"}</strong> within 24 hours. SAP / clean-MVR review takes 1–2 business days.</p>
          <div style={{display: "flex", gap: 10, marginTop: 24, flexWrap: "wrap", justifyContent: "center"}}>
            <button className="btn" onClick={() => { setStep(0); setPage("landing"); }}>← Back to home</button>
            <button className="btn btn-primary" onClick={() => setPage("crm")}>See it land in the console →</button>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="apply-shell">
      <div className="apply-head">
        <div className="eyebrow">DRIVER APPLICATION</div>
        <h1>Get on <span className="it">a</span> truck.</h1>
      </div>

      <div className="apply-progress">
        {steps.map((s, i) => (
          <button key={s.num} className={`apply-step-pip ${i === step ? "active" : ""} ${i < step ? "done" : ""}`} onClick={() => i < step && setStep(i)} type="button">
            <span className="bar"></span>
            <span className="n">№ {s.num}</span>
            <span className="lbl">{s.lbl}</span>
          </button>
        ))}
      </div>

      <div className="apply-card">
        <div className="apply-step-head">
          <div>
            <div className="num">STEP {steps[step].num} OF 07</div>
            <h2>{["What kind of driver?", "Who are you?", "License + Medical", "Experience", "Your equipment", "Upload documents", "Review + submit"][step]}</h2>
          </div>
          <p>{[
            "Pick the option that fits. We hire all four types.",
            "Standard contact info. The SSN is just last 4 — we use it to pull your MVR.",
            "We need an unexpired CDL and a current DOT medical card.",
            "Years OTR and DOT-recordable accidents. Be honest — we verify.",
            "Tell us what you drive. No truck? We've got lease and company options.",
            "Upload what you can. Email anything missing to safety later.",
            "Last look. Anything wrong, click back. Otherwise, submit."
          ][step]}</p>
        </div>

        {step === 0 && (
          <div className="choice-grid">
            {[
              { k: "owner-operator", t: "Owner-Operator", b: "You own your truck. We dispatch you on lanes — 85% to truck, weekly settlements." },
              { k: "company", t: "Company Driver", b: "Drive our equipment. CPM pay or salary. Full benefits after 90 days." },
              { k: "lease-purchase", t: "Lease Purchase", b: "Path to ownership. Lease one of our trucks with weekly payments toward equity." },
              { k: "dispatch", t: "Dispatch Only", b: "You have your own MC. We find loads and handle paperwork — flat fee or %." },
            ].map((c, i) => (
              <button key={c.k} className={`choice ${data.applicantType === c.k ? "active" : ""}`} onClick={() => update("applicantType", c.k)} type="button">
                <span className="ch-num">№ 0{i+1}</span>
                <span className="ch-head">{c.t}</span>
                <span className="ch-body">{c.b}</span>
              </button>
            ))}
          </div>
        )}

        {step === 1 && (
          <div className="apply-grid">
            <label className="field"><span className="lbl">First name</span><input value={data.firstName} onChange={e => update("firstName", e.target.value)} placeholder="Marcus" /></label>
            <label className="field"><span className="lbl">Last name</span><input value={data.lastName} onChange={e => update("lastName", e.target.value)} placeholder="Delgado" /></label>
            <label className="field"><span className="lbl">Email</span><input type="email" value={data.email} onChange={e => update("email", e.target.value)} placeholder="m.delgado@gmail.com" /></label>
            <label className="field"><span className="lbl">Phone</span><input value={data.phone} onChange={e => update("phone", e.target.value)} placeholder="(347) 555-0192" /></label>
            <label className="field"><span className="lbl">City</span><input value={data.city} onChange={e => update("city", e.target.value)} placeholder="Brooklyn" /></label>
            <label className="field"><span className="lbl">State</span>
              <select value={data.state} onChange={e => update("state", e.target.value)}>
                <option value="">Select…</option>
                {["NY","NJ","PA","CT","MA","FL","GA","TX","CA","IL","OH","NC","VA","Other"].map(s => <option key={s}>{s}</option>)}
              </select>
            </label>
            <label className="field"><span className="lbl">Date of birth</span><input type="date" value={data.dob} onChange={e => update("dob", e.target.value)} /></label>
            <label className="field"><span className="lbl">SSN — last 4 only</span><input maxLength={4} value={data.ssn} onChange={e => update("ssn", e.target.value)} placeholder="••••" /></label>
          </div>
        )}

        {step === 2 && (
          <div className="apply-grid">
            <label className="field"><span className="lbl">CDL Class</span>
              <select value={data.cdlClass} onChange={e => update("cdlClass", e.target.value)}>
                <option>Class A</option><option>Class B</option><option>Class C</option>
              </select>
            </label>
            <label className="field"><span className="lbl">License number</span><input value={data.licenseNum} onChange={e => update("licenseNum", e.target.value)} placeholder="NY-12345678" /></label>
            <label className="field"><span className="lbl">License state</span>
              <select value={data.licenseState} onChange={e => update("licenseState", e.target.value)}>
                <option value="">Select…</option>
                {["NY","NJ","PA","CT","MA","FL","GA","TX","CA","IL","OH","NC","VA","Other"].map(s => <option key={s}>{s}</option>)}
              </select>
            </label>
            <label className="field"><span className="lbl">License expiry</span><input type="date" value={data.licenseExpiry} onChange={e => update("licenseExpiry", e.target.value)} /></label>
            <label className="field span2"><span className="lbl">DOT medical card expiry</span><input type="date" value={data.medCardExpiry} onChange={e => update("medCardExpiry", e.target.value)} /></label>
            <div className="span2">
              <span className="lbl" style={{fontFamily:"var(--font-mono)", fontSize:10.5, color:"var(--text-dark-mute)", letterSpacing:"0.2em", textTransform:"uppercase", fontWeight:600, display:"block", marginBottom:10}}>Endorsements (select all that apply)</span>
              <div className="endorse-grid">
                {["HAZMAT","Tanker","Doubles / Triples","TWIC","Passenger","School Bus","Air Brake","None"].map(e => (
                  <button key={e} type="button" className={`tag ${data.endorsements.includes(e) ? "active" : ""}`} onClick={() => toggleEndorse(e)}>{e}</button>
                ))}
              </div>
            </div>
          </div>
        )}

        {step === 3 && (
          <div className="apply-grid cols-3">
            <div className="span3">
              <span className="lbl" style={{fontFamily:"var(--font-mono)", fontSize:10.5, color:"var(--text-dark-mute)", letterSpacing:"0.2em", textTransform:"uppercase", fontWeight:600, display:"block", marginBottom:10}}>Years of OTR experience</span>
              <div className="endorse-grid cols-6">
                {["< 1","1–2","3–5","6–9","10–14","15+"].map(y => (
                  <button key={y} type="button" className={`tag ${data.yearsOTR === y ? "active" : ""}`} onClick={() => update("yearsOTR", y)}>{y}</button>
                ))}
              </div>
            </div>
            <div className="span3">
              <span className="lbl" style={{fontFamily:"var(--font-mono)", fontSize:10.5, color:"var(--text-dark-mute)", letterSpacing:"0.2em", textTransform:"uppercase", fontWeight:600, display:"block", marginBottom:10}}>DOT-recordable accidents (last 3 years)</span>
              <div className="endorse-grid cols-5">
                {["0","1","2","3","4+"].map(a => (
                  <button key={a} type="button" className={`tag ${data.accidents === a ? "active" : ""}`} onClick={() => update("accidents", a)}>{a}</button>
                ))}
              </div>
            </div>
            <label className="field span3"><span className="lbl">Notes for safety dept (optional)</span><textarea rows={3} placeholder="SAP status, recent moves, anything we should know."></textarea></label>
          </div>
        )}

        {step === 4 && (
          <div>
            <div className="choice-grid cols-2">
              <button type="button" className={`choice ${data.hasTruck === "yes" ? "active" : ""}`} onClick={() => update("hasTruck", "yes")}>
                <span className="ch-num">№ 01</span>
                <span className="ch-head">Yes — I have a truck</span>
                <span className="ch-body">Owner-operator with equipment. Tell us about it.</span>
              </button>
              <button type="button" className={`choice ${data.hasTruck === "no" ? "active" : ""}`} onClick={() => update("hasTruck", "no")}>
                <span className="ch-num">№ 02</span>
                <span className="ch-head">No — I need a truck</span>
                <span className="ch-body">Lease-purchase or company truck options.</span>
              </button>
            </div>

            {data.hasTruck === "yes" && (
              <div className="apply-grid cols-3" style={{marginTop: 28}}>
                <label className="field"><span className="lbl">Truck year</span><input value={data.truckYear} onChange={e => update("truckYear", e.target.value)} placeholder="2022" /></label>
                <label className="field"><span className="lbl">Make</span>
                  <select value={data.truckMake} onChange={e => update("truckMake", e.target.value)}>
                    <option value="">Select…</option>
                    <option>Freightliner</option><option>Peterbilt</option><option>Kenworth</option><option>Volvo</option><option>Mack</option><option>International</option><option>Western Star</option><option>Other</option>
                  </select>
                </label>
                <label className="field"><span className="lbl">Model</span><input value={data.truckModel} onChange={e => update("truckModel", e.target.value)} placeholder="Cascadia" /></label>
                <label className="field span2"><span className="lbl">VIN</span><input value={data.truckVin} onChange={e => update("truckVin", e.target.value)} placeholder="1FUJGLDR4FLGN1234" /></label>
                <label className="field"><span className="lbl">Trailer year</span><input value={data.trailerYear} onChange={e => update("trailerYear", e.target.value)} placeholder="2020" /></label>
                <div className="span3">
                  <span className="lbl" style={{fontFamily:"var(--font-mono)", fontSize:10.5, color:"var(--text-dark-mute)", letterSpacing:"0.2em", textTransform:"uppercase", fontWeight:600, display:"block", marginBottom:10}}>Trailer type</span>
                  <div className="endorse-grid">
                    {window.SFL_DATA.equipment.map(t => (
                      <button key={t} type="button" className={`tag ${data.trailerType === t ? "active" : ""}`} onClick={() => update("trailerType", t)}>{t}</button>
                    ))}
                  </div>
                </div>
              </div>
            )}

            {data.hasTruck === "no" && (
              <div style={{marginTop: 28}}>
                <span className="lbl" style={{fontFamily:"var(--font-mono)", fontSize:10.5, color:"var(--text-dark-mute)", letterSpacing:"0.2em", textTransform:"uppercase", fontWeight:600, display:"block", marginBottom:14}}>What are you interested in?</span>
                <div className="choice-grid cols-3">
                  {[
                    { k: "lease", t: "Lease", b: "Weekly lease, no path to ownership. Fixed weekly cost." },
                    { k: "lease-purchase", t: "Lease-Purchase", b: "Weekly payment with equity built in. Truck is yours at end of term." },
                    { k: "company", t: "Company Truck", b: "Drive our equipment. We pay maintenance, fuel, insurance." },
                  ].map((c, i) => (
                    <button key={c.k} type="button" className={`choice ${data.interest === c.k ? "active" : ""}`} onClick={() => update("interest", c.k)}>
                      <span className="ch-num">№ 0{i+1}</span>
                      <span className="ch-head">{c.t}</span>
                      <span className="ch-body">{c.b}</span>
                    </button>
                  ))}
                </div>
              </div>
            )}
          </div>
        )}

        {step === 5 && (
          <div>
            <div className="upload-grid">
              {[
                { k: "cdlFront", t: "CDL — Front", h: "JPG / PNG / PDF · max 10MB" },
                { k: "cdlBack", t: "CDL — Back", h: "JPG / PNG / PDF · max 10MB" },
                { k: "medical", t: "DOT Medical Card", h: "JPG / PNG / PDF · max 10MB" },
                { k: "ssn", t: "Social Security Card", h: "Encrypted · JPG / PNG / PDF" },
                { k: "coi", t: "Insurance / COI", h: "Owner-ops only · PDF · 10MB" },
              ].map(u => (
                <div key={u.k} className={`upload ${data.docs[u.k] ? "uploaded" : ""}`} onClick={() => setDoc(u.k)}>
                  {data.docs[u.k] && <span className="check">✓</span>}
                  <span className="u-name">{u.t}</span>
                  <span className="u-state">{data.docs[u.k] ? `${u.k}-${Math.floor(Math.random()*900+100)}.pdf` : "Click to upload"}</span>
                  <span className="u-meta">{u.h}</span>
                </div>
              ))}
            </div>
            <p style={{color:"var(--text-dark-mute)", fontSize:13, marginTop:18, lineHeight:1.6}}>
              You can also email documents to <strong style={{color:"var(--text-dark)"}}>sflogisticsincsafety@gmail.com</strong> later. Don't let missing paperwork stop you from finishing the application.
            </p>
          </div>
        )}

        {step === 6 && (
          <div className="review-grid">
            {[
              ["Type", data.applicantType || "—"],
              ["Name", `${data.firstName} ${data.lastName}`.trim() || "—"],
              ["Contact", `${data.email || "—"} · ${data.phone || "—"}`],
              ["Location", `${data.city || "—"}, ${data.state || "—"}`],
              ["CDL", `${data.cdlClass} · ${data.licenseState || "—"} · exp ${data.licenseExpiry || "—"}`],
              ["Medical card", `Exp ${data.medCardExpiry || "—"}`],
              ["Endorsements", data.endorsements.length ? data.endorsements.join(", ") : "None"],
              ["Experience", `${data.yearsOTR || "—"} yrs · ${data.accidents} accidents`],
              ["Equipment", data.hasTruck === "yes" ? `${data.truckYear || "—"} ${data.truckMake || ""} ${data.truckModel || ""} · ${data.trailerType || "—"}` : `No truck · ${data.interest || "—"}`],
              ["Documents", `${Object.values(data.docs).filter(Boolean).length} of 5 uploaded`],
            ].map(([k,v]) => (
              <div className="review-row" key={k}>
                <span className="k">{k}</span>
                <span className="v">{v}</span>
              </div>
            ))}
          </div>
        )}

        <div className="apply-actions">
          <button type="button" className="btn btn-ghost" onClick={() => step === 0 ? setPage("landing") : prev()}>← {step === 0 ? "Cancel" : "Back"}</button>
          <span className="step-meta">STEP {step + 1} OF {steps.length}</span>
          <button type="button" className="btn btn-primary" onClick={next} disabled={!canNext}>
            {step === steps.length - 1 ? "Submit application →" : "Continue →"}
          </button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { ApplyFlow });