/* TDD — Contact page + App root */

const { useState: uS, useEffect: uE, useRef: uR } = React;

/* ---------------- CONTACT ---------------- */
function ContactPage({ audience, setAudience, preferredTab }) {
  useReveal();
  const d = window.TDD_DATA;
  const [tab, setTab] = uS(preferredTab || "visit");
  const [submitted, setSubmitted] = uS(false);
  const [form, setForm] = uS({
    name: "", email: "", phone: "", company: "",
    role: "", date: "", projectType: "Residential", brands: "", message: "",
    samples: "",
  });
  uE(() => { if (preferredTab) setTab(preferredTab); }, [preferredTab]);

  function up(k) { return e => setForm(f => ({ ...f, [k]: e.target.value })); }
  function submit(e) {
    e.preventDefault();
    setSubmitted(true);
    window.scrollTo({ top: 0, behavior: "smooth" });
  }
  function reset() { setSubmitted(false); setForm(f => ({ ...f, message: "", brands: "", samples: "" })); }

  const tabs = [
    { key: "visit", label: "Book a Studio Visit" },
    { key: "samples", label: "Request Samples" },
    { key: "trade", label: audience === "trade" ? "Project Enquiry" : "Project Enquiry" },
    { key: "brochure", label: "Brochure" },
  ];

  const labelByTab = {
    visit: "Booked.",
    samples: "Samples requested.",
    trade: "Enquiry received.",
    brochure: "Brochure on its way.",
  };
  const bodyByTab = {
    visit: "We'll reply within one studio day to confirm a time. If you have a project brief, hit reply on our message — we'll have the relevant racks pulled before you arrive.",
    samples: "Cuts are dispatched within 48 hours where stock allows; larger lengths follow. We'll send a tracking note once your samples leave the studio.",
    trade: "A senior member of the studio will respond within one business day. For procurement teams: please reply with the project schedule and we'll route accordingly.",
    brochure: "The current TDD library brochure is on its way to your inbox. Per-brand brochures available on the brand pages or by request.",
  };

  return (
    <div className="page-fade">
      <section className="section tight">
        <div className="wrap">
          <div className="eyebrow"><span className="dot"></span>Contact · Dubai d3 · Sharjah · Doha</div>
          <h1 className="display" style={{ fontSize: "clamp(54px, 7vw, 110px)", margin: "20px 0 30px", maxWidth: 1100 }}>
            Speak to the studio.
          </h1>
          <p style={{ fontSize: 17, color: "var(--ink-soft)", maxWidth: 640, lineHeight: 1.6 }}>
            Choose what you need. We route trade and private enquiries through the same studio team — the form only changes what we have ready when you arrive or write back.
          </p>
        </div>
      </section>

      <section style={{ paddingBottom: 110 }}>
        <div className="wrap">
          <div className="form-grid">
            <div>
              {!submitted ? (
                <>
                  <div className="audience-toggle">
                    <button className={audience === "trade" ? "active" : ""} onClick={() => setAudience("trade")}>I'm Trade · Designer / Architect / Procurement</button>
                    <button className={audience === "private" ? "active" : ""} onClick={() => setAudience("private")}>I'm a Private Client</button>
                  </div>

                  <div className="form-tabs">
                    {tabs.map(t => (
                      <button key={t.key} className={"form-tab " + (tab === t.key ? "active" : "")} onClick={() => setTab(t.key)}>
                        {t.label}
                      </button>
                    ))}
                  </div>

                  <form onSubmit={submit}>
                    <div className="form-row">
                      <div className="form-field"><label>Full name</label><input required value={form.name} onChange={up("name")} placeholder="" /></div>
                      <div className="form-field"><label>Email</label><input required type="email" value={form.email} onChange={up("email")} /></div>
                    </div>
                    <div className="form-row">
                      <div className="form-field"><label>Phone (optional)</label><input value={form.phone} onChange={up("phone")} placeholder="+971…" /></div>
                      {audience === "trade" && (
                        <div className="form-field"><label>Studio / company</label><input value={form.company} onChange={up("company")} /></div>
                      )}
                      {audience === "private" && (
                        <div className="form-field"><label>City</label><input value={form.company} onChange={up("company")} placeholder="Dubai · Sharjah · Doha…" /></div>
                      )}
                    </div>

                    {tab === "visit" && (
                      <>
                        <div className="form-row">
                          <div className="form-field"><label>Preferred date</label><input type="date" value={form.date} onChange={up("date")} /></div>
                          <div className="form-field">
                            <label>Project type</label>
                            <select value={form.projectType} onChange={up("projectType")}>
                              <option>Residential</option>
                              <option>Hospitality</option>
                              <option>F&B</option>
                              <option>Office / Commercial</option>
                              <option>Yachting / Marine</option>
                              <option>Other</option>
                            </select>
                          </div>
                        </div>
                        <div className="form-row">
                          <div className="form-field full">
                            <label>Project brief (optional but helpful)</label>
                            <textarea value={form.message} onChange={up("message")} placeholder="Rooms, palette, anchor materials, deadlines — anything that helps us pull the right racks before you arrive."></textarea>
                          </div>
                        </div>
                      </>
                    )}

                    {tab === "samples" && (
                      <>
                        <div className="form-row">
                          <div className="form-field full">
                            <label>Samples requested (free text — brand, reference, colour)</label>
                            <textarea value={form.samples} onChange={up("samples")} placeholder="e.g. Aqua Clean Bali in mineral / Mastrotto Toscana semi-aniline in cognac / Voyage Hibiscus drapery sample…"></textarea>
                          </div>
                        </div>
                        <div className="form-row">
                          <div className="form-field full">
                            <label>Shipping address</label>
                            <textarea style={{ minHeight: 80 }} value={form.message} onChange={up("message")} placeholder="Studio / project address for cut samples"></textarea>
                          </div>
                        </div>
                      </>
                    )}

                    {tab === "trade" && (
                      <>
                        <div className="form-row">
                          <div className="form-field"><label>Role</label>
                            <select value={form.role} onChange={up("role")}>
                              <option>Interior Designer</option><option>Architect</option><option>Procurement</option><option>Contractor / Fit-out</option><option>Private Owner</option><option>Other</option>
                            </select>
                          </div>
                          <div className="form-field">
                            <label>Project type</label>
                            <select value={form.projectType} onChange={up("projectType")}>
                              <option>Residential</option><option>Hospitality</option><option>F&B</option><option>Office / Commercial</option><option>Yachting / Marine</option>
                            </select>
                          </div>
                        </div>
                        <div className="form-row">
                          <div className="form-field full">
                            <label>Brief</label>
                            <textarea value={form.message} onChange={up("message")} placeholder="Scope, schedule, materials shortlist, brands of interest"></textarea>
                          </div>
                        </div>
                      </>
                    )}

                    {tab === "brochure" && (
                      <div className="form-row">
                        <div className="form-field full">
                          <label>What would you like sent?</label>
                          <textarea value={form.message} onChange={up("message")} placeholder="TDD library overview · or per-brand brochures (William Morris, Gruppo Mastrotto, KAI…)"></textarea>
                        </div>
                      </div>
                    )}

                    <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginTop: 24 }}>
                      <div style={{ fontFamily: "var(--mono)", fontSize: 10.5, letterSpacing: ".12em", color: "var(--muted)", textTransform: "uppercase", maxWidth: 360 }}>
                        Routes to the studio inbox · response within one business day
                      </div>
                      <button className="btn btn-primary" type="submit">Send →</button>
                    </div>
                  </form>
                </>
              ) : (
                <div className="confirm">
                  <div style={{ fontFamily: "var(--mono)", fontSize: 11, letterSpacing: ".18em", color: "var(--rose)", textTransform: "uppercase" }}>✓ Sent</div>
                  <h3>{labelByTab[tab]}</h3>
                  <p>{bodyByTab[tab]}</p>
                  <button className="btn btn-ghost" style={{ color: "var(--ivory)", borderColor: "rgba(247,241,230,.4)" }} onClick={reset}>Send another →</button>
                  <div className="meta">Ref · TDD-{Math.floor(Math.random() * 90000 + 10000)} · {new Date().toLocaleDateString("en-GB", { day: "2-digit", month: "short", year: "numeric" })}</div>
                </div>
              )}
            </div>

            {/* RIGHT — contact details + map */}
            <div>
              <div className="contact-info">
                <div className="block">
                  <div className="lbl">Studio — Dubai d3</div>
                  <div style={{ fontFamily: "var(--serif)", fontSize: 22, color: "var(--ink)", marginBottom: 8 }}>TDD Furnishing Trading LLC</div>
                  Office 105B, Block B, 1st Floor, Building 7<br/>
                  Dubai Design District, Za'abeel 2<br/>
                  P.O. Box 33975, Dubai, UAE<br/>
                  <div style={{ marginTop: 12 }}>
                    <a href="tel:+97145845178">+971 4 584 5178</a> · <a href="mailto:office@tddfze.com">office@tddfze.com</a>
                  </div>
                  <div style={{ fontFamily: "var(--mono)", fontSize: 10.5, letterSpacing: ".14em", color: "var(--muted)", textTransform: "uppercase", marginTop: 10 }}>Sun – Thu · 09:30 – 18:00</div>
                </div>
                <div className="block">
                  <div className="lbl">Sharjah — SAIF Zone</div>
                  The Design Destination FZE<br/>
                  SAIF Zone, Sharjah Airport Free Zone<br/>
                  <a href="tel:+97165331667">+971 6 533 1667</a>
                </div>
                <div className="block">
                  <div className="lbl">Doha — Qatar</div>
                  TDD Furnishing Trading WLL<br/>
                  Doha, Qatar<br/>
                  <a href="tel:+97444357339">+974 4 435 7339</a> · <a href="mailto:office@tddqatar.com">office@tddqatar.com</a>
                </div>
                <div className="block">
                  <div className="lbl">Social</div>
                  <a href="https://instagram.com/tddfurnishing_d3" target="_blank" rel="noreferrer">@tddfurnishing_d3</a> · <a href="https://facebook.com/tdddubai" target="_blank" rel="noreferrer">tdddubai</a>
                </div>
              </div>

              <div className="map-card" style={{ marginTop: 30 }}>
                <div className="map-pin"></div>
                <div className="map-label">Office 105B · d3</div>
                <div style={{ position: "absolute", bottom: 14, left: 14, fontFamily: "var(--mono)", fontSize: 10, letterSpacing: ".12em", color: "var(--ink-soft)", textTransform: "uppercase" }}>25.188642 N · 55.29775 E</div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { ContactPage });