// Contact / Start a project — multi-step qualified enquiry
function Contact({ onNav }) {
  const { SECTORS } = window.DI;
  const [step, setStep] = useState(1);
  const [data, setData] = useState({
    sector: "",
    projectType: "",
    size: "",
    location: "Dubai",
    timeline: "",
    name: "",
    company: "",
    email: "",
    phone: "",
    brief: "",
    file: null,
  });
  const [errors, setErrors] = useState({});
  const [submitted, setSubmitted] = useState(false);

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

  const validateStep = (s) => {
    const e = {};
    if (s === 1) {
      if (!data.sector) e.sector = "Pick a sector";
      if (!data.projectType) e.projectType = "Pick a project type";
    }
    if (s === 2) {
      if (!data.size) e.size = "Approximate area helps us route the right division";
      if (!data.timeline) e.timeline = "Pick a timeline";
    }
    if (s === 3) {
      if (!data.name) e.name = "Required";
      if (!data.company) e.company = "Required";
      if (!data.email) e.email = "Required";
      else if (!/^\S+@\S+\.\S+$/.test(data.email)) e.email = "Use a valid email";
      if (!data.brief) e.brief = "Tell us a sentence about the brief";
    }
    setErrors(e);
    return Object.keys(e).length === 0;
  };

  const onSubmit = () => {
    if (!validateStep(3)) return;
    setSubmitted(true);
  };

  const sectorOptions = SECTORS.filter((s) => s.key !== "all");
  const projectTypes = ["Office / corporate", "Showroom / retail", "Hotel / hospitality", "Restaurant / F&B", "Healthcare / clinic", "Education", "Government / institutional", "Joinery / furniture only", "Other"];
  const timelines = ["< 12 weeks", "3 – 6 months", "6 – 12 months", "12+ months", "Not sure yet"];
  const sizeOptions = ["< 5,000 sq ft", "5 – 20,000 sq ft", "20 – 50,000 sq ft", "50 – 100,000 sq ft", "100,000+ sq ft"];

  return (
    <div className="page-enter">
      <section style={{ paddingTop: "8rem", paddingBottom: "4rem", background: "var(--paper)" }}>
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "repeat(12, 1fr)", gap: "1.5rem", alignItems: "end" }}>
            <div style={{ gridColumn: "span 8" }} className="contact-title">
              <Eyebrow>Start a project · Response within 1 working day</Eyebrow>
              <h1 className="h1" style={{ marginTop: "1.25rem" }}>
                Tell us your brief. We'll route it to the right division.
              </h1>
            </div>
            <div style={{ gridColumn: "span 4", textAlign: "right" }} className="contact-progress">
              <div className="eyebrow" style={{ marginBottom: "0.75rem" }}>Step {step} of 3</div>
              <div style={{ display: "flex", gap: "0.5rem", justifyContent: "flex-end" }}>
                {[1, 2, 3].map((n) => (
                  <span key={n} style={{
                    width: n === step ? 56 : 24, height: 2,
                    background: n <= step ? "var(--accent)" : "var(--line)",
                    transition: "all 200ms",
                  }}></span>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="section bg-paper" style={{ paddingTop: "2rem" }}>
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "repeat(12, 1fr)", gap: "3rem" }}>
            {/* Form column */}
            <div style={{ gridColumn: "span 8" }} className="form-col">
              {submitted ? (
                <div style={{ padding: "4rem 0" }} className="page-enter">
                  <div className="eyebrow" style={{ color: "var(--accent)" }}><span className="dot"></span>Brief received</div>
                  <h2 className="h2" style={{ marginTop: "1.25rem" }}>Thanks, {data.name.split(" ")[0]}.</h2>
                  <p className="lead" style={{ marginTop: "1.25rem", maxWidth: "40rem" }}>
                    Your brief is on its way to {data.sector === "banking" ? "our banking & finance lead" : data.sector === "hospitality" ? "our F&B / hospitality lead" : "the corporate team"}.
                    Expect a call from us within one working day with an indicative timeline and the right division on the line.
                  </p>
                  <div style={{ marginTop: "2rem", padding: "1.5rem", background: "var(--mist)", border: "1px solid var(--line)", maxWidth: "40rem" }}>
                    <div className="eyebrow">Reference</div>
                    <div className="num display" style={{ marginTop: "0.5rem", fontSize: "1.5rem", color: "var(--ink)" }}>
                      DI-{new Date().getFullYear()}-{Math.floor(Math.random() * 9000 + 1000)}
                    </div>
                    <div style={{ marginTop: "1rem", display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: "1rem" }}>
                      <div>
                        <div className="eyebrow">Sector</div>
                        <div style={{ marginTop: "0.25rem" }}>{sectorOptions.find((s) => s.key === data.sector)?.label}</div>
                      </div>
                      <div>
                        <div className="eyebrow">Project type</div>
                        <div style={{ marginTop: "0.25rem" }}>{data.projectType}</div>
                      </div>
                      <div>
                        <div className="eyebrow">Approx. size</div>
                        <div style={{ marginTop: "0.25rem" }}>{data.size}</div>
                      </div>
                      <div>
                        <div className="eyebrow">Timeline</div>
                        <div style={{ marginTop: "0.25rem" }}>{data.timeline}</div>
                      </div>
                    </div>
                  </div>
                  <div style={{ marginTop: "2.5rem", display: "flex", gap: "0.75rem", flexWrap: "wrap" }}>
                    <button className="btn btn--solid" onClick={() => onNav("projects")}>Browse projects <Arrow /></button>
                    <button className="btn" onClick={() => { setSubmitted(false); setStep(1); setData({ sector: "", projectType: "", size: "", location: "Dubai", timeline: "", name: "", company: "", email: "", phone: "", brief: "", file: null }); }}>Start another</button>
                  </div>
                </div>
              ) : (
                <>
                  {step === 1 && (
                    <div className="page-enter">
                      <h2 className="display" style={{ fontSize: "1.5rem", marginBottom: "2rem", color: "var(--ink)" }}>01 · About the project</h2>

                      <div className="field" style={{ marginBottom: "2rem" }}>
                        <label>Sector</label>
                        <div style={{ display: "flex", flexWrap: "wrap", gap: "0.4rem", marginTop: "0.5rem" }}>
                          {sectorOptions.map((s) => (
                            <button key={s.key} type="button" className="chip" aria-pressed={data.sector === s.key} onClick={() => { update("sector", s.key); setErrors((e) => ({ ...e, sector: null })); }}>{s.label}</button>
                          ))}
                        </div>
                        {errors.sector && <span className="field-error">{errors.sector}</span>}
                      </div>

                      <div className={"field" + (errors.projectType ? " field--error" : "")} style={{ marginBottom: "2rem" }}>
                        <label>Project type</label>
                        <div style={{ display: "flex", flexWrap: "wrap", gap: "0.4rem", marginTop: "0.5rem" }}>
                          {projectTypes.map((t) => (
                            <button key={t} type="button" className="chip" aria-pressed={data.projectType === t} onClick={() => { update("projectType", t); setErrors((e) => ({ ...e, projectType: null })); }}>{t}</button>
                          ))}
                        </div>
                        {errors.projectType && <span className="field-error">{errors.projectType}</span>}
                      </div>

                      <div style={{ display: "flex", justifyContent: "flex-end", marginTop: "3rem" }}>
                        <button className="btn btn--solid" onClick={() => validateStep(1) && setStep(2)}>Continue <Arrow /></button>
                      </div>
                    </div>
                  )}

                  {step === 2 && (
                    <div className="page-enter">
                      <h2 className="display" style={{ fontSize: "1.5rem", marginBottom: "2rem", color: "var(--ink)" }}>02 · Scope & timeline</h2>

                      <div className={"field" + (errors.size ? " field--error" : "")} style={{ marginBottom: "2rem" }}>
                        <label>Approximate size</label>
                        <div style={{ display: "flex", flexWrap: "wrap", gap: "0.4rem", marginTop: "0.5rem" }}>
                          {sizeOptions.map((t) => (
                            <button key={t} type="button" className="chip" aria-pressed={data.size === t} onClick={() => { update("size", t); setErrors((e) => ({ ...e, size: null })); }}>{t}</button>
                          ))}
                        </div>
                        {errors.size && <span className="field-error">{errors.size}</span>}
                      </div>

                      <div className="field" style={{ marginBottom: "2rem" }}>
                        <label>Location</label>
                        <div style={{ display: "flex", flexWrap: "wrap", gap: "0.4rem", marginTop: "0.5rem" }}>
                          {["Dubai", "Abu Dhabi", "Sharjah", "GCC — other", "International"].map((t) => (
                            <button key={t} type="button" className="chip" aria-pressed={data.location === t} onClick={() => update("location", t)}>{t}</button>
                          ))}
                        </div>
                      </div>

                      <div className={"field" + (errors.timeline ? " field--error" : "")} style={{ marginBottom: "2rem" }}>
                        <label>Target programme</label>
                        <div style={{ display: "flex", flexWrap: "wrap", gap: "0.4rem", marginTop: "0.5rem" }}>
                          {timelines.map((t) => (
                            <button key={t} type="button" className="chip" aria-pressed={data.timeline === t} onClick={() => { update("timeline", t); setErrors((e) => ({ ...e, timeline: null })); }}>{t}</button>
                          ))}
                        </div>
                        {errors.timeline && <span className="field-error">{errors.timeline}</span>}
                      </div>

                      <div style={{ display: "flex", justifyContent: "space-between", marginTop: "3rem" }}>
                        <button className="btn" onClick={() => setStep(1)}>← Back</button>
                        <button className="btn btn--solid" onClick={() => validateStep(2) && setStep(3)}>Continue <Arrow /></button>
                      </div>
                    </div>
                  )}

                  {step === 3 && (
                    <div className="page-enter">
                      <h2 className="display" style={{ fontSize: "1.5rem", marginBottom: "2rem", color: "var(--ink)" }}>03 · You & the brief</h2>

                      <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: "1.5rem" }} className="contact-name-row">
                        <div className={"field" + (errors.name ? " field--error" : "")}>
                          <label>Your name</label>
                          <input type="text" value={data.name} onChange={(e) => { update("name", e.target.value); setErrors((er) => ({ ...er, name: null })); }} placeholder="Full name" />
                          {errors.name && <span className="field-error">{errors.name}</span>}
                        </div>
                        <div className={"field" + (errors.company ? " field--error" : "")}>
                          <label>Company</label>
                          <input type="text" value={data.company} onChange={(e) => { update("company", e.target.value); setErrors((er) => ({ ...er, company: null })); }} placeholder="Organisation" />
                          {errors.company && <span className="field-error">{errors.company}</span>}
                        </div>
                        <div className={"field" + (errors.email ? " field--error" : "")}>
                          <label>Email</label>
                          <input type="email" value={data.email} onChange={(e) => { update("email", e.target.value); setErrors((er) => ({ ...er, email: null })); }} placeholder="you@company.com" />
                          {errors.email && <span className="field-error">{errors.email}</span>}
                        </div>
                        <div className="field">
                          <label>Phone (optional)</label>
                          <input type="tel" value={data.phone} onChange={(e) => update("phone", e.target.value)} placeholder="+971 …" />
                        </div>
                      </div>

                      <div className={"field" + (errors.brief ? " field--error" : "")} style={{ marginTop: "2rem" }}>
                        <label>Brief</label>
                        <textarea rows="5" value={data.brief} onChange={(e) => { update("brief", e.target.value); setErrors((er) => ({ ...er, brief: null })); }} placeholder="A sentence or two on the brief — site, scope, anything else that helps us route this."></textarea>
                        {errors.brief && <span className="field-error">{errors.brief}</span>}
                      </div>

                      <div className="field" style={{ marginTop: "2rem" }}>
                        <label>Attachments (brief, BoQ, drawings — optional)</label>
                        <label htmlFor="filein" style={{
                          marginTop: "0.5rem", padding: "1.5rem", border: "1px dashed var(--line)",
                          display: "block", textAlign: "center", cursor: "pointer", color: "var(--graphite)",
                          fontFamily: "var(--font-mono)", fontSize: "0.85rem",
                        }}>
                          {data.file ? <span>📎 {data.file}</span> : <span>Drop a file here, or click to browse (PDF, DWG, ZIP)</span>}
                        </label>
                        <input id="filein" type="file" style={{ display: "none" }} onChange={(e) => update("file", e.target.files[0]?.name || null)} />
                      </div>

                      <div style={{ display: "flex", justifyContent: "space-between", marginTop: "3rem", gap: "1rem", flexWrap: "wrap" }}>
                        <button className="btn" onClick={() => setStep(2)}>← Back</button>
                        <button className="btn btn--accent" onClick={onSubmit}>Send brief <Arrow /></button>
                      </div>
                    </div>
                  )}
                </>
              )}
            </div>

            {/* Side column */}
            <div style={{ gridColumn: "span 4" }} className="contact-side">
              <div style={{ padding: "2rem", background: "var(--mist)", border: "1px solid var(--line)" }}>
                <div className="eyebrow">Dubai HQ</div>
                <p style={{ marginTop: "1rem", lineHeight: 1.5 }}>
                  Office No. 212, Hamsah Complex<br/>
                  P.O. Box 62522, Dubai<br/>
                  United Arab Emirates
                </p>
                <a href="tel:+97143795902" className="display" style={{ display: "block", marginTop: "1rem", fontSize: "1.1rem", color: "var(--ink)" }}>+971 4 379 5902</a>
                <hr className="hairline" style={{ margin: "1.5rem 0" }} />
                <div className="eyebrow">Abu Dhabi</div>
                <p style={{ marginTop: "1rem", lineHeight: 1.5 }}>
                  Unit D101, Hanging Garden Tower<br/>
                  Sector E3, Plot C67 / C154<br/>
                  Al Nahlah St, Al Danah
                </p>
                <a href="tel:+97124482286" className="display" style={{ display: "block", marginTop: "1rem", fontSize: "1.1rem", color: "var(--ink)" }}>+971 2 448 2286</a>
                <hr className="hairline" style={{ margin: "1.5rem 0" }} />
                <div className="eyebrow">Email</div>
                <a href="mailto:info@design-infinity.com" style={{ marginTop: "0.75rem", display: "block", fontFamily: "var(--font-mono)", fontSize: "0.85rem" }}>info@design-infinity.com</a>
                <div style={{ marginTop: "1.5rem" }}>
                  <span className="wa-disabled">WhatsApp — pending verified number</span>
                </div>
              </div>

              <div style={{ marginTop: "1.5rem", padding: "1.25rem", border: "1px solid var(--line)" }}>
                <div className="eyebrow" style={{ color: "var(--accent)" }}><span className="dot"></span>Hours</div>
                <p style={{ marginTop: "0.5rem", fontSize: "0.85rem", color: "var(--graphite)", fontFamily: "var(--font-mono)" }}>
                  Confirm opening hours with the team on call — published hours pending client sign-off.
                </p>
              </div>
            </div>
          </div>
        </div>
        <style>{`
          @media (max-width: 880px) {
            .form-col, .contact-side, .contact-title, .contact-progress { grid-column: 1 / -1 !important; }
            .contact-progress { text-align: left !important; margin-top: 1rem; }
            .contact-name-row { grid-template-columns: 1fr !important; }
          }
        `}</style>
      </section>
    </div>
  );
}

Object.assign(window, { Contact });