const { useState: useStateF } = React;

function NewProject() {
  const [step, setStep] = useStateF(1);
  const [submitted, setSubmitted] = useStateF(false);
  const [data, setData] = useStateF({
    name: "", company: "", email: "", phone: "",
    type: "", scope: "", location: "", timeline: "", budget: "",
    vision: "",
  });
  const update = (k, v) => setData(d => ({ ...d, [k]: v }));

  if (submitted) {
    return (
      <div className="fade-in section-lg" style={{ minHeight: "60vh", display: "flex", alignItems: "center" }}>
        <div className="container" style={{ textAlign: "center" }}>
          <Eyebrow style={{ color: "var(--gold)" }}>Inquiry Received</Eyebrow>
          <h1 className="display" style={{ fontSize: "clamp(48px, 7vw, 92px)", marginTop: 24, marginBottom: 24 }}>
            Thank you, <em>{data.name.split(" ")[0] || "friend"}.</em>
          </h1>
          <p style={{ fontSize: 19, maxWidth: 580, margin: "0 auto 40px" }}>
            We've received your inquiry. Someone from the Art Dallas team will be in touch within two business days to schedule a consultation.
          </p>
          <Link to="/"><span className="btn btn-ghost">Return Home</span></Link>
        </div>
      </div>
    );
  }

  const totalSteps = 3;
  const progress = (step / totalSteps) * 100;

  return (
    <div className="fade-in">
      <section style={{ paddingTop: 56, paddingBottom: 32 }}>
        <div className="container-wide">
          <Eyebrow>Project Intake</Eyebrow>
          <h1 className="display" style={{ fontSize: "clamp(56px, 8vw, 128px)", marginTop: 28, lineHeight: 1 }}>
            <em>Start</em> Your Project.
          </h1>
          <p style={{ marginTop: 32, fontSize: 19, maxWidth: 680, color: "var(--ink-body)" }}>
            Tell us about your project. Whether it's a single piece or a multi-property art program, we'll get back to you within two business days to schedule a consultation.
          </p>
        </div>
      </section>

      <section style={{ paddingBottom: 96 }}>
        <div className="container-wide">
          <div className="np-grid" style={{ display: "grid", gridTemplateColumns: "1.5fr 1fr", gap: 80, alignItems: "start" }}>
            {/* Form */}
            <div style={{ background: "var(--surface)", border: "1px solid var(--hairline)", padding: "48px 56px" }}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 32 }}>
                <div className="eyebrow">Step {step} of {totalSteps}</div>
                <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--muted)" }}>{step === 1 ? "About you" : step === 2 ? "About the project" : "Your vision"}</div>
              </div>
              <div style={{ height: 2, background: "var(--hairline)", marginBottom: 48, position: "relative", overflow: "hidden" }}>
                <div style={{ position: "absolute", inset: 0, width: `${progress}%`, background: "var(--forest)", transition: "width 0.4s ease" }} />
              </div>

              {step === 1 && (
                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24 }} className="form-grid">
                  <div className="field"><label>Name</label><input value={data.name} onChange={e => update("name", e.target.value)} placeholder="Jane Doe" /></div>
                  <div className="field"><label>Company / Organization</label><input value={data.company} onChange={e => update("company", e.target.value)} placeholder="Studio name, hotel group, etc." /></div>
                  <div className="field"><label>Email</label><input type="email" value={data.email} onChange={e => update("email", e.target.value)} placeholder="you@studio.com" /></div>
                  <div className="field"><label>Phone</label><input value={data.phone} onChange={e => update("phone", e.target.value)} placeholder="Optional" /></div>
                </div>
              )}

              {step === 2 && (
                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24 }} className="form-grid">
                  <div className="field" style={{ gridColumn: "1 / -1" }}>
                    <label>Project Type</label>
                    <select value={data.type} onChange={e => update("type", e.target.value)}>
                      <option value="">Select…</option>
                      <option>Corporate</option><option>Hospitality</option><option>Healthcare</option>
                      <option>Education</option><option>Residential</option><option>Other</option>
                    </select>
                  </div>
                  <div className="field"><label>Project Scope</label>
                    <select value={data.scope} onChange={e => update("scope", e.target.value)}>
                      <option value="">Select…</option>
                      <option>Single piece</option><option>Multiple pieces</option><option>Full art program</option>
                      <option>Framing only</option><option>Other</option>
                    </select>
                  </div>
                  <div className="field"><label>Timeline</label>
                    <select value={data.timeline} onChange={e => update("timeline", e.target.value)}>
                      <option value="">Select…</option>
                      <option>ASAP</option><option>1–3 months</option><option>3–6 months</option>
                      <option>6–12 months</option><option>Long-term planning</option>
                    </select>
                  </div>
                  <div className="field"><label>Location(s)</label><input value={data.location} onChange={e => update("location", e.target.value)} placeholder="City, state — or multiple" /></div>
                  <div className="field"><label>Budget Range <span style={{ textTransform: "none", letterSpacing: 0, color: "var(--muted)" }}>(optional)</span></label>
                    <select value={data.budget} onChange={e => update("budget", e.target.value)}>
                      <option value="">Prefer not to say</option>
                      <option>Under $25K</option><option>$25K – $100K</option><option>$100K – $500K</option>
                      <option>$500K – $1M</option><option>$1M+</option>
                    </select>
                  </div>
                </div>
              )}

              {step === 3 && (
                <div style={{ display: "grid", gap: 24 }}>
                  <div className="field"><label>Tell us about your vision</label>
                    <textarea value={data.vision} onChange={e => update("vision", e.target.value)} placeholder="What's the space? Who's the audience? What feeling are you trying to evoke? Any reference points, mood boards, or existing artwork? The more you tell us, the better we can prepare." style={{ minHeight: 200 }} />
                  </div>
                  <div className="field"><label>Reference Images <span style={{ textTransform: "none", letterSpacing: 0, color: "var(--muted)" }}>(optional)</span></label>
                    <div style={{ border: "1px dashed var(--hairline)", padding: "32px 24px", textAlign: "center", color: "var(--muted)", fontSize: 14 }}>
                      Drag files here, or <span style={{ color: "var(--forest)", textDecoration: "underline" }}>browse</span>
                    </div>
                  </div>
                </div>
              )}

              <div style={{ marginTop: 48, display: "flex", justifyContent: "space-between", alignItems: "center", borderTop: "1px solid var(--hairline)", paddingTop: 28 }}>
                <button onClick={() => setStep(Math.max(1, step - 1))} disabled={step === 1} style={{ background: "transparent", border: 0, fontSize: 11, letterSpacing: "0.2em", textTransform: "uppercase", cursor: step === 1 ? "default" : "pointer", color: step === 1 ? "var(--hairline)" : "var(--ink-body)" }}>← Back</button>
                {step < totalSteps ? (
                  <button onClick={() => setStep(step + 1)} className="btn btn-primary">Continue →</button>
                ) : (
                  <button onClick={() => setSubmitted(true)} className="btn btn-primary">Submit Inquiry</button>
                )}
              </div>
              <style>{`@media (max-width: 720px) { .form-grid { grid-template-columns: 1fr !important; } }`}</style>
            </div>

            {/* Process sidebar */}
            <div>
              <Eyebrow>What Happens Next</Eyebrow>
              <h3 className="display" style={{ fontSize: 36, marginTop: 16, marginBottom: 32 }}>Our process.</h3>
              <ol style={{ listStyle: "none", padding: 0, margin: 0 }}>
                {[
                  ["Initial conversation", "Within two business days of your inquiry."],
                  ["Site visit or virtual consult", "We come to you, or you visit our 55,000 sq. ft. Dallas studio."],
                  ["Concept and proposal", "Curated direction, sourcing options, and a transparent estimate."],
                  ["Approval and production", "Originals, framing, printing — all in-house."],
                  ["Coordinated delivery", "Crating, shipping, and installation — domestic or international."],
                ].map(([t, d], i) => (
                  <li key={i} style={{ display: "grid", gridTemplateColumns: "44px 1fr", gap: 16, padding: "16px 0", borderTop: i === 0 ? 0 : "1px solid var(--hairline)" }}>
                    <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--gold)", marginTop: 4 }}>0{i + 1}</span>
                    <div>
                      <div style={{ fontFamily: "var(--font-display)", fontSize: 22, color: "var(--ink)" }}>{t}</div>
                      <div style={{ fontSize: 14, color: "var(--ink-body)", marginTop: 2 }}>{d}</div>
                    </div>
                  </li>
                ))}
              </ol>
              <div style={{ marginTop: 40, padding: 24, background: "var(--surface)", border: "1px solid var(--hairline)" }}>
                <div className="eyebrow" style={{ marginBottom: 8 }}>Prefer to talk?</div>
                <a href="tel:2146880244" style={{ fontFamily: "var(--font-display)", fontSize: 28, color: "var(--ink)", display: "block" }}>214.688.0244</a>
                <a href="mailto:info@artdallas.com" style={{ fontSize: 14, color: "var(--ink-body)", textDecoration: "underline", textDecorationColor: "var(--hairline)" }}>info@artdallas.com</a>
              </div>
            </div>
            <style>{`@media (max-width: 880px) { .np-grid { grid-template-columns: 1fr !important; gap: 48px !important; } .np-grid > div:first-child { padding: 32px 24px !important; } }`}</style>
          </div>
        </div>
      </section>
    </div>
  );
}

