/* The Cakerz — Concept 4 "Atelier": premium online-ordering experience anchored
   to the official logo (PANTONE 7421 C wine + antique gold). File 1 of 3:
   atoms, app chrome (top bar, header, mobile nav, cart drawer), home.
   Exports window.Atelier. Materially different from concepts 1-3: this is an
   e-commerce app shell (filter sidebar shop, configurator, scheduling, Square),
   not a marketing page with a small cart. */
const { useState: aS, useEffect: aE } = React;
const AD = window.CAKERZ_DATA;
const LOGO_SRC = "assets/logos/the-cakerz-logo.png";
const $ = (n) => "$" + (Number.isFinite(n) ? (Number.isInteger(n) ? n : n.toFixed(2)) : n);
const useVW = () => {
  const [w, setW] = aS(typeof window !== "undefined" ? window.innerWidth : 1280);
  aE(() => { const f = () => setW(window.innerWidth); window.addEventListener("resize", f); return () => window.removeEventListener("resize", f); }, []);
  return w;
};

/* Cake-size options + add-on extras (Atelier-only ordering data) */
const SIZES = [
  { id: "6in", label: '6" round', sub: "serves 8–10", delta: 0 },
  { id: "8in", label: '8" round', sub: "serves 12–16", delta: 30 },
  { id: "10in", label: '10" round', sub: "serves 20–25", delta: 65 },
  { id: "2tier", label: "2-tier", sub: "serves 30–40", delta: 120 },
];
const ADDONS = [
  { id: "candles", name: "Birthday candles", price: 4, icon: "ph-cake" },
  { id: "number", name: "Number candle", price: 6, icon: "ph-number-circle-five" },
  { id: "topper", name: "Custom cake topper", price: 14, icon: "ph-crown-simple" },
  { id: "plaque", name: "Message plaque", price: 8, icon: "ph-seal" },
  { id: "balloons", name: "Balloon bundle", price: 18, icon: "ph-balloon" },
  { id: "sparkler", name: "Sparkler set", price: 7, icon: "ph-sparkle" },
];
const CATS = [
  { id: "Cakes", label: "Ready-made cakes", icon: "ph-birthday-cake" },
  { id: "Cupcakes", label: "Cupcakes", icon: "ph-cookie" },
  { id: "Desserts", label: "Desserts", icon: "ph-ice-cream" },
  { id: "Coffee", label: "Barista coffee", icon: "ph-coffee" },
  { id: "Party", label: "Party supplies", icon: "ph-confetti" },
];

/* ---------- atoms ---------- */
function Crest({ s = 40, gold = "var(--c-secondary)", ink = "var(--c-accent)" }) {
  return (
    <svg width={s} height={s} viewBox="0 0 100 100" fill="none">
      <ellipse cx="50" cy="50" rx="40" ry="46" stroke={gold} strokeWidth="2" />
      <ellipse cx="50" cy="50" rx="34" ry="40" stroke={gold} strokeWidth="1" opacity=".6" />
      <path d="M50 7 l3 5 l-3 5 l-3 -5 z" fill={gold} />
      <path d="M50 93 l3 -5 l-3 -5 l-3 5 z" fill={gold} />
      <text x="50" y="60" textAnchor="middle" fontFamily="Playfair Display, serif" fontWeight="700" fontSize="34" fill={ink}>TC</text>
    </svg>
  );
}

function Logo({ go, light, sub = true }) {
  return (
    <button onClick={() => go("home")} style={{ display: "flex", alignItems: "center", gap: 12, background: "none", border: 0, cursor: "pointer", padding: 0 }}>
      <img src={LOGO_SRC} alt="The Cakerz — Custom Cakes & Dessert Bar" style={{ height: 48, width: "auto", borderRadius: 10, display: "block", boxShadow: light ? "none" : "0 2px 8px rgba(40,20,24,.18)" }} />
      <span style={{ textAlign: "left", lineHeight: 1 }}>
        <span style={{ display: "block", font: "600 24px/1 var(--font-display)", letterSpacing: ".01em", color: light ? "var(--c-bg)" : "var(--c-ink)" }}>The Cakerz</span>
        {sub && <span style={{ display: "block", marginTop: 4, font: "700 9px/1 var(--font-body)", letterSpacing: ".28em", textTransform: "uppercase", color: "var(--c-secondary)" }}>Custom Cakes &amp; Dessert Bar</span>}
      </span>
    </button>
  );
}

