const { useState, useEffect, useRef, useMemo, useCallback } = React;

/* =========================
   LOGO (MDF wordmark)
   ========================= */
function MDFWordmark({ height = 22, color }) {
  // Original SVG recreation of the gold-gradient wordmark
  // Use a single linearGradient with the brand's exact stops.
  const gid = "mdf-grad-" + height;
  return (
    <svg
      viewBox="0 0 382.72 28.58"
      height={height}
      style={{ display: "block" }}
      aria-label="Maison des Fleurs"
    >
      <defs>
        <linearGradient id={gid} x1="0" y1="14" x2="382" y2="14" gradientUnits="userSpaceOnUse">
          <stop offset="0" stopColor={color || "#8A6134"} />
          <stop offset="0.18" stopColor={color || "#A98351"} />
          <stop offset="0.51" stopColor={color || "#EACA8E"} />
          <stop offset="0.58" stopColor={color || "#E0BD80"} />
          <stop offset="1" stopColor={color || "#A47030"} />
        </linearGradient>
      </defs>
      <g fill={color ? color : `url(#${gid})`}>
        {/* MAISON */}
        <path d="M26.86,0.72h-4.5L17.5,13.88c-1.21,3.43-2.19,6.42-2.88,9.17H14.5c-0.69-2.83-1.62-5.81-2.75-9.17L7.09,0.72H2.6l-1.9,27.21h3.36l0.73-11.67c0.24-4.08,0.45-8.64,0.53-12.03h0.08c0.77,3.23,1.86,6.74,3.16,10.58l4.42,12.96h2.67l4.82-13.2c1.38-3.75,2.51-7.15,3.44-10.34h0.12c-0.04,3.39,0.2,7.95,0.4,11.75l0.69,11.95h3.44L26.86,0.72z" />
        <path d="M60.79,27.93L51.47,0.72h-4.25l-9.28,27.21h3.65l2.84-8.56h9.68l2.92,8.56H60.79z M45.15,16.63l2.67-7.87c0.53-1.65,0.97-3.31,1.38-4.93h0.08c0.41,1.57,0.81,3.19,1.42,4.97l2.67,7.83H45.15z" />
        <rect x="69.89" y="0.72" width="3.52" height="27.21" />
        <path d="M89.92,25.11c-2.36,0-4.6-0.78-6.13-1.72l-0.86,2.86c1.41,0.94,4.2,1.68,6.76,1.68c6.25,0,9.27-3.52,9.27-7.6c0-3.88-2.28-6.03-6.76-7.75c-3.65-1.41-5.26-2.62-5.26-5.09c0-1.8,1.37-3.95,4.99-3.95c2.4,0,4.16,0.78,5.03,1.25l0.94-2.78c-1.18-0.67-3.14-1.29-5.85-1.29c-5.15,0-8.56,3.05-8.56,7.17c0,3.72,2.67,5.95,6.99,7.48c3.57,1.37,4.99,2.78,4.99,5.25C95.46,23.27,93.41,25.11,89.92,25.11z" />
        <path d="M132.44,14.05c0-7.82-4.67-13.33-11.88-13.33c-7.06,0-12.28,5.47-12.28,13.84c0,7.98,4.9,13.37,11.89,13.37C126.91,27.93,132.44,23.12,132.44,14.05z M111.93,14.48c0-5.79,2.82-10.99,8.47-10.99c5.69,0,8.43,5.47,8.43,10.71c0,5.98-3.06,10.95-8.47,10.95C114.99,25.15,111.93,20.11,111.93,14.48z" />
        <path d="M145.1,5.04c1.38,2.95,3.2,6.06,5.1,9.08l8.67,13.81h3.57V0.72h-3.32V12.1c0,4.24,0.08,7.55,0.4,11.18l-0.08,0.04c-1.3-2.79-2.88-5.65-4.9-8.84l-8.75-13.77h-3.85v27.21h3.32V16.3c0-4.52-0.08-7.79-0.28-11.22L145.1,5.04z" />
        {/* DES (small caps band) */}
        <path d="M181.35,9.45c-0.98,0-1.88,0.09-2.64,0.2v9.44c0.63,0.07,1.37,0.11,2.25,0.11c1.87,0,3.35-0.48,4.24-1.38c0.9-0.88,1.38-2.16,1.38-3.73c0-1.55-0.5-2.66-1.35-3.45C184.4,9.86,183.13,9.45,181.35,9.45z M181.21,18.21c-0.48,0-0.94-0.01-1.25-0.07v-7.58c0.33-0.07,0.81-0.13,1.45-0.13c2.62,0,3.9,1.44,3.89,3.7C185.3,16.72,183.86,18.21,181.21,18.21z" />
        <polygon points="195.08,18.15 190.85,18.15 190.85,14.63 194.64,14.63 194.64,13.59 190.85,13.59 190.85,10.5 195.08,10.5 195.08,9.45 189.59,9.45 189.59,19.2 195.08,19.2" />
        <path d="M200.57,18.19c-0.84,0-1.64-0.28-2.19-0.62l-0.31,1.02c0.51,0.34,1.5,0.6,2.42,0.6c2.23,0,3.31-1.26,3.31-2.72c0-1.39-0.81-2.16-2.41-2.78c-1.31-0.51-1.88-0.94-1.88-1.82c0-0.65,0.49-1.42,1.78-1.42c0.86,0,1.49,0.28,1.8,0.45l0.34-1c-0.42-0.24-1.12-0.46-2.09-0.46c-1.84,0-3.06,1.09-3.06,2.57c0,1.33,0.95,2.13,2.5,2.68c1.28,0.49,1.78,1,1.78,1.88C202.55,17.53,201.82,18.19,200.57,18.19z" />
        {/* FLEURS */}
        <polygon points="220.08,27.93 223.6,27.93 223.6,15.62 233.89,15.62 233.89,12.71 223.6,12.71 223.6,3.66 234.74,3.66 234.74,0.72 220.08,0.72" />
        <polygon points="250.95,0.72 247.43,0.72 247.43,27.93 262.57,27.93 262.57,24.98 250.95,24.98" />
        <polygon points="278.78,15.17 289.36,15.17 289.36,12.26 278.78,12.26 278.78,3.66 290.57,3.66 290.57,0.72 275.27,0.72 275.27,27.93 290.57,27.93 290.57,24.98 278.78,24.98" />
        <path d="M319.51,16.57c0,5.92-2.54,8.54-6.52,8.54c-3.58,0-6.24-2.54-6.24-8.54V0.72h-3.5v15.77c0,8.3,4.13,11.44,9.61,11.44c5.8,0,10.13-3.38,10.13-11.6V0.72h-3.5V16.57z" />
        <path d="M347.24,15.07v-0.12c2.84-0.96,5.09-3.33,5.09-6.89c0-2.08-0.76-3.93-2.12-5.13c-1.68-1.52-4.09-2.2-7.82-2.2c-2.4,0-4.93,0.2-6.69,0.56v26.65h3.49v-11.7h3.29c3.17,0.12,4.61,1.52,5.41,5.25c0.76,3.37,1.36,5.69,1.8,6.45h3.61c-0.56-1.04-1.2-3.65-2.08-7.42C350.57,17.71,349.33,15.79,347.24,15.07z M342.75,13.58h-3.57V3.72c0.56-0.16,1.76-0.32,3.45-0.32c3.69,0.04,6.21,1.56,6.21,5.05C348.85,11.54,346.48,13.58,342.75,13.58z" />
        <path d="M375.23,12.58c-3.64-1.41-5.25-2.62-5.25-5.09c0-1.8,1.37-3.95,4.97-3.95c2.39,0,4.15,0.78,5.01,1.25l0.94-2.78c-1.18-0.67-3.13-1.29-5.83-1.29c-5.13,0-8.54,3.05-8.54,7.16c0,3.72,2.66,5.95,6.97,7.48c3.56,1.37,4.97,2.78,4.97,5.25c0,2.66-2.04,4.5-5.52,4.5c-2.35,0-4.58-0.78-6.11-1.72l-0.86,2.86c1.41,0.94,4.19,1.68,6.73,1.68c6.23,0,9.24-3.52,9.24-7.6C381.97,16.46,379.69,14.3,375.23,12.58z" />
      </g>
    </svg>
  );
}

