/* The Cakerz — Atelier. File 2 of 3: shop (filter sidebar + grid), product
   configurator, custom-cake request flow, gallery, about, contact, FAQ.
   Exports window.AtelierShop. */
const { aS: uS, aE: uE, $, LOGO_SRC, SIZES, ADDONS, CATS, Crest, Btn, Stars, Photo, Rule, ProductCard } = window.Atelier;
const AS = window.CAKERZ_DATA;
const PAGE = { maxWidth: 1200, margin: "0 auto" };

/* ============================ SHOP ============================ */
function Shop({ go, quickAdd, mobile, initialCat }) {
  const [cat, setCat] = uS(initialCat || "All");
  const [diet, setDiet] = uS([]);
  const [sort, setSort] = uS("popular");
  uE(() => { if (initialCat) setCat(initialCat); }, [initialCat]);
  const toggleDiet = (d) => setDiet((s) => (s.includes(d) ? s.filter((x) => x !== d) : [...s, d]));
  let list = AS.products.filter((p) => (cat === "All" || p.cat === cat) && (!diet.length || diet.some((d) => p.tags.includes(d))));
  if (sort === "low") list = [...list].sort((a, b) => a.price - b.price);
  if (sort === "high") list = [...list].sort((a, b) => b.price - a.price);

  const Filters = () => (
    <div>
      <div style={{ font: "700 12px/1 var(--font-body)", letterSpacing: ".14em", textTransform: "uppercase", color: "var(--c-ink-faint)", margin: "0 0 12px" }}>Category</div>
      <div style={{ display: "flex", flexDirection: "column", gap: 2, marginBottom: 24 }}>
        {["All", ...CATS.map((c) => c.id)].map((c) => (
          <button key={c} onClick={() => setCat(c)} style={{ textAlign: "left", background: cat === c ? "var(--c-accent-soft)" : "none", color: cat === c ? "var(--c-accent)" : "var(--c-ink)", border: 0, cursor: "pointer", padding: "9px 12px", borderRadius: 8, font: "600 14.5px/1 var(--font-body)" }}>{c === "All" ? "All products" : (CATS.find((x) => x.id === c) || {}).label || c}</button>
        ))}
      </div>
      <div style={{ font: "700 12px/1 var(--font-body)", letterSpacing: ".14em", textTransform: "uppercase", color: "var(--c-ink-faint)", margin: "0 0 12px" }}>Dietary</div>
      <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
        {["Gluten-free", "Vegan"].map((d) => (
          <label key={d} style={{ display: "flex", alignItems: "center", gap: 10, cursor: "pointer", fontSize: 14.5 }}>
            <span style={{ width: 20, height: 20, borderRadius: 5, border: "1.5px solid " + (diet.includes(d) ? "var(--c-accent)" : "var(--c-line-strong)"), background: diet.includes(d) ? "var(--c-accent)" : "#fff", color: "#fff", display: "grid", placeItems: "center", fontSize: 12 }}>{diet.includes(d) && <i className="ph-bold ph-check" />}</span>
            <input type="checkbox" checked={diet.includes(d)} onChange={() => toggleDiet(d)} style={{ display: "none" }} />{d}
          </label>
        ))}
      </div>
    </div>
  );

  return (
    <main style={{ ...PAGE, padding: mobile ? "20px 18px 30px" : "32px 22px 60px" }}>
      <div style={{ marginBottom: 22 }}>
        <h1 style={{ font: "600 clamp(30px,4vw,46px)/1 var(--font-display)", margin: "0 0 6px" }}>Shop the menu</h1>
        <p style={{ color: "var(--c-ink-soft)", margin: 0 }}>{list.length} products · order online for pickup or delivery</p>
      </div>
      {mobile && (
        <div style={{ display: "flex", gap: 8, overflowX: "auto", paddingBottom: 12, marginBottom: 14 }}>
          {["All", ...CATS.map((c) => c.id)].map((c) => (
            <button key={c} onClick={() => setCat(c)} style={{ whiteSpace: "nowrap", padding: "9px 16px", borderRadius: 999, cursor: "pointer", border: "1.5px solid " + (cat === c ? "var(--c-accent)" : "var(--c-line-strong)"), background: cat === c ? "var(--c-accent)" : "transparent", color: cat === c ? "#fff" : "var(--c-ink)", font: "600 13.5px/1 var(--font-body)" }}>{c}</button>
          ))}
        </div>
      )}
      <div style={{ display: "grid", gridTemplateColumns: mobile ? "1fr" : "220px 1fr", gap: 30, alignItems: "start" }}>
        {!mobile && <aside style={{ position: "sticky", top: 110 }}><Filters /></aside>}
        <div>
          <div style={{ display: "flex", justifyContent: "flex-end", marginBottom: 16 }}>
            <select value={sort} onChange={(e) => setSort(e.target.value)} style={{ padding: "9px 14px", borderRadius: 8, border: "1px solid var(--c-line-strong)", background: "#fff", font: "600 14px/1 var(--font-body)", color: "var(--c-ink)", cursor: "pointer" }}>
              <option value="popular">Most popular</option><option value="low">Price: low to high</option><option value="high">Price: high to low</option>
            </select>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: mobile ? "repeat(2,1fr)" : "repeat(3,1fr)", gap: 16 }}>
            {list.map((p) => <ProductCard key={p.id} p={p} go={go} quickAdd={quickAdd} mobile={mobile} />)}
          </div>
        </div>
      </div>
    </main>
  );
}