function Btn({ children, onClick, variant = "primary", size = "md", full, type = "button", disabled, style }) {
  const pad = { sm: "9px 16px", md: "12px 22px", lg: "15px 30px" };
  const fs = { sm: 13.5, md: 15, lg: 16 };
  const v = {
    primary: { background: "var(--c-accent)", color: "var(--c-accent-ink)", border: "1.5px solid var(--c-accent)" },
    gold: { background: "var(--c-secondary)", color: "var(--c-secondary-ink)", border: "1.5px solid var(--c-secondary)" },
    outline: { background: "transparent", color: "var(--c-ink)", border: "1.5px solid var(--c-line-strong)" },
    ghost: { background: "transparent", color: "var(--c-accent)", border: "1.5px solid transparent" },
    light: { background: "#fff", color: "var(--c-ink)", border: "1.5px solid var(--c-line)" },
  }[variant];
  return (
    <button type={type} onClick={onClick} disabled={disabled}
      onMouseEnter={(e) => !disabled && (e.currentTarget.style.filter = "brightness(.93)")} onMouseLeave={(e) => (e.currentTarget.style.filter = "")}
      style={{ display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 9, padding: pad[size], font: `700 ${fs[size]}px/1 var(--font-body)`,
        letterSpacing: ".01em", borderRadius: "var(--radius-button)", cursor: disabled ? "not-allowed" : "pointer", opacity: disabled ? .5 : 1,
        width: full ? "100%" : "auto", whiteSpace: "nowrap", transition: "filter .14s", ...v, ...style }}>{children}</button>
  );
}

function Stars({ n = 5, s = 14 }) {
  return <span style={{ display: "inline-flex", gap: 1, color: "var(--c-secondary)", fontSize: s }}>{[...Array(5)].map((_, i) => <i key={i} className={i < n ? "ph-fill ph-star" : "ph ph-star"} />)}</span>;
}

function Photo({ p, h = 200, round = "var(--radius-image)" }) {
  return (
    <div style={{ position: "relative", height: h, background: AD.gradient(p.kind), borderRadius: round, overflow: "hidden", display: "grid", placeItems: "center" }}>
      <img src={AD.PHOTOS[p.kind]} alt="" loading="lazy" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }} />
      <span style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, rgba(40,20,24,.04), rgba(40,20,24,.22))" }} />
      <Crest s={Math.min(h * 0.34, 72)} gold="rgba(255,255,255,.7)" ink="rgba(101,29,50,.5)" />
      {p.tags[0] && <span style={{ position: "absolute", top: 10, left: 10, background: "var(--c-accent)", color: "#fff", font: "700 10.5px/1 var(--font-body)", letterSpacing: ".06em", textTransform: "uppercase", padding: "5px 9px", borderRadius: 5 }}>{p.tags[0]}</span>}
    </div>
  );
}

/* gold hairline divider */
function Rule({ w = 60, my = 0 }) { return <span style={{ display: "block", width: w, height: 2, margin: my + "px 0", background: "linear-gradient(90deg, var(--c-secondary), transparent)" }} />; }

