/* global React */

const projectTypes = [
  { id: "deck", title: "Deck or patio", desc: "New build, expansion, or rebuild" },
  { id: "roof", title: "Roofing", desc: "Re-roof, repair, or leak" },
  { id: "concrete", title: "Concrete", desc: "Driveway, slab, or foundation" },
  { id: "remodel", title: "Remodel / addition", desc: "Kitchen, bath, or whole-home" },
  { id: "handyman", title: "Handyman / small job", desc: "Honey-do list, repairs" },
  { id: "other", title: "Something else", desc: "Tell us what you've got" },
];

const timelines = [
  { id: "asap", title: "As soon as possible", desc: "Storm damage or emergency" },
  { id: "1-3", title: "1–3 months", desc: "Planning, ready to schedule" },
  { id: "3-6", title: "3–6 months", desc: "Spring or summer project" },
  { id: "browsing", title: "Just exploring", desc: "Gathering ideas and pricing" },
];

const Quote = () => {
  const [step, setStep] = React.useState(0);
  const [data, setData] = React.useState({
    type: null, timeline: null,
    name: "", email: "", phone: "", town: "",
    desc: "",
  });
  const [err, setErr] = React.useState("");
  const [done, setDone] = React.useState(false);

  const update = (k, v) => { setData(d => ({...d, [k]: v})); setErr(""); };

  const validateStep = () => {
    if (step === 0 && !data.type) return "Pick a project type to continue.";
    if (step === 1 && !data.timeline) return "Let us know your timeline.";
    if (step === 2) {
      if (!data.name.trim()) return "We'll need your name.";
      if (!data.phone.trim() && !data.email.trim()) return "A phone or email — whichever you prefer.";
    }
    return "";
  };

  const next = () => {
    const e = validateStep();
    if (e) { setErr(e); return; }
    if (step === 3) {
      setDone(true);
      return;
    }
    setStep(step + 1);
  };

  const back = () => { setStep(s => Math.max(0, s - 1)); setErr(""); };

  const stepLabels = ["Project type", "Timeline", "Your info", "Review"];
  const progressPct = done ? 100 : ((step + 1) / 4) * 100;

  return (
    <section className="section quote" id="quote" data-screen-label="08 Quote">
      <div className="container">
        <div className="quote-grid">
          <div className="quote-side">
            <div className="eyebrow">Free estimate</div>
            <h2 style={{marginTop: "16px"}}>Tell us about your project.</h2>
            <p className="lede" style={{marginTop: "16px"}}>
              We'll give you a call back within one business day — usually faster.
              Estimates are free and there's no pressure.
            </p>

            <div className="info-block">
              <div className="lbl">Call us directly</div>
              <div className="val big">(209) 728‑1234</div>
            </div>
            <div className="info-block">
              <div className="lbl">Hours</div>
              <div className="val">Mon–Fri · 7am–5pm</div>
              <div className="val" style={{fontSize: "14px", color: "rgba(244,236,221,0.7)"}}>Saturday by appointment</div>
            </div>
            <div className="info-block">
              <div className="lbl">Shop</div>
              <div className="val">Big Trees Road</div>
              <div className="val" style={{fontSize: "14px", color: "rgba(244,236,221,0.7)"}}>Murphys, CA 95247</div>
            </div>
            <div className="info-block">
              <div className="lbl">License</div>
              <div className="val" style={{fontSize: "14px"}}>CSLB #487201 · Bonded · Insured</div>
            </div>
          </div>

          <div className="form-card">
            {done ? (
              <div className="form-success">
                <div className="icon">✓</div>
                <h3>Got it, {data.name.split(" ")[0]}.</h3>
                <p>
                  We've received your request. Tom or Cole will give you a call within
                  one business day. If it's urgent, you can ring us at (209) 728‑1234.
                </p>
              </div>
            ) : (
              <>
                <div className="form-step-meta">
                  <span>Step {step + 1} of 4</span>
                  <span>{stepLabels[step]}</span>
                </div>
                <div className="form-progress"><div className="bar" style={{width: `${progressPct}%`}}></div></div>

                {step === 0 && (
                  <>
                    <h3>What kind of project?</h3>
                    <p className="sub">Pick the closest match — we'll work out details on the call.</p>
                    <div className="choice-grid">
                      {projectTypes.map(p => (
                        <button key={p.id}
                          className={`choice ${data.type === p.id ? "selected" : ""}`}
                          onClick={() => update("type", p.id)}
                          type="button">
                          <span className="ttl">{p.title}</span>
                          <span className="desc">{p.desc}</span>
                        </button>
                      ))}
                    </div>
                  </>
                )}

                {step === 1 && (
                  <>
                    <h3>When are you hoping to start?</h3>
                    <p className="sub">Honest answers help us schedule you fairly.</p>
                    <div className="choice-grid">
                      {timelines.map(t => (
                        <button key={t.id}
                          className={`choice ${data.timeline === t.id ? "selected" : ""}`}
                          onClick={() => update("timeline", t.id)}
                          type="button">
                          <span className="ttl">{t.title}</span>
                          <span className="desc">{t.desc}</span>
                        </button>
                      ))}
                    </div>
                  </>
                )}

                {step === 2 && (
                  <>
                    <h3>How can we reach you?</h3>
                    <p className="sub">We'll never share this. Phone or email — your choice.</p>
                    <div className="field">
                      <label>Your name</label>
                      <input type="text" value={data.name} onChange={e => update("name", e.target.value)} placeholder="First and last" />
                    </div>
                    <div className="field-row">
                      <div className="field">
                        <label>Phone</label>
                        <input type="tel" value={data.phone} onChange={e => update("phone", e.target.value)} placeholder="(209) ..." />
                      </div>
                      <div className="field">
                        <label>Email</label>
                        <input type="email" value={data.email} onChange={e => update("email", e.target.value)} placeholder="you@example.com" />
                      </div>
                    </div>
                    <div className="field">
                      <label>Town</label>
                      <input type="text" value={data.town} onChange={e => update("town", e.target.value)} placeholder="Murphys, Arnold, Angels Camp..." />
                    </div>
                    <div className="field">
                      <label>Anything else? (optional)</label>
                      <textarea value={data.desc} onChange={e => update("desc", e.target.value)} placeholder="Square footage, materials you're considering, photos you can send later..." />
                    </div>
                  </>
                )}

                {step === 3 && (
                  <>
                    <h3>Looks good?</h3>
                    <p className="sub">Quick review before we send this off.</p>
                    <div style={{display: "grid", gap: "16px", padding: "20px", background: "var(--cream)", border: "1px solid var(--rule)"}}>
                      <Row label="Project" val={projectTypes.find(p => p.id === data.type)?.title || "—"} />
                      <Row label="Timeline" val={timelines.find(t => t.id === data.timeline)?.title || "—"} />
                      <Row label="Name" val={data.name || "—"} />
                      <Row label="Phone" val={data.phone || "—"} />
                      <Row label="Email" val={data.email || "—"} />
                      <Row label="Town" val={data.town || "—"} />
                      {data.desc && <Row label="Notes" val={data.desc} />}
                    </div>
                  </>
                )}

                <div className="form-nav">
                  <div>
                    {step > 0 && <button className="btn btn-ghost" onClick={back} type="button">← Back</button>}
                    {err && <span className="err" style={{marginLeft: step > 0 ? 16 : 0}}>{err}</span>}
                  </div>
                  <button className="btn btn-primary" onClick={next} type="button">
                    {step === 3 ? "Send it" : "Continue"}
                    <svg className="arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
                      <path d="M5 12h14M13 6l6 6-6 6" />
                    </svg>
                  </button>
                </div>
              </>
            )}
          </div>
        </div>
      </div>
    </section>
  );
};

const Row = ({ label, val }) => (
  <div style={{display: "grid", gridTemplateColumns: "100px 1fr", gap: "16px", alignItems: "baseline"}}>
    <div style={{fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--ink-2)"}}>{label}</div>
    <div style={{fontFamily: "var(--serif)", fontSize: 16}}>{val}</div>
  </div>
);

window.Quote = Quote;