/* global React */
const { useState: useStateQ, useEffect: useEffectQ, useMemo: useMemoQ } = React;

/* ============================================================
   LOOKBOOK
   ============================================================ */
function LookbookPage({ onNav, locale }) {
  const ar = locale === "ar";
  const [filter, setFilter] = useStateQ("all");
  const [lb, setLb] = useStateQ(null);
  const [empty, setEmpty] = useStateQ(false);

  // Combine genuine + stock with provenance
  const tiles = useMemoQ(() => {
    const real = [
      { src: MEDIA.kaftan,   cat: "garment", real: true, label: "Sage-silk kaftan · directory image", caption: "d3 directory · placeholder, rights pending" },
      { src: MEDIA.interior, cat: "atelier", real: true, label: "Gallery interior · directory image", caption: "BestThings · placeholder, rights pending" },
    ];
    const stock = STOCK.map(s => ({
      src: s.src, cat: s.cat, real: false,
      label: s.label,
      caption: "Stock placeholder — by appointment, real client work to follow"
    }));
    return [...real, ...stock];
  }, []);

  const cats = [
    { id: "all",      label: { en: "All", ar: "الكل" } },
    { id: "garment",  label: { en: "Garments", ar: "قطع" } },
    { id: "material", label: { en: "Materials", ar: "خامات" } },
    { id: "atelier",  label: { en: "Atelier", ar: "الأتيليه" } },
    { id: "fitting",  label: { en: "Fittings", ar: "قياسات" } },
  ];

  const visible = empty ? [] : tiles.filter(t => filter === "all" || t.cat === filter);

  return (
    <main className="page-enter" data-screen-label="04 Lookbook">
      <section className="container" style={{ paddingTop: 56 }}>
        <Crumb items={[{ to: "home", label: ar ? "الرئيسية" : "Home" }, { label: ar ? "المعرض" : "Lookbook" }]} onNav={onNav} />
      </section>
      <section className="container section">
        <div className="page-head" style={{ display: "grid", gridTemplateColumns: "1fr", gap: 32 }}>
          <div>
            <Eyebrow>{ar ? "المعرض" : "Lookbook"}</Eyebrow>
            <h1 className="display display-xl" style={{ marginTop: 16, maxWidth: "16ch" }}>
              {ar ? "صور توضيحية، حتى نُعرض ما هو حقيقي." : "Representative, until we can show what's real."}
            </h1>
          </div>
          <p className="lead">
            {ar
              ? "صورتان من الدليل العام وصور من المخزون المهني — وُضِعت كعناصر نائبة وحسب. كل صورة يجب أن تُستبدَل بصور موكَّل بحقوقها من الأستوديو."
              : "Two directory images and a set of stock placeholders. None of these are the studio's own work — every tile carries provenance, and all will be replaced with rights-cleared client photography."}
          </p>
        </div>

        <div className="spacer-48"></div>

        <div style={{ display: "flex", flexWrap: "wrap", justifyContent: "space-between", gap: 16, alignItems: "center", marginBottom: 32 }}>
          <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
            {cats.map(c => (
              <button key={c.id} className={"chip" + (filter === c.id ? " active" : "")} onClick={() => { setFilter(c.id); setEmpty(false); }}>
                {ar ? c.label.ar : c.label.en}
              </button>
            ))}
            <button className="chip" onClick={() => setEmpty(!empty)} style={{ borderStyle: "dashed" }}>
              {empty ? (ar ? "إظهار العناصر النائبة" : "Show placeholders") : (ar ? "معاينة الحالة الفارغة" : "Preview empty state")}
            </button>
          </div>
          <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--muted)" }}>
            {empty ? "0" : visible.length} {ar ? "صورة" : "tiles"} · 2 {ar ? "حقيقية" : "real"} · {visible.length > 0 ? Math.max(0, visible.length - (filter === "all" ? 2 : 0)) : 0} {ar ? "مخزون" : "stock"}
          </div>
        </div>

        {empty || visible.length === 0 ? (
          <EmptyState
            title={ar ? "المعرض متاح بالموعد" : "Lookbook available by appointment"}
            body={ar ? "نُفضِّل عرض القطع شخصيًا. اطلب معاينة لنُعدّ لك مختارات تناسبك." : "We prefer to present pieces in person. Request a preview and we'll prepare a tailored set."}
            action={<button className="btn btn-primary" onClick={() => onNav("appointments")}>{ar ? "اطلب معاينة" : "Request a Preview"}</button>}
          />
        ) : (
          <div className="lookbook">
            {visible.map((t, i) => (
              <button key={i} className="lookbook-tile" style={{ border: 0, padding: 0, background: "transparent" }}
                      onClick={() => setLb(t)}>
                <img src={t.src} alt={t.label} loading="lazy" />
                <div className="tile-label">
                  <span className={"tile-meta " + (t.real ? "real" : "")}>
                    {t.real ? "Directory · placeholder" : "Stock · placeholder"}
                  </span>
                </div>
              </button>
            ))}
          </div>
        )}

        <div className="spacer-48"></div>

        <div className="card" style={{ background: "var(--surface-2)" }}>
          <Eyebrow>{ar ? "ملاحظة على المصادر" : "Provenance note"}</Eyebrow>
          <p className="muted" style={{ maxWidth: "70ch", marginTop: 12 }}>
            {ar
              ? "الصورتان الحقيقيتان مأخوذتان من الأدلة العامة (d3 وBestThings) ولا تُعدّ ملكية مؤكَّدة لأعمال الاستوديو. باقي البلاطات صور مخزون مناسبة للقطاع، ووجودها هو لملء الواجهة فقط. لا تُعرَض أيٌّ منها على أنّها أعمال \"Only One Design\"."
              : "The two real tiles are from public directories (d3 and BestThings) and are not confirmed as the studio's own work. The remainder are sector-appropriate stock standing in for client photography. None should be read as Only One Design's portfolio."}
          </p>
          <div className="flex-row" style={{ marginTop: 16 }}>
            <Flag>22 placeholder images · awaiting rights-cleared media</Flag>
          </div>
        </div>
      </section>

      {lb && <Lightbox src={lb.src} caption={lb.caption} onClose={() => setLb(null)} />}

      <style>{`
        @media (min-width: 900px) {
          .page-head { grid-template-columns: 1.3fr 1fr !important; gap: 64px !important; align-items: end !important; }
        }
      `}</style>
    </main>
  );
}