/* ---------- chrome ---------- */
function TopBar({ fulfil, setFulfil }) {
  return (
    <div style={{ background: "var(--c-accent)", color: "var(--c-accent-ink)", fontSize: 12.5 }}>
      <div style={{ maxWidth: 1200, margin: "0 auto", padding: "7px 22px", display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12 }}>
        <span style={{ display: "flex", alignItems: "center", gap: 7, opacity: .9 }}><i className="ph ph-map-pin" /> Shop 4, 21 Knuckey St, Darwin City</span>
        <span style={{ display: "flex", alignItems: "center", gap: 10 }}>
          <span style={{ opacity: .8 }}>Ordering for</span>
          <span style={{ display: "inline-flex", background: "rgba(255,255,255,.14)", borderRadius: 999, padding: 2 }}>
            {["pickup", "delivery"].map((m) => (
              <button key={m} onClick={() => setFulfil(m)} style={{ border: 0, cursor: "pointer", padding: "4px 12px", borderRadius: 999, textTransform: "capitalize",
                font: "700 12px/1 var(--font-body)", background: fulfil === m ? "#fff" : "transparent", color: fulfil === m ? "var(--c-accent)" : "var(--c-accent-ink)" }}>{m}</button>
            ))}
          </span>
        </span>
      </div>
    </div>
  );
}

function Header({ go, route, count, openCart, fulfil, setFulfil, mobile }) {
  const links = [["shop", "Shop"], ["custom", "Custom Cakes"], ["gallery", "Gallery"], ["about", "About"], ["contact", "Contact"]];
  return (
    <header style={{ position: "sticky", top: 0, zIndex: 40, background: "rgba(250,246,239,.92)", backdropFilter: "blur(12px)", borderBottom: "1px solid var(--c-line)" }}>
      {!mobile && <TopBar fulfil={fulfil} setFulfil={setFulfil} />}
      <div style={{ maxWidth: 1200, margin: "0 auto", padding: mobile ? "12px 18px" : "14px 22px", display: "flex", alignItems: "center", gap: 18 }}>
        <Logo go={go} sub={!mobile} />
        {!mobile && (
          <nav style={{ display: "flex", gap: 4, marginLeft: 18 }}>
            {links.map(([r, l]) => (
              <button key={r} onClick={() => go(r)} style={{ background: "none", border: 0, cursor: "pointer", padding: "8px 12px", borderRadius: 8,
                font: "600 14.5px/1 var(--font-body)", color: route.name === r ? "var(--c-accent)" : "var(--c-ink)" }}>{l}</button>
            ))}
          </nav>
        )}
        <div style={{ flex: 1 }} />
        {!mobile && (
          <div style={{ display: "flex", alignItems: "center", gap: 8, background: "#fff", border: "1px solid var(--c-line)", borderRadius: 999, padding: "8px 14px", width: 220, color: "var(--c-ink-faint)" }}>
            <i className="ph ph-magnifying-glass" /><span style={{ fontSize: 14 }}>Search the menu…</span>
          </div>
        )}
        <Btn size="sm" variant="gold" onClick={() => go("shop")} style={{ display: mobile ? "none" : "inline-flex" }}>Order now</Btn>
        <button onClick={openCart} style={{ position: "relative", background: "var(--c-accent)", color: "#fff", border: 0, cursor: "pointer", width: 44, height: 44, borderRadius: 12, display: "grid", placeItems: "center", fontSize: 20 }}>
          <i className="ph ph-shopping-bag" />
          {count > 0 && <span style={{ position: "absolute", top: -6, right: -6, minWidth: 20, height: 20, background: "var(--c-secondary)", color: "var(--c-secondary-ink)", borderRadius: 999, font: "700 11px/20px var(--font-body)", textAlign: "center", border: "2px solid var(--c-bg)" }}>{count}</span>}
        </button>
      </div>
    </header>
  );
}