function MDFMonogram({ size = 28, dark }) {
  const gid = "mono-grad-" + size + (dark ? "-d" : "");
  return (
    <svg viewBox="0 0 64 64" width={size} height={size} aria-hidden="true">
      <defs>
        <linearGradient id={gid} x1="6" y1="58" x2="58" y2="6">
          <stop offset="0" stopColor="#8A6134" />
          <stop offset="0.51" stopColor="#EACA8E" />
          <stop offset="1" stopColor="#A47030" />
        </linearGradient>
      </defs>
      <rect width="64" height="64" rx="12" fill={dark ? "#2A2320" : "var(--ivory)"} />
      <path
        fill={`url(#${gid})`}
        d="M16 47V17h6.2l9.8 19 9.8-19H48v30h-5.4V27.6L33.8 44h-3.6L21.4 27.6V47z"
      />
    </svg>
  );
}

/* =========================
   ICONS
   ========================= */
function Icon({ name, size = 18, stroke = 1.5 }) {
  const c = {
    width: size,
    height: size,
    viewBox: "0 0 24 24",
    fill: "none",
    stroke: "currentColor",
    strokeWidth: stroke,
    strokeLinecap: "round",
    strokeLinejoin: "round",
    "aria-hidden": "true",
  };
  switch (name) {
    case "search":
      return (
        <svg {...c}>
          <circle cx="11" cy="11" r="7" />
          <path d="m20 20-3.5-3.5" />
        </svg>
      );
    case "bag":
      return (
        <svg {...c}>
          <path d="M5 7h14l-1.4 12.2a2 2 0 0 1-2 1.8H8.4a2 2 0 0 1-2-1.8L5 7z" />
          <path d="M9 7V5a3 3 0 0 1 6 0v2" />
        </svg>
      );
    case "user":
      return (
        <svg {...c}>
          <circle cx="12" cy="8" r="4" />
          <path d="M4 21c1.5-4 4.5-6 8-6s6.5 2 8 6" />
        </svg>
      );
    case "menu":
      return (
        <svg {...c}>
          <path d="M4 7h16M4 12h16M4 17h16" />
        </svg>
      );
    case "close":
      return (
        <svg {...c}>
          <path d="M6 6l12 12M18 6L6 18" />
        </svg>
      );
    case "arrow":
      return (
        <svg {...c}>
          <path d="M5 12h14M13 6l6 6-6 6" />
        </svg>
      );
    case "arrow-left":
      return (
        <svg {...c}>
          <path d="M19 12H5M11 6l-6 6 6 6" />
        </svg>
      );
    case "plus":
      return (
        <svg {...c}>
          <path d="M12 5v14M5 12h14" />
        </svg>
      );
    case "minus":
      return (
        <svg {...c}>
          <path d="M5 12h14" />
        </svg>
      );
    case "whatsapp":
      return (
        <svg {...c} viewBox="0 0 24 24" fill="currentColor" stroke="none">
          <path d="M20.5 3.5A11.9 11.9 0 0 0 4 18.6L3 22l3.5-1A11.9 11.9 0 0 0 20.5 3.5zm-8.5 18a9.5 9.5 0 0 1-4.8-1.3l-.3-.2-2 .6.6-2-.2-.3A9.5 9.5 0 1 1 12 21.5zm5-7.1c-.3-.1-1.6-.8-1.9-.9s-.4-.1-.6.1-.7.9-.8 1.1-.3.2-.5.1a7.7 7.7 0 0 1-2.3-1.4 8.5 8.5 0 0 1-1.6-2c-.2-.3 0-.4.1-.6l.4-.4.2-.4a.5.5 0 0 0 0-.4l-.8-2c-.2-.4-.4-.4-.6-.4h-.5a1 1 0 0 0-.7.3 3 3 0 0 0-1 2.2 5.4 5.4 0 0 0 1.1 2.8 12 12 0 0 0 4.6 4.1 6 6 0 0 0 2.9.6 2.5 2.5 0 0 0 1.7-1.2 2 2 0 0 0 .1-1.2c-.1-.1-.3-.2-.6-.3z" />
        </svg>
      );
    case "phone":
      return (
        <svg {...c}>
          <path d="M22 17v3a2 2 0 0 1-2 2 17 17 0 0 1-15-15 2 2 0 0 1 2-2h3l2 5-2 1a12 12 0 0 0 6 6l1-2 5 2z" />
        </svg>
      );
    case "mail":
      return (
        <svg {...c}>
          <rect x="3" y="5" width="18" height="14" rx="2" />
          <path d="m3 7 9 7 9-7" />
        </svg>
      );
    case "pin":
      return (
        <svg {...c}>
          <path d="M12 21s7-6.5 7-12a7 7 0 0 0-14 0c0 5.5 7 12 7 12z" />
          <circle cx="12" cy="9" r="2.5" />
        </svg>
      );
    case "ig":
      return (
        <svg {...c}>
          <rect x="3" y="3" width="18" height="18" rx="5" />
          <circle cx="12" cy="12" r="4" />
          <circle cx="17.5" cy="6.5" r="0.8" fill="currentColor" />
        </svg>
      );
    case "fb":
      return (
        <svg {...c}>
          <path d="M16 8h-2a2 2 0 0 0-2 2v2H10v3h2v7h3v-7h2.5l.5-3H15v-1.5c0-.3.2-.5.5-.5H17V8z" />
        </svg>
      );
    case "pin-pt":
      return (
        <svg {...c}>
          <circle cx="12" cy="12" r="9" />
          <path d="M11 21l2-9M9.5 13c-.5 1.5 0 3 1.5 3s3-1 3.5-3 0-3.5-2-3.5-3.5 2-3 4z" />
        </svg>
      );
    case "linkedin":
      return (
        <svg {...c}>
          <rect x="3" y="3" width="18" height="18" rx="2" />
          <path d="M8 10v7M8 7v.01M12 17v-4a2 2 0 0 1 4 0v4M12 10v7" />
        </svg>
      );
    case "check":
      return (
        <svg {...c}>
          <path d="m5 12 5 5L20 7" />
        </svg>
      );
    case "globe":
      return (
        <svg {...c}>
          <circle cx="12" cy="12" r="9" />
          <path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18" />
        </svg>
      );
    case "star":
      return (
        <svg {...c} fill="currentColor" stroke="none">
          <path d="M12 2l2.6 6.3 6.8.5-5.2 4.4 1.7 6.6L12 16.9 6.1 19.8l1.7-6.6L2.6 8.8l6.8-.5z" />
        </svg>
      );
    case "heart":
      return (
        <svg {...c}>
          <path d="M12 21s-7-4.5-9-9a5 5 0 0 1 9-3 5 5 0 0 1 9 3c-2 4.5-9 9-9 9z" />
        </svg>
      );
    case "leaf":
      return (
        <svg {...c}>
          <path d="M4 20c0-8 6-14 16-14-1 9-6 14-14 14M4 20l8-8" />
        </svg>
      );
    default:
      return null;
  }
}

