/* =========================
   WEDDINGS & EVENTS
   ========================= */
function WeddingsPage({ go }) {
  const [step, setStep] = useState(1);
  const [form, setForm] = useState({
    type: "Wedding",
    guests: "100-200",
    date: "",
    venue: "",
    name: "",
    email: "",
    phone: "",
    budget: "AED 50K – 100K",
    vision: "",
  });
  const update = (k, v) => setForm((f) => ({ ...f, [k]: v }));
  const submitted = step === 99;

  return (
    <div>
      {/* HERO */}
      <section
        style={{
          position: "relative",
          minHeight: "70vh",
          display: "flex",
          alignItems: "flex-end",
          color: "var(--ivory)",
          overflow: "hidden",
        }}
      >
        <img
          src="media/category-events.webp"
          alt=""
          style={{
            position: "absolute",
            inset: 0,
            width: "100%",
            height: "100%",
            objectFit: "cover",
            zIndex: 0,
          }}
        />
        <div
          style={{
            position: "absolute",
            inset: 0,
            background:
              "linear-gradient(to top, rgba(42,35,32,0.75) 0%, rgba(42,35,32,0.2) 45%, rgba(42,35,32,0.6) 100%)",
            zIndex: 1,
          }}
        />
        <div className="container" style={{ position: "relative", zIndex: 2, padding: "80px 32px 64px" }}>
          <div className="eyebrow" style={{ marginBottom: 18, color: "var(--gold-2)" }}>
            Weddings &amp; Events · By the atelier
          </div>
          <h1
            className="serif"
            style={{
              fontSize: "clamp(48px, 7vw, 112px)",
              lineHeight: 0.95,
              margin: 0,
              maxWidth: 1000,
              fontWeight: 300,
              letterSpacing: "-0.01em",
            }}
          >
            We build the flowers
            <br />
            <em style={{ fontStyle: "italic", color: "var(--gold-2)" }}>
              you remember.
            </em>
          </h1>
          <p
            style={{
              marginTop: 28,
              fontSize: 17,
              maxWidth: 580,
              lineHeight: 1.6,
              color: "rgba(251,246,240,0.92)",
            }}
          >
            Concept, build and tear-down. Ceremony aisles to after-party walls.
            One atelier, end-to-end.
          </p>
        </div>
      </section>

      {/* WHAT WE DO */}
      <section className="section">
        <div className="container">
          <div
            style={{
              display: "grid",
              gridTemplateColumns: "1fr 1.4fr",
              gap: 80,
              alignItems: "flex-start",
            }}
            className="wd-do-grid"
          >
            <div style={{ position: "sticky", top: 140 }}>
              <div className="eyebrow gold-text" style={{ marginBottom: 14 }}>
                What we do
              </div>
              <h2
                className="serif"
                style={{
                  fontSize: "clamp(36px, 4.4vw, 64px)",
                  margin: 0,
                  lineHeight: 1.02,
                  fontWeight: 400,
                }}
              >
                Eight chapters.
                <br />
                One celebration.
              </h2>
              <p style={{ marginTop: 24, fontSize: 16, lineHeight: 1.65, color: "var(--ink-soft)" }}>
                We engage early — moodboards, walkthroughs, a built sample.
                You see the day before it happens.
              </p>
            </div>

            <div>
              {[
                ["01", "Discovery", "We meet, you tell us about the day. We listen for the small things."],
                ["02", "Mood & palette", "Boards, palettes, varieties. A floral language we'll write the day in."],
                ["03", "Site visit", "We walk the venue with you — lighting, scale, sightlines."],
                ["04", "Sample build", "A 1/4-scale or full-size sample of the centerpiece, in the studio."],
                ["05", "Production", "Hand-build in our d3 atelier. Cold-chain to the venue."],
                ["06", "Install", "Crew on site from morning. Aisle, tablescape, backdrop, install."],
                ["07", "Live show", "We stay on site through cocktail hour for any quick changes."],
                ["08", "Tear-down", "Out by 2 am. The venue looks the way you found it."],
              ].map(([n, h, b]) => (
                <div
                  key={n}
                  style={{
                    display: "grid",
                    gridTemplateColumns: "80px 1fr",
                    gap: 32,
                    padding: "28px 0",
                    borderBottom: "1px solid var(--line)",
                    alignItems: "baseline",
                  }}
                >
                  <div className="serif gold-text" style={{ fontSize: 36, lineHeight: 1, fontWeight: 300 }}>
                    {n}
                  </div>
                  <div>
                    <div className="serif" style={{ fontSize: 24, lineHeight: 1.15, marginBottom: 8 }}>
                      {h}
                    </div>
                    <div style={{ fontSize: 15, color: "var(--ink-soft)", lineHeight: 1.6 }}>
                      {b}
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
        <style>{`
          @media (max-width: 980px) {
            .wd-do-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
            .wd-do-grid > div:first-child { position: static !important; }
          }
        `}</style>
      </section>

      {/* PORTFOLIO STRIP — placeholder gated by permissions */}
      <section style={{ background: "var(--paper)", padding: "96px 0" }}>
        <div className="container">
          <div className="eyebrow gold-text" style={{ marginBottom: 14 }}>
            Selected work · names withheld
          </div>
          <h2
            className="serif"
            style={{
              fontSize: "clamp(34px, 4.2vw, 56px)",
              margin: 0,
              fontWeight: 400,
            }}
          >
            From the archive.
          </h2>
          <p style={{ marginTop: 16, fontSize: 14, color: "var(--muted)", maxWidth: 580 }}>
            We don&rsquo;t share client or event names without explicit permission. Full
            portfolio with credits available on enquiry.
          </p>

          <div
            className="archive-grid"
            style={{
              marginTop: 56,
              display: "grid",
              gridTemplateColumns: "repeat(12, 1fr)",
              gap: 18,
            }}
          >
            {[
              { src: "media/category-events.webp", label: "Marquee · 220 guests · 2024", span: 7, ratio: "5/3" },
              { src: "media/editorial-03.webp", label: "Backdrop · graduation · 2026", span: 5, ratio: "1/1" },
              { src: "media/category-decor.webp", label: "Tablescape · private home", span: 5, ratio: "5/6" },
              { src: "media/editorial-01.webp", label: "Welcome flowers · launch", span: 4, ratio: "4/5" },
              { src: "media/product-luxury-02.webp", label: "Head table · 1.2 m install", span: 3, ratio: "3/4" },
            ].map((it, i) => (
              <div
                key={i}
                style={{
                  gridColumn: "span " + it.span,
                  aspectRatio: it.ratio,
                  overflow: "hidden",
                  position: "relative",
                  background: "#f4ece3",
                }}
                className="archive-tile"
              >
                <img
                  src={it.src}
                  alt={it.label}
                  style={{
                    width: "100%",
                    height: "100%",
                    objectFit: "cover",
                    transition: "transform 0.7s ease",
                  }}
                />
                <div
                  style={{
                    position: "absolute",
                    left: 18,
                    bottom: 16,
                    color: "var(--ivory)",
                    fontSize: 11,
                    letterSpacing: "0.22em",
                    textTransform: "uppercase",
                    background: "rgba(42,35,32,0.65)",
                    padding: "6px 10px",
                    backdropFilter: "blur(4px)",
                  }}
                >
                  {it.label}
                </div>
              </div>
            ))}
          </div>
        </div>
        <style>{`
          .archive-tile:hover img { transform: scale(1.04); }
          @media (max-width: 880px) {
            .archive-grid { grid-template-columns: repeat(2, 1fr) !important; }
            .archive-grid > div { grid-column: span 1 !important; aspect-ratio: 4/5 !important; }
          }
        `}</style>
      </section>

      {/* ENQUIRY FORM */}
      <section className="section" style={{ background: "var(--ink)", color: "var(--ivory)" }}>
        <div className="container">
          <div
            style={{
              display: "grid",
              gridTemplateColumns: "1fr 1.4fr",
              gap: 64,
            }}
            className="wd-enq-grid"
          >
            <div>
              <div className="eyebrow" style={{ marginBottom: 16, color: "var(--gold-2)" }}>
                Start an enquiry
              </div>
              <h2
                className="serif"
                style={{
                  fontSize: "clamp(36px, 4.4vw, 60px)",
                  margin: 0,
                  fontWeight: 300,
                  lineHeight: 1.02,
                }}
              >
                Tell us about the day.
                <br />
                <em style={{ fontStyle: "italic", color: "var(--gold-2)" }}>
                  We&rsquo;ll do the rest.
                </em>
              </h2>
              <p
                style={{
                  marginTop: 24,
                  fontSize: 16,
                  lineHeight: 1.65,
                  color: "rgba(251,246,240,0.75)",
                  maxWidth: 380,
                }}
              >
                A senior florist replies within one business day. Or send a quick
                note on WhatsApp.
              </p>
              <a
                href={CONTACT.whatsapp}
                target="_blank"
                rel="noreferrer"
                className="btn btn-ghost-light btn-sm"
                style={{ marginTop: 22 }}
              >
                <Icon name="whatsapp" size={14} /> WhatsApp · {CONTACT.mobile}
              </a>
            </div>

            {submitted ? (
              <div
                style={{
                  background: "rgba(251,246,240,0.05)",
                  border: "1px solid rgba(234,202,142,0.4)",
                  padding: 56,
                  textAlign: "center",
                }}
              >
                <div className="gold-text" style={{ display: "inline-flex" }}>
                  <Icon name="check" size={40} />
                </div>
                <div
                  className="serif gold-text"
                  style={{ fontSize: 36, marginTop: 12, fontWeight: 300 }}
                >
                  Merci.
                </div>
                <p style={{ marginTop: 12, color: "rgba(251,246,240,0.8)" }}>
                  We&rsquo;ll reply to <strong>{form.email || "your email"}</strong>{" "}
                  within one business day. For anything urgent, WhatsApp{" "}
                  {CONTACT.mobile}.
                </p>
                <button
                  onClick={() => {
                    setStep(1);
                    setForm({
                      type: "Wedding",
                      guests: "100-200",
                      date: "",
                      venue: "",
                      name: "",
                      email: "",
                      phone: "",
                      budget: "AED 50K – 100K",
                      vision: "",
                    });
                  }}
                  style={{
                    marginTop: 28,
                    fontSize: 12,
                    letterSpacing: "0.22em",
                    textTransform: "uppercase",
                    color: "var(--ivory)",
                    borderBottom: "1px solid var(--ivory)",
                    paddingBottom: 4,
                  }}
                >
                  Send another
                </button>
              </div>
            ) : (
              <div>
                <div
                  style={{
                    display: "flex",
                    gap: 24,
                    marginBottom: 36,
                    fontSize: 11,
                    letterSpacing: "0.22em",
                    textTransform: "uppercase",
                  }}
                >
                  {["The event", "About you", "Vision"].map((s, i) => {
                    const n = i + 1;
                    return (
                      <button
                        key={s}
                        onClick={() => setStep(n)}
                        style={{
                          color: step === n ? "var(--gold-2)" : "rgba(251,246,240,0.55)",
                          paddingBottom: 8,
                          borderBottom: "1px solid " + (step === n ? "var(--gold-2)" : "transparent"),
                          fontWeight: 500,
                        }}
                      >
                        0{n} · {s}
                      </button>
                    );
                  })}
                </div>

                {step === 1 && (
                  <div className="form-rows">
                    <div className="row-2">
                      <FormField
                        label="What are we building?"
                        type="select"
                        value={form.type}
                        onChange={(v) => update("type", v)}
                        options={[
                          "Wedding",
                          "Engagement",
                          "Corporate event",
                          "Launch / brand",
                          "Birthday",
                          "Private celebration",
                          "Other",
                        ]}
                      />
                      <FormField
                        label="Guest count"
                        type="select"
                        value={form.guests}
                        onChange={(v) => update("guests", v)}
                        options={["< 50", "50-100", "100-200", "200-500", "500+"]}
                      />
                    </div>
                    <div className="row-2">
                      <FormField
                        label="Date"
                        type="date"
                        value={form.date}
                        onChange={(v) => update("date", v)}
                      />
                      <FormField
                        label="Venue or city"
                        value={form.venue}
                        onChange={(v) => update("venue", v)}
                        placeholder="e.g. Atlantis · Dubai"
                      />
                    </div>
                    <div style={{ display: "flex", justifyContent: "flex-end", marginTop: 24 }}>
                      <button onClick={() => setStep(2)} className="btn btn-primary">
                        Next →
                      </button>
                    </div>
                  </div>
                )}

                {step === 2 && (
                  <div className="form-rows">
                    <FormField
                      label="Your name"
                      value={form.name}
                      onChange={(v) => update("name", v)}
                      placeholder="Full name"
                    />
                    <div className="row-2">
                      <FormField
                        label="Email"
                        type="email"
                        value={form.email}
                        onChange={(v) => update("email", v)}
                        placeholder="you@elsewhere.com"
                      />
                      <FormField
                        label="Phone / WhatsApp"
                        type="tel"
                        value={form.phone}
                        onChange={(v) => update("phone", v)}
                        placeholder="+971 ..."
                      />
                    </div>
                    <FormField
                      label="Budget range (AED)"
                      type="select"
                      value={form.budget}
                      onChange={(v) => update("budget", v)}
                      options={[
                        "Under AED 25K",
                        "AED 25K – 50K",
                        "AED 50K – 100K",
                        "AED 100K – 250K",
                        "AED 250K +",
                        "Open to advice",
                      ]}
                    />
                    <div style={{ display: "flex", justifyContent: "space-between", marginTop: 24 }}>
                      <button onClick={() => setStep(1)} className="btn btn-ghost-light btn-sm">
                        ← Back
                      </button>
                      <button onClick={() => setStep(3)} className="btn btn-primary">
                        Next →
                      </button>
                    </div>
                  </div>
                )}

                {step === 3 && (
                  <div className="form-rows">
                    <FormField
                      label="The vision"
                      type="textarea"
                      value={form.vision}
                      onChange={(v) => update("vision", v)}
                      placeholder="Mood, palette, varieties, references — say as much or as little as you'd like."
                    />
                    <div style={{ fontSize: 13, color: "rgba(251,246,240,0.7)", marginTop: 12 }}>
                      Attachments (PDFs, moodboards) can be sent in reply once we&rsquo;ve received your note.
                    </div>
                    <div style={{ display: "flex", justifyContent: "space-between", marginTop: 24 }}>
                      <button onClick={() => setStep(2)} className="btn btn-ghost-light btn-sm">
                        ← Back
                      </button>
                      <button
                        onClick={() => setStep(99)}
                        className="btn btn-primary"
                      >
                        Send to the atelier →
                      </button>
                    </div>
                  </div>
                )}
              </div>
            )}
          </div>
        </div>

        <style>{`
          .form-rows { display: grid; gap: 22px; }
          .row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
          @media (max-width: 720px) { .row-2 { grid-template-columns: 1fr; } }
          @media (max-width: 880px) {
            .wd-enq-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
          }
        `}</style>
      </section>
    </div>
  );
}

function FormField({ label, type = "text", value, onChange, options, placeholder }) {
  const baseStyle = {
    width: "100%",
    background: "transparent",
    border: 0,
    borderBottom: "1px solid rgba(251,246,240,0.3)",
    padding: "12px 0",
    fontSize: 16,
    color: "var(--ivory)",
    outline: "none",
    fontFamily: "inherit",
  };
  return (
    <label style={{ display: "flex", flexDirection: "column", gap: 8 }}>
      <span
        style={{
          fontSize: 11,
          letterSpacing: "0.22em",
          textTransform: "uppercase",
          color: "rgba(251,246,240,0.55)",
          fontWeight: 500,
        }}
      >
        {label}
      </span>
      {type === "select" ? (
        <select value={value} onChange={(e) => onChange(e.target.value)} style={baseStyle}>
          {options.map((o) => (
            <option key={o} value={o} style={{ background: "var(--ink)" }}>
              {o}
            </option>
          ))}
        </select>
      ) : type === "textarea" ? (
        <textarea
          value={value}
          onChange={(e) => onChange(e.target.value)}
          placeholder={placeholder}
          rows={4}
          style={{ ...baseStyle, resize: "vertical", minHeight: 100 }}
        />
      ) : (
        <input
          type={type}
          value={value}
          onChange={(e) => onChange(e.target.value)}
          placeholder={placeholder}
          style={baseStyle}
        />
      )}
    </label>
  );
}

/* =========================
   ABOUT
   ========================= */
function AboutPage({ go }) {
  return (
    <div>
      <section style={{ background: "var(--paper)", padding: "96px 0 64px" }}>
        <div className="container" style={{ maxWidth: 900 }}>
          <div className="eyebrow gold-text" style={{ marginBottom: 20 }}>
            The House
          </div>
          <h1
            className="serif"
            style={{
              fontSize: "clamp(48px, 6vw, 96px)",
              lineHeight: 0.98,
              margin: 0,
              fontWeight: 400,
              letterSpacing: "-0.01em",
            }}
          >
            A workshop, a box,
            <br />
            <em style={{ fontStyle: "italic" }} className="gold-text">
              and an instinct.
            </em>
          </h1>
          <p
            style={{
              marginTop: 32,
              fontSize: 19,
              lineHeight: 1.65,
              color: "var(--ink-soft)",
              maxWidth: 720,
            }}
          >
            Maison des Fleurs began in 2014, in a single Dubai workshop, with the
            conviction that a flower could be a couture object — designed,
            constructed, and presented like one.
          </p>
        </div>
      </section>

      {/* Founder block */}
      <section className="section">
        <div className="container">
          <div
            className="founder-grid"
            style={{
              display: "grid",
              gridTemplateColumns: "1fr 1.4fr",
              gap: 64,
              alignItems: "center",
            }}
          >
            <div style={{ aspectRatio: "4/5", background: "var(--blush)", position: "relative", overflow: "hidden" }}>
              <div
                style={{
                  position: "absolute",
                  inset: 0,
                  background:
                    "repeating-linear-gradient(135deg, rgba(255,255,255,0.4) 0 2px, transparent 2px 24px)",
                }}
              />
              <div
                style={{
                  position: "absolute",
                  inset: 0,
                  display: "flex",
                  alignItems: "center",
                  justifyContent: "center",
                  textAlign: "center",
                  padding: 32,
                }}
              >
                <div>
                  <div className="eyebrow gold-text">Photo to come</div>
                  <div
                    className="serif"
                    style={{ fontSize: 32, marginTop: 12, lineHeight: 1.2 }}
                  >
                    Founder portrait
                  </div>
                  <div
                    style={{
                      fontSize: 12,
                      fontFamily: "monospace",
                      letterSpacing: "0.1em",
                      color: "var(--muted)",
                      marginTop: 20,
                    }}
                  >
                    [ media/founder-priya.jpg ]
                  </div>
                </div>
              </div>
            </div>

            <div>
              <div className="eyebrow gold-text" style={{ marginBottom: 14 }}>
                Founder · Priya Jelly
              </div>
              <h2 className="serif" style={{ fontSize: "clamp(32px, 4vw, 52px)", margin: 0, lineHeight: 1.05, fontWeight: 400 }}>
                A visual merchandiser by training. A florist by instinct.
              </h2>
              <div
                style={{
                  marginTop: 28,
                  fontSize: 16,
                  lineHeight: 1.75,
                  color: "var(--ink-soft)",
                  display: "grid",
                  gap: 18,
                }}
              >
                <p>
                  Born in Singapore. Trained in visual merchandising. In the UAE
                  since 2006. By 2014, Priya was thinking less about windows and
                  more about flowers — specifically, how to give them the
                  presentation they were missing.
                </p>
                <p>
                  Maison des Fleurs is what came next. A house built around
                  craft, palette and presentation — the kind of design discipline
                  she had spent a career applying to fashion.
                </p>
                <p>
                  Today, that idea sits in eight UAE boutiques, four international
                  cities, and the homes of clients who began with one box and now
                  send several.
                </p>
              </div>
            </div>
          </div>
        </div>
        <style>{`
          @media (max-width: 880px) {
            .founder-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
          }
        `}</style>
      </section>

      {/* Timeline */}
      <section style={{ background: "var(--ink)", color: "var(--ivory)", padding: "120px 0" }}>
        <div className="container">
          <div className="eyebrow" style={{ marginBottom: 16, color: "var(--gold-2)" }}>
            The journey
          </div>
          <h2
            className="serif"
            style={{
              fontSize: "clamp(36px, 4.4vw, 60px)",
              margin: 0,
              fontWeight: 300,
              lineHeight: 1,
            }}
          >
            From one box to <em style={{ fontStyle: "italic", color: "var(--gold-2)" }}>twelve cities</em>.
          </h2>

          <div
            className="timeline"
            style={{
              marginTop: 64,
              display: "grid",
              gridTemplateColumns: "repeat(5, 1fr)",
              gap: 28,
            }}
          >
            {[
              [
                "2014",
                "The first box",
                "The atelier opens in Dubai. The Flower Box is built. The brand's own claim: first to present it.",
              ],
              [
                "2015–17",
                "Press & pickup",
                "The National. Savoir Flair. AE World. A Khloé Kardashian Instagram pick-up reported by The National.",
              ],
              [
                "2018–20",
                "d3 & expansion",
                "Dubai Design District becomes the flagship. The UAE network grows to eight boutiques.",
              ],
              [
                "2021–24",
                "Crossing borders",
                "Boutiques open in Beirut, Riyadh, Kuwait. Long-life roses become a category of their own.",
              ],
              [
                "2026",
                "What's next",
                "Amman opens soon. The website you're reading is the next chapter — built for emotion, occasion and four languages.",
              ],
            ].map(([y, h, b]) => (
              <div
                key={y}
                style={{
                  borderTop: "1px solid rgba(234,202,142,0.4)",
                  paddingTop: 22,
                }}
              >
                <div className="serif gold-text" style={{ fontSize: 28, fontWeight: 400, lineHeight: 1 }}>
                  {y}
                </div>
                <div className="serif" style={{ fontSize: 20, marginTop: 12, lineHeight: 1.2 }}>
                  {h}
                </div>
                <p style={{ marginTop: 12, fontSize: 13.5, color: "rgba(251,246,240,0.7)", lineHeight: 1.6 }}>
                  {b}
                </p>
              </div>
            ))}
          </div>
        </div>
        <style>{`
          @media (max-width: 980px) {
            .timeline { grid-template-columns: 1fr 1fr !important; }
          }
          @media (max-width: 560px) {
            .timeline { grid-template-columns: 1fr !important; }
          }
        `}</style>
      </section>

      {/* Press */}
      <section className="section">
        <div className="container">
          <div className="eyebrow gold-text" style={{ marginBottom: 14 }}>
            Press · cited, never claimed
          </div>
          <h2 className="serif" style={{ fontSize: "clamp(32px, 4vw, 52px)", margin: 0, fontWeight: 400 }}>
            What others have written.
          </h2>
          <div
            style={{
              marginTop: 56,
              display: "grid",
              gridTemplateColumns: "repeat(3, 1fr)",
              gap: 24,
            }}
            className="press-grid"
          >
            {[
              ["The National", "2015", "On the rise of Dubai's Flower Box — and the boutique that started it."],
              ["Savoir Flair", "2017", "Inside Maison des Fleurs: a couture sensibility, applied to florals."],
              ["AE World", "2017", "The Dubai house turning flowers into objets — and posting them around the world."],
            ].map(([pub, yr, t]) => (
              <div
                key={pub}
                style={{
                  border: "1px solid var(--line)",
                  padding: 28,
                  background: "var(--ivory)",
                }}
              >
                <div className="eyebrow gold-text">{pub} · {yr}</div>
                <div className="serif" style={{ fontSize: 22, marginTop: 14, lineHeight: 1.3 }}>
                  &ldquo;{t}&rdquo;
                </div>
                <div
                  style={{
                    marginTop: 18,
                    fontSize: 11,
                    letterSpacing: "0.18em",
                    textTransform: "uppercase",
                    color: "var(--muted)",
                  }}
                >
                  Paraphrased — full quote on request
                </div>
              </div>
            ))}
          </div>
        </div>
        <style>{`
          @media (max-width: 980px) { .press-grid { grid-template-columns: 1fr !important; } }
        `}</style>
      </section>
    </div>
  );
}

/* =========================
   BOUTIQUES
   ========================= */
function BoutiquesPage({ go }) {
  const [selected, setSelected] = useState(BOUTIQUES[0]);
  const dubai = BOUTIQUES.filter((b) => b.city === "Dubai");
  const ad = BOUTIQUES.filter((b) => b.city === "Abu Dhabi");

  return (
    <div>
      <section style={{ background: "var(--paper)", padding: "72px 0 56px" }}>
        <div className="container">
          <div className="eyebrow gold-text" style={{ marginBottom: 14 }}>
            Boutiques
          </div>
          <h1 className="serif" style={{ fontSize: "clamp(40px, 5vw, 80px)", margin: 0, fontWeight: 400, lineHeight: 1 }}>
            Eight in the UAE.
            <br />
            <em style={{ fontStyle: "italic" }} className="gold-text">
              Four more abroad.
            </em>
          </h1>
        </div>
      </section>

      {/* Locator */}
      <section style={{ padding: "56px 0" }}>
        <div
          className="container"
          style={{
            display: "grid",
            gridTemplateColumns: "1.2fr 1.4fr",
            gap: 48,
          }}
        >
          <div>
            <div className="eyebrow" style={{ color: "var(--muted)", marginBottom: 16 }}>
              Dubai · 6 boutiques
            </div>
            <div style={{ display: "grid", gap: 10 }}>
              {dubai.map((b) => (
                <BoutiqueRow
                  key={b.name}
                  b={b}
                  active={selected.name === b.name}
                  onClick={() => setSelected(b)}
                />
              ))}
            </div>

            <div
              className="eyebrow"
              style={{ color: "var(--muted)", marginTop: 36, marginBottom: 16 }}
            >
              Abu Dhabi · 2 boutiques
            </div>
            <div style={{ display: "grid", gap: 10 }}>
              {ad.map((b) => (
                <BoutiqueRow
                  key={b.name}
                  b={b}
                  active={selected.name === b.name}
                  onClick={() => setSelected(b)}
                />
              ))}
            </div>
          </div>

          <div style={{ position: "sticky", top: 140, alignSelf: "flex-start" }}>
            <div
              style={{
                background: "var(--ivory)",
                border: "1px solid var(--line)",
              }}
            >
              <MapEmbed q={"Maison des Fleurs " + selected.name + " " + selected.city + " UAE"} height={320} />
              <div style={{ padding: "28px 28px 32px" }}>
                {selected.flag && (
                  <div className="eyebrow gold-text" style={{ marginBottom: 8 }}>
                    {selected.flag}
                  </div>
                )}
                <div
                  style={{
                    fontSize: 11,
                    letterSpacing: "0.22em",
                    textTransform: "uppercase",
                    color: "var(--muted)",
                  }}
                >
                  {selected.city}
                </div>
                <div
                  className="serif"
                  style={{ fontSize: 32, lineHeight: 1.08, marginTop: 4 }}
                >
                  {selected.name}
                </div>
                <div style={{ marginTop: 18, display: "grid", gap: 12, fontSize: 14, color: "var(--ink-soft)" }}>
                  <div style={{ display: "flex", alignItems: "flex-start", gap: 12 }}>
                    <span className="gold-text" style={{ marginTop: 2 }}>
                      <Icon name="pin" size={16} />
                    </span>
                    {selected.address}, {selected.city}
                  </div>
                  <div style={{ display: "flex", alignItems: "flex-start", gap: 12 }}>
                    <span className="gold-text" style={{ marginTop: 2 }}>
                      <Icon name="phone" size={16} />
                    </span>
                    <a href={"tel:" + selected.phone.replace(/\s/g, "")}>{selected.phone}</a>
                  </div>
                  <div style={{ display: "flex", alignItems: "flex-start", gap: 12 }}>
                    <span className="gold-text" style={{ marginTop: 2 }}>
                      <Icon name="check" size={16} />
                    </span>
                    {selected.hours}
                  </div>
                </div>
                <div style={{ display: "flex", gap: 10, marginTop: 24, flexWrap: "wrap" }}>
                  <a
                    href={
                      "https://www.google.com/maps/dir/?api=1&destination=" +
                      encodeURIComponent(
                        "Maison des Fleurs " + selected.name + " " + selected.city + " UAE"
                      )
                    }
                    target="_blank"
                    rel="noreferrer"
                    className="btn btn-dark btn-sm"
                  >
                    Directions
                  </a>
                  <a
                    href={"tel:" + selected.phone.replace(/\s/g, "")}
                    className="btn btn-ghost btn-sm"
                  >
                    Call boutique
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>

        <style>{`
          @media (max-width: 980px) {
            section > .container[style*="1.2fr 1.4fr"] { grid-template-columns: 1fr !important; }
          }
        `}</style>
      </section>

      {/* International */}
      <section
        style={{
          background: "var(--ink)",
          color: "var(--ivory)",
          padding: "96px 0",
        }}
      >
        <div className="container">
          <div className="eyebrow" style={{ color: "var(--gold-2)", marginBottom: 14 }}>
            Abroad
          </div>
          <h2 className="serif" style={{ fontSize: "clamp(32px, 4vw, 56px)", margin: 0, fontWeight: 300, lineHeight: 1.05 }}>
            We&rsquo;ve packed for further trips.
          </h2>
          <p style={{ marginTop: 16, fontSize: 16, color: "rgba(251,246,240,0.78)", maxWidth: 540 }}>
            Sister ateliers carry our designs in four other countries. For international
            orders, contact our team to route through the closest house.
          </p>

          <div
            style={{
              marginTop: 56,
              display: "grid",
              gridTemplateColumns: "repeat(4, 1fr)",
              gap: 18,
            }}
            className="intl-grid"
          >
            {INTERNATIONAL.map((p) => (
              <div
                key={p.city}
                style={{
                  border: "1px solid rgba(234,202,142,0.35)",
                  padding: 24,
                  background: "rgba(251,246,240,0.04)",
                }}
              >
                <div className="eyebrow gold-text">{p.country}</div>
                <div className="serif" style={{ fontSize: 26, marginTop: 8 }}>
                  {p.city}
                </div>
              </div>
            ))}
          </div>
        </div>
        <style>{`
          @media (max-width: 880px) { .intl-grid { grid-template-columns: 1fr 1fr !important; } }
          @media (max-width: 480px) { .intl-grid { grid-template-columns: 1fr !important; } }
        `}</style>
      </section>
    </div>
  );
}

function BoutiqueRow({ b, active, onClick }) {
  return (
    <button
      onClick={onClick}
      style={{
        textAlign: "left",
        padding: "22px 22px",
        background: active ? "var(--ink)" : "var(--ivory)",
        color: active ? "var(--ivory)" : "var(--ink)",
        border: "1px solid " + (active ? "var(--ink)" : "var(--line)"),
        display: "block",
        width: "100%",
        transition: "all 0.2s",
      }}
    >
      <div
        style={{
          display: "flex",
          justifyContent: "space-between",
          alignItems: "baseline",
          gap: 12,
        }}
      >
        <div>
          {b.flag && (
            <div
              className="eyebrow"
              style={{
                marginBottom: 6,
                color: active ? "var(--gold-2)" : "var(--gold-3)",
                background: "none",
                WebkitBackgroundClip: "initial",
              }}
            >
              {b.flag}
            </div>
          )}
          <div className="serif" style={{ fontSize: 20, lineHeight: 1.15 }}>
            {b.name}
          </div>
          <div style={{ fontSize: 13, marginTop: 6, opacity: active ? 0.85 : 0.7 }}>
            {b.address} · {b.city}
          </div>
        </div>
        <span style={{ opacity: 0.75 }}>
          <Icon name="arrow" size={16} />
        </span>
      </div>
    </button>
  );
}

/* =========================
   CONTACT
   ========================= */
function ContactPage({ go }) {
  const [submitted, setSubmitted] = useState(false);
  return (
    <div>
      <section style={{ background: "var(--paper)", padding: "72px 0 56px" }}>
        <div className="container">
          <div className="eyebrow gold-text" style={{ marginBottom: 14 }}>
            Enquire
          </div>
          <h1 className="serif" style={{ fontSize: "clamp(40px, 5vw, 76px)", margin: 0, fontWeight: 400, lineHeight: 1 }}>
            Speak to the atelier.
          </h1>
          <p style={{ marginTop: 16, fontSize: 17, color: "var(--ink-soft)", maxWidth: 580 }}>
            For everything beyond the shop &mdash; bespoke gifting, corporate, large-format
            installations, press, and partnerships.
          </p>
        </div>
      </section>

      <section className="section">
        <div className="container" style={{ display: "grid", gridTemplateColumns: "1fr 1.3fr", gap: 64 }} className="contact-grid">
          <div>
            <div className="eyebrow gold-text" style={{ marginBottom: 18 }}>
              Direct lines
            </div>
            <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "grid", gap: 24 }}>
              {[
                ["Landline", CONTACT.landline, "phone"],
                ["Mobile / WhatsApp", CONTACT.mobile, "whatsapp"],
                ["Toll-free", CONTACT.tollFree, "phone"],
                ["Order", CONTACT.emailOrder, "mail"],
                ["General", CONTACT.emailInfo, "mail"],
              ].map(([l, v, icon]) => (
                <li key={l}>
                  <div className="eyebrow" style={{ color: "var(--muted)", marginBottom: 6 }}>
                    {l}
                  </div>
                  <a
                    href={
                      icon === "mail"
                        ? "mailto:" + v
                        : icon === "whatsapp"
                        ? CONTACT.whatsapp
                        : "tel:" + v.replace(/\s/g, "")
                    }
                    target={icon === "whatsapp" ? "_blank" : undefined}
                    rel={icon === "whatsapp" ? "noreferrer" : undefined}
                    className="serif"
                    style={{
                      fontSize: 26,
                      lineHeight: 1.1,
                      display: "inline-flex",
                      alignItems: "center",
                      gap: 12,
                    }}
                  >
                    <span className="gold-text">
                      <Icon name={icon} size={18} />
                    </span>
                    {v}
                  </a>
                </li>
              ))}
            </ul>

            <div style={{ marginTop: 40, paddingTop: 32, borderTop: "1px solid var(--line)" }}>
              <div className="eyebrow gold-text" style={{ marginBottom: 14 }}>
                Delivery
              </div>
              <p style={{ fontSize: 14.5, color: "var(--ink-soft)", lineHeight: 1.65 }}>
                Same-day delivery across the UAE, seven days a week — including
                public holidays. Fees by emirate, calculated at checkout.
              </p>
            </div>
          </div>

          <div style={{ background: "var(--paper)", padding: 40, border: "1px solid var(--line)" }}>
            <div className="eyebrow gold-text" style={{ marginBottom: 18 }}>
              Send a note
            </div>
            {submitted ? (
              <div style={{ padding: "40px 0", textAlign: "center" }}>
                <div className="gold-text" style={{ display: "inline-flex" }}>
                  <Icon name="check" size={40} />
                </div>
                <div className="serif" style={{ fontSize: 32, marginTop: 12 }}>
                  Merci, we&rsquo;ve got it.
                </div>
                <p style={{ marginTop: 12, color: "var(--ink-soft)" }}>
                  We reply within one business day. For anything urgent, please use
                  WhatsApp: {CONTACT.mobile}.
                </p>
              </div>
            ) : (
              <form
                onSubmit={(e) => {
                  e.preventDefault();
                  setSubmitted(true);
                }}
                style={{ display: "grid", gap: 20 }}
              >
                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20 }}>
                  <div className="field">
                    <label>Name</label>
                    <input required />
                  </div>
                  <div className="field">
                    <label>Email</label>
                    <input type="email" required />
                  </div>
                </div>
                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20 }}>
                  <div className="field">
                    <label>Phone</label>
                    <input type="tel" />
                  </div>
                  <div className="field">
                    <label>About</label>
                    <select>
                      <option>Bespoke gifting</option>
                      <option>Corporate</option>
                      <option>Press</option>
                      <option>Partnership</option>
                      <option>Boutique question</option>
                      <option>Order issue</option>
                      <option>Other</option>
                    </select>
                  </div>
                </div>
                <div className="field">
                  <label>Message</label>
                  <textarea rows={4} placeholder="Tell us what you'd like." />
                </div>
                <button type="submit" className="btn btn-primary" style={{ justifySelf: "flex-start" }}>
                  Send →
                </button>
              </form>
            )}
          </div>
        </div>
        <style>{`
          @media (max-width: 880px) {
            .contact-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
          }
        `}</style>
      </section>
    </div>
  );
}

Object.assign(window, { WeddingsPage, AboutPage, BoutiquesPage, ContactPage });