function MobileNav({ go, route, openCart, count }) {
  const items = [["home", "ph-house", "Home"], ["shop", "ph-storefront", "Shop"], ["custom", "ph-cake", "Custom"], ["cart", "ph-shopping-bag", "Cart"]];
  return (
    <nav style={{ position: "fixed", bottom: 0, left: 0, right: 0, zIndex: 45, background: "#fff", borderTop: "1px solid var(--c-line)", display: "flex", padding: "8px 6px 10px" }}>
      {items.map(([r, ic, l]) => {
        const on = route.name === r;
        return (
          <button key={r} onClick={() => (r === "cart" ? openCart() : go(r))} style={{ flex: 1, background: "none", border: 0, cursor: "pointer", display: "flex", flexDirection: "column", alignItems: "center", gap: 3, color: on ? "var(--c-accent)" : "var(--c-ink-soft)", position: "relative" }}>
            <i className={(on ? "ph-fill " : "ph ") + ic} style={{ fontSize: 22 }} />
            <span style={{ font: "600 11px/1 var(--font-body)" }}>{l}</span>
            {r === "cart" && count > 0 && <span style={{ position: "absolute", top: -3, right: "28%", minWidth: 16, height: 16, background: "var(--c-secondary)", color: "var(--c-secondary-ink)", borderRadius: 999, font: "700 10px/16px var(--font-body)", textAlign: "center" }}>{count}</span>}
          </button>
        );
      })}
    </nav>
  );
}

function CartDrawer({ open, close, cart, setQty, remove, go, fulfil }) {
  const sub = cart.reduce((t, i) => t + i.price * i.qty, 0);
  return (
    <>
      <div onClick={close} style={{ position: "fixed", inset: 0, zIndex: 50, background: "rgba(40,20,24,.4)", opacity: open ? 1 : 0, pointerEvents: open ? "auto" : "none", transition: "opacity .25s" }} />
      <aside style={{ position: "fixed", top: 0, right: 0, bottom: 0, width: "min(420px,92vw)", zIndex: 51, background: "var(--c-bg)", boxShadow: "var(--shadow-xl)", transform: open ? "translateX(0)" : "translateX(100%)", transition: "transform .3s var(--ease-out)", display: "flex", flexDirection: "column" }}>
        <div style={{ padding: "20px 22px", borderBottom: "1px solid var(--c-line)", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
          <span style={{ font: "600 22px/1 var(--font-display)" }}>Your order</span>
          <button onClick={close} style={{ background: "none", border: 0, cursor: "pointer", fontSize: 24, color: "var(--c-ink-soft)" }}><i className="ph ph-x" /></button>
        </div>
        <div style={{ flex: 1, overflowY: "auto", padding: 18 }}>
          {!cart.length ? (
            <div style={{ textAlign: "center", padding: "60px 20px", color: "var(--c-ink-soft)" }}>
              <i className="ph ph-shopping-bag" style={{ fontSize: 40, color: "var(--c-line-strong)" }} />
              <p style={{ marginTop: 12 }}>Your order is empty.</p>
            </div>
          ) : cart.map((i) => (
            <div key={i.key} style={{ display: "flex", gap: 12, padding: "12px 0", borderBottom: "1px solid var(--c-line)" }}>
              <div style={{ width: 64, height: 64, borderRadius: 10, background: AD.gradient(i.kind), flexShrink: 0 }} />
              <div style={{ flex: 1 }}>
                <div style={{ fontWeight: 700, fontSize: 14.5 }}>{i.name}</div>
                <div style={{ fontSize: 12, color: "var(--c-ink-soft)", marginTop: 2 }}>{i.opts}</div>
                <div style={{ display: "inline-flex", alignItems: "center", border: "1px solid var(--c-line-strong)", borderRadius: 999, marginTop: 8 }}>
                  <button onClick={() => setQty(i.key, i.qty - 1)} style={{ width: 28, height: 28, border: 0, background: "none", cursor: "pointer", fontWeight: 700 }}>–</button>
                  <span style={{ minWidth: 22, textAlign: "center", fontWeight: 700, fontSize: 13 }}>{i.qty}</span>
                  <button onClick={() => setQty(i.key, i.qty + 1)} style={{ width: 28, height: 28, border: 0, background: "none", cursor: "pointer", fontWeight: 700 }}>+</button>
                </div>
              </div>
              <div style={{ textAlign: "right" }}>
                <div style={{ fontWeight: 700, color: "var(--c-accent)" }}>{$(i.price * i.qty)}</div>
                <button onClick={() => remove(i.key)} style={{ background: "none", border: 0, cursor: "pointer", color: "var(--c-ink-faint)", fontSize: 12, marginTop: 8 }}>Remove</button>
              </div>
            </div>
          ))}
        </div>
        {cart.length > 0 && (
          <div style={{ padding: 20, borderTop: "1px solid var(--c-line)", background: "var(--c-surface)" }}>
            <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 4, fontSize: 14, color: "var(--c-ink-soft)" }}><span>Subtotal · {fulfil}</span><span>{$(sub)}</span></div>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 14 }}>
              <span style={{ fontWeight: 700 }}>Total</span><span style={{ font: "600 26px/1 var(--font-display)", color: "var(--c-accent)" }}>{$(sub)}</span>
            </div>
            <Btn full size="lg" onClick={() => { close(); go("cart"); }}>Review &amp; checkout</Btn>
          </div>
        )}
      </aside>
    </>
  );
}