/* ============================ PRODUCT (configurator) ============================ */
function Product({ id, go, addConfigured, mobile }) {
  const p = AS.products.find((x) => x.id === id) || AS.products[0];
  const showSizes = p.cat === "Cakes";
  const showMessage = p.cat === "Cakes" || p.cat === "Cupcakes";
  const showAddons = p.kind !== "coffee";
  const [size, setSize] = uS(SIZES[0].id);
  const [flavour, setFlavour] = uS(p.flavours[0]);
  const [msg, setMsg] = uS("");
  const [addons, setAddons] = uS([]);
  const [qty, setQty] = uS(1);
  const [tab, setTab] = uS("details");
  const sizeDelta = showSizes ? (SIZES.find((s) => s.id === size) || {}).delta || 0 : 0;
  const addonsTotal = addons.reduce((t, a) => t + (ADDONS.find((x) => x.id === a) || {}).price, 0);
  const unit = p.price + sizeDelta + addonsTotal;
  const total = unit * qty;
  const toggleAddon = (a) => setAddons((s) => (s.includes(a) ? s.filter((x) => x !== a) : [...s, a]));

  const submit = () => {
    const optParts = [];
    if (showSizes) optParts.push((SIZES.find((s) => s.id === size) || {}).label);
    optParts.push(flavour);
    if (msg) optParts.push('"' + msg + '"');
    if (addons.length) optParts.push(addons.map((a) => (ADDONS.find((x) => x.id === a) || {}).name).join(", "));
    addConfigured({ id: p.id, name: p.name, kind: p.kind, price: unit, qty, opts: optParts.filter(Boolean).join(" · ") });
  };

  const Section = ({ title, children }) => (
    <div style={{ marginBottom: 22 }}>
      <div style={{ font: "700 13px/1 var(--font-body)", letterSpacing: ".04em", marginBottom: 11 }}>{title}</div>
      {children}
    </div>
  );

  return (
    <main style={{ ...PAGE, padding: mobile ? "16px 18px 40px" : "26px 22px 60px" }}>
      <button onClick={() => go("shop")} style={{ background: "none", border: 0, cursor: "pointer", color: "var(--c-ink-soft)", fontSize: 14, display: "flex", alignItems: "center", gap: 7, marginBottom: 18 }}><i className="ph ph-arrow-left" /> Back to shop</button>
      <div style={{ display: "grid", gridTemplateColumns: mobile ? "1fr" : "1fr 1.05fr", gap: mobile ? 24 : 44, alignItems: "start" }}>
        {/* gallery */}
        <div style={{ position: mobile ? "static" : "sticky", top: 110 }}>
          <Photo p={p} h={mobile ? 280 : 440} />
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 10, marginTop: 10 }}>
            {[0, 1, 2, 3].map((i) => <div key={i} style={{ height: 70, borderRadius: 8, background: AS.gradient(p.kind), opacity: i === 0 ? 1 : .55, border: i === 0 ? "2px solid var(--c-accent)" : "1px solid var(--c-line)" }} />)}
          </div>
        </div>
        {/* config */}
        <div>
          <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 8 }}><Stars n={5} s={15} /><span style={{ fontSize: 13, color: "var(--c-ink-faint)" }}>4.9 · 86 reviews · {p.cat}</span></div>
          <h1 style={{ font: "600 clamp(30px,3.6vw,46px)/1.02 var(--font-display)", margin: "0 0 10px" }}>{p.name}</h1>
          <p style={{ fontSize: 16, color: "var(--c-ink-soft)", lineHeight: 1.6, margin: "0 0 4px" }}>{p.blurb}</p>
          <div style={{ font: "600 30px/1 var(--font-display)", color: "var(--c-accent)", margin: "14px 0 22px" }}>{$(p.price + sizeDelta)}<span style={{ fontSize: 14, color: "var(--c-ink-faint)", fontFamily: "var(--font-body)", fontWeight: 600 }}> · serves {p.serves}</span></div>

          {showSizes && (
            <Section title="Choose size">
              <div style={{ display: "grid", gridTemplateColumns: mobile ? "1fr 1fr" : "repeat(2,1fr)", gap: 10 }}>
                {SIZES.map((s) => (
                  <button key={s.id} onClick={() => setSize(s.id)} style={{ textAlign: "left", padding: "12px 14px", borderRadius: 10, cursor: "pointer", border: "1.5px solid " + (size === s.id ? "var(--c-accent)" : "var(--c-line-strong)"), background: size === s.id ? "var(--c-accent-soft)" : "#fff" }}>
                    <div style={{ display: "flex", justifyContent: "space-between" }}><span style={{ fontWeight: 700, fontSize: 14.5 }}>{s.label}</span><span style={{ fontSize: 13, color: "var(--c-accent)", fontWeight: 700 }}>{s.delta ? "+" + $(s.delta) : "incl."}</span></div>
                    <div style={{ fontSize: 12.5, color: "var(--c-ink-soft)", marginTop: 2 }}>{s.sub}</div>
                  </button>
                ))}
              </div>
            </Section>
          )}

          <Section title={p.kind === "coffee" ? "Choose option" : "Choose flavour"}>
            <div style={{ display: "flex", flexWrap: "wrap", gap: 9 }}>
              {p.flavours.map((f) => (
                <button key={f} onClick={() => setFlavour(f)} style={{ padding: "9px 15px", borderRadius: 999, cursor: "pointer", border: "1.5px solid " + (flavour === f ? "var(--c-accent)" : "var(--c-line-strong)"), background: flavour === f ? "var(--c-accent-soft)" : "transparent", color: flavour === f ? "var(--c-accent)" : "var(--c-ink)", font: "600 13.5px/1 var(--font-body)" }}>{f}</button>
              ))}
            </div>
          </Section>

          {showMessage && (
            <Section title="Message on cake (optional)">
              <input value={msg} onChange={(e) => setMsg(e.target.value)} maxLength={40} placeholder="e.g. Happy 30th, Mum!" style={{ width: "100%", boxSizing: "border-box", padding: "12px 14px", border: "1.5px solid var(--c-line-strong)", borderRadius: 9, font: "400 15px/1.4 var(--font-body)", outline: "none" }} onFocus={(e) => (e.target.style.borderColor = "var(--c-accent)")} onBlur={(e) => (e.target.style.borderColor = "var(--c-line-strong)")} />
              <div style={{ fontSize: 12, color: "var(--c-ink-faint)", marginTop: 5 }}>{msg.length}/40 characters · piped in gold or chocolate</div>
            </Section>
          )}

          {showAddons && (
            <Section title="Add the extras">
              <div style={{ display: "grid", gridTemplateColumns: mobile ? "1fr" : "1fr 1fr", gap: 10 }}>
                {ADDONS.map((a) => {
                  const on = addons.includes(a.id);
                  return (
                    <button key={a.id} onClick={() => toggleAddon(a.id)} style={{ display: "flex", alignItems: "center", gap: 11, padding: "11px 13px", borderRadius: 10, cursor: "pointer", border: "1.5px solid " + (on ? "var(--c-accent)" : "var(--c-line-strong)"), background: on ? "var(--c-accent-soft)" : "#fff", textAlign: "left" }}>
                      <span style={{ width: 34, height: 34, borderRadius: 8, background: on ? "var(--c-accent)" : "var(--c-surface-2)", color: on ? "#fff" : "var(--c-accent)", display: "grid", placeItems: "center", fontSize: 18, flexShrink: 0 }}><i className={"ph " + a.icon} /></span>
                      <span style={{ flex: 1 }}><span style={{ display: "block", fontWeight: 700, fontSize: 13.5 }}>{a.name}</span><span style={{ fontSize: 12.5, color: "var(--c-accent)", fontWeight: 700 }}>+{$(a.price)}</span></span>
                      <span style={{ width: 20, height: 20, borderRadius: 999, border: "1.5px solid " + (on ? "var(--c-accent)" : "var(--c-line-strong)"), background: on ? "var(--c-accent)" : "#fff", color: "#fff", display: "grid", placeItems: "center", fontSize: 11 }}>{on && <i className="ph-bold ph-check" />}</span>
                    </button>
                  );
                })}
              </div>
            </Section>
          )}

          {/* sticky add bar */}
          <div style={{ display: "flex", gap: 12, alignItems: "center", marginTop: 8, paddingTop: 18, borderTop: "1px solid var(--c-line)" }}>
            <div style={{ display: "inline-flex", alignItems: "center", border: "1.5px solid var(--c-line-strong)", borderRadius: 999, background: "#fff" }}>
              <button onClick={() => setQty(Math.max(1, qty - 1))} style={{ width: 42, height: 48, border: 0, background: "none", cursor: "pointer", fontSize: 18, fontWeight: 700 }}>–</button>
              <span style={{ minWidth: 32, textAlign: "center", fontWeight: 700 }}>{qty}</span>
              <button onClick={() => setQty(qty + 1)} style={{ width: 42, height: 48, border: 0, background: "none", cursor: "pointer", fontSize: 18, fontWeight: 700 }}>+</button>
            </div>
            <Btn size="lg" style={{ flex: 1 }} onClick={submit}>Add to order · {$(total)}</Btn>
          </div>
          <div style={{ display: "flex", gap: 18, marginTop: 16, flexWrap: "wrap" }}>
            {[["ph-leaf", "Made fresh to order"], ["ph-shield-check", "Square secure checkout"], ["ph-clock", "Same-week available"]].map(([ic, t]) => (
              <span key={t} style={{ display: "flex", alignItems: "center", gap: 7, fontSize: 13, color: "var(--c-ink-soft)" }}><i className={"ph " + ic} style={{ color: "var(--c-secondary)", fontSize: 16 }} /> {t}</span>
            ))}
          </div>
        </div>
      </div>

      {/* details / allergens / reviews */}
      <div style={{ marginTop: 50, borderTop: "1px solid var(--c-line)", paddingTop: 24 }}>
        <div style={{ display: "flex", gap: 6, marginBottom: 18 }}>
          {[["details", "Details"], ["allergens", "Allergens & care"], ["reviews", "Reviews"]].map(([t, l]) => (
            <button key={t} onClick={() => setTab(t)} style={{ background: tab === t ? "var(--c-accent)" : "transparent", color: tab === t ? "#fff" : "var(--c-ink)", border: tab === t ? 0 : "1px solid var(--c-line-strong)", cursor: "pointer", padding: "9px 16px", borderRadius: 999, font: "600 13.5px/1 var(--font-body)" }}>{l}</button>
          ))}
        </div>
        <div style={{ maxWidth: 720, color: "var(--c-ink-soft)", fontSize: 15, lineHeight: 1.65 }}>
          {tab === "details" && <p>{p.blurb} Every order is baked to order in our Darwin kitchen using real butter, fresh cream and local fruit in season. Choose your size, flavour and finishing touches above, then schedule pickup or delivery at checkout.</p>}
          {tab === "allergens" && <p>Made in a kitchen that handles gluten, dairy, eggs, nuts and soy. Gluten-free and vegan options are clearly tagged but cannot be guaranteed allergen-free. Best enjoyed within 3 days; store refrigerated and bring to room temperature 30 minutes before serving.</p>}
          {tab === "reviews" && <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>{[["Absolutely perfect — exactly as pictured.", "Aisha"], ["Flavour was incredible and the message piping was beautiful.", "Jack"]].map(([q, a]) => <div key={a}><Stars n={5} s={13} /><p style={{ margin: "6px 0 0", color: "var(--c-ink)" }}>"{q}" <span style={{ color: "var(--c-ink-faint)" }}>— {a}</span></p></div>)}</div>}
        </div>
      </div>
    </main>
  );
}