/* =========================
   NAVBAR
   ========================= */
function Navbar({ go, page, cartCount, openCart, lang, setLang, dir }) {
  const [scrolled, setScrolled] = useState(false);
  const [openShop, setOpenShop] = useState(false);
  const [openLang, setOpenLang] = useState(false);
  const [mobileOpen, setMobileOpen] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    onScroll();
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const NavLink = ({ to, children, onClick, sub }) => (
    <button
      onClick={() => {
        if (onClick) onClick();
        else go(to);
      }}
      onMouseEnter={() => sub && setOpenShop(true)}
      style={{
        fontSize: 12,
        letterSpacing: "0.22em",
        textTransform: "uppercase",
        fontWeight: 500,
        padding: "8px 4px",
        color: "inherit",
        position: "relative",
      }}
    >
      {children}
      {page === to && (
        <span
          style={{
            position: "absolute",
            left: 4,
            right: 4,
            bottom: 0,
            height: 1,
            background: "currentColor",
          }}
        />
      )}
    </button>
  );

  return (
    <header
      onMouseLeave={() => {
        setOpenShop(false);
        setOpenLang(false);
      }}
      style={{
        position: "sticky",
        top: 0,
        zIndex: 50,
        background: scrolled ? "rgba(251,246,240,0.96)" : "rgba(251,246,240,0.88)",
        backdropFilter: "blur(10px)",
        borderBottom: scrolled ? "1px solid var(--line)" : "1px solid transparent",
        transition: "all 0.3s ease",
      }}
    >
      {/* Announcement bar */}
      <div
        style={{
          background: "var(--ink)",
          color: "var(--ivory)",
          fontSize: 11,
          letterSpacing: "0.24em",
          textTransform: "uppercase",
          fontWeight: 400,
          padding: "9px 0",
          textAlign: "center",
        }}
      >
        Same-day luxury delivery across the UAE · 7 days a week  ·  Order by 4 pm
      </div>

      <div className="container" style={{ display: "flex", alignItems: "center", height: 84, gap: 24 }}>
        {/* Left — primary nav (desktop) */}
        <nav
          style={{
            display: "flex",
            alignItems: "center",
            gap: 28,
            flex: "1 1 0",
          }}
          className="nav-left"
        >
          <button
            className="mobile-only"
            onClick={() => setMobileOpen(true)}
            style={{ display: "none" }}
            aria-label="Open menu"
          >
            <Icon name="menu" size={22} />
          </button>
          <div className="desktop-only" style={{ display: "flex", gap: 28, alignItems: "center" }}>
            <div
              onMouseEnter={() => setOpenShop(true)}
              style={{ position: "relative" }}
            >
              <NavLink to="shop" sub>
                Shop ▾
              </NavLink>
            </div>
            <NavLink to="weddings">Weddings & Events</NavLink>
            <NavLink to="about">The House</NavLink>
            <NavLink to="boutiques">Boutiques</NavLink>
          </div>
        </nav>

        {/* Center — logo */}
        <button
          onClick={() => go("home")}
          aria-label="Maison des Fleurs — home"
          style={{ padding: 0 }}
        >
          <MDFWordmark height={26} />
        </button>

        {/* Right — utilities */}
        <div style={{ display: "flex", gap: 18, alignItems: "center", justifyContent: "flex-end", flex: "1 1 0" }}>
          <div className="desktop-only" style={{ display: "flex", gap: 18, alignItems: "center" }}>
            <NavLink to="contact">Enquire</NavLink>

            <div style={{ position: "relative" }}>
              <button
                onClick={() => setOpenLang((v) => !v)}
                style={{
                  fontSize: 11,
                  letterSpacing: "0.22em",
                  textTransform: "uppercase",
                  fontWeight: 500,
                  display: "inline-flex",
                  alignItems: "center",
                  gap: 6,
                  padding: 6,
                }}
              >
                <Icon name="globe" size={15} /> {lang}
              </button>
              {openLang && (
                <div
                  style={{
                    position: "absolute",
                    top: "calc(100% + 6px)",
                    right: 0,
                    background: "var(--ivory)",
                    border: "1px solid var(--line)",
                    minWidth: 160,
                    padding: 6,
                    zIndex: 60,
                  }}
                >
                  {LANGS.map((l) => (
                    <button
                      key={l.code}
                      onClick={() => {
                        setLang(l.code);
                        setOpenLang(false);
                      }}
                      style={{
                        display: "flex",
                        justifyContent: "space-between",
                        width: "100%",
                        padding: "10px 12px",
                        fontSize: 13,
                        background: lang === l.code ? "var(--blush)" : "transparent",
                      }}
                    >
                      <span>{l.label}</span>
                      <span
                        style={{
                          fontSize: 11,
                          letterSpacing: "0.18em",
                          color: "var(--muted)",
                        }}
                      >
                        {l.code}
                      </span>
                    </button>
                  ))}
                </div>
              )}
            </div>
          </div>

          <button aria-label="Search" style={{ padding: 6 }}>
            <Icon name="search" size={18} />
          </button>

          <button
            onClick={openCart}
            aria-label="Open bag"
            style={{
              padding: 6,
              position: "relative",
              display: "inline-flex",
              alignItems: "center",
              gap: 6,
            }}
          >
            <Icon name="bag" size={18} />
            <span
              style={{
                fontSize: 11,
                letterSpacing: "0.18em",
                fontWeight: 500,
              }}
            >
              {cartCount}
            </span>
          </button>
        </div>
      </div>

      {/* Mega menu for SHOP */}
      {openShop && (
        <div
          onMouseLeave={() => setOpenShop(false)}
          style={{
            position: "absolute",
            top: "100%",
            left: 0,
            right: 0,
            background: "var(--ivory)",
            borderTop: "1px solid var(--line)",
            borderBottom: "1px solid var(--line)",
            boxShadow: "0 18px 30px -25px rgba(42,35,32,0.25)",
          }}
        >
          <div
            className="container"
            style={{
              display: "grid",
              gridTemplateColumns: "1.1fr 1.1fr 1.4fr",
              gap: 48,
              padding: "40px 32px 48px",
            }}
          >
            <div>
              <div className="eyebrow gold-text" style={{ marginBottom: 18 }}>
                Shop by occasion
              </div>
              <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "grid", gap: 10 }}>
                {OCCASIONS.map((o) => (
                  <li key={o.id}>
                    <button
                      onClick={() => {
                        go("shop", { occasion: o.id });
                        setOpenShop(false);
                      }}
                      className="serif"
                      style={{ fontSize: 22, lineHeight: 1.2, textAlign: "left" }}
                    >
                      {o.label}
                    </button>
                  </li>
                ))}
              </ul>
            </div>

            <div>
              <div className="eyebrow gold-text" style={{ marginBottom: 18 }}>
                Shop by type
              </div>
              <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "grid", gap: 10 }}>
                {TYPES.filter((t) => t.id !== "all").map((t) => (
                  <li key={t.id}>
                    <button
                      onClick={() => {
                        go("shop", { type: t.id });
                        setOpenShop(false);
                      }}
                      className="serif"
                      style={{ fontSize: 22, lineHeight: 1.2, textAlign: "left" }}
                    >
                      {t.label}
                    </button>
                  </li>
                ))}
              </ul>
            </div>

            <button
              onClick={() => {
                go("product", { id: "your-majesty" });
                setOpenShop(false);
              }}
              style={{
                position: "relative",
                aspectRatio: "5/4",
                overflow: "hidden",
                textAlign: "left",
              }}
            >
              <img
                src="media/product-flowerbox-03.webp"
                alt=""
                style={{ width: "100%", height: "100%", objectFit: "cover" }}
              />
              <div
                style={{
                  position: "absolute",
                  inset: 0,
                  background:
                    "linear-gradient(to top, rgba(42,35,32,0.55), rgba(42,35,32,0) 60%)",
                }}
              />
              <div
                style={{
                  position: "absolute",
                  left: 24,
                  bottom: 22,
                  color: "var(--ivory)",
                }}
              >
                <div className="eyebrow" style={{ opacity: 0.85 }}>
                  House signature
                </div>
                <div className="serif" style={{ fontSize: 32, marginTop: 4 }}>
                  The Flower Box
                </div>
                <div
                  style={{
                    marginTop: 10,
                    fontSize: 12,
                    letterSpacing: "0.22em",
                    textTransform: "uppercase",
                    borderBottom: "1px solid var(--ivory)",
                    paddingBottom: 4,
                    display: "inline-block",
                  }}
                >
                  Discover →
                </div>
              </div>
            </button>
          </div>
        </div>
      )}

      {/* Mobile drawer */}
      {mobileOpen && (
        <div
          style={{
            position: "fixed",
            inset: 0,
            background: "var(--ivory)",
            zIndex: 200,
            padding: "20px 24px",
          }}
        >
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
            <MDFWordmark height={22} />
            <button onClick={() => setMobileOpen(false)} aria-label="Close">
              <Icon name="close" size={22} />
            </button>
          </div>
          <div style={{ marginTop: 36, display: "grid", gap: 12 }}>
            {[
              ["home", "Home"],
              ["shop", "Shop"],
              ["weddings", "Weddings & Events"],
              ["about", "The House"],
              ["boutiques", "Boutiques"],
              ["contact", "Enquire"],
            ].map(([k, l]) => (
              <button
                key={k}
                onClick={() => {
                  go(k);
                  setMobileOpen(false);
                }}
                className="serif"
                style={{ fontSize: 30, textAlign: "left", padding: "6px 0" }}
              >
                {l}
              </button>
            ))}
          </div>
        </div>
      )}

      <style>{`
        @media (max-width: 880px) {
          .desktop-only { display: none !important; }
          .mobile-only { display: inline-flex !important; }
        }
      `}</style>
    </header>
  );
}