/* ---------- HOME ---------- */
function ProductCard({ p, go, quickAdd, mobile }) {
  const [h, setH] = aS(false);
  return (
    <div onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)} style={{ background: "var(--c-surface)", borderRadius: "var(--radius-card)", overflow: "hidden", border: "1px solid var(--c-line)", boxShadow: h ? "var(--shadow-md)" : "var(--shadow-xs)", transition: "box-shadow .2s" }}>
      <div onClick={() => go("product", p.id)} style={{ cursor: "pointer", padding: 8 }}><Photo p={p} h={mobile ? 150 : 178} /></div>
      <div style={{ padding: "4px 16px 16px" }}>
        <div onClick={() => go("product", p.id)} style={{ cursor: "pointer", display: "flex", justifyContent: "space-between", alignItems: "baseline", gap: 8 }}>
          <h3 style={{ font: "600 18px/1.15 var(--font-display)", margin: 0 }}>{p.name}</h3>
          <span style={{ font: "700 15px/1 var(--font-body)", color: "var(--c-accent)", whiteSpace: "nowrap" }}>{$(p.price)}</span>
        </div>
        <div style={{ display: "flex", alignItems: "center", gap: 8, margin: "8px 0 12px" }}><Stars n={5} s={12} /><span style={{ fontSize: 12, color: "var(--c-ink-faint)" }}>· {p.serves}</span></div>
        <Btn full size="sm" variant="outline" onClick={() => quickAdd(p)} style={{ gap: 7 }}><i className="ph ph-plus" /> Add to order</Btn>
      </div>
    </div>
  );
}

