/* =========================
   HOME
   ========================= */
function HomePage({ go, addToBag }) {
  return (
    <div>
      {/* HERO */}
      <section
        style={{
          position: "relative",
          background: "var(--paper)",
          overflow: "hidden",
        }}
      >
        <div
          className="container"
          style={{
            display: "grid",
            gridTemplateColumns: "1.1fr 1fr",
            gap: 56,
            paddingTop: 80,
            paddingBottom: 120,
            alignItems: "center",
          }}
        >
          <div className="fade-up" style={{ maxWidth: 600 }}>
            <div className="eyebrow gold-text" style={{ marginBottom: 22 }}>
              Couture florals · Dubai · since 2014
            </div>
            <h1
              className="serif"
              style={{
                fontSize: "clamp(48px, 6vw, 92px)",
                lineHeight: 0.98,
                margin: 0,
                fontWeight: 400,
                letterSpacing: "-0.005em",
              }}
            >
              Flowers,
              <br />
              <em
                style={{ fontStyle: "italic", fontWeight: 300 }}
                className="gold-text"
              >
                the French way.
              </em>
            </h1>
            <p
              style={{
                marginTop: 28,
                fontSize: 17,
                lineHeight: 1.6,
                color: "var(--ink-soft)",
                maxWidth: 500,
              }}
            >
              Dubai&rsquo;s house of couture florals — fresh blooms, long-life roses,
              and the Flower Box we made our signature. Designed by Priya Jelly,
              delivered the same day.
            </p>
            <div style={{ display: "flex", gap: 14, marginTop: 36, flexWrap: "wrap" }}>
              <button
                className="btn btn-primary"
                onClick={() => go("shop")}
              >
                Shop flowers
              </button>
              <button
                className="btn btn-ghost"
                onClick={() => go("weddings")}
              >
                Enquire for events
              </button>
            </div>
            <div
              style={{
                display: "flex",
                gap: 36,
                marginTop: 56,
                paddingTop: 28,
                borderTop: "1px solid var(--line)",
                flexWrap: "wrap",
              }}
            >
              {[
                ["Same-day", "delivery, 7 days"],
                ["8", "UAE boutiques"],
                ["EN · AR · RU · ZH", "Spoken at the bench"],
              ].map(([a, b]) => (
                <div key={a}>
                  <div className="serif" style={{ fontSize: 26, lineHeight: 1 }}>
                    {a}
                  </div>
                  <div
                    style={{
                      fontSize: 11,
                      letterSpacing: "0.2em",
                      textTransform: "uppercase",
                      color: "var(--muted)",
                      marginTop: 6,
                    }}
                  >
                    {b}
                  </div>
                </div>
              ))}
            </div>
          </div>

          <div
            className="fade-up"
            style={{ position: "relative", aspectRatio: "4/5", animationDelay: "0.1s" }}
          >
            <img
              src="media/product-flowerbox-03.webp"
              alt="Your Majesty — signature Flower Box"
              style={{
                width: "100%",
                height: "100%",
                objectFit: "cover",
                background: "#f3e3dd",
              }}
            />
            <div
              style={{
                position: "absolute",
                left: -20,
                top: 28,
                background: "var(--ivory)",
                padding: "10px 18px",
                fontSize: 11,
                letterSpacing: "0.24em",
                textTransform: "uppercase",
              }}
              className="gold-text"
            >
              The Flower Box
            </div>
            <div
              style={{
                position: "absolute",
                right: -16,
                bottom: 36,
                background: "var(--ink)",
                color: "var(--ivory)",
                padding: "18px 22px",
                maxWidth: 240,
              }}
            >
              <div className="eyebrow" style={{ color: "var(--gold-2)" }}>
                House signature
              </div>
              <div className="serif" style={{ fontSize: 22, marginTop: 8, lineHeight: 1.15 }}>
                Your Majesty
              </div>
              <div style={{ fontSize: 12, opacity: 0.8, marginTop: 4 }}>
                Pastel dome · {AED(7360)}
              </div>
            </div>
          </div>
        </div>

        {/* Marquee */}
        <div
          style={{
            background: "var(--ink)",
            color: "var(--ivory)",
            padding: "16px 0",
            overflow: "hidden",
            whiteSpace: "nowrap",
          }}
        >
          <div
            className="marquee-track"
            style={{ display: "inline-flex", gap: 60, paddingLeft: 60 }}
          >
            {Array.from({ length: 2 }).map((_, k) => (
              <span
                key={k}
                style={{ display: "inline-flex", gap: 60 }}
                aria-hidden={k === 1 ? "true" : undefined}
              >
                {[
                  "Same-day across the UAE",
                  "8 boutiques · Dubai & Abu Dhabi",
                  "International · Beirut · Riyadh · Kuwait",
                  "Couture weddings & events",
                  "Bespoke gifting · VIP & corporate",
                  "Flower Box, our signature",
                ].map((t) => (
                  <span
                    key={t}
                    className="serif"
                    style={{ fontStyle: "italic", fontSize: 24, color: "var(--ivory)" }}
                  >
                    {t} <span className="gold-text">✦</span>
                  </span>
                ))}
              </span>
            ))}
          </div>
        </div>
      </section>

      {/* OCCASIONS */}
      <section className="section">
        <div className="container">
          <div
            style={{
              display: "flex",
              justifyContent: "space-between",
              alignItems: "flex-end",
              gap: 24,
              flexWrap: "wrap",
              marginBottom: 56,
            }}
          >
            <div style={{ maxWidth: 620 }}>
              <div className="eyebrow gold-text" style={{ marginBottom: 14 }}>
                Begin with the occasion
              </div>
              <h2
                className="serif"
                style={{
                  fontSize: "clamp(36px, 4.4vw, 64px)",
                  lineHeight: 1.05,
                  margin: 0,
                  fontWeight: 400,
                }}
              >
                Six reasons to send flowers.
                <br />
                <em style={{ fontStyle: "italic", color: "var(--gold-3)" }}>
                  One house for all of them.
                </em>
              </h2>
            </div>
            <button
              onClick={() => go("shop")}
              className="link-underline"
              style={{
                fontSize: 12,
                letterSpacing: "0.22em",
                textTransform: "uppercase",
                fontWeight: 500,
              }}
            >
              View the full shop →
            </button>
          </div>

          <div className="occasions-grid">
            {OCCASIONS.map((o, i) => (
              <button
                key={o.id}
                onClick={() => {
                  if (o.id === "weddings") go("weddings");
                  else if (o.id === "corporate") go("contact");
                  else if (o.id === "bespoke") go("contact");
                  else go("shop", { occasion: o.id });
                }}
                className="occasion-card"
                style={{
                  position: "relative",
                  textAlign: "left",
                  padding: 0,
                  aspectRatio: "4/5",
                  overflow: "hidden",
                }}
              >
                <img
                  src={o.image}
                  alt={o.label}
                  style={{
                    width: "100%",
                    height: "100%",
                    objectFit: "cover",
                    transition: "transform 0.6s ease",
                  }}
                />
                <div
                  style={{
                    position: "absolute",
                    inset: 0,
                    background:
                      "linear-gradient(to top, rgba(42,35,32,0.7) 0%, rgba(42,35,32,0) 55%)",
                  }}
                />
                <div
                  style={{
                    position: "absolute",
                    left: 24,
                    right: 24,
                    bottom: 22,
                    color: "var(--ivory)",
                  }}
                >
                  <div className="serif" style={{ fontSize: 30, lineHeight: 1.05 }}>
                    {o.label}
                  </div>
                  <div style={{ fontSize: 13, marginTop: 8, opacity: 0.9, lineHeight: 1.4 }}>
                    {o.blurb}
                  </div>
                  <div
                    style={{
                      marginTop: 16,
                      fontSize: 11,
                      letterSpacing: "0.22em",
                      textTransform: "uppercase",
                      display: "inline-flex",
                      alignItems: "center",
                      gap: 8,
                      borderBottom: "1px solid currentColor",
                      paddingBottom: 4,
                    }}
                  >
                    Explore <Icon name="arrow" size={12} />
                  </div>
                </div>
              </button>
            ))}
          </div>
        </div>

        <style>{`
          .occasions-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 18px;
          }
          .occasion-card img:hover, .occasion-card:hover img { transform: scale(1.04); }
          @media (max-width: 880px) { .occasions-grid { grid-template-columns: 1fr 1fr; } }
          @media (max-width: 560px) { .occasions-grid { grid-template-columns: 1fr; } }
        `}</style>
      </section>

      {/* SIGNATURE FLOWER BOX */}
      <section
        style={{
          background: "var(--ink)",
          color: "var(--ivory)",
          padding: "120px 0",
        }}
      >
        <div className="container">
          <div
            style={{
              display: "grid",
              gridTemplateColumns: "1fr 1.1fr",
              gap: 72,
              alignItems: "center",
            }}
            className="signature-grid"
          >
            <div>
              <div
                className="eyebrow"
                style={{ marginBottom: 22, color: "var(--gold-2)" }}
              >
                Our signature
              </div>
              <h2
                className="serif"
                style={{
                  fontSize: "clamp(40px, 5vw, 76px)",
                  lineHeight: 1,
                  margin: 0,
                  fontWeight: 300,
                }}
              >
                The
                <span className="gold-text" style={{ fontStyle: "italic" }}>
                  {" "}Flower Box.
                </span>
              </h2>
              <p
                style={{
                  marginTop: 28,
                  fontSize: 17,
                  lineHeight: 1.65,
                  color: "rgba(251,246,240,0.85)",
                  maxWidth: 480,
                }}
              >
                In 2014, we built our first box. Hand-cut card, gold plate, fresh
                blooms domed and steady. The brand&rsquo;s own claim is that we were
                first — what we know for certain is that we made it ours.
              </p>

              <div
                style={{
                  marginTop: 36,
                  display: "grid",
                  gridTemplateColumns: "1fr 1fr",
                  gap: 24,
                  borderTop: "1px solid rgba(251,246,240,0.18)",
                  borderBottom: "1px solid rgba(251,246,240,0.18)",
                  padding: "28px 0",
                }}
              >
                <div>
                  <div className="eyebrow gold-text">Fresh</div>
                  <div
                    className="serif"
                    style={{ fontSize: 24, marginTop: 8, lineHeight: 1.2 }}
                  >
                    Cut this morning.
                  </div>
                  <p
                    style={{
                      fontSize: 13,
                      marginTop: 8,
                      color: "rgba(251,246,240,0.7)",
                      lineHeight: 1.55,
                    }}
                  >
                    Peony, garden rose, hydrangea, ranunculus — built dome-up,
                    cared for, sent same day.
                  </p>
                </div>
                <div>
                  <div className="eyebrow gold-text">Long-life</div>
                  <div
                    className="serif"
                    style={{ fontSize: 24, marginTop: 8, lineHeight: 1.2 }}
                  >
                    A year of bloom.
                  </div>
                  <p
                    style={{
                      fontSize: 13,
                      marginTop: 8,
                      color: "rgba(251,246,240,0.7)",
                      lineHeight: 1.55,
                    }}
                  >
                    Preserved roses, real flowers, sealed in the same gold-plated
                    box. Zero water, twelve months.
                  </p>
                </div>
              </div>

              <button
                onClick={() => go("shop", { type: "flowerbox" })}
                className="btn btn-ghost-light"
                style={{ marginTop: 36 }}
              >
                Shop the Flower Box
              </button>
            </div>

            <div
              style={{
                position: "relative",
                aspectRatio: "1/1",
              }}
            >
              <img
                src="media/product-flowerbox-05.webp"
                alt="Maison Rosée Flower Box"
                style={{
                  width: "100%",
                  height: "100%",
                  objectFit: "cover",
                  background: "var(--blush)",
                }}
              />
              <div
                style={{
                  position: "absolute",
                  left: -32,
                  bottom: -32,
                  width: 200,
                  aspectRatio: "1/1",
                  background: "var(--ink)",
                  border: "1px solid var(--gold-3)",
                  padding: 24,
                  display: "flex",
                  flexDirection: "column",
                  justifyContent: "space-between",
                }}
              >
                <div className="eyebrow gold-text">Since</div>
                <div
                  className="serif gold-text"
                  style={{ fontSize: 96, lineHeight: 1, fontWeight: 300 }}
                >
                  &rsquo;14
                </div>
                <div
                  style={{
                    fontSize: 11,
                    color: "rgba(251,246,240,0.7)",
                    lineHeight: 1.4,
                  }}
                >
                  Built in Dubai, by Priya Jelly
                </div>
              </div>
            </div>
          </div>
        </div>

        <style>{`
          @media (max-width: 880px) {
            .signature-grid { grid-template-columns: 1fr !important; gap: 56px !important; }
          }
        `}</style>
      </section>

      {/* FEATURED PRODUCTS */}
      <section className="section">
        <div className="container">
          <div
            style={{
              display: "flex",
              justifyContent: "space-between",
              alignItems: "flex-end",
              gap: 24,
              marginBottom: 48,
              flexWrap: "wrap",
            }}
          >
            <div>
              <div className="eyebrow gold-text" style={{ marginBottom: 14 }}>
                This week, on the bench
              </div>
              <h2
                className="serif"
                style={{
                  fontSize: "clamp(34px, 4vw, 56px)",
                  margin: 0,
                  fontWeight: 400,
                }}
              >
                New &amp; loved.
              </h2>
            </div>
            <button
              onClick={() => go("shop")}
              className="link-underline"
              style={{
                fontSize: 12,
                letterSpacing: "0.22em",
                textTransform: "uppercase",
                fontWeight: 500,
              }}
            >
              View all 270 SKUs →
            </button>
          </div>

          <div className="featured-grid">
            {PRODUCTS.slice(0, 8).map((p) => (
              <ProductCard
                key={p.id}
                product={p}
                onOpen={(id) => go("product", { id })}
                onAdd={addToBag}
              />
            ))}
          </div>
        </div>
        <style>{`
          .featured-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 32px 24px;
          }
          @media (max-width: 1080px) { .featured-grid { grid-template-columns: repeat(3, 1fr); } }
          @media (max-width: 780px) { .featured-grid { grid-template-columns: repeat(2, 1fr); } }
          @media (max-width: 480px) { .featured-grid { grid-template-columns: 1fr; } }
        `}</style>
      </section>

      {/* WEDDINGS TEASER */}
      <section
        style={{
          background: "var(--blush)",
          padding: "120px 0",
        }}
      >
        <div className="container">
          <div
            className="weddings-grid"
            style={{
              display: "grid",
              gridTemplateColumns: "1.1fr 1fr",
              gap: 64,
              alignItems: "stretch",
            }}
          >
            <div
              style={{
                position: "relative",
                overflow: "hidden",
                minHeight: 540,
              }}
            >
              <img
                src="media/category-events.webp"
                alt="Weddings and events"
                style={{
                  position: "absolute",
                  inset: 0,
                  width: "100%",
                  height: "100%",
                  objectFit: "cover",
                }}
              />
              <div
                style={{
                  position: "absolute",
                  bottom: 24,
                  left: 24,
                  fontSize: 11,
                  letterSpacing: "0.22em",
                  textTransform: "uppercase",
                  background: "rgba(42,35,32,0.55)",
                  color: "var(--ivory)",
                  padding: "8px 12px",
                  backdropFilter: "blur(8px)",
                }}
              >
                Event · UAE, private
              </div>
            </div>

            <div
              style={{
                display: "flex",
                flexDirection: "column",
                justifyContent: "center",
                paddingTop: 12,
                paddingBottom: 12,
              }}
            >
              <div className="eyebrow gold-text" style={{ marginBottom: 18 }}>
                Weddings &amp; Events
              </div>
              <h2
                className="serif"
                style={{
                  fontSize: "clamp(34px, 3.6vw, 52px)",
                  lineHeight: 1.05,
                  margin: 0,
                  fontWeight: 400,
                  letterSpacing: "-0.01em",
                  textWrap: "balance",
                }}
              >
                We build flowers around{" "}
                <em style={{ fontStyle: "italic" }}>your story</em> — not the
                other way around.
              </h2>
              <p
                style={{
                  marginTop: 20,
                  fontSize: 16,
                  lineHeight: 1.65,
                  color: "var(--ink-soft)",
                  maxWidth: 520,
                }}
              >
                Ceremony aisles, reception installations, branded backdrops,
                tablescape floristry, after-parties. Our atelier handles concept,
                build and tear-down end-to-end.
              </p>

              <ul
                style={{
                  listStyle: "none",
                  padding: 0,
                  margin: "24px 0 0",
                  display: "grid",
                  gridTemplateColumns: "1fr 1fr",
                  gap: 10,
                }}
              >
                {[
                  "Concept & moodboards",
                  "Full venue install",
                  "Branded backdrops",
                  "Tablescape florals",
                  "Hand-tied bouquets",
                  "Same-day tear-down",
                ].map((t) => (
                  <li
                    key={t}
                    style={{
                      fontSize: 13.5,
                      display: "flex",
                      alignItems: "center",
                      gap: 10,
                      color: "var(--ink-soft)",
                    }}
                  >
                    <span className="gold-text">
                      <Icon name="check" size={14} />
                    </span>
                    {t}
                  </li>
                ))}
              </ul>

              <div
                style={{
                  display: "flex",
                  gap: 12,
                  marginTop: 32,
                  flexWrap: "wrap",
                }}
              >
                <button
                  onClick={() => go("weddings")}
                  className="btn btn-dark"
                >
                  Start an enquiry
                </button>
                <button
                  onClick={() => go("weddings")}
                  className="btn btn-ghost"
                >
                  See portfolio
                </button>
              </div>
            </div>
          </div>
        </div>
        <style>{`
          @media (max-width: 880px) {
            .weddings-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
            .weddings-grid > div:first-child { min-height: 360px !important; }
          }
        `}</style>
      </section>

      {/* BRAND STORY STRIP */}
      <section className="section" style={{ background: "var(--ivory)" }}>
        <div className="container">
          <div
            className="story-grid"
            style={{
              display: "grid",
              gridTemplateColumns: "1fr 1.1fr",
              gap: 64,
              alignItems: "center",
            }}
          >
            <div>
              <div className="eyebrow gold-text" style={{ marginBottom: 18 }}>
                A house, not a shop
              </div>
              <h2
                className="serif"
                style={{
                  fontSize: "clamp(34px, 4.4vw, 60px)",
                  lineHeight: 1.05,
                  margin: 0,
                  fontWeight: 400,
                }}
              >
                Priya Jelly built Maison des Fleurs the way she trained &mdash; in
                visual merchandising, in Singapore, in Dubai.
              </h2>
              <p style={{ marginTop: 24, fontSize: 16.5, lineHeight: 1.7, color: "var(--ink-soft)" }}>
                It began in 2014 with a single workshop, an idea about a box, and
                an instinct that a flower could be a couture object. A decade in,
                that idea sits in eight UAE boutiques and four other countries.
              </p>
              <div style={{ display: "flex", gap: 14, marginTop: 28, flexWrap: "wrap" }}>
                <button onClick={() => go("about")} className="btn btn-ghost">
                  Read the journey
                </button>
                <button onClick={() => go("boutiques")} className="btn btn-ghost">
                  Visit a boutique
                </button>
              </div>
            </div>

            <div
              style={{
                display: "grid",
                gridTemplateColumns: "1fr 1fr",
                gap: 16,
              }}
            >
              <div style={{ aspectRatio: "3/4", overflow: "hidden" }}>
                <img
                  src="media/editorial-01.webp"
                  alt=""
                  style={{ width: "100%", height: "100%", objectFit: "cover" }}
                />
              </div>
              <div
                style={{
                  display: "grid",
                  gridTemplateRows: "auto 1fr",
                  gap: 16,
                }}
              >
                <div style={{ aspectRatio: "4/3", overflow: "hidden" }}>
                  <img
                    src="media/editorial-02.webp"
                    alt=""
                    style={{ width: "100%", height: "100%", objectFit: "cover" }}
                  />
                </div>
                <div
                  style={{
                    background: "var(--ink)",
                    color: "var(--ivory)",
                    padding: 22,
                    display: "flex",
                    flexDirection: "column",
                    justifyContent: "space-between",
                  }}
                >
                  <div className="eyebrow gold-text">Founder</div>
                  <div
                    className="serif"
                    style={{ fontSize: 30, lineHeight: 1.05, marginTop: 12 }}
                  >
                    Priya Jelly
                  </div>
                  <div style={{ fontSize: 12, color: "rgba(251,246,240,0.65)", marginTop: 8 }}>
                    Visual merchandiser by training. Florist by instinct. UAE since 2006.
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <style>{`
          @media (max-width: 880px) {
            .story-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
          }
        `}</style>
      </section>

      {/* BOUTIQUE TEASER */}
      <section
        style={{
          background: "var(--paper)",
          padding: "96px 0",
        }}
      >
        <div className="container">
          <div
            style={{
              display: "flex",
              justifyContent: "space-between",
              alignItems: "flex-end",
              flexWrap: "wrap",
              gap: 24,
              marginBottom: 48,
            }}
          >
            <div>
              <div className="eyebrow gold-text" style={{ marginBottom: 14 }}>
                Visit
              </div>
              <h2
                className="serif"
                style={{ fontSize: "clamp(34px, 4vw, 56px)", margin: 0, fontWeight: 400 }}
              >
                Eight boutiques in the UAE.
              </h2>
            </div>
            <button
              onClick={() => go("boutiques")}
              className="link-underline"
              style={{
                fontSize: 12,
                letterSpacing: "0.22em",
                textTransform: "uppercase",
                fontWeight: 500,
              }}
            >
              All locations →
            </button>
          </div>

          <div
            className="boutique-strip"
            style={{
              display: "grid",
              gridTemplateColumns: "repeat(4, 1fr)",
              gap: 18,
            }}
          >
            {BOUTIQUES.slice(0, 4).map((b) => (
              <div
                key={b.name}
                style={{
                  background: "var(--ivory)",
                  border: "1px solid var(--line)",
                  padding: "24px 22px",
                  display: "flex",
                  flexDirection: "column",
                  gap: 8,
                }}
              >
                {b.flag && (
                  <div className="eyebrow gold-text" style={{ marginBottom: 4 }}>
                    {b.flag}
                  </div>
                )}
                <div style={{ fontSize: 11, letterSpacing: "0.22em", textTransform: "uppercase", color: "var(--muted)" }}>
                  {b.city}
                </div>
                <div className="serif" style={{ fontSize: 24, lineHeight: 1.1 }}>
                  {b.name}
                </div>
                <div style={{ fontSize: 13, color: "var(--ink-soft)", marginTop: 6 }}>
                  {b.address}
                </div>
                <div style={{ fontSize: 12.5, color: "var(--muted)", marginTop: 2 }}>
                  {b.hours}
                </div>
                <a
                  href={"tel:" + b.phone.replace(/\s/g, "")}
                  style={{
                    fontSize: 12,
                    letterSpacing: "0.18em",
                    marginTop: 14,
                    paddingTop: 14,
                    borderTop: "1px solid var(--line)",
                  }}
                >
                  {b.phone}
                </a>
              </div>
            ))}
          </div>
        </div>
        <style>{`
          @media (max-width: 980px) {
            .boutique-strip { grid-template-columns: 1fr 1fr !important; }
          }
          @media (max-width: 560px) {
            .boutique-strip { grid-template-columns: 1fr !important; }
          }
        `}</style>
      </section>
    </div>
  );
}

