// quote-flow.jsx — multi-step booking form

function QuoteFlow({ lang, t, accent }) {
  const [step, setStep] = React.useState(0);
  const [selectedServices, setSelectedServices] = React.useState(["moving"]);
  const [size, setSize] = React.useState("2-zimmer");
  const [from, setFrom] = React.useState("");
  const [to, setTo] = React.useState("");
  const [date, setDate] = React.useState("");
  const [floor, setFloor] = React.useState("eg");
  const [name, setName] = React.useState("");
  const [phone, setPhone] = React.useState("");
  const [email, setEmail] = React.useState("");
  const [notes, setNotes] = React.useState("");
  const [done, setDone] = React.useState(false);

  const L = lang === "ar" ? {
    side_h: "اطلب عرض سعر",
    side_p: "أربع خطوات سريعة. بدنا نفهم شو في وضعك، وبعدها بنرجعلك بسعر ثابت خلال ٢٤ ساعة.",
    s1: "خدمتك", s2: "تفاصيل العقار", s3: "بيانات التواصل", s4: "الملخص",
    next: "التالي", back: "رجوع", submit: "أرسل الطلب",
    pick_services: "أي خدمات تحتاج؟", multi: "اختر واحدة أو أكثر",
    size_l: "حجم العقار", from_l: "العنوان الحالي", to_l: "العنوان الجديد",
    date_l: "تاريخ التنفيذ", floor_l: "الطابق",
    name_l: "الاسم الكامل", phone_l: "رقم الهاتف", email_l: "البريد الإلكتروني", notes_l: "ملاحظات إضافية",
    notes_p: "أي شي بدك تخبرنا فيه: درج ضيق، مصعد، حيوانات...",
    summary_services: "الخدمات", summary_size: "الحجم", summary_from: "من", summary_to: "إلى",
    summary_date: "التاريخ", summary_contact: "التواصل", summary_estimate: "تقدير أولي",
    sizes: [
      { id: "1-zimmer", b: "١", s: "غرفة" },
      { id: "2-zimmer", b: "٢-٣", s: "غرف" },
      { id: "4-zimmer", b: "٤-٥", s: "غرف" },
      { id: "house", b: "بيت", s: "كامل" }
    ],
    floors: [
      { id: "eg", b: "أرضي", s: "" },
      { id: "low", b: "١-٢", s: "طابق" },
      { id: "high", b: "٣+", s: "طابق" },
      { id: "lift", b: "مصعد", s: "" }
    ],
    done_h: "وصلنا طلبك! شكراً.",
    done_p: "رح نرجعلك خلال ٢٤ ساعة على واتساب بسعر ثابت. لأي شي مستعجل: 0177 5017060",
    new: "طلب جديد"
  } : {
    side_h: "Angebot anfragen",
    side_p: "Vier kurze Schritte. Wir verstehen Ihre Situation und melden uns innerhalb von 24 Stunden mit einem Festpreis.",
    s1: "Ihre Leistung", s2: "Objekt", s3: "Kontakt", s4: "Zusammenfassung",
    next: "Weiter", back: "Zurück", submit: "Anfrage senden",
    pick_services: "Welche Leistungen brauchen Sie?", multi: "Eine oder mehrere auswählen",
    size_l: "Größe des Objekts", from_l: "Aktuelle Adresse", to_l: "Neue Adresse",
    date_l: "Wunschtermin", floor_l: "Etage",
    name_l: "Vollständiger Name", phone_l: "Telefonnummer", email_l: "E-Mail", notes_l: "Anmerkungen",
    notes_p: "Was sollten wir noch wissen: enge Treppe, Aufzug, Haustiere...",
    summary_services: "Leistungen", summary_size: "Größe", summary_from: "Von", summary_to: "Nach",
    summary_date: "Termin", summary_contact: "Kontakt", summary_estimate: "Schätzpreis",
    sizes: [
      { id: "1-zimmer", b: "1", s: "Zimmer" },
      { id: "2-zimmer", b: "2-3", s: "Zimmer" },
      { id: "4-zimmer", b: "4-5", s: "Zimmer" },
      { id: "house", b: "Haus", s: "komplett" }
    ],
    floors: [
      { id: "eg", b: "EG", s: "" },
      { id: "low", b: "1-2.", s: "OG" },
      { id: "high", b: "3.+", s: "OG" },
      { id: "lift", b: "Aufzug", s: "" }
    ],
    done_h: "Anfrage erhalten. Danke!",
    done_p: "Wir melden uns innerhalb von 24 Stunden per WhatsApp mit einem Festpreis. Eilig? Rufen Sie an: 0177 5017060",
    new: "Neue Anfrage"
  };

  const toggleService = (id) => {
    setSelectedServices(prev => prev.includes(id) ? prev.filter(x => x !== id) : [...prev, id]);
  };

  // Rough estimate
  const estimate = React.useMemo(() => {
    const base = { moving: 180, assembly: 90, clearance: 250, dissolution: 450, waste: 120, cleaning_regular: 110, cleaning_handover: 160, storage: 80, packing: 110, garden: 90 };
    const sizeMul = { "1-zimmer": 0.6, "2-zimmer": 1, "4-zimmer": 1.7, "house": 2.4 }[size] || 1;
    const total = selectedServices.reduce((sum, s) => sum + (base[s] || 0), 0) * sizeMul;
    return Math.round(total / 10) * 10;
  }, [selectedServices, size]);

  const canNext = () => {
    if (step === 0) return selectedServices.length > 0;
    if (step === 1) return from.length > 1;
    if (step === 2) return name.length > 1 && phone.length > 4;
    return true;
  };

  const submit = () => {
    const svcNames = selectedServices.map(id => SERVICES.find(s => s.id === id).de.title).join(", ");
    const sizeLabel = L.sizes.find(s => s.id === size);
    const lines = [
      "Neue Anfrage — RAHmen Haushaltsservice",
      "",
      "Leistungen: " + svcNames,
      "Größe: " + sizeLabel.b + " " + sizeLabel.s,
      "Von: " + (from || "—") + (to ? "  →  Nach: " + to : ""),
      "Termin: " + (date || "flexibel"),
      "Name: " + (name || "—"),
      "Telefon: " + (phone || "—"),
      (email ? "E-Mail: " + email : ""),
      (notes ? "Anmerkungen: " + notes : ""),
      "Geschätzt: ~ " + estimate + " EUR"
    ].filter(Boolean);
    const msg = encodeURIComponent(lines.join("\n"));
    window.open("https://wa.me/491775017060?text=" + msg, "_blank");
    setDone(true);
  };
  const reset = () => { setDone(false); setStep(0); };

  const stepTitles = [L.s1, L.s2, L.s3, L.s4];

  return (
    <div className="quote">
      <div className="quote-grid">
        <div className="quote-side">
          <div className="eyebrow"><span className="dot"></span> {t.quote_head.num}</div>
          <h3 style={{marginTop: 20}}>{L.side_h}</h3>
          <p>{L.side_p}</p>
          <div className="quote-progress">
            {[0,1,2,3].map(i => (
              <span key={i} className={done ? "done" : (step === i ? "active" : (step > i ? "done" : ""))}></span>
            ))}
          </div>
          <div style={{marginTop: 24, fontSize: 13, color: "rgba(255,255,255,0.5)", fontFamily: "var(--font-display)", letterSpacing: "0.05em"}}>
            {done ? "✓" : `${step + 1} / 4`} · {done ? L.done_h : stepTitles[step]}
          </div>
        </div>

        <div className="quote-panel">
          {done ? (
            <div className="quote-done">
              <div className="quote-done-mark">
                <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><polyline points="20 6 9 17 4 12"/></svg>
              </div>
              <h4>{L.done_h}</h4>
              <p>{L.done_p}</p>
              <button className="quote-btn quote-btn-next" onClick={reset}>{L.new}</button>
            </div>
          ) : (
            <>
              <div className="quote-step-head">
                <h4>{stepTitles[step]}</h4>
                <span className="num">{String(step + 1).padStart(2, "0")} / 04</span>
              </div>

              {step === 0 && (
                <div className="quote-fields">
                  <div style={{fontSize: 13, color: "rgba(255,255,255,0.55)"}}>{L.multi}</div>
                  <div className="quote-services-grid">
                    {SERVICES.map(s => (
                      <button
                        key={s.id}
                        className={"quote-chip" + (selectedServices.includes(s.id) ? " selected" : "")}
                        onClick={() => toggleService(s.id)}
                      >
                        <span className="quote-chip-icon">{QUOTE_SERVICE_ICONS[s.id]}</span>
                        <span>{s[lang].title}</span>
                        <span className="quote-chip-check"></span>
                      </button>
                    ))}
                  </div>
                </div>
              )}

              {step === 1 && (
                <div className="quote-fields">
                  <div className="quote-field">
                    <label>{L.size_l}</label>
                    <div className="quote-radio-group">
                      {L.sizes.map(s => (
                        <button key={s.id}
                          className={"quote-radio" + (size === s.id ? " selected" : "")}
                          onClick={() => setSize(s.id)}>
                          <b>{s.b}</b>{s.s}
                        </button>
                      ))}
                    </div>
                  </div>
                  <div className="quote-row">
                    <div className="quote-field">
                      <label>{L.from_l}</label>
                      <input type="text" placeholder={lang === "ar" ? "مثلاً: زاربروكن، شارع..." : "z.B. Saarbrücken, Bahnhofstr."} value={from} onChange={e => setFrom(e.target.value)} />
                    </div>
                    <div className="quote-field">
                      <label>{L.to_l}</label>
                      <input type="text" placeholder={lang === "ar" ? "اختياري" : "Optional"} value={to} onChange={e => setTo(e.target.value)} />
                    </div>
                  </div>
                  <div className="quote-row">
                    <div className="quote-field">
                      <label>{L.date_l}</label>
                      <input type="date" value={date} onChange={e => setDate(e.target.value)} />
                    </div>
                    <div className="quote-field">
                      <label>{L.floor_l}</label>
                      <div className="quote-radio-group">
                        {L.floors.map(f => (
                          <button key={f.id}
                            className={"quote-radio" + (floor === f.id ? " selected" : "")}
                            onClick={() => setFloor(f.id)}>
                            <b>{f.b}</b>{f.s}
                          </button>
                        ))}
                      </div>
                    </div>
                  </div>
                </div>
              )}

              {step === 2 && (
                <div className="quote-fields">
                  <div className="quote-field">
                    <label>{L.name_l}</label>
                    <input type="text" placeholder={lang === "ar" ? "الاسم الكامل" : "Vor- und Nachname"} value={name} onChange={e => setName(e.target.value)} />
                  </div>
                  <div className="quote-row">
                    <div className="quote-field">
                      <label>{L.phone_l}</label>
                      <input type="tel" placeholder="+49 …" value={phone} onChange={e => setPhone(e.target.value)} />
                    </div>
                    <div className="quote-field">
                      <label>{L.email_l}</label>
                      <input type="email" placeholder="name@email.de" value={email} onChange={e => setEmail(e.target.value)} />
                    </div>
                  </div>
                  <div className="quote-field">
                    <label>{L.notes_l}</label>
                    <textarea rows={4} placeholder={L.notes_p} value={notes} onChange={e => setNotes(e.target.value)} />
                  </div>
                </div>
              )}

              {step === 3 && (
                <div className="quote-summary">
                  <div className="quote-summary-row">
                    <span>{L.summary_services}</span>
                    <span>{selectedServices.map(id => SERVICES.find(s => s.id === id)[lang].title).join(" · ")}</span>
                  </div>
                  <div className="quote-summary-row">
                    <span>{L.summary_size}</span>
                    <span>{L.sizes.find(s => s.id === size).b} {L.sizes.find(s => s.id === size).s}</span>
                  </div>
                  <div className="quote-summary-row">
                    <span>{L.summary_from}</span>
                    <span>{from || "—"} {to ? "→ " + to : ""}</span>
                  </div>
                  <div className="quote-summary-row">
                    <span>{L.summary_date}</span>
                    <span>{date || (lang === "ar" ? "مرن" : "Flexibel")}</span>
                  </div>
                  <div className="quote-summary-row">
                    <span>{L.summary_contact}</span>
                    <span>{name || "—"} · {phone || "—"}</span>
                  </div>
                  <div className="quote-summary-row total">
                    <span>{L.summary_estimate}</span>
                    <span className="total-val">~ {estimate} €</span>
                  </div>
                  <div style={{fontSize: 12, color: "rgba(255,255,255,0.4)", marginTop: 8}}>
                    {lang === "ar" ? "* تقدير أولي. السعر النهائي بعد المعاينة." : "* Vorläufige Schätzung. Festpreis nach Besichtigung."}
                  </div>
                </div>
              )}

              <div className="quote-actions">
                <button className="quote-btn quote-btn-back" disabled={step === 0} onClick={() => setStep(s => Math.max(0, s - 1))}>
                  ← {L.back}
                </button>
                {step < 3 ? (
                  <button className="quote-btn quote-btn-next" disabled={!canNext()} onClick={() => setStep(s => s + 1)}>
                    {L.next} →
                  </button>
                ) : (
                  <button className="quote-btn quote-btn-next" onClick={submit}>
                    {L.submit} →
                  </button>
                )}
              </div>
            </>
          )}
        </div>
      </div>
    </div>
  );
}

window.QuoteFlow = QuoteFlow;