/* ============================================================
   ATELIER
   ============================================================ */
function AtelierPage({ onNav, locale }) {
  const ar = locale === "ar";
  return (
    <main className="page-enter" data-screen-label="05 Atelier">
      <section className="container" style={{ paddingTop: 56 }}>
        <Crumb items={[{ to: "home", label: ar ? "الرئيسية" : "Home" }, { label: ar ? "الأتيليه" : "Atelier" }]} onNav={onNav} />
      </section>

      <section className="container section">
        <div className="atelier-grid" style={{ display: "grid", gridTemplateColumns: "1fr", gap: 56 }}>
          <div>
            <Eyebrow>{ar ? "الأتيليه" : "The atelier"}</Eyebrow>
            <h1 className="display display-xl" style={{ marginTop: 16, maxWidth: "14ch" }}>
              {ar ? "غرفة هادئة في d3." : "A quiet room in d3."}
            </h1>
            <p className="lead" style={{ marginTop: 24 }}>
              {ar
                ? "في الطابق الثاني من مبنى 07 بحي دبي للتصميم، يفتح الاستوديو بابه بالموعد فقط. ضوء أبيض، خرسانة مصقولة، قضبان عرض نحاسية — والقليل من الأشياء الصامتة، تترك المساحة للقماش."
                : "On the second floor of Building 07 in Dubai Design District, the studio opens by appointment. White light, polished concrete, brass display rails — and very little else, so the fabric can speak."}
            </p>
            <div style={{ marginTop: 28 }}>
              <Flag>CLIENT-FILL · founder / origin / philosophy</Flag>
            </div>
          </div>
          <div style={{ aspectRatio: "4 / 5", overflow: "hidden", borderRadius: "var(--radius-lg)", border: "1px solid var(--border)", position: "relative" }}>
            <img src={MEDIA.interior} alt="Gallery interior with brass display rails and orchids" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
            <div className="hero-image-caption">BestThings · interior placeholder</div>
          </div>
        </div>
      </section>

      <section className="container">
        <div className="detail-strip">
          <div>
            <div className="dk">{ar ? "الموقع" : "Location"}</div>
            <div className="dv">d3 · Bldg 07</div>
          </div>
          <div>
            <div className="dk">{ar ? "المكتب" : "Office"}</div>
            <div className="dv">No. B203 <span style={{ fontSize: 11, color: "var(--muted)" }}>· confirm</span></div>
          </div>
          <div>
            <div className="dk">{ar ? "الزيارة" : "Visits"}</div>
            <div className="dv">{ar ? "بالموعد" : "By appointment"}</div>
          </div>
          <div>
            <div className="dk">{ar ? "اللغات" : "Languages"}</div>
            <div className="dv">EN · AR · RU · ZH</div>
          </div>
        </div>
      </section>

      <section className="container section">
        <Eyebrow>{ar ? "تفاصيل المساحة" : "Details from the room"}</Eyebrow>
        <h2 className="display display-l" style={{ marginTop: 14, marginBottom: 32, maxWidth: "16ch" }}>
          {ar ? "اللوحة تأتي من المساحة." : "The palette is taken from the room."}
        </h2>
        <div className="palette-grid" style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 14 }}>
          <PaletteSwatch hex="#F4EFE7" name="Sand" note={ar ? "الجدران الرمليّة" : "Sand walls"} />
          <PaletteSwatch hex="#FBF8F2" name="Paper" note={ar ? "ضوء أبيض" : "Diffused white"} />
          <PaletteSwatch hex="#8FA398" name="Sage" note={ar ? "حرير القفطان" : "Silk of the kaftan"} dark />
          <PaletteSwatch hex="#A8884E" name="Brass" note={ar ? "قضبان العرض" : "Display rails"} dark />
          <PaletteSwatch hex="#26241F" name="Ink" note={ar ? "نص" : "Text"} dark />
          <PaletteSwatch hex="#B7C2BA" name="Eau-de-nil" note={ar ? "ظلال" : "Subtle accents"} />
        </div>
        <p className="muted" style={{ maxWidth: "62ch", marginTop: 32, fontSize: 14 }}>
          {ar
            ? "هذه اللوحة مأخوذة مباشرة من الصورتين الحقيقيتين المتاحتين — قفطان الحرير ذو التطريز الذهبي وداخلية الجاليري. ستظل ساكنة حتى يمدّنا العميل بصور حقيقية."
            : "This palette is taken directly from the two real images on record — the embroidered silk kaftan and the gallery interior. It will remain restrained until client photography arrives."}
        </p>
      </section>

      <Callout onNav={onNav} locale={locale} title={ar ? "للزيارة، احجز موعدًا. الأتيليه يفتح للموعد فقط." : "To visit, please book — the atelier opens only by appointment."} />

      <style>{`
        @media (min-width: 900px) {
          .atelier-grid { grid-template-columns: 1.1fr 1fr !important; gap: 96px !important; align-items: start !important; }
          .palette-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 18px !important; }
        }
      `}</style>
    </main>
  );
}