/* ============================ CUSTOM REQUEST ============================ */
function CustomRequest({ go, submitRequest, mobile }) {
  const [o, setO] = uS({ occasion: "Birthday", servings: "20–25", flavour: "Vanilla bean", style: "Buttercream", msg: "", budget: "$150–250", date: "", fulfil: "Pickup", notes: "", name: "", email: "", phone: "", file: "" });
  const set = (k, v) => setO((s) => ({ ...s, [k]: v }));
  const Field = ({ label, k, type = "text", ph, area }) => {
    const F = area ? "textarea" : "input";
    return (
      <label style={{ display: "block" }}>
        <span style={{ display: "block", font: "700 13px/1 var(--font-body)", marginBottom: 7 }}>{label}</span>
        <F value={o[k]} type={type} rows={area ? 3 : undefined} placeholder={ph} onChange={(e) => set(k, e.target.value)} style={{ width: "100%", boxSizing: "border-box", padding: "12px 14px", border: "1.5px solid var(--c-line-strong)", borderRadius: 9, font: "400 15px/1.5 var(--font-body)", outline: "none", resize: area ? "vertical" : undefined }} onFocus={(e) => (e.target.style.borderColor = "var(--c-accent)")} onBlur={(e) => (e.target.style.borderColor = "var(--c-line-strong)")} />
      </label>
    );
  };
  const Choice = ({ label, k, opts }) => (
    <div>
      <div style={{ font: "700 13px/1 var(--font-body)", marginBottom: 9 }}>{label}</div>
      <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
        {opts.map((v) => <button key={v} onClick={() => set(k, v)} style={{ padding: "9px 15px", borderRadius: 999, cursor: "pointer", border: "1.5px solid " + (o[k] === v ? "var(--c-accent)" : "var(--c-line-strong)"), background: o[k] === v ? "var(--c-accent-soft)" : "transparent", color: o[k] === v ? "var(--c-accent)" : "var(--c-ink)", font: "600 13.5px/1 var(--font-body)" }}>{v}</button>)}
      </div>
    </div>
  );
  const card = { background: "var(--c-surface)", border: "1px solid var(--c-line)", borderRadius: 14, padding: mobile ? 20 : 28, marginBottom: 18 };

  return (
    <main style={{ ...PAGE, maxWidth: 980, padding: mobile ? "24px 18px 40px" : "40px 22px 70px" }}>
      <div style={{ textAlign: "center", marginBottom: 30 }}>
        <img src={LOGO_SRC} alt="The Cakerz" style={{ height: 66, width: "auto", borderRadius: 12, display: "block", margin: "0 auto", boxShadow: "0 4px 14px rgba(40,20,24,.22)" }} />
        <h1 style={{ font: "600 clamp(32px,4.4vw,52px)/1.02 var(--font-display)", margin: "12px 0 10px" }}>Request a custom cake</h1>
        <p style={{ color: "var(--c-ink-soft)", maxWidth: 540, margin: "0 auto" }}>Tell us what you're dreaming of. We'll review your brief, confirm a price, and send a secure Square deposit link — <b style={{ color: "var(--c-ink)" }}>no payment now</b>.</p>
      </div>

      <div style={card}><div style={sectionHd}>1 · The occasion</div><div style={{ display: "grid", gridTemplateColumns: mobile ? "1fr" : "1fr 1fr", gap: 18 }}><Choice label="What are we celebrating?" k="occasion" opts={["Birthday", "Wedding", "Anniversary", "Corporate", "Baby shower", "Other"]} /><Choice label="Pickup or delivery?" k="fulfil" opts={["Pickup", "Delivery"]} /></div></div>

      <div style={card}><div style={sectionHd}>2 · The cake</div><div style={{ display: "grid", gridTemplateColumns: mobile ? "1fr" : "1fr 1fr", gap: 18 }}>
        <Choice label="Serving size" k="servings" opts={["8–10", "12–16", "20–25", "30–40", "50+"]} />
        <Choice label="Flavour" k="flavour" opts={["Vanilla bean", "Triple choc", "Red velvet", "Lychee & rose", "Mango & coconut"]} />
        <Choice label="Design style" k="style" opts={["Buttercream", "Fondant", "Fresh florals", "Drip & gold", "Sculpted", "Minimalist"]} />
        <Choice label="Budget range" k="budget" opts={["$100–150", "$150–250", "$250–400", "$400+"]} />
      </div></div>

      <div style={card}><div style={sectionHd}>3 · The details</div><div style={{ display: "grid", gridTemplateColumns: mobile ? "1fr" : "1fr 1fr", gap: 16 }}>
        <Field label="Message on cake" k="msg" ph="Happy 30th, Mum!" />
        <Field label="Required date" k="date" type="date" />
        <div style={{ gridColumn: mobile ? "auto" : "1 / -1" }}><Field label="Special notes (allergies, theme, colours)" k="notes" area ph="Soft pinks and gold, gluten-free sponge, ballet theme…" /></div>
      </div>
      <div style={{ marginTop: 16 }}>
        <div style={{ font: "700 13px/1 var(--font-body)", marginBottom: 9 }}>Inspiration image (optional)</div>
        <label style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 10, padding: "22px", border: "1.5px dashed var(--c-line-strong)", borderRadius: 12, cursor: "pointer", color: "var(--c-ink-soft)", background: "var(--c-surface-2)" }}>
          <i className="ph ph-image" style={{ fontSize: 22, color: "var(--c-secondary)" }} />
          <span style={{ fontSize: 14 }}>{o.file ? o.file : "Drop or browse an image — Pinterest screenshots welcome"}</span>
          <input type="file" accept="image/*" onChange={(e) => set("file", e.target.files[0] ? e.target.files[0].name : "")} style={{ display: "none" }} />
        </label>
      </div></div>

      <div style={card}><div style={sectionHd}>4 · Your contact</div><div style={{ display: "grid", gridTemplateColumns: mobile ? "1fr" : "repeat(3,1fr)", gap: 16 }}>
        <Field label="Name" k="name" ph="Jamie Tran" /><Field label="Email" k="email" type="email" ph="jamie@email.com" /><Field label="Phone" k="phone" ph="0400 000 000" />
      </div></div>

      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 12, marginTop: 6 }}>
        <span style={{ fontSize: 13, color: "var(--c-ink-soft)", display: "flex", alignItems: "center", gap: 8 }}><i className="ph ph-info" /> We typically reply within one business day.</span>
        <Btn size="lg" onClick={() => submitRequest(o)}>Submit request</Btn>
      </div>
    </main>
  );
}
const sectionHd = { font: "700 12px/1 var(--font-body)", letterSpacing: ".16em", textTransform: "uppercase", color: "var(--c-secondary)", marginBottom: 16 };