/* =========================
   FOOTER
   ========================= */
function Footer({ go }) {
  return (
    <footer
      style={{
        background: "var(--ink)",
        color: "var(--ivory)",
        paddingTop: 96,
        paddingBottom: 32,
        marginTop: 96,
      }}
    >
      <div className="container">
        <div
          style={{
            display: "grid",
            gridTemplateColumns: "1.5fr 1fr 1fr 1fr 1.3fr",
            gap: 48,
          }}
          className="footer-grid"
        >
          <div>
            <MDFWordmark height={22} />
            <p
              className="serif"
              style={{
                fontStyle: "italic",
                fontSize: 22,
                marginTop: 28,
                lineHeight: 1.35,
                maxWidth: 360,
                color: "rgba(251,246,240,0.9)",
              }}
            >
              Couture florals from Dubai — by Priya Jelly, since 2014.
            </p>
            <div
              style={{
                display: "flex",
                gap: 14,
                marginTop: 28,
                color: "rgba(251,246,240,0.85)",
              }}
            >
              <a aria-label="Instagram" href="#"><Icon name="ig" size={20} /></a>
              <a aria-label="Facebook" href="#"><Icon name="fb" size={20} /></a>
              <a aria-label="Pinterest" href="#"><Icon name="pin-pt" size={20} /></a>
              <a aria-label="LinkedIn" href="#"><Icon name="linkedin" size={20} /></a>
            </div>
          </div>

          {[
            {
              h: "Shop",
              items: [
                ["Flower Boxes", () => go("shop", { type: "flowerbox" })],
                ["Bouquets", () => go("shop", { type: "bouquet" })],
                ["Arrangements", () => go("shop", { type: "arrangement" })],
                ["Long-life roses", () => go("shop", { type: "luxury" })],
                ["Gifting", () => go("shop", { type: "gift" })],
              ],
            },
            {
              h: "Occasions",
              items: [
                ["Weddings & Events", () => go("weddings")],
                ["Corporate", () => go("contact")],
                ["Gifting", () => go("shop", { occasion: "gifting" })],
                ["Celebrations", () => go("shop", { occasion: "celebrations" })],
                ["Bespoke", () => go("contact")],
              ],
            },
            {
              h: "The House",
              items: [
                ["About Priya Jelly", () => go("about")],
                ["Boutiques", () => go("boutiques")],
                ["Press", () => go("about")],
                ["Care guide", () => go("about")],
                ["Enquire", () => go("contact")],
              ],
            },
          ].map((col) => (
            <div key={col.h}>
              <div className="eyebrow" style={{ marginBottom: 18, color: "rgba(251,246,240,0.6)" }}>
                {col.h}
              </div>
              <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "grid", gap: 10 }}>
                {col.items.map(([l, on]) => (
                  <li key={l}>
                    <button
                      onClick={on}
                      style={{ fontSize: 14, color: "rgba(251,246,240,0.85)", padding: 0 }}
                    >
                      {l}
                    </button>
                  </li>
                ))}
              </ul>
            </div>
          ))}

          <div>
            <div className="eyebrow" style={{ marginBottom: 18, color: "rgba(251,246,240,0.6)" }}>
              Order & enquire
            </div>
            <ul
              style={{
                listStyle: "none",
                padding: 0,
                margin: 0,
                display: "grid",
                gap: 12,
                fontSize: 13,
                color: "rgba(251,246,240,0.9)",
              }}
            >
              <li>
                <a href={"tel:" + CONTACT.landline.replace(/\s/g, "")}>
                  {CONTACT.landline}  ·  landline
                </a>
              </li>
              <li>
                <a href={"tel:" + CONTACT.mobile.replace(/\s/g, "")}>
                  {CONTACT.mobile}  ·  mobile / WhatsApp
                </a>
              </li>
              <li>
                <a href={"tel:" + CONTACT.tollFree.replace(/\s/g, "")}>
                  {CONTACT.tollFree}  ·  toll-free
                </a>
              </li>
              <li>
                <a href={"mailto:" + CONTACT.emailOrder}>{CONTACT.emailOrder}</a>
              </li>
              <li>
                <a href={"mailto:" + CONTACT.emailInfo}>{CONTACT.emailInfo}</a>
              </li>
            </ul>
            <a
              href={CONTACT.whatsapp}
              target="_blank"
              rel="noreferrer"
              className="btn btn-ghost-light btn-sm"
              style={{ marginTop: 22 }}
            >
              <Icon name="whatsapp" size={14} /> WhatsApp us
            </a>
          </div>
        </div>

        <div className="hairline" style={{ marginTop: 64, opacity: 0.55 }} />
        <div
          style={{
            display: "flex",
            justifyContent: "space-between",
            flexWrap: "wrap",
            gap: 18,
            marginTop: 24,
            fontSize: 11,
            letterSpacing: "0.18em",
            textTransform: "uppercase",
            color: "rgba(251,246,240,0.55)",
          }}
        >
          <span>© Maison des Fleurs — Dubai, since 2014</span>
          <span>Terms · Privacy · Delivery · Returns</span>
        </div>

        <style>{`
          @media (max-width: 980px) {
            .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 40px !important; }
          }
          @media (max-width: 560px) {
            .footer-grid { grid-template-columns: 1fr !important; }
          }
        `}</style>
      </div>
    </footer>
  );
}