function PaletteSwatch({ hex, name, note, dark }) {
  return (
    <div style={{ background: hex, borderRadius: "var(--radius-lg)", padding: "32px 24px", color: dark ? "#FBF8F2" : "#26241F", border: "1px solid var(--border)", minHeight: 140, display: "flex", flexDirection: "column", justifyContent: "space-between" }}>
      <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.12em", textTransform: "uppercase", opacity: 0.7 }}>{hex}</div>
      <div>
        <div style={{ fontFamily: "var(--font-display)", fontSize: 24, fontWeight: 500 }}>{name}</div>
        <div style={{ fontSize: 13, opacity: 0.8, marginTop: 2 }}>{note}</div>
      </div>
    </div>
  );
}

/* ============================================================
   APPOINTMENTS
   ============================================================ */
function AppointmentsPage({ onNav, locale, callConfirmed, waConfirmed, toast }) {
  const ar = locale === "ar";
  const [form, setForm] = useStateQ({
    name: "", phone: "", email: "",
    date: "", time: "",
    purpose: "consultation",
    message: "",
  });
  const [submitted, setSubmitted] = useStateQ(false);
  const [touched, setTouched] = useStateQ({});

  const purposes = [
    { id: "consultation", title: { en: "Consultation", ar: "استشارة" }, sub: { en: "First visit", ar: "زيارة أولى" } },
    { id: "fitting",      title: { en: "Fitting", ar: "قياس" },        sub: { en: "Existing brief", ar: "موجز قائم" } },
    { id: "alteration",   title: { en: "Alteration", ar: "تعديل" },     sub: { en: "Adjust a piece", ar: "تعديل قطعة" } },
    { id: "enquiry",      title: { en: "Enquiry", ar: "استفسار" },      sub: { en: "Not sure yet", ar: "لست متأكدًا" } },
  ];

  const times = ["10:00", "11:00", "12:00", "14:00", "15:00", "16:00", "17:00", "18:00"];
  const tomorrow = useMemoQ(() => {
    const d = new Date(); d.setDate(d.getDate() + 1);
    return d.toISOString().slice(0, 10);
  }, []);

  const set = (k, v) => setForm(f => ({ ...f, [k]: v }));
  const valid = form.name && form.phone && form.date && form.time;

  const submit = (e) => {
    e.preventDefault();
    setTouched({ name: true, phone: true, date: true, time: true });
    if (!valid) return;
    setSubmitted(true);
    toast(ar ? "تم استلام طلبك. سنؤكّد قريبًا." : "Request received. We'll confirm shortly.");
  };

  const purposeLabel = (id) => {
    const p = purposes.find(x => x.id === id);
    return ar ? p.title.ar : p.title.en;
  };

  return (
    <main className="page-enter" data-screen-label="06 Appointments">
      <section className="container" style={{ paddingTop: 56 }}>
        <Crumb items={[{ to: "home", label: ar ? "الرئيسية" : "Home" }, { label: ar ? "احجز موعدًا" : "Appointments" }]} onNav={onNav} />
      </section>

      <section className="container section">
        <div className="page-head" style={{ display: "grid", gridTemplateColumns: "1fr", gap: 32 }}>
          <div>
            <Eyebrow>{ar ? "احجز موعدًا" : "Book an appointment"}</Eyebrow>
            <h1 className="display display-xl" style={{ marginTop: 16, maxWidth: "14ch" }}>
              {ar ? "اختر وقتًا. نُؤكِّد." : "Pick a time. We'll confirm."}
            </h1>
          </div>
          <p className="lead">
            {ar
              ? "نستقبل عميلًا واحدًا في كل مرة. شارك تفاصيلك أدناه وسنتواصل لتأكيد الموعد. لا توجد دفعات إلكترونية."
              : "We see one client at a time. Share your details below and we'll be in touch to confirm. No online payments."}
          </p>
        </div>

        <div className="spacer-48"></div>

        {submitted ? (
          <SubmittedState form={form} purposeLabel={purposeLabel} onAgain={() => { setSubmitted(false); setForm({ name:"", phone:"", email:"", date:"", time:"", purpose:"consultation", message:"" }); }} locale={locale} waConfirmed={waConfirmed} />
        ) : (
          <div className="appointment-grid">
            <form className="stack stack-32" onSubmit={submit} noValidate>
              <div>
                <div className="eyebrow eyebrow-rule" style={{ marginBottom: 14 }}>{ar ? "01 — الغرض من الزيارة" : "01 — Purpose"}</div>
                <div className="purpose-grid">
                  {purposes.map(p => (
                    <button type="button" key={p.id}
                      className={"purpose-tile" + (form.purpose === p.id ? " active" : "")}
                      onClick={() => set("purpose", p.id)}>
                      <span className="pt-title">{ar ? p.title.ar : p.title.en}</span>
                      <span className="pt-sub">{ar ? p.sub.ar : p.sub.en}</span>
                    </button>
                  ))}
                </div>
              </div>

              <div>
                <div className="eyebrow eyebrow-rule" style={{ marginBottom: 14 }}>{ar ? "02 — تفاصيلك" : "02 — Your details"}</div>
                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
                  <div className="field" style={{ gridColumn: "1 / -1" }}>
                    <label>{ar ? "الاسم" : "Name"}</label>
                    <input type="text" value={form.name} onChange={(e) => set("name", e.target.value)} onBlur={() => setTouched(t => ({ ...t, name: true }))} aria-invalid={touched.name && !form.name} />
                  </div>
                  <div className="field">
                    <label>{ar ? "الهاتف" : "Phone"}</label>
                    <input type="tel" value={form.phone} onChange={(e) => set("phone", e.target.value)} onBlur={() => setTouched(t => ({ ...t, phone: true }))} aria-invalid={touched.phone && !form.phone} placeholder="+971 …" />
                  </div>
                  <div className="field">
                    <label>{ar ? "البريد (اختياري)" : "Email (optional)"}</label>
                    <input type="email" value={form.email} onChange={(e) => set("email", e.target.value)} />
                  </div>
                </div>
              </div>

              <div>
                <div className="eyebrow eyebrow-rule" style={{ marginBottom: 14 }}>{ar ? "03 — التاريخ والوقت" : "03 — Date & time"}</div>
                <div style={{ display: "grid", gridTemplateColumns: "1fr", gap: 16 }}>
                  <div className="field">
                    <label>{ar ? "التاريخ المفضّل" : "Preferred date"}</label>
                    <input type="date" min={tomorrow} value={form.date} onChange={(e) => set("date", e.target.value)} />
                  </div>
                  <div className="field">
                    <label>{ar ? "الوقت المفضّل" : "Preferred time"}</label>
                    <div className="time-grid">
                      {times.map(t => {
                        const disabled = (t === "13:00");
                        return (
                          <button type="button" key={t} disabled={disabled}
                            className={"time-tile" + (form.time === t ? " active" : "") + (disabled ? " disabled" : "")}
                            onClick={() => !disabled && set("time", t)}>
                            {t}
                          </button>
                        );
                      })}
                    </div>
                  </div>
                </div>
              </div>

              <div>
                <div className="eyebrow eyebrow-rule" style={{ marginBottom: 14 }}>{ar ? "04 — ملاحظة (اختياري)" : "04 — Note (optional)"}</div>
                <div className="field">
                  <label>{ar ? "ما الذي تودّ مشاركته؟" : "Anything you'd like to share?"}</label>
                  <textarea value={form.message} onChange={(e) => set("message", e.target.value)} placeholder={ar ? "المناسبة، الموعد المستهدف، المراجع…" : "Occasion, target date, references…"} />
                </div>
                <div className="field" style={{ marginTop: 16 }}>
                  <label>{ar ? "ارفع صورة مرجعية (اختياري)" : "Reference image (optional)"}</label>
                  <input type="file" accept="image/*" style={{ background: "transparent", border: "1px dashed var(--border-strong)", padding: "20px 14px" }} />
                </div>
              </div>

              <div className="flex-row" style={{ marginTop: 8 }}>
                <button type="submit" className="btn btn-primary" disabled={!valid} style={!valid ? { opacity: 0.5, cursor: "not-allowed" } : null}>
                  {ar ? "أرسل الطلب" : "Request Appointment"} →
                </button>
                <button type="button" className={"btn btn-ghost" + (waConfirmed ? "" : " btn-disabled")}
                  onClick={() => waConfirmed && window.open("https://wa.me/971504556455", "_blank")}>
                  {ar ? "واتساب" : "Or WhatsApp"} {!waConfirmed && <Flag>pending</Flag>}
                </button>
              </div>
            </form>

            <aside>
              <div className="summary-card">
                <Eyebrow>{ar ? "ملخص الطلب" : "Request summary"}</Eyebrow>
                <h3 className="display display-s" style={{ margin: "12px 0 22px" }}>
                  {ar ? "ما سنُؤكِّده" : "What we'll confirm"}
                </h3>
                <dl>
                  <dt>{ar ? "الغرض" : "Purpose"}</dt>
                  <dd>{purposeLabel(form.purpose)}</dd>
                  <dt>{ar ? "الاسم" : "Name"}</dt>
                  <dd>{form.name || <span className="muted">—</span>}</dd>
                  <dt>{ar ? "الهاتف" : "Phone"}</dt>
                  <dd>{form.phone || <span className="muted">—</span>}</dd>
                  <dt>{ar ? "التاريخ" : "Date"}</dt>
                  <dd>{form.date || <span className="muted">—</span>}</dd>
                  <dt>{ar ? "الوقت" : "Time"}</dt>
                  <dd>{form.time || <span className="muted">—</span>}</dd>
                </dl>
                <hr className="hr-rule" style={{ margin: "24px 0" }} />
                <p className="muted" style={{ fontSize: 13, margin: 0 }}>
                  {ar
                    ? "نُرسل تأكيدًا خلال يوم عمل. لا تُمرَّر بياناتك إلى طرف ثالث."
                    : "We confirm within one working day. Your details are not shared with third parties."}
                </p>
                <div style={{ marginTop: 22, display: "grid", gap: 8 }}>
                  <Flag>Form posts to Formspree / Netlify (demo)</Flag>
                  <Flag>WhatsApp deep-link feature-flagged off</Flag>
                </div>
              </div>
            </aside>
          </div>
        )}
      </section>
      <style>{`
        @media (min-width: 900px) {
          .page-head { grid-template-columns: 1.3fr 1fr !important; gap: 64px !important; align-items: end !important; }
        }
      `}</style>
    </main>
  );
}