/* ============================ GALLERY ============================ */
function Gallery({ mobile }) {
  const kinds = ["cake", "cupcake", "dessert", "party", "cake", "coffee", "cake", "cupcake", "dessert", "cake", "party", "dessert"];
  return (
    <main style={{ ...PAGE, padding: mobile ? "24px 18px 40px" : "40px 22px 70px" }}>
      <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 }}>Our work</div>
        <h1 style={{ font: "600 clamp(32px,4.4vw,52px)/1 var(--font-display)", margin: 0 }}>The gallery</h1>
      </div>
      <div style={{ columnCount: mobile ? 2 : 4, columnGap: 14 }}>
        {kinds.map((k, i) => (
          <div key={i} style={{ breakInside: "avoid", marginBottom: 14, height: [220, 160, 260, 190][i % 4], borderRadius: 12, background: AS.gradient(k), display: "grid", placeItems: "center", border: "1px solid var(--c-line)" }}>
            <Crest s={48} gold="rgba(255,255,255,.6)" ink="rgba(101,29,50,.45)" />
          </div>
        ))}
      </div>
    </main>
  );
}

/* ============================ ABOUT ============================ */
function About({ go, mobile }) {
  return (
    <main>
      <section style={{ ...PAGE, maxWidth: 820, padding: mobile ? "30px 18px 20px" : "56px 22px 30px", textAlign: "center" }}>
        <img src={LOGO_SRC} alt="The Cakerz" style={{ height: 76, width: "auto", borderRadius: 14, display: "block", margin: "0 auto", boxShadow: "0 6px 18px rgba(40,20,24,.24)" }} />
        <h1 style={{ font: "600 clamp(34px,5vw,60px)/1.04 var(--font-display)", margin: "14px 0 18px" }}>Crafted in Darwin,<br /><span style={{ fontStyle: "italic", color: "var(--c-accent)" }}>made to be remembered</span></h1>
        <p style={{ fontSize: 18, color: "var(--c-ink-soft)", lineHeight: 1.6 }}>The Cakerz pairs old-world patisserie craft with a modern, effortless way to order. Every cake is baked to order in our Knuckey Street kitchen — and now the whole experience, from browsing to scheduling to secure payment, lives online.</p>
      </section>
      <section style={{ ...PAGE, padding: mobile ? "10px 18px" : "20px 22px 50px" }}>
        <div style={{ height: mobile ? 220 : 360, borderRadius: 16, background: "radial-gradient(circle at 50% 40%, #3a1f29, var(--c-ink))", display: "grid", placeItems: "center", border: "1px solid var(--c-line)", boxShadow: "var(--shadow-md)", overflow: "hidden" }}><img src={LOGO_SRC} alt="The Cakerz" style={{ width: mobile ? "58%" : "40%", height: "auto", filter: "drop-shadow(0 10px 26px rgba(0,0,0,.4))" }} /></div>
      </section>
      <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={{ ...PAGE, padding: "0 22px", display: "grid", gridTemplateColumns: mobile ? "1fr" : "repeat(3,1fr)", gap: 26 }}>
          {[["ph-medal", "Patisserie-trained", "Classically-trained pastry chefs, obsessed with finish and flavour."],
            ["ph-cursor-click", "Effortless ordering", "A real online store — customise, schedule and pay in minutes."],
            ["ph-heart", "Proudly local", "Family-owned in the NT, baking for every Top End celebration."]].map(([ic, t, d]) => (
            <div key={t}><span style={{ fontSize: 28, color: "var(--c-accent)" }}><i className={"ph " + ic} /></span><h3 style={{ font: "600 22px/1.1 var(--font-display)", margin: "12px 0 8px" }}>{t}</h3><p style={{ color: "var(--c-ink-soft)", fontSize: 15, lineHeight: 1.6 }}>{d}</p></div>
          ))}
        </div>
      </section>
      <section style={{ ...PAGE, padding: mobile ? "36px 18px" : "60px 22px", textAlign: "center" }}>
        <h2 style={{ font: "600 clamp(28px,3.4vw,40px)/1 var(--font-display)", margin: "0 0 20px" }}>Ready to order?</h2>
        <div style={{ display: "flex", gap: 12, justifyContent: "center", flexWrap: "wrap" }}><Btn size="lg" onClick={() => go("shop")}>Shop the menu</Btn><Btn size="lg" variant="outline" onClick={() => go("custom")}>Custom request</Btn></div>
      </section>
    </main>
  );
}