function Contact() {
  const [sent, setSent] = useStateF(false);
  return (
    <div className="fade-in">
      <section style={{ paddingTop: 56, paddingBottom: 56 }}>
        <div className="container-wide">
          <Eyebrow>Dallas · By Appointment</Eyebrow>
          <h1 className="display" style={{ fontSize: "clamp(64px, 9vw, 144px)", marginTop: 28, lineHeight: 1 }}>
            <em>Contact.</em>
          </h1>
        </div>
      </section>

      <section style={{ paddingBottom: 120 }}>
        <div className="container-wide">
          <div className="contact-grid" style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 80, alignItems: "start" }}>
            <div>
              <Eyebrow>General Inquiry</Eyebrow>
              <h3 className="display" style={{ fontSize: 36, marginTop: 12, marginBottom: 32 }}>Drop us a line.</h3>
              {sent ? (
                <div style={{ padding: 40, background: "var(--surface)", border: "1px solid var(--hairline)", textAlign: "center" }}>
                  <div style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 28, color: "var(--ink)" }}>Thank you.</div>
                  <p style={{ color: "var(--ink-body)", marginTop: 12 }}>We'll be in touch within two business days.</p>
                </div>
              ) : (
                <form onSubmit={e => { e.preventDefault(); setSent(true); }} style={{ display: "grid", gap: 28 }}>
                  <div className="form-row" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24 }}>
                    <div className="field"><label>Name</label><input required /></div>
                    <div className="field"><label>Email</label><input type="email" required /></div>
                  </div>
                  <div className="field"><label>Subject</label><input /></div>
                  <div className="field"><label>Message</label><textarea required /></div>
                  <div style={{ marginTop: 8 }}>
                    <button type="submit" className="btn btn-primary">Send Message</button>
                  </div>
                  <style>{`@media (max-width: 720px) { .form-row { grid-template-columns: 1fr !important; } }`}</style>
                </form>
              )}
              <div style={{ marginTop: 56, paddingTop: 24, borderTop: "1px solid var(--hairline)" }}>
                <p style={{ fontSize: 14, color: "var(--muted)" }}>For project intake (sector, scope, timeline), use our <Link to="/new-project" style={{ color: "var(--forest)", textDecoration: "underline" }}>full intake form →</Link></p>
              </div>
            </div>

            <div>
              <div style={{ background: "var(--surface)", border: "1px solid var(--hairline)", padding: 40 }}>
                <Eyebrow>Studio</Eyebrow>
                <div style={{ fontFamily: "var(--font-display)", fontSize: 24, marginTop: 12, marginBottom: 8, color: "var(--ink)" }}>9207 Sovereign Row</div>
                <div style={{ fontSize: 15, color: "var(--ink-body)" }}>Dallas, TX 75247</div>

                <div style={{ marginTop: 28 }}>
                  <Eyebrow>Phone</Eyebrow>
                  <a href="tel:2146880244" style={{ fontFamily: "var(--font-display)", fontSize: 28, color: "var(--ink)", display: "block", marginTop: 8 }}>214.688.0244</a>
                </div>

                <div style={{ marginTop: 24 }}>
                  <Eyebrow>Email</Eyebrow>
                  <a href="mailto:info@artdallas.com" style={{ fontFamily: "var(--font-display)", fontSize: 22, color: "var(--ink)", display: "block", marginTop: 8 }}>info@artdallas.com</a>
                </div>

                <hr className="hairline" style={{ margin: "32px 0" }} />

                <Eyebrow>Hours</Eyebrow>
                <div style={{ marginTop: 8, color: "var(--ink-body)", fontSize: 15, lineHeight: 1.8 }}>
                  Mon–Thu · 8:30 AM – 4:30 PM<br/>
                  Fri · 8:30 AM – 4:00 PM
                </div>
                <div style={{ marginTop: 16, padding: "12px 16px", background: "var(--bg)", borderLeft: "2px solid var(--gold)", fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 17, color: "var(--ink)" }}>
                  Currently by appointment only
                </div>

                <hr className="hairline" style={{ margin: "32px 0" }} />

                <Eyebrow>Social</Eyebrow>
                <div style={{ marginTop: 12, display: "flex", gap: 14, fontSize: 11, letterSpacing: "0.2em", textTransform: "uppercase" }}>
                  <a href="https://www.instagram.com/art_dallas_inc/" target="_blank" rel="noreferrer" style={{ color: "var(--ink-body)", borderBottom: "1px solid var(--hairline)", paddingBottom: 2 }}>Instagram</a>
                  <a href="https://www.facebook.com/artdallasinc/" target="_blank" rel="noreferrer" style={{ color: "var(--ink-body)", borderBottom: "1px solid var(--hairline)", paddingBottom: 2 }}>Facebook</a>
                  <a href="http://pinterest.com/artdallas" target="_blank" rel="noreferrer" style={{ color: "var(--ink-body)", borderBottom: "1px solid var(--hairline)", paddingBottom: 2 }}>Pinterest</a>
                </div>
              </div>

              {/* Map placeholder */}
              <div style={{ marginTop: 24, aspectRatio: "4/3", background: "linear-gradient(135deg, #2B3A2D 0%, #1A1612 100%)", position: "relative", overflow: "hidden" }}>
                <svg width="100%" height="100%" viewBox="0 0 400 300" style={{ position: "absolute", inset: 0, opacity: 0.15 }}>
                  <defs>
                    <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
                      <path d="M 40 0 L 0 0 0 40" fill="none" stroke="#fff" strokeWidth="0.5"/>
                    </pattern>
                  </defs>
                  <rect width="100%" height="100%" fill="url(#grid)"/>
                </svg>
                <div style={{ position: "absolute", left: "44%", top: "48%", width: 16, height: 16, background: "var(--gold)", borderRadius: "50%", boxShadow: "0 0 0 8px rgba(176,141,87,0.25)" }} />
                <div style={{ position: "absolute", inset: 0, display: "flex", alignItems: "flex-end", padding: 24, color: "#fff" }}>
                  <div>
                    <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.18em", textTransform: "uppercase", color: "rgba(255,255,255,0.6)" }}>32.8121° N, 96.8829° W</div>
                    <div style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 22, marginTop: 4 }}>Dallas Design District</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <style>{`@media (max-width: 880px) { .contact-grid { grid-template-columns: 1fr !important; gap: 48px !important; } }`}</style>
        </div>
      </section>
    </div>
  );
}

window.NewProject = NewProject;
window.Contact = Contact;