function SubmittedState({ form, purposeLabel, onAgain, locale, waConfirmed }) {
  const ar = locale === "ar";
  return (
    <div className="success-state">
      <svg width="56" height="56" viewBox="0 0 56 56" fill="none" style={{ margin: "0 auto 24px" }}>
        <circle cx="28" cy="28" r="27" stroke="#A8884E" strokeWidth="1" />
        <path d="M17 28.5l8 8 14-16" stroke="#26241F" strokeWidth="1.5" fill="none" strokeLinecap="round" strokeLinejoin="round" />
      </svg>
      <Eyebrow>{ar ? "تم استلام طلبك" : "Request received"}</Eyebrow>
      <h2 className="display display-m" style={{ margin: "14px auto 16px", maxWidth: "20ch" }}>
        {ar ? "سنعاود التواصل لتأكيد موعدك." : "We'll be in touch to confirm your visit."}
      </h2>
      <p className="muted" style={{ maxWidth: "44ch", margin: "0 auto 28px" }}>
        {ar
          ? `طلب ${purposeLabel(form.purpose)} يوم ${form.date} الساعة ${form.time}. سنرسل التأكيد خلال يوم عمل.`
          : `${purposeLabel(form.purpose)} on ${form.date} at ${form.time}. Expect a confirmation within one working day.`}
      </p>
      <div className="flex-row" style={{ justifyContent: "center" }}>
        <button className="btn btn-ghost" onClick={onAgain}>{ar ? "إرسال طلب آخر" : "Make another request"}</button>
        {waConfirmed && <button className="btn btn-primary" onClick={() => window.open("https://wa.me/971504556455", "_blank")}>{ar ? "تابع عبر واتساب" : "Continue on WhatsApp"}</button>}
      </div>
    </div>
  );
}