/* =========================
   SHOP
   ========================= */
function ShopPage({ go, addToBag, initial }) {
  const [type, setType] = useState(initial?.type || "all");
  const [sort, setSort] = useState("featured");
  const [view, setView] = useState("grid"); // grid | editorial

  const filtered = useMemo(() => {
    let arr =
      type === "all" ? PRODUCTS.slice() : PRODUCTS.filter((p) => p.type === type);
    if (sort === "price-asc") arr.sort((a, b) => a.price - b.price);
    else if (sort === "price-desc") arr.sort((a, b) => b.price - a.price);
    else if (sort === "name") arr.sort((a, b) => a.name.localeCompare(b.name));
    return arr;
  }, [type, sort]);

  const occasion = initial?.occasion
    ? OCCASIONS.find((o) => o.id === initial.occasion)
    : null;

  return (
    <div>
      {/* Header */}
      <section style={{ background: "var(--paper)", padding: "72px 0 56px" }}>
        <div className="container">
          <div className="eyebrow gold-text" style={{ marginBottom: 14 }}>
            {occasion ? "Shop · Occasion" : "Shop · Couture florals"}
          </div>
          <h1
            className="serif"
            style={{
              fontSize: "clamp(40px, 5vw, 76px)",
              margin: 0,
              fontWeight: 400,
              lineHeight: 1,
            }}
          >
            {occasion ? occasion.label : "The collection."}
          </h1>
          <p
            style={{
              marginTop: 18,
              fontSize: 16,
              color: "var(--ink-soft)",
              maxWidth: 620,
            }}
          >
            {occasion
              ? occasion.blurb
              : "Every piece designed in our Dubai atelier. AED prices, real photography, same-day delivery."}
          </p>
        </div>
      </section>

      {/* Filter rail */}
      <div
        style={{
          position: "sticky",
          top: 121,
          background: "var(--ivory)",
          zIndex: 30,
          borderTop: "1px solid var(--line)",
          borderBottom: "1px solid var(--line)",
        }}
      >
        <div
          className="container"
          style={{
            display: "flex",
            justifyContent: "space-between",
            alignItems: "center",
            padding: "14px 32px",
            gap: 16,
            flexWrap: "wrap",
          }}
        >
          <div
            style={{
              display: "flex",
              gap: 6,
              overflowX: "auto",
              flexWrap: "wrap",
            }}
          >
            {TYPES.map((t) => (
              <button
                key={t.id}
                onClick={() => setType(t.id)}
                style={{
                  fontSize: 12,
                  letterSpacing: "0.16em",
                  textTransform: "uppercase",
                  fontWeight: 500,
                  padding: "8px 14px",
                  borderRadius: 999,
                  background: type === t.id ? "var(--ink)" : "transparent",
                  color: type === t.id ? "var(--ivory)" : "var(--ink)",
                  border: "1px solid " + (type === t.id ? "var(--ink)" : "var(--line-strong)"),
                  whiteSpace: "nowrap",
                }}
              >
                {t.label}
              </button>
            ))}
          </div>
          <div style={{ display: "flex", gap: 14, alignItems: "center" }}>
            <span style={{ fontSize: 11, letterSpacing: "0.22em", textTransform: "uppercase", color: "var(--muted)" }}>
              {filtered.length} pieces
            </span>
            <select
              value={sort}
              onChange={(e) => setSort(e.target.value)}
              style={{
                fontSize: 12,
                letterSpacing: "0.14em",
                textTransform: "uppercase",
                fontWeight: 500,
                background: "transparent",
                border: "1px solid var(--line-strong)",
                padding: "8px 12px",
                borderRadius: 999,
              }}
            >
              <option value="featured">Featured</option>
              <option value="price-asc">Price · low to high</option>
              <option value="price-desc">Price · high to low</option>
              <option value="name">Name · A → Z</option>
            </select>
          </div>
        </div>
      </div>

      <section style={{ padding: "56px 0 0" }}>
        <div className="container">
          <div className="featured-grid">
            {filtered.map((p) => (
              <ProductCard
                key={p.id}
                product={p}
                onOpen={(id) => go("product", { id })}
                onAdd={addToBag}
              />
            ))}
          </div>
          {filtered.length === 0 && (
            <div style={{ textAlign: "center", padding: "60px 0" }}>
              <div className="serif" style={{ fontSize: 28, marginBottom: 8 }}>
                Nothing here yet.
              </div>
              <p style={{ color: "var(--muted)" }}>Try another category.</p>
            </div>
          )}
        </div>
        <style>{`
          .featured-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 40px 24px;
          }
          @media (max-width: 1080px) { .featured-grid { grid-template-columns: repeat(3, 1fr); } }
          @media (max-width: 780px) { .featured-grid { grid-template-columns: repeat(2, 1fr); } }
          @media (max-width: 480px) { .featured-grid { grid-template-columns: 1fr; } }
        `}</style>
      </section>
    </div>
  );
}