/* =========================
   PRODUCT CARD
   ========================= */
function ProductCard({ product, onOpen, onAdd }) {
  return (
    <div className="product-card" style={{ display: "flex", flexDirection: "column" }}>
      <button
        className="img-wrap"
        onClick={() => onOpen(product.id)}
        style={{
          background: "#f4ece3",
          aspectRatio: "4/5",
          width: "100%",
          padding: 0,
          textAlign: "left",
          position: "relative",
        }}
      >
        <img
          src={product.image}
          alt={product.name}
          style={{
            width: "100%",
            height: "100%",
            objectFit: "cover",
            objectPosition: "center",
          }}
          loading="lazy"
        />
        {product.feature && (
          <div
            style={{
              position: "absolute",
              top: 14,
              left: 14,
              background: "var(--ivory)",
              padding: "6px 10px",
              fontSize: 10,
              letterSpacing: "0.22em",
              textTransform: "uppercase",
            }}
            className="gold-text"
          >
            House signature
          </div>
        )}
      </button>

      <div style={{ paddingTop: 18, display: "flex", flexDirection: "column", gap: 4 }}>
        <button
          onClick={() => onOpen(product.id)}
          className="serif"
          style={{ fontSize: 22, lineHeight: 1.15, textAlign: "left", padding: 0 }}
        >
          {product.name}
        </button>
        <div style={{ fontSize: 12.5, color: "var(--muted)", lineHeight: 1.5 }}>
          {product.sub}
        </div>
        <div
          style={{
            marginTop: 12,
            display: "flex",
            alignItems: "center",
            justifyContent: "space-between",
            gap: 12,
          }}
        >
          <div style={{ fontSize: 14, letterSpacing: "0.06em", fontWeight: 500 }}>
            {AED(product.price)}
          </div>
          <button
            onClick={() => onAdd(product)}
            style={{
              fontSize: 11,
              letterSpacing: "0.22em",
              textTransform: "uppercase",
              fontWeight: 500,
              padding: "8px 0",
              borderBottom: "1px solid var(--ink)",
            }}
          >
            Add to bag
          </button>
        </div>
      </div>
    </div>
  );
}