/* ============================================================
   CONTACT
   ============================================================ */
function ContactPage({ onNav, locale, callConfirmed, waConfirmed }) {
  const ar = locale === "ar";
  return (
    <main className="page-enter" data-screen-label="07 Contact">
      <section className="container" style={{ paddingTop: 56 }}>
        <Crumb items={[{ to: "home", label: ar ? "الرئيسية" : "Home" }, { label: ar ? "تواصل" : "Contact" }]} onNav={onNav} />
      </section>

      <section className="container section">
        <div className="page-head" style={{ display: "grid", gridTemplateColumns: "1fr", gap: 32 }}>
          <div>
            <Eyebrow>{ar ? "تواصل" : "Contact"}</Eyebrow>
            <h1 className="display display-xl" style={{ marginTop: 16, maxWidth: "14ch" }}>
              {ar ? "زيارة، لا تسوّق." : "A visit, not a shop."}
            </h1>
          </div>
          <p className="lead">
            {ar
              ? "يفتح الاستوديو بالموعد فقط في حي دبي للتصميم. يُنصَح بحجز الموعد قبل الحضور."
              : "The studio opens by appointment at Dubai Design District. Please book before you arrive."}
          </p>
        </div>

        <div className="spacer-48"></div>

        <div className="contact-grid" style={{ display: "grid", gridTemplateColumns: "1fr", gap: 32 }}>
          <div className="stack stack-24">
            <div className="card">
              <Eyebrow>{ar ? "الموقع" : "Address"}</Eyebrow>
              <p style={{ fontFamily: "var(--font-display)", fontSize: 22, lineHeight: 1.3, margin: "14px 0 0" }}>
                Building 07, Office Entrance<br/>
                No. B203 · Dubai Design District<br/>
                Dubai, United Arab Emirates
              </p>
              <div style={{ marginTop: 16 }}>
                <Flag>CONFIRM · B203 vs 203B</Flag>
              </div>
            </div>
            <div className="card">
              <Eyebrow>{ar ? "الهاتف" : "Phone"}</Eyebrow>
              <div style={{ marginTop: 14, display: "grid", gap: 14 }}>
                <ContactLine
                  k={ar ? "أرضي" : "Landline"}
                  v="+971 4 436 2671"
                  state={callConfirmed ? "live" : "pending"}
                  ar={ar} />
                <ContactLine
                  k={ar ? "جوال" : "Mobile"}
                  v="+971 50 4556455"
                  state={waConfirmed ? "live" : "pending"}
                  ar={ar} />
              </div>
              <div style={{ marginTop: 18 }}>
                <Flag>Live booking line publishing pending confirmation</Flag>
              </div>
            </div>
            <div className="card">
              <Eyebrow>{ar ? "الساعات" : "Hours"}</Eyebrow>
              <div style={{ marginTop: 14, display: "grid", gap: 8 }}>
                <div style={{ display: "flex", justifyContent: "space-between", fontSize: 14 }}>
                  <span>{ar ? "السبت – الخميس" : "Saturday – Thursday"}</span>
                  <span className="muted">09:00 – 19:00 <Flag>directory · confirm</Flag></span>
                </div>
                <div style={{ display: "flex", justifyContent: "space-between", fontSize: 14 }}>
                  <span>{ar ? "الجمعة" : "Friday"}</span>
                  <span className="muted">closed <Flag>d3 vs HiDubai conflict</Flag></span>
                </div>
                <div style={{ paddingTop: 12, borderTop: "1px solid var(--border)", fontSize: 14, fontWeight: 500 }}>
                  {ar ? "كل الزيارات بالموعد المُسبق." : "All visits by prior appointment."}
                </div>
              </div>
            </div>
          </div>

          <div className="stack stack-24">
            <MapBlock />
            <div className="card">
              <Eyebrow>{ar ? "ما لا تجده هنا" : "What's not here"}</Eyebrow>
              <ul style={{ paddingInlineStart: 18, margin: "14px 0 0", color: "var(--muted)", fontSize: 14, lineHeight: 1.8 }}>
                <li>{ar ? "لا أسعار معلنة" : "No published prices"}</li>
                <li>{ar ? "لا تقييمات عامة" : "No public ratings"}</li>
                <li>{ar ? "لا قنوات اجتماعية مؤكدة" : "No confirmed social handles"}</li>
                <li>{ar ? "لا متجر إلكتروني" : "No online shop"}</li>
              </ul>
              <p className="muted" style={{ fontSize: 13, marginTop: 16 }}>
                {ar
                  ? "هذه قيود متعمَّدة. سيُملأ كلٌّ منها فقط حين يؤكّده العميل."
                  : "These omissions are deliberate. Each will be filled in only when confirmed by the client."}
              </p>
            </div>
          </div>
        </div>
      </section>
      <Callout onNav={onNav} locale={locale} />
      <style>{`
        @media (min-width: 900px) {
          .page-head { grid-template-columns: 1.3fr 1fr !important; gap: 64px !important; align-items: end !important; }
          .contact-grid { grid-template-columns: 1fr 1.1fr !important; gap: 32px !important; }
        }
      `}</style>
    </main>
  );
}