/* ============================ CONTACT ============================ */
function Contact({ mobile }) {
  const [sent, setSent] = uS(false);
  return (
    <main style={{ ...PAGE, padding: mobile ? "24px 18px 40px" : "44px 22px 70px" }}>
      <div style={{ textAlign: "center", marginBottom: 36 }}>
        <h1 style={{ font: "600 clamp(32px,4.4vw,52px)/1 var(--font-display)", margin: "0 0 8px" }}>Visit & contact</h1>
        <p style={{ color: "var(--c-ink-soft)", margin: 0 }}>Questions about an order? We're here to help.</p>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: mobile ? "1fr" : "1fr 1.1fr", gap: 40, alignItems: "start" }}>
        <div>
          <div style={{ height: 220, borderRadius: 14, background: "linear-gradient(135deg,#efe2d6,#d8c3a4)", position: "relative", overflow: "hidden", marginBottom: 22, display: "grid", placeItems: "center", border: "1px solid var(--c-line)" }}><i className="ph-fill ph-map-pin" style={{ fontSize: 40, color: "var(--c-accent)" }} /></div>
          {[["ph-storefront", "Studio & cabinet", "Shop 4, 21 Knuckey St, Darwin City NT 0800"], ["ph-clock", "Opening hours", "Tue–Sat 8am–4pm · Sun 9am–1pm · Mon closed"], ["ph-phone", "Call", "(08) 8900 0000"], ["ph-envelope-simple", "Email", "orders@thecakerz.com.au"]].map(([ic, t, d]) => (
            <div key={t} style={{ display: "flex", gap: 14, padding: "15px 0", borderBottom: "1px solid var(--c-line)" }}>
              <span style={{ fontSize: 22, color: "var(--c-secondary)" }}><i className={"ph " + ic} /></span><div><div style={{ fontWeight: 700, fontSize: 15 }}>{t}</div><div style={{ color: "var(--c-ink-soft)", fontSize: 14.5, marginTop: 3 }}>{d}</div></div>
            </div>
          ))}
        </div>
        <div style={{ background: "var(--c-surface)", border: "1px solid var(--c-line)", borderRadius: 14, padding: mobile ? 22 : 32 }}>
          {sent ? <div style={{ textAlign: "center", padding: "40px 0" }}><i className="ph-fill ph-check-circle" style={{ fontSize: 50, color: "var(--ok)" }} /><h3 style={{ font: "600 26px/1 var(--font-display)", margin: "12px 0 8px" }}>Message sent</h3><p style={{ color: "var(--c-ink-soft)" }}>We'll reply within one business day.</p></div>
          : <><h3 style={{ font: "600 24px/1 var(--font-display)", margin: "0 0 18px" }}>Send a message</h3>
            <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
              {[["Your name", "Jamie Tran"], ["Email", "jamie@email.com"]].map(([l, ph]) => <label key={l}><span style={{ display: "block", font: "700 13px/1 var(--font-body)", marginBottom: 7 }}>{l}</span><input placeholder={ph} style={inp} /></label>)}
              <label><span style={{ display: "block", font: "700 13px/1 var(--font-body)", marginBottom: 7 }}>Message</span><textarea rows={4} placeholder="How can we help with your order?" style={{ ...inp, resize: "vertical" }} /></label>
              <Btn size="lg" onClick={() => setSent(true)}>Send message</Btn>
            </div></>}
        </div>
      </div>
    </main>
  );
}
const inp = { width: "100%", boxSizing: "border-box", padding: "12px 14px", border: "1.5px solid var(--c-line-strong)", borderRadius: 9, font: "400 15px/1.5 var(--font-body)", outline: "none" };

