function QuoteForm() {
  const { useState } = React;
  const [step, setStep] = useState(1);
  const [service, setService] = useState("Hardscape");
  const [zip, setZip] = useState("");
  const [scope, setScope] = useState("");
  const total = 3;
  const next = () => setStep(s => Math.min(total, s + 1));
  const back = () => setStep(s => Math.max(1, s - 1));

  return (
    <section id="quote" style={{background: "var(--ink-900)", padding: "96px 32px", position: "relative", overflow: "hidden"}}>
      <div style={{position: "absolute", inset: 0, opacity: 0.04, backgroundImage: "url(../../assets/illustrations/paver-texture.svg)", backgroundSize: "200px"}}/>
      <div style={{position: "relative", maxWidth: 1100, margin: "0 auto", display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: 64, alignItems: "center"}}>
        <div style={{color: "var(--white)"}}>
          <span className="eyebrow" style={{color: "#9FC7AE"}}>Free estimate</span>
          <h2 style={{fontFamily: "var(--font-display)", fontSize: 44, fontWeight: 800, letterSpacing: "-0.02em", lineHeight: 1.02, marginTop: 12, color: "var(--white)", textTransform: "uppercase"}}>
            Tell us about the project. We'll be in touch within 48 hours.
          </h2>
          <p style={{fontSize: 15, lineHeight: 1.7, marginTop: 16, color: "rgba(255, 255, 255, 0.78)", maxWidth: 460}}>
            Estimates are free and non-binding. Most Westchester properties get a same-week site visit.
          </p>
          <div style={{marginTop: 28, display: "flex", alignItems: "center", gap: 12, color: "rgba(255, 255, 255, 0.75)", fontSize: 14}}>
            <Icon name="phone" size={16} stroke={1.75} color="#9FC7AE"/>
            Or call <a href="tel:9145550199" style={{color: "var(--white)", fontWeight: 700, marginLeft: 4}}>914-555-0199</a>
          </div>
        </div>

        <div style={{background: "var(--white)", borderRadius: 10, padding: 36, boxShadow: "var(--shadow-3)"}}>
          <div style={{display: "flex", alignItems: "center", gap: 10, marginBottom: 24}}>
            <div style={{flex: 1, height: 4, background: "var(--n-200)", borderRadius: 999, overflow: "hidden"}}>
              <div style={{height: "100%", width: `${(step/total) * 100}%`, background: "var(--turf-700)", transition: "width 300ms var(--ease-out)"}}/>
            </div>
            <span style={{fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--fg-muted)"}}>Step {step} of {total}</span>
          </div>

          {step === 1 && (
            <div>
              <label className="label">What do you need help with?</label>
              <div style={{display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10, marginTop: 8}}>
                {["Hardscape", "Lawn care", "Pest control", "Both / not sure"].map(opt => (
                  <button key={opt} onClick={() => setService(opt)} style={{
                    padding: "14px 16px", borderRadius: 4,
                    border: service === opt ? "1px solid var(--turf-700)" : "1px solid var(--n-200)",
                    background: service === opt ? "#EAF3EC" : "var(--white)",
                    color: "var(--ink-900)", fontWeight: 600, fontSize: 14, textAlign: "left", cursor: "pointer",
                  }}>{opt}</button>
                ))}
              </div>
              <label className="label" style={{marginTop: 20}}>Property ZIP</label>
              <input className="input" inputMode="numeric" placeholder="10506" value={zip} onChange={e => setZip(e.target.value)}/>
            </div>
          )}

          {step === 2 && (
            <div>
              <label className="label">Tell us about the scope</label>
              <textarea className="textarea" rows={4} placeholder="Approx size, materials you like, timeline, any site constraints" value={scope} onChange={e => setScope(e.target.value)}/>
              <div style={{display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12, marginTop: 16}}>
                <div><label className="label">Timeline</label><select className="select" defaultValue="Within 3 months"><option>Within 3 months</option><option>3–6 months</option><option>Planning ahead</option></select></div>
                <div><label className="label">Budget (optional)</label><select className="select"><option>Under $5K</option><option>$5–15K</option><option>$15–30K</option><option>$30K+</option></select></div>
              </div>
              <div style={{marginTop: 16, padding: "14px 16px", background: "var(--n-50)", border: "1px dashed var(--n-300)", borderRadius: 4, fontSize: 13, color: "var(--slate-600)", display: "flex", gap: 10}}>
                <Icon name="layers" size={16} color="var(--turf-700)" stroke={1.75}/>
                Attach a photo for a faster, more accurate quote — optional.
              </div>
            </div>
          )}

          {step === 3 && (
            <div>
              <div style={{display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12}}>
                <div><label className="label">Name</label><input className="input" placeholder="Jane Doe"/></div>
                <div><label className="label">Phone</label><input className="input" inputMode="tel" placeholder="914-555-0100"/></div>
              </div>
              <label className="label" style={{marginTop: 12}}>Email</label>
              <input className="input" type="email" placeholder="you@example.com"/>
              <label className="label" style={{marginTop: 12}}>Property address</label>
              <input className="input" placeholder="42 Maple Ln, Bedford NY"/>
              <label style={{display: "flex", gap: 10, marginTop: 16, fontSize: 13, color: "var(--slate-600)", alignItems: "flex-start"}}>
                <input type="checkbox" defaultChecked style={{marginTop: 3, accentColor: "var(--turf-700)"}}/>
                I consent to Lawns and Pavers contacting me about this estimate. We never sell data.
              </label>
            </div>
          )}

          <div style={{display: "flex", gap: 10, marginTop: 24, justifyContent: "space-between"}}>
            {step > 1 ? <button className="btn btn-ghost" onClick={back}><Icon name="arrowLeft" size={14}/>Back</button> : <span/>}
            {step < total ? (
              <button className="btn btn-primary" onClick={next}>Continue<Icon name="arrowRight" size={14}/></button>
            ) : (
              <button className="btn btn-primary">Get my free estimate</button>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}
window.QuoteForm = QuoteForm;