function ContactLine({ k, v, state, ar }) {
  const isLive = state === "live";
  return (
    <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 16, flexWrap: "wrap" }}>
      <div>
        <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--muted)" }}>{k}</div>
        <div style={{ fontFamily: "var(--font-display)", fontSize: 22, marginTop: 4, opacity: isLive ? 1 : 0.5, fontVariantNumeric: "tabular-nums" }}>{v}</div>
      </div>
      <div>
        {isLive
          ? <a className="btn btn-ghost btn-sm" href={"tel:" + v.replace(/\s/g, "")}>{ar ? "اتصل" : "Call"}</a>
          : <Flag>not published</Flag>}
      </div>
    </div>
  );
}

function MapBlock() {
  return (
    <div className="map-block" role="img" aria-label="Map of Dubai Design District">
      <div className="map-confirm">
        <Flag>Confirm pin lands on the correct office</Flag>
      </div>
      <svg width="100%" height="100%" style={{ position: "absolute", inset: 0, opacity: 0.5 }} viewBox="0 0 400 225" preserveAspectRatio="none">
        <path d="M-10 130 Q 100 100, 180 150 T 410 130" stroke="#A8884E" strokeWidth="1" fill="none" opacity="0.5" />
        <path d="M50 -10 L 80 100 L 60 200 L 120 230" stroke="#6E665A" strokeWidth="0.8" fill="none" opacity="0.4" />
        <path d="M250 -10 L 220 90 L 280 200" stroke="#6E665A" strokeWidth="0.8" fill="none" opacity="0.4" />
        <rect x="60" y="60" width="30" height="22" fill="none" stroke="#6E665A" strokeWidth="0.5" opacity="0.5" />
        <rect x="120" y="40" width="40" height="30" fill="none" stroke="#6E665A" strokeWidth="0.5" opacity="0.5" />
        <rect x="240" y="70" width="36" height="42" fill="none" stroke="#6E665A" strokeWidth="0.5" opacity="0.5" />
        <rect x="310" y="40" width="50" height="28" fill="none" stroke="#6E665A" strokeWidth="0.5" opacity="0.5" />
      </svg>
      <div className="map-pin">
        <div className="pin-label">Bldg 07 · Office B203</div>
        <div className="pin-dot"></div>
      </div>
      <div style={{ position: "absolute", bottom: 14, right: 14, fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--muted)", background: "var(--surface)", padding: "4px 8px", border: "1px solid var(--border)", borderRadius: 2 }}>
        25.18875 N · 55.29768 E
      </div>
    </div>
  );
}

Object.assign(window, { LookbookPage, AtelierPage, AppointmentsPage, ContactPage, MapBlock });