/* ============================ FAQ ============================ */
function FAQ({ go, mobile }) {
  const [open, setOpen] = uS(0);
  const qs = [
    ["How far in advance should I order?", "Ready-made cakes and treats can often be ready within the same week. Custom cakes need a minimum of 48 hours, and tiered or wedding cakes ideally 2–3 weeks."],
    ["Do you deliver across Darwin?", "Yes — we deliver Darwin-wide. Delivery is free on orders over $80, otherwise a flat $12 applies. You'll choose a date and time window at checkout."],
    ["How do payments work?", "All checkout payments are handled securely by Square. Your card details are encrypted and never stored by us. For custom cakes, we send a secure Square deposit link after confirming your quote."],
    ["Can I change or cancel an order?", "Standard orders can be changed up to 48 hours before pickup/delivery. Custom orders are confirmed once the deposit is paid; contact us as early as possible for changes."],
    ["Do you cater for allergies?", "We offer gluten-free and vegan options (clearly tagged). Our kitchen handles common allergens, so we can't guarantee allergen-free, but we'll always do our best — note details in your order."],
    ["Do you do party supplies and add-ons?", "Yes — candles, toppers, message plaques, balloon bundles and sparklers can be added to any cake order, or shop the Party category on its own."],
  ];
  return (
    <main style={{ ...PAGE, maxWidth: 800, padding: mobile ? "24px 18px 40px" : "44px 22px 70px" }}>
      <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 }}>Ordering guidance</div>
        <h1 style={{ font: "600 clamp(32px,4.4vw,50px)/1 var(--font-display)", margin: 0 }}>Frequently asked</h1>
      </div>
      <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
        {qs.map(([q, a], i) => (
          <div key={i} style={{ background: "var(--c-surface)", border: "1px solid var(--c-line)", borderRadius: 12, overflow: "hidden" }}>
            <button onClick={() => setOpen(open === i ? -1 : i)} style={{ width: "100%", display: "flex", justifyContent: "space-between", alignItems: "center", gap: 12, background: "none", border: 0, cursor: "pointer", padding: "18px 20px", textAlign: "left", font: "700 16px/1.3 var(--font-body)", color: "var(--c-ink)" }}>
              {q}<i className={"ph " + (open === i ? "ph-minus" : "ph-plus")} style={{ color: "var(--c-accent)", flexShrink: 0 }} />
            </button>
            {open === i && <div style={{ padding: "0 20px 18px", color: "var(--c-ink-soft)", fontSize: 15, lineHeight: 1.6 }}>{a}</div>}
          </div>
        ))}
      </div>
      <div style={{ textAlign: "center", marginTop: 36 }}><p style={{ color: "var(--c-ink-soft)", marginBottom: 14 }}>Still have a question?</p><Btn variant="outline" onClick={() => go("contact")}>Contact us</Btn></div>
    </main>
  );
}

window.AtelierShop = { Shop, Product, CustomRequest, Gallery, About, Contact, FAQ };