// Part 2 — Hidden Playground, Editorial, Values, Brands, Gifting, Visit, Happenings, Footer, Cart, App root

const { useState: useState2, useEffect: useEffect2, useMemo: useMemo2, useRef: useRef2 } = React;
const aedFmt = window.__sfApp1.aed;

// ---------- Editorial split — "Why we exist" ----------
function Editorial() {
  return (
    <section className="section section--tight" id="values-quote">
      <div className="container">
        <div className="editorial-split">
          <div>
            <span className="eyebrow">Why we exist</span>
            <p className="editorial-quote" style={{ marginTop: 18 }}>
              We believe a child's room is their <span className="berry">first museum,</span> and
              every wooden xylophone, well-bound book and small soft thing
              should be chosen the way grown-ups choose <span className="berry">art</span>.
            </p>
            <div style={{ display: "flex", alignItems: "center", gap: 14, marginTop: 28 }}>
              <div style={{ width: 44, height: 44, borderRadius: 999, background: "var(--surface)", display: "flex", alignItems: "center", justifyContent: "center" }}>
                <MotifStrawberry size={28} />
              </div>
              <div>
                <div style={{ fontFamily: "var(--display)", fontStyle: "italic", fontSize: 18 }}>Strawberry Fields</div>
                <div className="muted" style={{ fontSize: 12 }}>Alserkal Avenue, since 2017</div>
              </div>
            </div>
          </div>
          <div className="editorial-pic" style={{ background: "#F2E0C8" }}>
            <img src="media/product-15-kids-furniture.webp" alt="Beirut Doll House by Kids for Turath" />
            <div style={{ position: "absolute", bottom: 18, left: 18, right: 18, display: "flex", justifyContent: "space-between", alignItems: "flex-end" }}>
              <div>
                <div className="eyebrow">In residence</div>
                <div className="display" style={{ fontSize: 22, marginTop: 4 }}>Kids for Turath</div>
                <div className="muted" style={{ fontSize: 13 }}>Beirut, Lebanon · heirloom dollhouses</div>
              </div>
              <a href="#" className="btn btn-soft" style={{ background: "var(--bg)" }}>Story →</a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- Hidden Playground ----------
function HiddenPlayground() {
  const [duration, setDuration] = useState2("60");
  const [type, setType] = useState2("stayplay");

  const totals = useMemo2(() => {
    const map = {};
    HPG_RATES.rows.forEach(r => {
      const cell = duration === "30" ? r.thirty : duration === "60" ? r.sixty : r.extra;
      map[r.key] = cell;
    });
    return map;
  }, [duration]);

  const totalVal = totals[type];
  const totalLabel = typeof totalVal === "number" ? `AED ${totalVal}` : (totalVal || "—");

  return (
    <section className="section section--blush" id="playground">
      <div className="container">
        <div className="hpg-wrap">
          <div>
            <span className="eyebrow" style={{ color: "var(--terracotta)" }}>The Hidden Playground</span>
            <h2 className="display" style={{ fontSize: "clamp(40px, 5vw, 64px)", margin: "12px 0 18px", letterSpacing: "-0.02em", fontWeight: 300 }}>
              An imagined world<br/>tucked inside the shop.
            </h2>
            <p className="muted" style={{ maxWidth: "48ch", fontSize: 16 }}>
              A little doorway, a strawberry awning, and a soft floor under it all.
              For little ones aged one to six and the grown-ups they bring.
              The first ten minutes are on us, every time.
            </p>

            <div className="hpg-card" style={{ marginTop: 32 }}>
              <h3>Price list</h3>
              <span className="free-line">First 10 minutes on us</span>
              <table className="rate-table">
                <thead>
                  <tr>
                    <th></th>
                    <th>30 mins</th>
                    <th>60 mins</th>
                    <th>Extra</th>
                  </tr>
                </thead>
                <tbody>
                  {HPG_RATES.rows.map(r => (
                    <tr key={r.key}>
                      <td>
                        <span className="row-label">{r.label}</span>
                        <span className="row-sub">{r.sub}</span>
                      </td>
                      {[r.thirty, r.sixty, r.extra].map((v, i) => (
                        <td key={i} className={`price-cell ${v === "Free" ? "free" : ""}`}>
                          {typeof v === "number" ? `${v} AED` : v}
                        </td>
                      ))}
                    </tr>
                  ))}
                </tbody>
              </table>

              <div className="hpg-calc" aria-label="Plan your visit">
                <div className="hpg-calc-row">
                  <span className="hpg-calc-label">For</span>
                  <div className="hpg-calc-segs" role="tablist">
                    {HPG_RATES.rows.map(r => (
                      <button key={r.key} aria-pressed={type === r.key} onClick={() => setType(r.key)}>{r.label}</button>
                    ))}
                  </div>
                  <span></span>
                </div>
                <div className="hpg-calc-row" style={{ marginTop: 10 }}>
                  <span className="hpg-calc-label">Stay</span>
                  <div className="hpg-calc-segs">
                    <button aria-pressed={duration === "30"} onClick={() => setDuration("30")}>30 min</button>
                    <button aria-pressed={duration === "60"} onClick={() => setDuration("60")}>60 min</button>
                    <button aria-pressed={duration === "extra"} onClick={() => setDuration("extra")}>Extra</button>
                  </div>
                  <span className="hpg-calc-total">
                    {totalLabel === "Free" ? <span className="free">Free</span> : totalLabel}
                  </span>
                </div>
              </div>

              <p style={{ fontSize: 11, color: "var(--muted)", marginTop: 14, fontFamily: "var(--ui)" }}>
                Supervision rules, capacity and what "Extra" includes are confirmed at the door — rates above are verified from the official price card.
              </p>
            </div>
          </div>

          {/* Illustrated panel — same family as the official rate card art */}
          <div className="hpg-illus" aria-hidden>
            <div style={{ position: "absolute", inset: 0, background: "var(--bg)", borderRadius: "var(--r-xl)", overflow: "hidden", border: "1px solid var(--border)" }}>
              <MotifSun size={300} style={{ position: "absolute", top: -60, left: -80 }} />
              <MotifBlob size={240} color="var(--surface)" style={{ position: "absolute", bottom: -40, right: -40 }} />
              <MotifBlob size={150} color="#F1D9DD" style={{ position: "absolute", bottom: 20, left: 30 }} />
              <MotifLeaf size={160} style={{ position: "absolute", bottom: 60, right: 80, transform: "rotate(20deg)" }} />
              <MotifSquiggle width={240} color="var(--sky)" style={{ position: "absolute", bottom: 100, left: 60 }} />
              <MotifStar size={36} color="var(--bg)" style={{ position: "absolute", top: 80, right: 80 }} />
              <MotifStar size={22} color="var(--terracotta)" style={{ position: "absolute", top: 140, left: 100 }} />

              <div style={{ position: "absolute", top: 40, right: 40, textAlign: "right", fontFamily: "var(--display)" }}>
                <div className="eyebrow" style={{ color: "var(--primary)" }}>The Hidden Playground</div>
                <div style={{ fontStyle: "italic", fontSize: 28, color: "var(--terracotta)", marginTop: 8 }}>
                  Ages<br/>1 — 6
                </div>
              </div>

              <div style={{ position: "absolute", bottom: 32, left: 32, right: 32, display: "flex", justifyContent: "space-between", alignItems: "flex-end" }}>
                <div>
                  <div className="eyebrow" style={{ color: "var(--primary)" }}>Open</div>
                  <div style={{ fontFamily: "var(--display)", fontSize: 20, marginTop: 4 }}>Tue – Sun</div>
                  <div className="muted" style={{ fontSize: 13 }}>09:30 – 19:30</div>
                </div>
                <button className="btn btn-primary">Plan a visit →</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- Values ----------
function Values() {
  const items = [
    { n: "01", t: "Sustainable",       b: "FSC wood, OEKO-TEX cottons, refill-friendly packaging. Heirloom over disposable, always." },
    { n: "02", t: "Safe by default",   b: "Age-appropriate, choke-tested, water-based finishes. We read the certificates so you don't have to." },
    { n: "03", t: "Design-led",        b: "Forty-eight independent design houses, hand-picked for craft, restraint and a sense of wonder." },
    { n: "04", t: "Educational",       b: "Open-ended, screen-light, story-rich. Toys that wait for the child rather than the other way around." },
  ];
  return (
    <section className="section">
      <div className="container">
        <div className="picks-head" style={{ marginBottom: 48 }}>
          <div>
            <span className="eyebrow">Our standards</span>
            <h2 className="display">What we look for, on your behalf.</h2>
          </div>
          <a href="#" className="btn-link">Read our buying ethics →</a>
        </div>
        <div className="values">
          {items.map(v => (
            <div className="value" key={v.n}>
              <div className="value-num">{v.n}</div>
              <div className="value-title">{v.t}</div>
              <div className="value-body">{v.b}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- Brands ----------
function Brands() {
  return (
    <section className="section section--paper">
      <div className="container">
        <div className="picks-head" style={{ marginBottom: 40 }}>
          <div>
            <span className="eyebrow">A constellation</span>
            <h2 className="display">Forty-eight design houses,<br/>under one strawberry awning.</h2>
          </div>
          <a href="#" className="btn-link">All brands →</a>
        </div>
        <div className="brand-grid">
          {BRANDS.map(b => (
            <div className="brand-cell" key={b.name}>
              <span className="brand-count">{b.count}</span>
              <span>{b.name}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- Gifting block ----------
function Gifting({ onAdd }) {
  return (
    <section className="section" id="gifting">
      <div className="container">
        <div className="gifting">
          <MotifSquiggle width={420} color="rgba(255,255,255,0.18)" style={{ position: "absolute", top: 30, right: 0 }} />
          <MotifBlob size={240} color="rgba(233,180,76,0.18)" style={{ position: "absolute", bottom: -40, left: -40 }} />

          <div style={{ position: "relative" }}>
            <span className="eyebrow" style={{ color: "var(--accent)" }}>Gifting & celebration</span>
            <h2>A gift that<br/><span className="ital">earns its ribbon.</span></h2>
            <p>
              Newborn gifts, first-birthday hampers, registry pieces and e-gift cards from AED 157.50.
              We hand-wrap in the shop and our concierge can put together a curation for any age,
              budget or aesthetic.
            </p>
            <div style={{ display: "flex", gap: 12, marginTop: 24, flexWrap: "wrap" }}>
              <button className="btn btn-light">Shop gifts</button>
              <button className="btn btn-out">Brief our concierge</button>
              <button className="btn btn-out" onClick={() => onAdd(PRODUCTS.find(p => p.id === "16"))}>
                + e-Gift card
              </button>
            </div>
          </div>
          <div style={{ position: "relative", aspectRatio: "1/1", display: "grid", gridTemplateColumns: "1fr 1fr", gridTemplateRows: "1fr 1fr", gap: 12 }}>
            {[
              { src: "media/product-16-gift-card.webp", bg: "#FBF4EE", label: "e-Gift Card", from: "from AED 157.50" },
              { src: "media/product-35-baby-comforter.webp", bg: "#F4E6D9", label: "Mrs. Rabbit Comforter", from: "AED 109" },
              { src: "media/product-30-wall-art-baby.webp", bg: "#FBF4EE", label: "Baby Page Wall Art", from: "AED 150" },
              { src: "media/product-29-soap-craft-kit.webp", bg: "#F1D9DD", label: "Croco Soap Maker", from: "AED 81" },
            ].map((g, i) => (
              <div key={i} style={{ position: "relative", borderRadius: "var(--r-lg)", overflow: "hidden", background: g.bg }}>
                <img src={g.src} alt={g.label} style={{ width: "100%", height: "100%", objectFit: "contain", padding: 18 }} />
                <div style={{ position: "absolute", left: 12, bottom: 12, background: "var(--bg)", padding: "6px 10px", borderRadius: 999, fontFamily: "var(--ui)", fontSize: 11, color: "var(--text)", fontWeight: 600 }}>
                  {g.from}
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- Visit Alserkal ----------
function Visit() {
  return (
    <section className="section section--blush" id="visit">
      <div className="container">
        <div className="visit">
          <div>
            <span className="eyebrow">Find us</span>
            <h2>Come for the shop,<br/>stay for the playground.</h2>
            <div className="v-coord">Alserkal Avenue, WH G58, Dubai</div>
            <p style={{ maxWidth: "44ch", color: "var(--muted)" }}>
              Tucked between the galleries on the north end of Alserkal Avenue.
              Park anywhere along the lane — the strawberry awning is hard to miss.
            </p>
            <dl>
              <div>
                <dt>Open</dt>
                <dd>Tue — Sun</dd>
                <div className="muted" style={{ fontSize: 13, marginTop: 4 }}>09:30 – 19:30 · closed Mondays</div>
              </div>
              <div>
                <dt>Call</dt>
                <dd>+971 58 554 4941</dd>
                <div className="muted" style={{ fontSize: 13, marginTop: 4 }}>Voice & general enquiries</div>
              </div>
              <div>
                <dt>Email</dt>
                <dd style={{ fontSize: 18 }}>info@strawberryfields.ae</dd>
              </div>
              <div>
                <dt>Follow</dt>
                <dd style={{ fontSize: 18 }}>@strawberryfields.ae</dd>
              </div>
            </dl>
          </div>
          <div className="map-card">
            {/* Stylised map — original; not a real Google embed (per pitfall #7) */}
            <svg viewBox="0 0 400 400" width="100%" height="100%" style={{ position: "absolute", inset: 0 }} aria-hidden>
              <defs>
                <pattern id="paper" width="22" height="22" patternUnits="userSpaceOnUse">
                  <circle cx="1" cy="1" r="0.7" fill="#EBDDD4" />
                </pattern>
              </defs>
              <rect width="400" height="400" fill="url(#paper)" />
              {/* Road grid loosely echoing Alserkal Ave */}
              <g stroke="#EBDDD4" strokeWidth="22" fill="none" strokeLinecap="square">
                <path d="M-20,140 L 420,200" />
                <path d="M 100,-20 L 160,420" />
                <path d="M 240,-20 L 280,420" />
                <path d="M -20,300 L 420,330" />
              </g>
              <g stroke="#FBF4EE" strokeWidth="1" strokeDasharray="6 8" fill="none">
                <path d="M-20,140 L 420,200" />
                <path d="M 100,-20 L 160,420" />
                <path d="M 240,-20 L 280,420" />
                <path d="M -20,300 L 420,330" />
              </g>
              {/* warehouses */}
              {[[40,40,80,60],[140,40,60,60],[300,40,70,60],[40,220,60,60],[170,220,70,80],[300,250,80,40],[60,340,80,50]].map((r,i) => (
                <rect key={i} x={r[0]} y={r[1]} width={r[2]} height={r[3]} fill="#F6E4DD" stroke="#EBDDD4" />
              ))}
              <text x="60" y="58" fontFamily="Quicksand" fontSize="9" fill="#6F616A">WH 60</text>
              <text x="155" y="58" fontFamily="Quicksand" fontSize="9" fill="#6F616A">WH 45</text>
              <text x="180" y="248" fontFamily="Quicksand" fontSize="10" fill="#C0436A" fontWeight="700">G58</text>
              <MotifStrawberry size={42} style={{ position: "absolute" }} />
            </svg>
            <div className="map-pin">
              <MotifPin size={48} />
            </div>
            <div className="map-label">
              <MotifStrawberry size={18} />
              Strawberry Fields · WH G58
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- Happenings ----------
function Happenings() {
  return (
    <section className="section" id="happenings">
      <div className="container">
        <div className="picks-head" style={{ marginBottom: 16 }}>
          <div>
            <span className="eyebrow">Happenings</span>
            <h2 className="display">What's on at the shop.</h2>
          </div>
          <a href="#" className="btn-link">Full calendar →</a>
        </div>
        <div className="happenings">
          {HAPPENINGS.map((h, i) => (
            <div className="happening" key={i}>
              <div className="h-date">
                <div className="h-date-day">{h.day}</div>
                <div className="h-date-mon">{h.mon} 2026</div>
              </div>
              <div className="h-title">{h.title}</div>
              <div className="h-meta">{h.meta}</div>
              <a href="#" className="h-cta">{h.cta} <span>→</span></a>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- Footer ----------
function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div>
          <div className="ft-brand">Strawberry Fields</div>
          <p style={{ color: "rgba(255,255,255,0.7)", maxWidth: 32 + "ch", marginTop: 12 }}>
            A curated children's design house & play space at Alserkal Avenue, Dubai. Since 2017.
          </p>
          <div className="ft-newsletter" style={{ marginTop: 28 }}>
            <h5>The dispatch</h5>
            <p style={{ color: "rgba(255,255,255,0.7)", fontSize: 13 }}>New arrivals, Hidden Playground happenings, the occasional birthday tip. About once a month.</p>
            <input placeholder="your@email.com" type="email" />
            <button className="btn btn-primary">Subscribe</button>
          </div>
        </div>
        <div>
          <h5>Shop</h5>
          <ul>
            {WORLDS.slice(0, 7).map(w => <li key={w.key}><a href="#">{w.title}</a></li>)}
            <li><a href="#">All 515 objects</a></li>
          </ul>
        </div>
        <div>
          <h5>The shop floor</h5>
          <ul>
            <li><a href="#playground">Hidden Playground</a></li>
            <li><a href="#happenings">Happenings</a></li>
            <li><a href="#gifting">Gifting concierge</a></li>
            <li><a href="#">Birthday enquiry</a></li>
            <li><a href="#">Gift registry</a></li>
            <li><a href="#">Brands & collaborations</a></li>
          </ul>
        </div>
        <div>
          <h5>House</h5>
          <ul>
            <li><a href="#">About</a></li>
            <li><a href="#">Buying ethics</a></li>
            <li><a href="#">Shipping & returns</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">Instagram · @strawberryfields.ae</a></li>
            <li><a href="#">Facebook</a></li>
          </ul>
        </div>
        <div className="ft-bottom" style={{ gridColumn: "1 / -1" }}>
          <span>© 2026 Strawberry Fields Trading L.L.C. · StrawberryFields.ae, Alserkal Avenue WH G58, Dubai</span>
          <span>Prices in AED. Verified Shopify catalogue · 515 objects · 48 vendors.</span>
        </div>
      </div>
    </footer>
  );
}

// ---------- Cart drawer ----------
function CartDrawer({ open, items, onClose, onChange, onRemove }) {
  const subtotal = items.reduce((s, it) => s + parseFloat(it.price) * it.qty, 0);
  return (
    <>
      <div className={`drawer-backdrop ${open ? "open" : ""}`} onClick={onClose}></div>
      <aside className={`drawer ${open ? "open" : ""}`} aria-hidden={!open}>
        <div className="drawer-head">
          <h3>Your bag <span className="muted" style={{ fontSize: 13, fontFamily: "var(--ui)" }}>({items.length})</span></h3>
          <button className="icon-btn" onClick={onClose} aria-label="Close">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M6 6l12 12M6 18L18 6"/></svg>
          </button>
        </div>
        <div className="drawer-body">
          {items.length === 0 ? (
            <div style={{ textAlign: "center", padding: "60px 20px", color: "var(--muted)" }}>
              <MotifStrawberry size={64} style={{ margin: "0 auto 16px" }} />
              <div style={{ fontFamily: "var(--display)", fontSize: 22, color: "var(--text)", marginBottom: 8 }}>Your bag is quiet.</div>
              <div style={{ fontSize: 14 }}>Pop a wooden xylophone in here.</div>
            </div>
          ) : (
            items.map(it => (
              <div className="cart-line" key={it.id}>
                <div className="cl-img"><img src={it.img} alt="" /></div>
                <div>
                  <div className="cl-vendor">{it.vendor}</div>
                  <div className="cl-title">{it.title}</div>
                  <div className="cl-qty">
                    <button onClick={() => onChange(it.id, Math.max(1, it.qty - 1))}>−</button>
                    <span style={{ width: 22, textAlign: "center" }}>{it.qty}</span>
                    <button onClick={() => onChange(it.id, it.qty + 1)}>+</button>
                    <button className="cl-remove" onClick={() => onRemove(it.id)} style={{ marginLeft: 10 }}>remove</button>
                  </div>
                </div>
                <div className="cl-price">AED {aedFmt(parseFloat(it.price) * it.qty)}</div>
              </div>
            ))
          )}
        </div>
        <div className="drawer-foot">
          <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 8 }}>
            <span className="muted" style={{ fontFamily: "var(--ui)", fontSize: 13 }}>Subtotal</span>
            <span style={{ fontFamily: "var(--display)", fontSize: 22 }}>AED {aedFmt(subtotal)}</span>
          </div>
          <div className="muted" style={{ fontSize: 12, marginBottom: 14 }}>Delivery free across the UAE. Hand-wrapped in-store.</div>
          <button className="btn btn-primary" style={{ width: "100%", justifyContent: "center" }} disabled={items.length === 0}>
            Checkout → Shopify
          </button>
          <button className="btn btn-link" style={{ width: "100%", justifyContent: "center", marginTop: 10 }} onClick={onClose}>Continue exploring</button>
        </div>
      </aside>
    </>
  );
}

// ---------- Toast ----------
function Toast({ msg }) {
  return (
    <div className={`toast ${msg ? "show" : ""}`}>
      <span className="toast-dot"></span>
      {msg}
    </div>
  );
}

window.__sfApp2 = { Editorial, HiddenPlayground, Values, Brands, Gifting, Visit, Happenings, Footer, CartDrawer, Toast };