/* global React, Ico, useState, Brand */

const PROJ_TYPES = ["Custom cabinets", "New countertops", "Full kitchen remodel", "Bathroom", "Not sure yet"];
const BUDGETS = ["Under $10k", "$10k–25k", "$25k–50k", "$50k+"];
const TIMELINES = ["ASAP", "1–3 months", "3–6 months", "Just exploring"];

function QuoteForm() {
  const [step, setStep] = useState(0);
  const [done, setDone] = useState(false);
  const [data, setData] = useState({ types: [], budget: "", timeline: "", name: "", email: "", phone: "", zip: "", details: "" });
  const [errs, setErrs] = useState({});

  const set = (k, v) => setData((d) => ({ ...d, [k]: v }));
  const toggleType = (t) => setData((d) => ({ ...d, types: d.types.includes(t) ? d.types.filter((x) => x !== t) : [...d.types, t] }));

  const validateStep = () => {
    const e = {};
    if (step === 0 && data.types.length === 0) e.types = "Pick at least one.";
    if (step === 1) {
      if (!data.name.trim()) e.name = "Please add your name.";
      if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(data.email)) e.email = "Enter a valid email.";
      if (data.phone.replace(/\D/g, "").length < 10) e.phone = "Enter a 10-digit phone.";
    }
    setErrs(e);
    return Object.keys(e).length === 0;
  };

  const next = () => { if (validateStep()) setStep((s) => s + 1); };
  const back = () => setStep((s) => Math.max(0, s - 1));
  const submit = () => { setDone(true); };

  const stepClass = (i) => (i < step ? "fstep done" : i === step ? "fstep active" : "fstep");

  return (
    <div className="form-card reveal">
      {done ? (
        <div className="form-success">
          <div className="check"><Ico.check /></div>
          <h3 className="h3">Thanks, {data.name.split(" ")[0] || "friend"} — we've got it.</h3>
          <p>A Kane's project lead will reach out within one business day to set up your free in-home consultation and measurement. Keep an eye on {data.email || "your inbox"}.</p>
        </div>
      ) : (
        <>
          <div className="form-steps">
            <div className={stepClass(0)}><i /></div>
            <div className={stepClass(1)}><i /></div>
            <div className={stepClass(2)}><i /></div>
          </div>

          {step === 0 && (
            <div>
              <div className="form-steplabel">Step 1 of 3 — Your project</div>
              <h3 className="h3">What are you thinking about?</h3>
              <div className={`field ${errs.types ? "err" : ""}`}>
                <label>Project type <span className="opt">— pick all that apply</span></label>
                <div className="chips">
                  {PROJ_TYPES.map((t) => (
                    <button type="button" key={t} className={`chip ${data.types.includes(t) ? "sel" : ""}`} onClick={() => toggleType(t)}>{t}</button>
                  ))}
                </div>
                {errs.types && <div className="msg">{errs.types}</div>}
              </div>
              <div className="field">
                <label>Rough budget <span className="opt">— optional</span></label>
                <div className="chips">
                  {BUDGETS.map((b) => (
                    <button type="button" key={b} className={`chip ${data.budget === b ? "sel" : ""}`} onClick={() => set("budget", b)}>{b}</button>
                  ))}
                </div>
              </div>
              <div className="field">
                <label>Timeline <span className="opt">— optional</span></label>
                <div className="chips">
                  {TIMELINES.map((t) => (
                    <button type="button" key={t} className={`chip ${data.timeline === t ? "sel" : ""}`} onClick={() => set("timeline", t)}>{t}</button>
                  ))}
                </div>
              </div>
              <div className="form-actions">
                <span />
                <button className="btn btn-forest" onClick={next}>Continue <Ico.arrow className="arr" /></button>
              </div>
            </div>
          )}

          {step === 1 && (
            <div>
              <div className="form-steplabel">Step 2 of 3 — Your details</div>
              <h3 className="h3">Where can we reach you?</h3>
              <div className={`field ${errs.name ? "err" : ""}`}>
                <label>Full name</label>
                <input value={data.name} onChange={(e) => set("name", e.target.value)} placeholder="Jordan Avery" />
                {errs.name && <div className="msg">{errs.name}</div>}
              </div>
              <div className="field-row">
                <div className={`field ${errs.email ? "err" : ""}`}>
                  <label>Email</label>
                  <input type="email" value={data.email} onChange={(e) => set("email", e.target.value)} placeholder="you@email.com" />
                  {errs.email && <div className="msg">{errs.email}</div>}
                </div>
                <div className={`field ${errs.phone ? "err" : ""}`}>
                  <label>Phone</label>
                  <input value={data.phone} onChange={(e) => set("phone", e.target.value)} placeholder="(321) 288-7107" />
                  {errs.phone && <div className="msg">{errs.phone}</div>}
                </div>
              </div>
              <div className="field">
                <label>ZIP code <span className="opt">— optional</span></label>
                <input value={data.zip} onChange={(e) => set("zip", e.target.value)} placeholder="97201" style={{ maxWidth: 180 }} />
              </div>
              <div className="form-actions">
                <button className="form-back" onClick={back}>← Back</button>
                <button className="btn btn-forest" onClick={next}>Continue <Ico.arrow className="arr" /></button>
              </div>
            </div>
          )}

          {step === 2 && (
            <div>
              <div className="form-steplabel">Step 3 of 3 — Almost there</div>
              <h3 className="h3">Tell us about the space.</h3>
              <div className="field">
                <label>Project details <span className="opt">— optional</span></label>
                <textarea value={data.details} onChange={(e) => set("details", e.target.value)} placeholder="Approx. size, current condition, materials you love, photos you can share later…" />
              </div>
              <div style={{ background: "var(--paper-2)", border: "1px solid var(--line)", borderRadius: "var(--r-sm)", padding: "16px 18px", fontSize: 14, color: "var(--ink-soft)" }}>
                <strong style={{ color: "var(--ink)" }}>{data.types.join(", ") || "Project"}</strong>
                {data.budget && ` · ${data.budget}`}{data.timeline && ` · ${data.timeline}`}
              </div>
              <div className="form-actions">
                <button className="form-back" onClick={back}>← Back</button>
                <button className="btn btn-forest" onClick={submit}>Send my request <Ico.arrow className="arr" /></button>
              </div>
            </div>
          )}
        </>
      )}
    </div>
  );
}