function Home({ go, quickAdd, mobile }) {
  const best = AD.products.filter((p) => ["celebration-tower", "midnight-ganache", "buttercream-box", "basque-cheesecake"].includes(p.id));
  const cols = mobile ? 2 : 4;
  return (
    <main>
      {/* hero */}
      <section style={{ maxWidth: 1200, margin: "0 auto", padding: mobile ? "24px 18px 8px" : "44px 22px 16px" }}>
        <div style={{ display: "grid", gridTemplateColumns: mobile ? "1fr" : "1.04fr .96fr", gap: 40, alignItems: "center" }}>
          <div>
            <div style={{ display: "inline-flex", alignItems: "center", gap: 8, color: "var(--c-secondary)", font: "700 12px/1 var(--font-body)", letterSpacing: ".18em", textTransform: "uppercase", marginBottom: 18 }}><i className="ph-fill ph-seal-check" /> Order online · same-week pickup</div>
            <h1 style={{ font: "600 clamp(40px,5.6vw,72px)/1.02 var(--font-display)", letterSpacing: "-.01em", margin: "0 0 18px" }}>
              The cake shop,<br /><span style={{ fontStyle: "italic", color: "var(--c-accent)" }}>open all hours.</span>
            </h1>
            <p style={{ fontSize: 18, color: "var(--c-ink-soft)", maxWidth: 460, margin: "0 0 26px" }}>
              Browse the full menu, customise every detail, schedule pickup or delivery and pay securely with Square — Darwin's complete online cake order.
            </p>
            <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
              <Btn size="lg" onClick={() => go("shop")}>Start an order</Btn>
              <Btn size="lg" variant="outline" onClick={() => go("custom")}>Request a custom cake</Btn>
            </div>
            <div style={{ display: "flex", gap: 22, marginTop: 30, flexWrap: "wrap" }}>
              {[["ph-shield-check", "Secure Square checkout"], ["ph-moped", "Darwin-wide delivery"], ["ph-clock-countdown", "48h custom notice"]].map(([ic, t]) => (
                <span key={t} style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 13.5, color: "var(--c-ink-soft)" }}><i className={"ph " + ic} style={{ color: "var(--c-secondary)", fontSize: 17 }} /> {t}</span>
              ))}
            </div>
          </div>
          {!mobile && (
            <div style={{ position: "relative" }}>
              <div style={{ height: 460, borderRadius: 18, background: "radial-gradient(circle at 50% 38%, #3a1f29, var(--c-ink))", boxShadow: "var(--shadow-lg)", display: "grid", placeItems: "center", border: "1px solid var(--c-line)", overflow: "hidden" }}>
                <img src={LOGO_SRC} alt="The Cakerz" style={{ width: "76%", height: "auto", filter: "drop-shadow(0 12px 30px rgba(0,0,0,.4))" }} />
              </div>
              <div style={{ position: "absolute", bottom: 22, left: -20, background: "#fff", borderRadius: 14, boxShadow: "var(--shadow-md)", padding: "14px 18px", border: "1px solid var(--c-line)", display: "flex", alignItems: "center", gap: 12 }}>
                <Stars n={5} /><div><div style={{ fontWeight: 700, fontSize: 14 }}>4.9 · 312 reviews</div><div style={{ fontSize: 12, color: "var(--c-ink-soft)" }}>Darwin's top-rated</div></div>
              </div>
            </div>
          )}
        </div>
      </section>

      {/* category tiles */}
      <section style={{ maxWidth: 1200, margin: "0 auto", padding: mobile ? "26px 18px" : "44px 22px" }}>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 18 }}>
          <h2 style={{ font: "600 26px/1 var(--font-display)", margin: 0 }}>Shop by category</h2>
          <Btn variant="ghost" size="sm" onClick={() => go("shop")}>All →</Btn>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: mobile ? "repeat(2,1fr)" : "repeat(5,1fr)", gap: 14 }}>
          {CATS.map((c) => (
            <button key={c.id} onClick={() => go("shop", c.id)} style={{ background: "var(--c-surface)", border: "1px solid var(--c-line)", borderRadius: 14, padding: "22px 14px", cursor: "pointer", textAlign: "center", transition: "transform .16s" }}
              onMouseEnter={(e) => (e.currentTarget.style.transform = "translateY(-3px)")} onMouseLeave={(e) => (e.currentTarget.style.transform = "")}>
              <span style={{ width: 50, height: 50, borderRadius: 999, background: "var(--c-accent-soft)", color: "var(--c-accent)", display: "grid", placeItems: "center", fontSize: 24, margin: "0 auto 10px" }}><i className={"ph " + c.icon} /></span>
              <div style={{ font: "700 13.5px/1.2 var(--font-body)" }}>{c.label}</div>
            </button>
          ))}
        </div>
      </section>

      {/* bestsellers */}
      <section style={{ maxWidth: 1200, margin: "0 auto", padding: mobile ? "0 18px 26px" : "0 22px 40px" }}>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 18 }}>
          <h2 style={{ font: "600 26px/1 var(--font-display)", margin: 0 }}>Most ordered this week</h2>
          <Btn variant="ghost" size="sm" onClick={() => go("shop")}>Shop all →</Btn>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: `repeat(${cols},1fr)`, gap: 16 }}>
          {best.map((p) => <ProductCard key={p.id} p={p} go={go} quickAdd={quickAdd} mobile={mobile} />)}
        </div>
      </section>

      {/* how it works */}
      <section style={{ background: "var(--c-surface)", borderTop: "1px solid var(--c-line)", borderBottom: "1px solid var(--c-line)", padding: mobile ? "36px 0" : "56px 0" }}>
        <div style={{ maxWidth: 1200, margin: "0 auto", padding: "0 22px" }}>
          <div style={{ textAlign: "center", marginBottom: 30 }}>
            <div style={{ font: "700 12px/1 var(--font-body)", letterSpacing: ".2em", textTransform: "uppercase", color: "var(--c-secondary)", marginBottom: 10 }}>How ordering works</div>
            <h2 style={{ font: "600 clamp(28px,3.4vw,40px)/1 var(--font-display)", margin: 0 }}>From cart to celebration in four steps</h2>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: mobile ? "1fr 1fr" : "repeat(4,1fr)", gap: 18 }}>
            {[["01", "ph-cookie", "Choose & customise", "Pick your cake, size, flavour, message and add-ons."],
              ["02", "ph-calendar-check", "Schedule", "Select pickup or delivery, then a date and time slot."],
              ["03", "ph-lock-key", "Pay with Square", "Secure, encrypted checkout — no card details touch us."],
              ["04", "ph-confetti", "Collect & enjoy", "We bake fresh and notify you the moment it's ready."]].map(([n, ic, t, d]) => (
              <div key={n} style={{ background: "var(--c-bg)", borderRadius: 14, padding: 20, border: "1px solid var(--c-line)" }}>
                <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 10 }}>
                  <span style={{ font: "600 22px/1 var(--font-display)", color: "var(--c-secondary)" }}>{n}</span>
                  <span style={{ fontSize: 22, color: "var(--c-accent)" }}><i className={"ph " + ic} /></span>
                </div>
                <h3 style={{ font: "700 16px/1.2 var(--font-body)", margin: "0 0 6px" }}>{t}</h3>
                <p style={{ fontSize: 13.5, color: "var(--c-ink-soft)", margin: 0, lineHeight: 1.5 }}>{d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* reviews */}
      <section style={{ maxWidth: 1100, margin: "0 auto", padding: mobile ? "36px 18px" : "60px 22px" }}>
        <div style={{ textAlign: "center", marginBottom: 28 }}>
          <Stars n={5} s={20} />
          <h2 style={{ font: "600 clamp(26px,3vw,36px)/1.1 var(--font-display)", margin: "10px 0 0" }}>Loved across the Top End</h2>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: mobile ? "1fr" : "repeat(3,1fr)", gap: 16 }}>
          {[["The online ordering is so easy — customised my daughter's cake and picked it up two days later. Flawless.", "Priya · Lyons"],
            ["Square checkout gave me total confidence. Cake was stunning and bang on time.", "Tom · Nightcliff"],
            ["Ordered a custom corporate cake, got a quote and deposit link the same day. Seamless.", "Renee · Darwin City"]].map(([q, a]) => (
            <div key={a} style={{ background: "var(--c-surface)", border: "1px solid var(--c-line)", borderRadius: 14, padding: 22 }}>
              <Stars n={5} s={13} />
              <p style={{ fontSize: 14.5, color: "var(--c-ink)", lineHeight: 1.55, margin: "10px 0 12px" }}>"{q}"</p>
              <div style={{ fontSize: 12.5, fontWeight: 700, color: "var(--c-ink-soft)" }}>{a}</div>
            </div>
          ))}
        </div>
      </section>

      {/* custom CTA */}
      <section style={{ maxWidth: 1200, margin: "0 auto", padding: mobile ? "0 18px 36px" : "0 22px 64px" }}>
        <div style={{ background: "var(--c-accent)", color: "var(--c-accent-ink)", borderRadius: 18, padding: mobile ? "32px 24px" : "48px 50px", display: "grid", gridTemplateColumns: mobile ? "1fr" : "1.4fr 1fr", gap: 28, alignItems: "center" }}>
          <div>
            <div style={{ font: "700 12px/1 var(--font-body)", letterSpacing: ".2em", textTransform: "uppercase", color: "var(--c-secondary-2)", marginBottom: 12 }}>Bespoke orders</div>
            <h2 style={{ font: "600 clamp(28px,3.6vw,44px)/1.04 var(--font-display)", margin: "0 0 14px" }}>Something completely custom?</h2>
            <p style={{ fontSize: 16, opacity: .85, maxWidth: 440, margin: 0 }}>Submit a request with your brief and inspiration. We'll review, confirm a price and send a secure Square deposit link — no upfront payment required.</p>
          </div>
          <div style={{ textAlign: mobile ? "left" : "right" }}><Btn size="lg" variant="gold" onClick={() => go("custom")}>Request a custom cake</Btn></div>
        </div>
      </section>
    </main>
  );
}