/* =========================
   CART DRAWER
   ========================= */
function CartDrawer({ open, onClose, items, setItems }) {
  const subtotal = items.reduce((s, i) => s + i.price * i.qty, 0);
  const updateQty = (id, delta) =>
    setItems((arr) =>
      arr
        .map((i) => (i.id === id ? { ...i, qty: Math.max(0, i.qty + delta) } : i))
        .filter((i) => i.qty > 0)
    );

  return (
    <>
      {open && (
        <div
          onClick={onClose}
          style={{
            position: "fixed",
            inset: 0,
            background: "rgba(42,35,32,0.45)",
            zIndex: 90,
            animation: "fadeIn 0.25s",
          }}
        />
      )}
      <aside
        style={{
          position: "fixed",
          right: 0,
          top: 0,
          height: "100dvh",
          width: "min(440px, 100%)",
          background: "var(--ivory)",
          transform: open ? "translateX(0)" : "translateX(100%)",
          transition: "transform 0.4s cubic-bezier(0.7,0,0.3,1)",
          zIndex: 100,
          display: "flex",
          flexDirection: "column",
        }}
      >
        <div
          style={{
            padding: "22px 28px",
            display: "flex",
            justifyContent: "space-between",
            alignItems: "center",
            borderBottom: "1px solid var(--line)",
          }}
        >
          <div className="serif" style={{ fontSize: 24 }}>
            Your bag
          </div>
          <button onClick={onClose} aria-label="Close">
            <Icon name="close" size={20} />
          </button>
        </div>

        <div style={{ flex: 1, overflow: "auto", padding: "10px 28px" }}>
          {items.length === 0 && (
            <div
              style={{
                textAlign: "center",
                marginTop: 80,
                color: "var(--muted)",
              }}
            >
              <div className="serif" style={{ fontSize: 22, color: "var(--ink)", marginBottom: 10 }}>
                Your bag is empty
              </div>
              <p style={{ fontSize: 14 }}>
                Begin with a signature Flower Box, or speak to our florists for
                something bespoke.
              </p>
            </div>
          )}
          {items.map((it) => (
            <div
              key={it.id}
              style={{
                display: "grid",
                gridTemplateColumns: "80px 1fr auto",
                gap: 16,
                padding: "20px 0",
                borderBottom: "1px solid var(--line)",
              }}
            >
              <img
                src={it.image}
                alt=""
                style={{
                  width: 80,
                  height: 100,
                  objectFit: "cover",
                  background: "var(--blush)",
                }}
              />
              <div>
                <div className="serif" style={{ fontSize: 18, lineHeight: 1.2 }}>
                  {it.name}
                </div>
                <div style={{ fontSize: 12, color: "var(--muted)", marginTop: 4 }}>
                  {it.sub}
                </div>
                <div
                  style={{
                    marginTop: 10,
                    display: "inline-flex",
                    border: "1px solid var(--line-strong)",
                  }}
                >
                  <button
                    onClick={() => updateQty(it.id, -1)}
                    style={{ width: 30, height: 30 }}
                  >
                    <Icon name="minus" size={12} />
                  </button>
                  <div
                    style={{
                      width: 30,
                      height: 30,
                      display: "flex",
                      alignItems: "center",
                      justifyContent: "center",
                      fontSize: 13,
                    }}
                  >
                    {it.qty}
                  </div>
                  <button
                    onClick={() => updateQty(it.id, +1)}
                    style={{ width: 30, height: 30 }}
                  >
                    <Icon name="plus" size={12} />
                  </button>
                </div>
              </div>
              <div style={{ fontSize: 14, fontWeight: 500, textAlign: "right" }}>
                {AED(it.price * it.qty)}
              </div>
            </div>
          ))}
        </div>

        <div
          style={{
            padding: 28,
            borderTop: "1px solid var(--line)",
            background: "var(--paper)",
          }}
        >
          <div
            style={{
              display: "flex",
              justifyContent: "space-between",
              fontSize: 13,
              color: "var(--muted)",
              marginBottom: 6,
            }}
          >
            <span>Subtotal</span>
            <span>{AED(subtotal)}</span>
          </div>
          <div
            style={{
              display: "flex",
              justifyContent: "space-between",
              alignItems: "baseline",
              marginBottom: 18,
            }}
          >
            <div className="serif" style={{ fontSize: 20 }}>
              Total
            </div>
            <div className="serif" style={{ fontSize: 28 }}>
              {AED(subtotal)}
            </div>
          </div>
          <button
            className="btn btn-primary"
            style={{ width: "100%" }}
            disabled={items.length === 0}
          >
            Checkout →
          </button>
          <div
            style={{
              marginTop: 14,
              fontSize: 11,
              letterSpacing: "0.18em",
              textTransform: "uppercase",
              color: "var(--muted)",
              textAlign: "center",
            }}
          >
            Same-day UAE delivery · 7 days a week
          </div>
        </div>
      </aside>
    </>
  );
}