function Quote() {
  return (
    <section className="section quote" id="quote">
      <div className="wrap quote-grid">
        <aside className="quote-aside reveal">
          <span className="eyebrow">Request a quote</span>
          <h2 className="h2">Free estimate,<br />zero pressure.</h2>
          <p className="lead" style={{ fontSize: 16, marginBottom: 30 }}>Tell us a little about your project and we'll set up an in-home consultation. Most quotes are back to you within 48 hours.</p>
          <div className="qrow"><span className="qi"><Ico.phone /></span><span><span className="qk">Call the shop</span><a className="qv" href="tel:+13212887107">(321) 288-7107</a></span></div>
          <div className="qrow"><span className="qi"><Ico.mail /></span><span><span className="qk">Email us</span><a className="qv" href="mailto:info@kanescabinetry.com">info@kanescabinetry.com</a></span></div>
          <div className="qrow"><span className="qi"><Ico.pin /></span><span><span className="qk">Service area</span><span className="qv">Brevard County, FL</span></span></div>
          <div className="qrow"><span className="qi"><Ico.clock /></span><span><span className="qk">Shop hours</span><span className="qv">Mon–Fri 8–5 · Sat by appointment</span></span></div>
        </aside>
        <QuoteForm />
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer-top">
          <div>
            <Brand footer />
            <p className="footer-blurb">Custom cabinetry and countertop fabrication, designed and installed under one roof since 2009.</p>
          </div>
          <div className="footer-col">
            <h4>Services</h4>
            <a href="#services">Custom cabinets</a>
            <a href="#materials">Countertops</a>
            <a href="#services">Kitchen remodels</a>
            <a href="#services">Bath &amp; vanities</a>
          </div>
          <div className="footer-col">
            <h4>Company</h4>
            <a href="#work">Our work</a>
            <a href="#about">About Kane's</a>
            <a href="#process">Process</a>
            <a href="#reviews">Reviews</a>
          </div>
          <div className="footer-col">
            <h4>Service area</h4>
            <p>Brevard County, FL</p>
            <a href="tel:+13212887107">(321) 288-7107</a>
            <a href="mailto:info@kanescabinetry.com">info@kanescabinetry.com</a>
          </div>
        </div>
        <div className="footer-bottom">
          <p>© 2026 Kane's Cabinets &amp; Countertops</p>
          <p>Designed &amp; built in Brevard County, FL</p>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { QuoteForm, Quote, Footer });