// Contact / Start-a-project — the conversion flow.

function ContactPage({ initialProjectType }) {
  const [step, setStep] = useState(0);
  const [form, setForm] = useState({
    projectType: initialProjectType || "",
    location: "",
    timeline: "",
    budget: "",
    scope: [],
    name: "",
    company: "",
    email: "",
    phone: "",
    brief: "",
    attachment: "",
    consent: false,
  });

  const set = (k, v) => setForm(f => ({ ...f, [k]: v }));
  const toggleScope = (s) => setForm(f => ({
    ...f,
    scope: f.scope.includes(s) ? f.scope.filter(x => x !== s) : [...f.scope, s],
  }));

  const steps = ["Project", "Scope", "About you", "Submit"];
  const projectTypes = ["Hospitality", "Palaces & Residences", "Public Areas", "Manufacture only", "Other"];
  const timelines = ["< 6 months", "6–12 months", "12–24 months", "Open"];
  const budgets = ["Under $1M", "$1–5M", "$5–25M", "$25M+", "Discuss"];
  const scopes = ["Design", "Manufacture", "Contracting", "FF&E", "Soft furnishings", "Architectural metalwork"];

  const submitted = step === 4;

  return (
    <div className="page-enter">
      <section style={{ padding: "80px 0 32px", borderBottom: "1px solid var(--line)" }}>
        <div className="container">
          <Eyebrow n="—">Start a project</Eyebrow>
          <h1 className="display-xxl" style={{ marginTop: 16, marginBottom: 24, maxWidth: "16ch" }}>
            Tell us what you're building.
          </h1>
          <p className="lede" style={{ maxWidth: "62ch" }}>
            Every enquiry reaches a senior director within two working days. Royal and
            private residential briefs are handled by a single named lead under NDA.
          </p>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "320px 1fr", gap: 80 }}>
            {/* Sidebar */}
            <div>
              <div className="mono" style={{ color: "var(--graphite)", marginBottom: 18 }}>STEPS</div>
              <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
                {steps.map((s, i) => (
                  <div key={s} style={{
                    display: "flex", alignItems: "baseline", gap: 14,
                    paddingBottom: 14, borderBottom: "1px solid var(--line)",
                    color: i === step ? "var(--ink)" : "var(--graphite)",
                    cursor: i < step ? "pointer" : "default",
                  }} onClick={() => i < step && setStep(i)}>
                    <span className="mono" style={{ color: i === step ? "var(--brass)" : (i < step ? "var(--green-deep)" : "var(--mute)") }}>
                      {i < step ? "✓" : `0${i + 1}`}
                    </span>
                    <span style={{ fontFamily: "var(--font-serif)", fontSize: 22 }}>{s}</span>
                  </div>
                ))}
              </div>

              <div style={{ marginTop: 56, padding: 24, background: "var(--paper-2)" }}>
                <div className="mono" style={{ color: "var(--graphite)" }}>OR CONTACT DIRECTLY</div>
                <div style={{ marginTop: 16, fontFamily: "var(--font-serif)", fontSize: 22 }}>
                  <div><a href="tel:+97148862220">+971 4 886 2220</a></div>
                  <div style={{ marginTop: 6 }}><a href="mailto:glinfo@gli.ae">glinfo@gli.ae</a></div>
                </div>
                <div className="small" style={{ marginTop: 18 }}>
                  Jebel Ali Free Zone<br/>P.O. Box 262456<br/>Dubai, U.A.E.
                </div>
              </div>
            </div>

            {/* Form panel */}
            <div style={{ background: "var(--surface)", border: "1px solid var(--line)", padding: 48, minHeight: 580 }}>
              {submitted ? (
                <div style={{ textAlign: "center", padding: "80px 0" }}>
                  <div className="mono" style={{ color: "var(--green-deep)" }}>RECEIVED</div>
                  <h2 className="display-l" style={{ margin: "24px 0 16px" }}>Thank you, {form.name.split(" ")[0] || "—"}.</h2>
                  <p className="lede" style={{ margin: "0 auto", maxWidth: "44ch" }}>
                    Your brief has reached our enquiries desk. A senior director will be in
                    touch within two working days.
                  </p>
                  <div style={{ marginTop: 48, display: "inline-block", textAlign: "left", padding: 24, background: "var(--paper-2)" }}>
                    <div className="mono" style={{ color: "var(--graphite)", marginBottom: 10 }}>REFERENCE</div>
                    <div style={{ fontFamily: "var(--font-mono)", fontSize: 16, color: "var(--ink)" }}>
                      GLI-{Date.now().toString().slice(-6)}-{(form.projectType || "GEN").slice(0, 3).toUpperCase()}
                    </div>
                  </div>
                </div>
              ) : step === 0 ? (
                <div>
                  <Eyebrow n="01">Project</Eyebrow>
                  <h2 className="display-m" style={{ marginTop: 14, marginBottom: 28 }}>What are you building?</h2>
                  <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
                    {projectTypes.map(t => (
                      <button key={t} onClick={() => set("projectType", t)}
                        style={{
                          padding: "18px 20px", textAlign: "left",
                          border: "1px solid " + (form.projectType === t ? "var(--ink)" : "var(--line-2)"),
                          background: form.projectType === t ? "var(--ink)" : "transparent",
                          color: form.projectType === t ? "#fff" : "var(--ink)",
                          fontFamily: "var(--font-serif)", fontSize: 19,
                          transition: "all .2s ease",
                        }}>
                        {t}
                      </button>
                    ))}
                  </div>

                  <div style={{ marginTop: 32, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24 }}>
                    <div className="field">
                      <label>Location</label>
                      <input value={form.location} onChange={e => set("location", e.target.value)} placeholder="City, country" />
                    </div>
                    <div className="field">
                      <label>Timeline</label>
                      <select value={form.timeline} onChange={e => set("timeline", e.target.value)}>
                        <option value="">Select…</option>
                        {timelines.map(t => <option key={t} value={t}>{t}</option>)}
                      </select>
                    </div>
                  </div>

                  <div style={{ marginTop: 24 }} className="field">
                    <label>Indicative budget</label>
                    <div style={{ display: "flex", gap: 8, flexWrap: "wrap", marginTop: 6 }}>
                      {budgets.map(b => (
                        <Pill key={b} active={form.budget === b} onClick={() => set("budget", b)}>{b}</Pill>
                      ))}
                    </div>
                  </div>

                  <div style={{ marginTop: 48, display: "flex", justifyContent: "flex-end" }}>
                    <button className="btn btn-solid" disabled={!form.projectType} onClick={() => setStep(1)}
                      style={{ opacity: form.projectType ? 1 : 0.4, cursor: form.projectType ? "pointer" : "not-allowed" }}>
                      Continue &nbsp;→
                    </button>
                  </div>
                </div>
              ) : step === 1 ? (
                <div>
                  <Eyebrow n="02">Scope</Eyebrow>
                  <h2 className="display-m" style={{ marginTop: 14, marginBottom: 12 }}>What do you need from us?</h2>
                  <p className="small" style={{ marginBottom: 24 }}>Select all that apply. We engage on any subset — design only, manufacture only, full turnkey.</p>
                  <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
                    {scopes.map(s => {
                      const on = form.scope.includes(s);
                      return (
                        <button key={s} onClick={() => toggleScope(s)}
                          style={{
                            padding: "16px 20px", textAlign: "left",
                            border: "1px solid " + (on ? "var(--green-deep)" : "var(--line-2)"),
                            background: on ? "rgba(44,135,70,0.06)" : "transparent",
                            color: "var(--ink)",
                            display: "flex", justifyContent: "space-between", alignItems: "center",
                            fontFamily: "var(--font-serif)", fontSize: 18,
                            transition: "all .2s ease",
                          }}>
                          {s}
                          <span style={{
                            width: 18, height: 18, border: "1px solid " + (on ? "var(--green-deep)" : "var(--line-2)"),
                            background: on ? "var(--green-deep)" : "transparent",
                            color: "#fff", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 11,
                          }}>{on ? "✓" : ""}</span>
                        </button>
                      );
                    })}
                  </div>

                  <div className="field" style={{ marginTop: 32 }}>
                    <label>Brief / description</label>
                    <textarea value={form.brief} onChange={e => set("brief", e.target.value)} placeholder="A few sentences on the project — operator, programme, design references, any context that helps us respond well." />
                  </div>

                  <div className="field" style={{ marginTop: 24 }}>
                    <label>Drawings / mood / brief (optional)</label>
                    <div style={{ border: "1px dashed var(--line-2)", padding: 24, textAlign: "center", color: "var(--graphite)", cursor: "pointer", marginTop: 6 }}
                      onClick={() => set("attachment", "brief.pdf · 2.3 MB")}>
                      {form.attachment ? (
                        <div style={{ fontFamily: "var(--font-serif)", fontSize: 17, color: "var(--ink)" }}>📎 {form.attachment}</div>
                      ) : (
                        <div>
                          <div className="mono">DROP A FILE OR CLICK</div>
                          <div style={{ marginTop: 6, fontSize: 12 }}>PDF / DWG / JPG · up to 25 MB</div>
                        </div>
                      )}
                    </div>
                  </div>

                  <div style={{ marginTop: 48, display: "flex", justifyContent: "space-between" }}>
                    <button className="btn" onClick={() => setStep(0)}>← Back</button>
                    <button className="btn btn-solid" onClick={() => setStep(2)}>Continue &nbsp;→</button>
                  </div>
                </div>
              ) : step === 2 ? (
                <div>
                  <Eyebrow n="03">About you</Eyebrow>
                  <h2 className="display-m" style={{ marginTop: 14, marginBottom: 28 }}>Who should we reach?</h2>
                  <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24 }}>
                    <div className="field"><label>Full name</label><input value={form.name} onChange={e => set("name", e.target.value)} /></div>
                    <div className="field"><label>Company / household</label><input value={form.company} onChange={e => set("company", e.target.value)} /></div>
                    <div className="field"><label>Email</label><input type="email" value={form.email} onChange={e => set("email", e.target.value)} /></div>
                    <div className="field"><label>Phone</label><input value={form.phone} onChange={e => set("phone", e.target.value)} /></div>
                  </div>

                  <label style={{ display: "flex", gap: 12, marginTop: 32, fontSize: 13, color: "var(--graphite)", cursor: "pointer" }}>
                    <input type="checkbox" checked={form.consent} onChange={e => set("consent", e.target.checked)}
                      style={{ marginTop: 3, width: 16, height: 16, accentColor: "var(--green-deep)" }} />
                    <span>I understand my enquiry will be treated in confidence. NDAs can be exchanged before any further dialogue.</span>
                  </label>

                  <div style={{ marginTop: 48, display: "flex", justifyContent: "space-between" }}>
                    <button className="btn" onClick={() => setStep(1)}>← Back</button>
                    <button className="btn btn-solid"
                      disabled={!form.name || !form.email || !form.consent}
                      style={{ opacity: form.name && form.email && form.consent ? 1 : 0.4, cursor: form.name && form.email && form.consent ? "pointer" : "not-allowed" }}
                      onClick={() => setStep(3)}>
                      Review &nbsp;→
                    </button>
                  </div>
                </div>
              ) : step === 3 ? (
                <div>
                  <Eyebrow n="04">Review &amp; submit</Eyebrow>
                  <h2 className="display-m" style={{ marginTop: 14, marginBottom: 28 }}>Everything in order?</h2>
                  <div style={{ background: "var(--paper-2)", padding: 24, borderLeft: "2px solid var(--green-deep)" }}>
                    <div style={{ display: "grid", gridTemplateColumns: "180px 1fr", gap: "14px 24px", fontSize: 14 }}>
                      <div className="mono" style={{ color: "var(--graphite)" }}>PROJECT</div><div>{form.projectType}</div>
                      <div className="mono" style={{ color: "var(--graphite)" }}>LOCATION</div><div>{form.location || "—"}</div>
                      <div className="mono" style={{ color: "var(--graphite)" }}>TIMELINE</div><div>{form.timeline || "—"}</div>
                      <div className="mono" style={{ color: "var(--graphite)" }}>BUDGET</div><div>{form.budget || "—"}</div>
                      <div className="mono" style={{ color: "var(--graphite)" }}>SCOPE</div><div>{form.scope.join(" · ") || "—"}</div>
                      <div className="mono" style={{ color: "var(--graphite)" }}>BRIEF</div><div style={{ lineHeight: 1.5 }}>{form.brief || "—"}</div>
                      <div className="mono" style={{ color: "var(--graphite)" }}>ATTACHMENT</div><div>{form.attachment || "None"}</div>
                      <div className="mono" style={{ color: "var(--graphite)" }}>CONTACT</div><div>{form.name} · {form.email} {form.phone && `· ${form.phone}`}<br/>{form.company}</div>
                    </div>
                  </div>
                  <div style={{ marginTop: 48, display: "flex", justifyContent: "space-between" }}>
                    <button className="btn" onClick={() => setStep(2)}>← Edit</button>
                    <button className="btn btn-solid" onClick={() => setStep(4)}>
                      Submit enquiry &nbsp;→
                    </button>
                  </div>
                </div>
              ) : null}
            </div>
          </div>
        </div>
      </section>

      {/* Map / location block */}
      <section className="section" style={{ background: "var(--paper-2)" }}>
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64, alignItems: "center" }}>
            <div>
              <Eyebrow n="—">Visit</Eyebrow>
              <h2 className="display-l" style={{ margin: "16px 0 20px" }}>Jebel Ali Free Zone, Dubai.</h2>
              <p className="lede" style={{ marginBottom: 24 }}>
                The studio, factory and atelier share a single 520,000&nbsp;sq.ft campus.
                Clients are welcome — please arrange access through your project lead.
              </p>
              <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
                <div className="mono" style={{ color: "var(--graphite)" }}>ADDRESS</div>
                <div style={{ fontFamily: "var(--font-serif)", fontSize: 20 }}>
                  Jebel Ali Free Zone<br/>P.O. Box 262456<br/>Dubai, United Arab Emirates
                </div>
              </div>
            </div>
            <div style={{
              aspectRatio: "4/3",
              background: "linear-gradient(135deg, var(--paper) 0%, var(--paper-2) 100%)",
              border: "1px solid var(--line)",
              position: "relative", overflow: "hidden",
            }}>
              {/* Simple decorative map illustration */}
              <svg viewBox="0 0 400 300" style={{ width: "100%", height: "100%" }}>
                <defs>
                  <pattern id="grid" width="20" height="20" patternUnits="userSpaceOnUse">
                    <path d="M 20 0 L 0 0 0 20" fill="none" stroke="var(--line)" strokeWidth="0.5"/>
                  </pattern>
                </defs>
                <rect width="400" height="300" fill="url(#grid)" />
                <path d="M 0 180 Q 100 160 200 175 T 400 170" stroke="var(--line-2)" fill="none" strokeWidth="1" />
                <path d="M 60 60 L 340 60 L 340 240 L 60 240 Z" stroke="var(--graphite)" fill="rgba(20,33,63,0.04)" strokeWidth="0.5" />
                <text x="65" y="78" style={{ fontFamily: "var(--font-mono)", fontSize: 9, fill: "var(--graphite)", letterSpacing: 1 }}>JEBEL ALI FREE ZONE</text>
                <circle cx="200" cy="150" r="6" fill="var(--green-deep)" />
                <circle cx="200" cy="150" r="14" fill="none" stroke="var(--green-deep)" strokeWidth="1" opacity="0.4">
                  <animate attributeName="r" from="6" to="20" dur="2s" repeatCount="indefinite" />
                  <animate attributeName="opacity" from="0.6" to="0" dur="2s" repeatCount="indefinite" />
                </circle>
                <text x="210" y="146" style={{ fontFamily: "var(--font-serif)", fontSize: 14, fill: "var(--ink)" }}>Greenline HQ</text>
                <text x="210" y="160" style={{ fontFamily: "var(--font-mono)", fontSize: 8, fill: "var(--graphite)" }}>520,000 SQ.FT CAMPUS</text>
              </svg>
              <div style={{ position: "absolute", bottom: 12, right: 12 }} className="mono">
                <span style={{ color: "var(--graphite)" }}>COORDINATES · TBC W/ CLIENT</span>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { ContactPage });