/* =========================
   PRODUCT DETAIL
   ========================= */
function ProductPage({ id, go, addToBag }) {
  const p = PRODUCTS.find((x) => x.id === id) || PRODUCTS[0];
  const [qty, setQty] = useState(1);
  const [size, setSize] = useState("Standard");
  const [note, setNote] = useState("");
  const [tab, setTab] = useState("desc");

  const related = PRODUCTS.filter((x) => x.id !== p.id && x.type === p.type).slice(0, 4);
  const fallback = PRODUCTS.filter((x) => x.id !== p.id).slice(0, 4);
  const recs = related.length >= 3 ? related : fallback;

  return (
    <div>
      <div
        className="container"
        style={{ padding: "24px 32px 0", fontSize: 11, letterSpacing: "0.2em", textTransform: "uppercase", color: "var(--muted)" }}
      >
        <button onClick={() => go("home")}>Home</button> ·{" "}
        <button onClick={() => go("shop")}>Shop</button> ·{" "}
        <button onClick={() => go("shop", { type: p.type })}>
          {TYPES.find((t) => t.id === p.type)?.label || ""}
        </button>{" "}
        · {p.name}
      </div>

      <section style={{ padding: "32px 0 80px" }}>
        <div
          className="container"
          style={{
            display: "grid",
            gridTemplateColumns: "1.2fr 1fr",
            gap: 64,
          }}
        >
          <div className="product-imgs">
            <div
              style={{
                width: "100%",
                aspectRatio: "4/5",
                background: "#f4ece3",
                overflow: "hidden",
              }}
            >
              <img
                src={p.image}
                alt={p.name}
                style={{ width: "100%", height: "100%", objectFit: "cover" }}
              />
            </div>
            <div
              style={{
                marginTop: 14,
                display: "grid",
                gridTemplateColumns: "repeat(3, 1fr)",
                gap: 12,
              }}
            >
              {[p.image, "media/editorial-02.webp", "media/category-overview.webp"].map((src, i) => (
                <div
                  key={i}
                  style={{
                    aspectRatio: "1/1",
                    background: "#f4ece3",
                    overflow: "hidden",
                    border: i === 0 ? "1px solid var(--ink)" : "1px solid transparent",
                  }}
                >
                  <img src={src} alt="" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
                </div>
              ))}
            </div>
          </div>

          <div>
            <div className="eyebrow gold-text" style={{ marginBottom: 14 }}>
              {p.feature ? "House signature" : TYPES.find((t) => t.id === p.type)?.label}
            </div>
            <h1
              className="serif"
              style={{
                fontSize: "clamp(36px, 4vw, 56px)",
                lineHeight: 1.02,
                margin: 0,
                fontWeight: 400,
              }}
            >
              {p.name}
            </h1>
            <div style={{ fontSize: 15, color: "var(--ink-soft)", marginTop: 10, fontStyle: "italic" }} className="serif">
              {p.sub}
            </div>

            <div
              style={{
                marginTop: 28,
                paddingTop: 24,
                borderTop: "1px solid var(--line)",
                display: "flex",
                alignItems: "baseline",
                justifyContent: "space-between",
              }}
            >
              <div className="serif" style={{ fontSize: 40, lineHeight: 1, fontWeight: 400 }}>
                {AED(p.price)}
              </div>
              <div style={{ fontSize: 12, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--muted)" }}>
                VAT included
              </div>
            </div>

            <div style={{ marginTop: 28 }}>
              <div className="eyebrow" style={{ marginBottom: 10, color: "var(--muted)" }}>
                Size
              </div>
              <div style={{ display: "flex", gap: 8 }}>
                {[
                  ["Petite", -800],
                  ["Standard", 0],
                  ["Grand", 1200],
                ].map(([s, delta]) => (
                  <button
                    key={s}
                    onClick={() => setSize(s)}
                    style={{
                      padding: "12px 18px",
                      fontSize: 12.5,
                      border: "1px solid " + (size === s ? "var(--ink)" : "var(--line-strong)"),
                      background: size === s ? "var(--ink)" : "transparent",
                      color: size === s ? "var(--ivory)" : "var(--ink)",
                      borderRadius: 4,
                      flex: 1,
                    }}
                  >
                    <div style={{ fontWeight: 500 }}>{s}</div>
                    <div style={{ fontSize: 11, opacity: 0.7, marginTop: 4 }}>
                      {delta === 0 ? "Base" : (delta > 0 ? "+" : "") + AED(Math.abs(delta))}
                    </div>
                  </button>
                ))}
              </div>
            </div>

            <div style={{ marginTop: 24 }}>
              <div className="eyebrow" style={{ marginBottom: 10, color: "var(--muted)" }}>
                Gift card · optional
              </div>
              <input
                value={note}
                onChange={(e) => setNote(e.target.value)}
                placeholder="A line for the card — we'll handwrite it."
                style={{
                  width: "100%",
                  background: "transparent",
                  border: "1px solid var(--line-strong)",
                  padding: "14px 16px",
                  fontSize: 14,
                  outline: "none",
                  borderRadius: 2,
                }}
              />
            </div>

            <div style={{ display: "flex", gap: 12, marginTop: 24, alignItems: "stretch" }}>
              <div
                style={{
                  display: "inline-flex",
                  border: "1px solid var(--ink)",
                  borderRadius: 999,
                  overflow: "hidden",
                }}
              >
                <button
                  onClick={() => setQty(Math.max(1, qty - 1))}
                  style={{ width: 48, height: 52 }}
                >
                  <Icon name="minus" size={14} />
                </button>
                <div
                  style={{
                    width: 36,
                    height: 52,
                    display: "flex",
                    alignItems: "center",
                    justifyContent: "center",
                    fontSize: 14,
                    fontWeight: 500,
                  }}
                >
                  {qty}
                </div>
                <button
                  onClick={() => setQty(qty + 1)}
                  style={{ width: 48, height: 52 }}
                >
                  <Icon name="plus" size={14} />
                </button>
              </div>
              <button
                className="btn btn-primary"
                style={{ flex: 1 }}
                onClick={() => addToBag(p, qty)}
              >
                Add to bag · {AED(p.price * qty)}
              </button>
            </div>

            <div
              style={{
                marginTop: 24,
                display: "flex",
                gap: 8,
                flexWrap: "wrap",
              }}
            >
              {[
                ["Same-day in UAE", "leaf"],
                ["Handwritten card", "heart"],
                ["Cared-for in transit", "check"],
              ].map(([t, icon]) => (
                <div
                  key={t}
                  style={{
                    fontSize: 11.5,
                    letterSpacing: "0.16em",
                    textTransform: "uppercase",
                    display: "inline-flex",
                    alignItems: "center",
                    gap: 6,
                    padding: "8px 12px",
                    background: "var(--paper)",
                    color: "var(--ink-soft)",
                  }}
                >
                  <span className="gold-text">
                    <Icon name={icon} size={12} />
                  </span>
                  {t}
                </div>
              ))}
            </div>

            {/* Tabs */}
            <div style={{ marginTop: 40, borderTop: "1px solid var(--line)", paddingTop: 28 }}>
              <div style={{ display: "flex", gap: 24, marginBottom: 16 }}>
                {[
                  ["desc", "Description"],
                  ["care", "Care"],
                  ["delivery", "Delivery"],
                ].map(([k, l]) => (
                  <button
                    key={k}
                    onClick={() => setTab(k)}
                    className={tab === k ? "serif" : ""}
                    style={{
                      fontSize: tab === k ? 22 : 13,
                      letterSpacing: tab === k ? "0" : "0.2em",
                      textTransform: tab === k ? "none" : "uppercase",
                      color: tab === k ? "var(--ink)" : "var(--muted)",
                      fontWeight: tab === k ? 400 : 500,
                      transition: "all 0.2s",
                    }}
                  >
                    {l}
                  </button>
                ))}
              </div>
              <div style={{ fontSize: 15, lineHeight: 1.7, color: "var(--ink-soft)" }}>
                {tab === "desc" && <p>{p.desc}</p>}
                {tab === "care" && <p>{p.care}</p>}
                {tab === "delivery" && (
                  <>
                    <p>
                      Same-day delivery across the UAE for orders placed before 4 pm.
                      Fees vary by emirate; calculated at checkout.
                    </p>
                    <p style={{ marginTop: 12 }}>
                      For international gifting (Lebanon, Saudi, Kuwait), please
                      contact our team — we&rsquo;ll route via the closest atelier.
                    </p>
                  </>
                )}
              </div>
            </div>
          </div>
        </div>
        <style>{`
          @media (max-width: 880px) {
            .container > div[style*="grid-template-columns: 1.2fr 1fr"] {
              grid-template-columns: 1fr !important;
              gap: 40px !important;
            }
          }
        `}</style>
      </section>

      {/* Related */}
      <section className="section" style={{ background: "var(--paper)" }}>
        <div className="container">
          <div className="eyebrow gold-text" style={{ marginBottom: 10 }}>
            You may also love
          </div>
          <h2 className="serif" style={{ fontSize: "clamp(28px, 3vw, 44px)", margin: 0, fontWeight: 400 }}>
            From the same hand.
          </h2>
          <div className="featured-grid" style={{ marginTop: 40 }}>
            {recs.map((rp) => (
              <ProductCard
                key={rp.id}
                product={rp}
                onOpen={(rid) => go("product", { id: rid })}
                onAdd={addToBag}
              />
            ))}
          </div>
        </div>
        <style>{`
          .featured-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 32px 24px;
          }
          @media (max-width: 1080px) { .featured-grid { grid-template-columns: repeat(3, 1fr); } }
          @media (max-width: 780px) { .featured-grid { grid-template-columns: repeat(2, 1fr); } }
          @media (max-width: 480px) { .featured-grid { grid-template-columns: 1fr; } }
        `}</style>
      </section>
    </div>
  );
}

Object.assign(window, { HomePage, ShopPage, ProductPage });