function Footer({ go, mobile }) {
  return (
    <footer style={{ background: "var(--c-ink)", color: "var(--c-bg)", padding: mobile ? "40px 0 90px" : "56px 0 30px" }}>
      <div style={{ maxWidth: 1200, margin: "0 auto", padding: "0 22px", display: "grid", gridTemplateColumns: mobile ? "1fr 1fr" : "1.6fr 1fr 1fr 1fr", gap: 30 }}>
        <div style={{ gridColumn: mobile ? "1 / -1" : "auto" }}>
          <Logo go={go} light />
          <p style={{ marginTop: 14, maxWidth: 260, color: "rgba(255,255,255,.66)", fontSize: 14 }}>Premium cakes, patisserie and barista coffee — order online, made fresh in Darwin.</p>
        </div>
        {[["Order", [["shop", "Shop the menu"], ["custom", "Custom cakes"], ["cart", "Your cart"], ["faq", "Ordering FAQ"]]],
          ["Visit", [["contact", "Find us"], ["contact", "Hours"], ["gallery", "Gallery"]]],
          ["Company", [["about", "About"], ["contact", "Contact"], ["faq", "FAQ"]]]].map(([h, ls]) => (
          <div key={h}>
            <div style={{ font: "700 12px/1 var(--font-body)", letterSpacing: ".16em", textTransform: "uppercase", color: "var(--c-secondary-2)", marginBottom: 14 }}>{h}</div>
            <div style={{ display: "flex", flexDirection: "column", gap: 9 }}>{ls.map(([r, l], i) => <button key={i} onClick={() => go(r)} style={{ background: "none", border: 0, textAlign: "left", cursor: "pointer", color: "rgba(255,255,255,.78)", fontSize: 14, padding: 0 }}>{l}</button>)}</div>
          </div>
        ))}
      </div>
      <div style={{ maxWidth: 1200, margin: "26px auto 0", padding: "18px 22px 0", borderTop: "1px solid rgba(255,255,255,.12)", display: "flex", justifyContent: "space-between", color: "rgba(255,255,255,.5)", fontSize: 12.5, flexWrap: "wrap", gap: 8 }}>
        <span>© 2026 The Cakerz · Darwin NT · Payments secured by Square</span><span style={{ fontFamily: "var(--font-mono)" }}>Online ordering website</span>
      </div>
    </footer>
  );
}

window.Atelier = { aS, aE, useVW, $, LOGO_SRC, SIZES, ADDONS, CATS, Crest, Logo, Btn, Stars, Photo, Rule, Header, MobileNav, CartDrawer, ProductCard, Home, Footer, TopBar };