/* =========================
   ADD-TO-BAG TOAST
   ========================= */
function Toast({ message, show }) {
  return (
    <div
      style={{
        position: "fixed",
        bottom: 28,
        left: "50%",
        transform: show ? "translate(-50%,0)" : "translate(-50%,80px)",
        opacity: show ? 1 : 0,
        background: "var(--ink)",
        color: "var(--ivory)",
        padding: "14px 22px",
        zIndex: 80,
        fontSize: 12.5,
        letterSpacing: "0.18em",
        textTransform: "uppercase",
        transition: "transform 0.3s ease, opacity 0.3s ease",
        display: "flex",
        alignItems: "center",
        gap: 12,
      }}
    >
      <span className="gold-text" style={{ display: "inline-flex" }}>
        <Icon name="check" size={16} />
      </span>
      {message}
    </div>
  );
}

/* =========================
   WHATSAPP FAB
   ========================= */
function WhatsAppFab() {
  return (
    <a
      href={CONTACT.whatsapp}
      target="_blank"
      rel="noreferrer"
      aria-label="WhatsApp Maison des Fleurs"
      style={{
        position: "fixed",
        right: 22,
        bottom: 22,
        width: 56,
        height: 56,
        borderRadius: "50%",
        background: "var(--ink)",
        color: "var(--ivory)",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        boxShadow: "0 12px 30px -10px rgba(42,35,32,0.4)",
        zIndex: 70,
      }}
    >
      <Icon name="whatsapp" size={22} />
    </a>
  );
}

/* =========================
   MAP EMBED (lazy iframe)
   ========================= */
function MapEmbed({ q, height = 220 }) {
  const src = `https://www.google.com/maps?q=${encodeURIComponent(q)}&output=embed`;
  return (
    <iframe
      title={q}
      src={src}
      loading="lazy"
      style={{
        width: "100%",
        height,
        border: 0,
        filter: "grayscale(0.3) contrast(0.95) brightness(1.02)",
        background: "var(--blush)",
      }}
    />
  );
}

Object.assign(window, {
  MDFWordmark,
  MDFMonogram,
  Icon,
  Navbar,
  Footer,
  ProductCard,
  CartDrawer,
  Toast,
  WhatsAppFab,
  MapEmbed,
});
