/* Multi-step quote request form */
const { useState } = React;

function QuoteForm({ accent }) {
  const [step, setStep] = useState(0);
  const [data, setData] = useState({
    services: [],
    propertySize: "",
    timeline: "",
    name: "",
    email: "",
    phone: "",
    address: "",
    notes: "",
  });
  const [submitted, setSubmitted] = useState(false);

  const update = (k, v) => setData((d) => ({ ...d, [k]: v }));
  const toggleService = (s) =>
    setData((d) => ({
      ...d,
      services: d.services.includes(s)
        ? d.services.filter((x) => x !== s)
        : [...d.services, s],
    }));

  const steps = ["Service", "Property", "Contact", "Review"];
  const canAdvance = () => {
    if (step === 0) return data.services.length > 0;
    if (step === 1) return data.propertySize && data.timeline;
    if (step === 2) return data.name && (data.email || data.phone) && data.address;
    return true;
  };

  const services = [
    { id: "mow", label: "Lawn maintenance", note: "Weekly / bi-weekly mowing & edging" },
    { id: "design", label: "Landscape design", note: "Beds, plantings, full yard refresh" },
    { id: "stone", label: "Stone work", note: "Patios, walkways, retaining walls" },
    { id: "cleanup", label: "Seasonal cleanup", note: "Leaves, trimming, mulch refresh" },
    { id: "irrigation", label: "Irrigation & sod", note: "Sprinkler repair, sod install" },
    { id: "other", label: "Something else", note: "Tell us in the notes" },
  ];

  if (submitted) {
    return (
      <div className="qf-card qf-success">
        <div className="qf-check" style={{ background: accent }}>
          <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="white" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
            <polyline points="20 6 9 17 4 12" />
          </svg>
        </div>
        <h3 className="qf-success-title">Thanks, {data.name.split(" ")[0] || "neighbor"}.</h3>
        <p className="qf-success-body">
          We got your request and will reach out within one business day to schedule a walk-through.
          Most Wylie quotes come back the same week.
        </p>
        <button
          className="qf-link"
          onClick={() => {
            setSubmitted(false);
            setStep(0);
            setData({ services: [], propertySize: "", timeline: "", name: "", email: "", phone: "", address: "", notes: "" });
          }}
        >
          Submit another request →
        </button>
      </div>
    );
  }

  return (
    <div className="qf-card">
      {/* Stepper */}
      <div className="qf-stepper">
        {steps.map((label, i) => (
          <div key={label} className={`qf-step ${i === step ? "is-active" : ""} ${i < step ? "is-done" : ""}`}>
            <div className="qf-step-dot" style={i <= step ? { background: accent, borderColor: accent, color: "white" } : {}}>
              {i < step ? (
                <svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
                  <polyline points="20 6 9 17 4 12" />
                </svg>
              ) : (
                i + 1
              )}
            </div>
            <div className="qf-step-label">{label}</div>
            {i < steps.length - 1 && <div className="qf-step-line" />}
          </div>
        ))}
      </div>

      <div className="qf-body">
        {step === 0 && (
          <div className="qf-pane">
            <h3 className="qf-pane-title">What can we help with?</h3>
            <p className="qf-pane-sub">Pick everything that applies — most projects mix a couple.</p>
            <div className="qf-services">
              {services.map((s) => {
                const on = data.services.includes(s.id);
                return (
                  <button
                    key={s.id}
                    type="button"
                    className={`qf-service ${on ? "is-on" : ""}`}
                    onClick={() => toggleService(s.id)}
                    style={on ? { borderColor: accent, background: "white" } : {}}
                  >
                    <div className="qf-service-check" style={on ? { background: accent, borderColor: accent } : {}}>
                      {on && (
                        <svg viewBox="0 0 24 24" width="11" height="11" fill="none" stroke="white" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
                          <polyline points="20 6 9 17 4 12" />
                        </svg>
                      )}
                    </div>
                    <div>
                      <div className="qf-service-label">{s.label}</div>
                      <div className="qf-service-note">{s.note}</div>
                    </div>
                  </button>
                );
              })}
            </div>
          </div>
        )}

        {step === 1 && (
          <div className="qf-pane">
            <h3 className="qf-pane-title">Tell us about the property.</h3>
            <p className="qf-pane-sub">Rough numbers are fine — we'll confirm during the walk-through.</p>

            <label className="qf-field-label">Property size</label>
            <div className="qf-pill-row">
              {["Under 5,000 sq ft", "5–10,000 sq ft", "10–20,000 sq ft", "Half-acre +", "Commercial"].map((p) => (
                <button
                  key={p}
                  type="button"
                  className={`qf-pill ${data.propertySize === p ? "is-on" : ""}`}
                  onClick={() => update("propertySize", p)}
                  style={data.propertySize === p ? { background: accent, borderColor: accent, color: "white" } : {}}
                >
                  {p}
                </button>
              ))}
            </div>

            <label className="qf-field-label" style={{ marginTop: 24 }}>Timeline</label>
            <div className="qf-pill-row">
              {["ASAP", "Within a month", "1–3 months", "Just exploring"].map((p) => (
                <button
                  key={p}
                  type="button"
                  className={`qf-pill ${data.timeline === p ? "is-on" : ""}`}
                  onClick={() => update("timeline", p)}
                  style={data.timeline === p ? { background: accent, borderColor: accent, color: "white" } : {}}
                >
                  {p}
                </button>
              ))}
            </div>

            <label className="qf-field-label" style={{ marginTop: 24 }}>Notes (optional)</label>
            <textarea
              className="qf-input qf-textarea"
              placeholder="Anything specific — e.g. 'flagstone path from driveway to back patio, ~30 ft'"
              value={data.notes}
              onChange={(e) => update("notes", e.target.value)}
            />
          </div>
        )}

        {step === 2 && (
          <div className="qf-pane">
            <h3 className="qf-pane-title">How should we reach you?</h3>
            <p className="qf-pane-sub">We'll only use this to schedule the walk-through.</p>

            <div className="qf-grid-2">
              <div>
                <label className="qf-field-label">Name</label>
                <input className="qf-input" placeholder="Jordan Hayes" value={data.name} onChange={(e) => update("name", e.target.value)} />
              </div>
              <div>
                <label className="qf-field-label">Property address</label>
                <input className="qf-input" placeholder="Street, Wylie TX" value={data.address} onChange={(e) => update("address", e.target.value)} />
              </div>
              <div>
                <label className="qf-field-label">Email</label>
                <input className="qf-input" type="email" placeholder="you@email.com" value={data.email} onChange={(e) => update("email", e.target.value)} />
              </div>
              <div>
                <label className="qf-field-label">Phone</label>
                <input className="qf-input" type="tel" placeholder="(972) 555-0142" value={data.phone} onChange={(e) => update("phone", e.target.value)} />
              </div>
            </div>
            <p className="qf-pane-sub" style={{ marginTop: 16, fontSize: 13 }}>Email or phone is fine — whichever you prefer.</p>
          </div>
        )}

        {step === 3 && (
          <div className="qf-pane">
            <h3 className="qf-pane-title">Look right?</h3>
            <p className="qf-pane-sub">Quick review before you send it our way.</p>
            <dl className="qf-review">
              <Row k="Services" v={data.services.map((id) => services.find((s) => s.id === id)?.label).join(", ")} />
              <Row k="Property size" v={data.propertySize} />
              <Row k="Timeline" v={data.timeline} />
              <Row k="Name" v={data.name} />
              <Row k="Address" v={data.address} />
              <Row k="Email" v={data.email || "—"} />
              <Row k="Phone" v={data.phone || "—"} />
              {data.notes && <Row k="Notes" v={data.notes} />}
            </dl>
          </div>
        )}
      </div>

      <div className="qf-footer">
        <button
          type="button"
          className="qf-btn qf-btn-ghost"
          onClick={() => setStep((s) => Math.max(0, s - 1))}
          disabled={step === 0}
        >
          Back
        </button>
        {step < 3 ? (
          <button
            type="button"
            className="qf-btn qf-btn-primary"
            disabled={!canAdvance()}
            onClick={() => setStep((s) => s + 1)}
            style={{ background: accent, borderColor: accent }}
          >
            Continue →
          </button>
        ) : (
          <button
            type="button"
            className="qf-btn qf-btn-primary"
            onClick={() => setSubmitted(true)}
            style={{ background: accent, borderColor: accent }}
          >
            Send request
          </button>
        )}
      </div>
    </div>
  );
}

function Row({ k, v }) {
  return (
    <div className="qf-review-row">
      <dt>{k}</dt>
      <dd>{v || "—"}</dd>
    </div>
  );
}

window.QuoteForm = QuoteForm;