// pages.jsx — Menu, Weddings, About, Gallery
const { useState: uSp, useMemo: uMp, useEffect: uEp } = React;

// ===== MENU =====
// Copy lifted verbatim from melindasbakery.com/bakery-case + /special-orders.
const MENU_ITEMS = [
  { id: "bear-claw", name: "Flaky bear claw", price: "$6.75", category: "sweet", availability: "daily", inCase: true, vegan: true, img: "brand/photos/bear-claw.jpg",
    desc: "Our original take on the classic bear claw. A flaky puff pastry filled with almond marzipan and dressed with almonds and buttercream glaze. (V or regular)" },
  { id: "chocolate-croissant", name: "Chocolate croissant", price: "$6.75", category: "sweet", availability: "daily", inCase: true, vegan: true, img: "brand/photos/donuts-menu.jpg",
    desc: "Choc-filled with our specialty dark chocolate. (V or regular)" },
  { id: "danish", name: "Danish", price: "$6.75", category: "sweet", availability: "daily", inCase: true, img: "brand/photos/danish-strawberry.jpg",
    desc: "A revolving assortment of flavors. Fruity, chewy, tangy, and delicious." },
  { id: "donut", name: "Donut", price: "$4.50", category: "sweet", availability: "daily", inCase: true, vegan: true, img: "brand/photos/donuts-new.jpg",
    desc: "Chocolate or vanilla cake donuts topped with our signature glaze. Maple, chocolate, or vanilla. (V)" },
  { id: "cinnamon-roll", name: "Cinnamon roll", price: "$7.00", category: "sweet", availability: "daily", inCase: true, vegan: true, img: "brand/photos/cinnamon-roll-branded.jpg",
    desc: "A roll of doughy cinnamon goodness. (V)" },
  { id: "morning-bun", name: "Morning bun", price: "$7.50", category: "sweet", availability: "daily", inCase: true, vegan: true, img: "brand/photos/morning-bun-new.jpg",
    desc: "The delectable mix of a flaky, melt-in-your-mouth roll with dashes of cardamom, nutmeg, ginger, and clove. (V)" },
  { id: "scone", name: "Scone", price: "$4.75", category: "sweet", availability: "daily", inCase: true, vegan: true, img: "brand/photos/scone-blueberry.jpg",
    desc: "A little soft, a little crumbly, a lot delicious. (V)" },
  { id: "cream-puff", name: "Cream puff", price: "$7.50", category: "sweet", availability: "weekend", inCase: true, img: "brand/photos/cream-puff.jpg",
    desc: "A choux pastry, dipped in ganache and filled to the brim with fresh whipped cream. Only available on weekends." },
  { id: "cookie", name: "Cookie", price: "$4.25", category: "sweet", availability: "daily", inCase: true, vegan: true, img: "brand/photos/cookie.jpg",
    desc: "Freshly baked and delicious. Flavors change daily. (V)" },
  { id: "muffin", name: "Muffin", price: "$5.50", category: "sweet", availability: "daily", inCase: true, vegan: true, img: "brand/photos/muffin.jpg",
    desc: "Blueberry or coffee cake. (V)" },
  { id: "cupcake", name: "Cupcake", price: "$4.75", category: "sweet", availability: "daily", inCase: true, vegan: true, img: "brand/photos/cupcake-lavender.jpg",
    desc: "Topped with our delicious icing. Flavors change daily. (DF or V)" },
  { id: "croissant", name: "Croissant", price: "$6.00", category: "savory", availability: "daily", inCase: true, vegan: true, img: "brand/photos/croissant-single.jpg",
    desc: "Our signature puff pastry dough is no better demonstrated than in our buttery, flakey croissants. Baked to a perfect golden brown, each bite leaves you wondering how Melinda did all of this without gluten." },
  { id: "ham-cheese", name: "Ham and cheese croissant", price: "$6.75", category: "savory", availability: "daily", inCase: true, img: "brand/photos/croissant-ham-cheese.jpg",
    desc: "Buttery and flaky croissant filled with ham and cheese." },
  { id: "puff-sandwich", name: "Puff pastry sandwich", price: "$10.75", category: "savory", availability: "daily", inCase: true, vegan: true, img: "brand/photos/puff-pastry-sandwich.jpg",
    desc: "Generally in limited supply, so come quick. Ham/bacon/cheddar, turkey/Havarti, and veggie (V); fresh baked, daily." },
  { id: "loaf", name: "Loaf of bread", price: "$12.00", category: "savory", availability: "daily", inCase: true, vegan: true, img: "brand/photos/bread-oat.jpg",
    desc: "White, honey oat, and sourdough (round or baguette style). (V)" },
  { id: "bagel", name: "Bagel", price: "$4.75", category: "savory", availability: "daily", inCase: true, vegan: true, img: "brand/photos/bagel-everything.jpg",
    desc: "Plain, jalapeno, or everything style. Add cream cheese for an additional $1.25." },
  { id: "custom-cake", name: "Custom cake", price: "Call for pricing", category: "special", availability: "special-order", img: "brand/photos/cake-wedding.jpg",
    desc: "Vanilla, chocolate, lemon, coconut, red velvet, or carrot. Buttercream, ganache, or cream cheese frosting. (V or regular). 48-hour notice for specialty cakes." },
  { id: "pie", name: "Pies", price: "$35+", category: "special", availability: "special-order", img: "brand/photos/crumble-pie.png",
    desc: "Stuffed with delicious warm spices. Key lime, mixed berry, and seasonal. Call 24 hours ahead." },
];

const CAT_LABELS = [
  { id: "all", label: "All" },
  { id: "sweet", label: "Sweet & Pastry" },
  { id: "savory", label: "Bread & Savory" },
  { id: "vegan", label: "Vegan", filter: (it) => it.vegan },
  { id: "case", label: "In the Case", filter: (it) => it.inCase },
  { id: "weekend", label: "Weekend Only", filter: (it) => it.availability === "weekend" },
  { id: "special", label: "Special Order" },
];

const MENU_HEADERS = {
  all: { eyebrow: "The Menu", title: "Everything baked from scratch, every morning." },
  case: { eyebrow: "Bakery Case", title: "What's in the case today." },
  vegan: { eyebrow: "Vegan Menu", title: "Vegan. Gluten-free. Still indulgent." },
};

function MenuPage({ defaultCat = "all" }) {
  const [cat, setCat] = uSp(defaultCat);
  const gridRef = React.useRef(null);
  uEp(() => { setCat(defaultCat); }, [defaultCat]);
  uEp(() => {
    if (!gridRef.current) return;
    const ctx = gsap.context(() => {
      gsap.from(".menu-card", {
        y: 60, opacity: 0, duration: 0.8, stagger: 0.08, ease: "power3.out",
        scrollTrigger: { trigger: gridRef.current, start: "top 80%", once: true }
      });
    }, gridRef);
    return () => ctx.revert();
  }, [cat]);
  const filtered = uMp(() => {
    if (cat === "all") return MENU_ITEMS;
    const c = CAT_LABELS.find((x) => x.id === cat);
    if (c?.filter) return MENU_ITEMS.filter(c.filter);
    return MENU_ITEMS.filter((it) => it.category === cat);
  }, [cat]);
  const header = MENU_HEADERS[cat] || MENU_HEADERS.all;

  return (
    <div style={{ background: "var(--color-cream)", paddingTop: 120, paddingBottom: 96 }}>
      <div className="container">
        <Reveal><span className="section-label">{header.eyebrow}</span></Reveal>
        <Reveal delay={120} as="h1" className="h1" style={{ marginTop: 14, marginBottom: 16, maxWidth: 760 }}>
          {header.title}
        </Reveal>
        <Reveal delay={240} as="p" className="lead" style={{ marginBottom: 48 }}>
          Many items change daily. Sold out means sold out — we don't make more mid-day.
        </Reveal>

        <Reveal delay={360}>
          <div style={{ display: "flex", gap: 8, flexWrap: "wrap", marginBottom: 40, borderBottom: "1px solid var(--color-border)", paddingBottom: 20 }}>
            {CAT_LABELS.map((c) => (
              <button key={c.id} onClick={() => setCat(c.id)}
                style={{
                  padding: "10px 18px", borderRadius: 999,
                  background: cat === c.id ? "var(--color-espresso)" : "transparent",
                  color: cat === c.id ? "var(--color-cream)" : "var(--color-cocoa)",
                  fontFamily: "var(--body)", fontWeight: 600, fontSize: 13,
                  border: cat === c.id ? "1px solid var(--color-espresso)" : "1px solid var(--color-border)",
                  transition: "all 200ms"
                }}>
                {c.label}
              </button>
            ))}
          </div>
        </Reveal>

        <div ref={gridRef} style={{
          display: "grid",
          gridTemplateColumns: filtered.length <= 2
            ? "repeat(auto-fit, minmax(280px, 360px))"
            : "repeat(auto-fit, minmax(280px, 1fr))",
          gap: 24,
          gridAutoFlow: "dense",
          perspective: "1000px"
        }}>
          {filtered.map((it, i) => {
            const isFeatured = i === 0 && filtered.length > 3;
            return (
              <div key={it.id} style={isFeatured ? { gridColumn: "span 2" } : {}}>
                <MenuItemCard item={it} featured={isFeatured}/>
              </div>
            );
          })}
        </div>
      </div>
      <style>{`
        @media (max-width: 768px) {
          .container > div > div[style*="grid-column"] { grid-column: auto !important; }
        }
      `}</style>
    </div>
  );
}

function MenuItemCard({ item, featured }) {
  const tone = featured ? "warm" : (item.id.length % 2 === 0 ? "warm" : "default");
  const onTilt = (e) => {
    const r = e.currentTarget.getBoundingClientRect();
    const cx = (e.clientX - r.left) / r.width - 0.5;
    const cy = (e.clientY - r.top) / r.height - 0.5;
    gsap.to(e.currentTarget, {
      rotationY: cx * 8, rotationX: -cy * 8, y: -4,
      boxShadow: "var(--shadow-card-hover)", borderColor: "var(--color-border-hover)",
      duration: 0.35, ease: "power2.out", transformPerspective: 800
    });
  };
  const onTiltOut = (e) => {
    gsap.to(e.currentTarget, {
      rotationY: 0, rotationX: 0, y: 0,
      boxShadow: "0 0 0 rgba(0,0,0,0)", borderColor: "var(--color-border)",
      duration: 0.5, ease: "power3.out"
    });
  };
  return (
    <article className="menu-card" style={{
      background: "var(--color-white-warm)", border: "1px solid var(--color-border)",
      borderRadius: 18, overflow: "hidden", height: "100%", display: "flex", flexDirection: "column",
      cursor: "default", willChange: "transform"
    }}
      onMouseMove={onTilt}
      onMouseLeave={onTiltOut}
    >
      {item.img ? (
        <div style={{ aspectRatio: featured ? "16/9" : "4/3", width: "100%", overflow: "hidden", background: "var(--color-biscuit)" }}>
          <img src={item.img} alt={item.name} loading="lazy"
            style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }}/>
        </div>
      ) : (
        <div className={`ph ${tone}`} style={{ aspectRatio: featured ? "16/9" : "4/3", width: "100%" }}>
          <span className="ph-label">{item.name.toLowerCase()}</span>
        </div>
      )}
      <div style={{ padding: 22, flex: 1, display: "flex", flexDirection: "column" }}>
        <div style={{ display: "flex", justifyContent: "space-between", gap: 12, alignItems: "baseline", marginBottom: 8 }}>
          <h3 style={{ fontSize: 20, fontFamily: "var(--display)", fontWeight: 600 }}>{item.name}</h3>
          <span style={{ fontWeight: 700, color: "var(--color-honey)", fontSize: 15, whiteSpace: "nowrap" }}>{item.price}</span>
        </div>
        <p style={{ fontSize: 14, color: "var(--color-cocoa)", lineHeight: 1.6, flex: 1 }}>{item.desc}</p>
        {item.availability !== "daily" && (
          <div style={{ marginTop: 12 }}>
            <span className={`tag ${item.availability === "weekend" ? "honey" : ""}`}>
              {item.availability === "weekend" ? "Weekend only" : "Special order"}
            </span>
          </div>
        )}
      </div>
    </article>
  );
}

// ===== WEDDINGS =====
const HOW_STEPS = [
  ["01", "Inquiry", "Submit the form with your date and vision."],
  ["02", "Tasting", "Come taste our flavors. Bring whoever's deciding with you."],
  ["03", "Design", "We design together. Sketches, textures, florals."],
  ["04", "Your day", "We deliver perfection on time."],
];

function WeddingsPage() {
  const howRef = React.useRef(null);

  uEp(() => {
    const el = howRef.current;
    if (!el) return;
    const ctx = gsap.context(() => {
      gsap.set(".how-card", { y: 50, opacity: 0, scale: 0.92 });
      gsap.set(".how-number", { scale: 0.3, opacity: 0 });
      gsap.set(".how-progress-line", { scaleX: 0 });
      const tl = gsap.timeline({
        scrollTrigger: { trigger: el, start: "top 80%", once: true }
      });
      tl.to(".how-progress-line", { scaleX: 1, duration: 0.8, ease: "power2.inOut" }, 0);
      tl.to(".how-card", { y: 0, opacity: 1, scale: 1, stagger: 0.15, duration: 0.6, ease: "power3.out" }, 0.1);
      tl.to(".how-number", { scale: 1, opacity: 1, stagger: 0.15, duration: 0.4, ease: "back.out(1.7)" }, 0.2);
    }, el);
    return () => ctx.revert();
  }, []);

  return (
    <div style={{ background: "var(--color-cream)" }}>
      <section style={{
        position: "relative", minHeight: "80vh", display: "flex", alignItems: "flex-end",
        background: "var(--color-espresso)", color: "var(--color-cream)", overflow: "hidden"
      }}>
        <div style={{ position: "absolute", inset: 0, overflow: "hidden" }}>
          <img src="brand/photos/site-wedding-sunflower.jpg" alt="Wedding cake with sunflowers"
            style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "center 40%", display: "block" }}/>
        </div>
        <div style={{ position: "absolute", inset: 0, background: "linear-gradient(to top, rgba(44,26,14,0.85) 0%, rgba(44,26,14,0.25) 60%)" }}/>
        <div className="container" style={{ position: "relative", zIndex: 2, paddingTop: 200, paddingBottom: 80 }}>
          <Reveal><span className="section-label peach">Wedding Cakes</span></Reveal>
          <Reveal delay={120} as="h1" className="h1" style={{ color: "var(--color-cream)", maxWidth: 800, marginTop: 14, marginBottom: 20 }}>
            14 years of <em style={{ color: "var(--color-peach)", fontWeight: 400 }}>I do</em> moments.
          </Reveal>
          <Reveal delay={280} as="p" style={{ fontSize: 19, color: "rgba(253,248,240,0.85)", maxWidth: 600, marginBottom: 28 }}>
            Every couple deserves a cake that's extraordinary — not a "good for gluten-free" consolation. We've been delivering that since 2011.
          </Reveal>
          <Reveal delay={400}>
            <a href="#inquiry" className="btn btn-primary" style={{ padding: "16px 28px" }}>Start your inquiry →</a>
          </Reveal>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))", gridAutoRows: "minmax(180px, auto)", gap: 16 }}>
            {[
              { src: "brand/photos/site-wedding-herreras.jpg", label: "two-tier · peach roses with name topper" },
              { src: "brand/photos/site-wedding-sunflower.jpg", label: "three-tier · sunflower & garden florals" },
              { src: "brand/photos/cake-wedding.jpg", label: "two-tier · pink and cream roses" },
              { src: "brand/photos/cake-raspberry-lattice.jpg", label: "raspberry lattice celebration cake" },
              { src: "https://img1.wsimg.com/isteam/ip/48f62440-1494-4dda-af46-2c1f8533c26b/IMG_8503.jpeg", label: "custom celebration cake" },
              { src: "brand/photos/cupcake-lavender.jpg", label: "house cupcakes & pastries" },
            ].map((p, i) => (
              <Reveal key={i} delay={i * 70} style={{ gridRow: i === 0 || i === 4 ? "span 2" : "span 1" }}>
                <div style={{ width: "100%", height: "100%", minHeight: 180, borderRadius: 16, overflow: "hidden", transition: "transform 300ms var(--ease-out-expo)" }}
                  onMouseEnter={(e) => e.currentTarget.style.transform = "scale(1.02)"}
                  onMouseLeave={(e) => e.currentTarget.style.transform = ""}
                >
                  <img src={p.src} alt={p.label}
                    style={{ width: "100%", height: "100%", objectFit: "cover", display: "block", minHeight: 180 }}/>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      <section ref={howRef} style={{ background: "var(--color-parchment)", padding: "80px 0" }}>
        <div className="container">
          <div style={{ textAlign: "center", marginBottom: 48 }}>
            <span className="section-label">How it works</span>
            <h2 className="h2" style={{ marginTop: 14 }}>From inquiry to <em style={{ color: "var(--color-honey)", fontWeight: 400 }}>I&nbsp;do.</em></h2>
          </div>
          <div style={{ position: "relative" }}>
            <div className="how-progress-line" style={{
              position: "absolute", top: 52, left: "8%", right: "8%", height: 2,
              background: "var(--color-honey)", opacity: 0.35, borderRadius: 1,
              transformOrigin: "left center", zIndex: 0,
              display: "var(--how-line-display, block)"
            }}/>
            <div className="how-grid" style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 24, position: "relative", zIndex: 1 }}>
              {HOW_STEPS.map(([n, t, d], i) => (
                <div key={n} className="how-card">
                  <div style={{
                    background: "var(--color-white-warm)", border: "1px solid var(--color-border)",
                    borderRadius: 20, padding: "32px 24px", height: "100%",
                    transition: "box-shadow 300ms ease, transform 300ms ease"
                  }}
                    onMouseEnter={(e) => { e.currentTarget.style.boxShadow = "0 8px 32px rgba(44,26,14,0.10)"; e.currentTarget.style.transform = "translateY(-4px)"; }}
                    onMouseLeave={(e) => { e.currentTarget.style.boxShadow = ""; e.currentTarget.style.transform = ""; }}
                  >
                    <div className="how-number" style={{
                      fontFamily: "var(--display)", fontSize: 52, fontWeight: 700,
                      color: "var(--color-honey)", marginBottom: 14, lineHeight: 1
                    }}>{n}</div>
                    <h3 style={{ fontSize: 22, fontWeight: 600, marginBottom: 10, fontFamily: "var(--display)" }}>{t}</h3>
                    <p style={{ fontSize: 15, color: "var(--color-cocoa)", lineHeight: 1.6 }}>{d}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
        <style>{`
          @media (max-width: 880px) {
            .how-grid { grid-template-columns: repeat(2, 1fr) !important; }
            .how-progress-line { --how-line-display: none; }
          }
          @media (max-width: 560px) { .how-grid { grid-template-columns: 1fr !important; } }
        `}</style>
      </section>

      <section className="section" style={{ background: "var(--color-cream)" }}>
        <div className="container" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64 }}>
          <div className="wf-col">
            <Reveal><span className="section-label">Flavors & Details</span></Reveal>
            <Reveal delay={120}>
              <h3 className="h3" style={{ marginTop: 14, marginBottom: 24 }}>The details.</h3>
            </Reveal>
            <Reveal delay={240}>
              <div style={{ marginBottom: 28 }}>
                <div style={{ fontWeight: 700, fontSize: 13, color: "var(--color-stone)", letterSpacing: "0.06em", textTransform: "uppercase", marginBottom: 10 }}>Cake flavors</div>
                <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
                  {["Vanilla", "Chocolate", "Lemon", "Coconut", "Red Velvet", "Carrot"].map((f) => (
                    <span key={f} className="tag" style={{ fontSize: 13, padding: "6px 14px", background: "var(--color-white-warm)", border: "1px solid var(--color-border)", color: "var(--color-espresso)", textTransform: "none", letterSpacing: 0, fontWeight: 600 }}>{f}</span>
                  ))}
                </div>
              </div>
              <div style={{ marginBottom: 28 }}>
                <div style={{ fontWeight: 700, fontSize: 13, color: "var(--color-stone)", letterSpacing: "0.06em", textTransform: "uppercase", marginBottom: 10 }}>Icing</div>
                <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
                  {["Buttercream", "Cream cheese"].map((f) => (
                    <span key={f} className="tag" style={{ fontSize: 13, padding: "6px 14px", background: "var(--color-white-warm)", border: "1px solid var(--color-border)", color: "var(--color-espresso)", textTransform: "none", letterSpacing: 0, fontWeight: 600 }}>{f}</span>
                  ))}
                </div>
              </div>
              <div>
                <div style={{ fontWeight: 700, fontSize: 13, color: "var(--color-stone)", letterSpacing: "0.06em", textTransform: "uppercase", marginBottom: 10 }}>Lead time</div>
                <p className="body" style={{ fontSize: 14.5 }}>Custom cakes: 48 hours minimum. Wedding cakes: 2 weeks minimum. We're closed Dec 24 – Jan 1.</p>
              </div>
            </Reveal>
          </div>
          <div id="inquiry">
            <WeddingForm/>
          </div>
        </div>
        <style>{`@media (max-width: 880px) { section:has(.wf-col) .container { grid-template-columns: 1fr !important; } }`}</style>
      </section>
    </div>
  );
}

function WeddingForm() {
  const [sent, setSent] = uSp(false);
  return (
    <Reveal>
      <form onSubmit={(e) => { e.preventDefault(); setSent(true); }} style={{
        background: "var(--color-white-warm)", border: "1px solid var(--color-border)",
        borderRadius: 24, padding: 28, boxShadow: "var(--shadow-card)"
      }}>
        {sent ? (
          <div style={{ textAlign: "center", padding: "40px 20px" }}>
            <div style={{ fontSize: 48, color: "var(--color-honey)", marginBottom: 16, fontFamily: "var(--display)" }}>✦</div>
            <h3 className="h3">Thank you.</h3>
            <p className="body" style={{ marginTop: 12 }}>We'll be in touch within 48 hours.</p>
          </div>
        ) : (
          <>
            <h3 className="h3" style={{ marginBottom: 6 }}>Start your inquiry</h3>
            <p style={{ fontSize: 13.5, color: "var(--color-cocoa)", marginBottom: 22 }}>Tell us about your day. We'll respond within 48 hours.</p>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
              <WFField label="Full name *"/>
              <WFField label="Email *" type="email"/>
              <WFField label="Phone *" type="tel"/>
              <WFField label="Event date *" type="date"/>
            </div>
            <div style={{ marginTop: 12 }}>
              <WFField label="Cake flavor preference" type="select" options={["Vanilla", "Chocolate", "Lemon", "Coconut", "Red Velvet", "Carrot", "Surprise me"]}/>
            </div>
            <div style={{ marginTop: 12 }}>
              <WFField label="Tell us your vision" type="textarea" placeholder="We're going for rustic-elegant, soft florals..."/>
            </div>
            <button type="submit" className="btn btn-primary" style={{ marginTop: 18, width: "100%", justifyContent: "center", padding: "14px" }}>Send inquiry →</button>
          </>
        )}
      </form>
    </Reveal>
  );
}

function WFField({ label, type = "text", placeholder, options }) {
  const baseStyle = {
    display: "block", marginTop: 6, width: "100%", padding: "11px 14px",
    borderRadius: 12, border: "1px solid var(--color-border-hover)",
    background: "var(--color-cream)", fontFamily: "var(--body)", fontSize: 14, color: "var(--color-espresso)"
  };
  return (
    <label style={{ display: "block", fontSize: 12, color: "var(--color-cocoa)", fontWeight: 600 }}>
      {label}
      {type === "textarea" ? <textarea style={{ ...baseStyle, minHeight: 100, resize: "vertical", fontFamily: "var(--body)" }} placeholder={placeholder}/>
        : type === "select" ? (
          <select style={baseStyle}>
            {options.map((o) => <option key={o}>{o}</option>)}
          </select>
        ) : <input type={type} placeholder={placeholder} style={baseStyle}/>}
    </label>
  );
}

// ===== ABOUT =====
function AboutPage() {
  return (
    <div style={{ background: "var(--color-cream)", paddingTop: 120, paddingBottom: 96 }}>
      <div className="container" style={{ maxWidth: 880 }}>
        <Reveal><span className="section-label">Our Story</span></Reveal>
        <Reveal delay={120} as="h1" className="h1" style={{ marginTop: 14, marginBottom: 32 }}>
          No one should have to compromise <em style={{ color: "var(--color-honey)", fontWeight: 400 }}>taste.</em>
        </Reveal>
        <Reveal delay={240} as="p" style={{ fontSize: 21, lineHeight: 1.55, color: "var(--color-cocoa)", marginBottom: 48, maxWidth: 720 }}>
          That's what Melinda believed when she started baking gluten-free goods from her kitchen in 2011. She opened Santa Cruz County's first — and still only — fully gluten and peanut-free baking facility because she knew the difference a safe, delicious pastry could make in someone's day.
        </Reveal>

        <Reveal delay={120}>
          <div style={{ width: "100%", aspectRatio: "4/5", borderRadius: 24, marginBottom: 80, overflow: "hidden", maxWidth: 640, marginLeft: "auto", marginRight: "auto" }}>
            <img src="brand/photos/site-melinda-decorating.jpg" alt="Melinda decorating a cake"
              style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }}/>
          </div>
        </Reveal>

        <div style={{ display: "grid", gridTemplateColumns: "1fr", gap: 56, maxWidth: 700, margin: "0 auto" }}>
          <Reveal>
            <h2 className="h2" style={{ marginBottom: 16 }}>The bakery.</h2>
            <p className="body" style={{ fontSize: 17 }}>
              Everything we make is baked fresh from scratch, every morning, using a proprietary flour blend Melinda developed herself: brown rice, white rice, sorghum, tapioca, potato, arrowroot, and millet flour. There is no gluten in our facility. There are no peanuts. Every item on our menu is safe for people with celiac disease, gluten intolerance, and peanut allergies.
            </p>
          </Reveal>
          <Reveal>
            <div style={{ width: "100%", aspectRatio: "16/9", borderRadius: 20, overflow: "hidden" }}>
              <img src="brand/photos/scone-blueberry.jpg" alt="Fresh blueberry scones from the case"
                style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }}/>
            </div>
          </Reveal>
          <Reveal>
            <h2 className="h2" style={{ marginBottom: 16 }}>The awards.</h2>
            <p className="body" style={{ fontSize: 17, marginBottom: 28 }}>
              Fourteen years in a row. We don't take it lightly.
            </p>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(140px, 1fr))", gap: 12 }}>
              {Array.from({ length: 4 }).map((_, i) => (
                <div key={i} style={{
                  padding: "20px 16px", textAlign: "center",
                  background: "var(--color-white-warm)", border: "1px solid var(--color-border)", borderRadius: 14
                }}>
                  <div style={{ fontFamily: "var(--display)", fontWeight: 700, fontSize: 36, color: "var(--color-honey)" }}>{2011 + i * 3}</div>
                  <div style={{ fontSize: 12, color: "var(--color-cocoa)", marginTop: 4 }}>Best Bakery, Good Times SC</div>
                </div>
              ))}
            </div>
          </Reveal>
          <Reveal>
            <h2 className="h2" style={{ marginBottom: 16 }}>See what people are saying.</h2>
            <div style={{ width: "100%", maxHeight: 260, borderRadius: 20, overflow: "hidden", marginBottom: 28 }}>
              <img src="brand/photos/bear-claw.jpg" alt="Fresh bear claws from this morning"
                style={{ width: "100%", height: 260, objectFit: "cover", display: "block" }}/>
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))", gap: 14 }}>
              {[
                { name: "Yelp", stat: "4.5 ★ · 200+ reviews", href: "https://www.yelp.com/biz/melindas-gluten-free-bakery-capitola" },
                { name: "HappyCow", stat: "Top-rated GF bakery", href: "https://www.happycow.net/reviews/melindas-gluten-free-bakery-capitola-307074" },
                { name: "TripAdvisor", stat: "Travelers' Choice", href: "https://www.tripadvisor.com/Restaurant_Review-g32168-d7745064-Reviews-Melinda_s_Gluten_Free_Bakery-Capitola_California.html" },
                { name: "Find Me GF", stat: "Top-rated in Santa Cruz", href: "https://www.findmeglutenfree.com/biz/melindas-gluten-free/6357772050366464" },
                { name: "Santa Cruz Life", stat: "Best GF desserts", href: "https://santacruzlife.com/gluten-free-desserts/" },
                { name: "Good Times", stat: "14× Best Bakery", href: "https://www.goodtimes.sc/melindas-gluten-free-bakery-is-a-capitola-treat/" },
                { name: "California.com", stat: "Top CA GF bakery", href: "https://www.california.com/top-california-bakeries-for-gluten-free-goodies/" },
                { name: "A Gluten Free Plate", stat: "Santa Cruz must-visit", href: "https://aglutenfreeplate.com/gluten-free-restaurants-in-santa-cruz/" },
              ].map((p, i) => (
                <a key={i} href={p.href} target="_blank" rel="noopener" style={{ textDecoration: "none", display: "block" }}>
                  <div style={{
                    padding: "20px 18px", background: "var(--color-white-warm)",
                    border: "1px solid var(--color-border)", borderRadius: 14,
                    transition: "border-color 200ms, box-shadow 200ms, transform 200ms", cursor: "pointer"
                  }}
                  onMouseEnter={(e) => { e.currentTarget.style.borderColor = "var(--color-honey)"; e.currentTarget.style.boxShadow = "var(--shadow-card-hover)"; e.currentTarget.style.transform = "translateY(-2px)"; }}
                  onMouseLeave={(e) => { e.currentTarget.style.borderColor = "var(--color-border)"; e.currentTarget.style.boxShadow = ""; e.currentTarget.style.transform = ""; }}
                  >
                    <div style={{ fontWeight: 700, fontSize: 15, color: "var(--color-espresso)", marginBottom: 4 }}>{p.name}</div>
                    <div style={{ fontSize: 13, color: "var(--color-honey-dark)", fontWeight: 600 }}>{p.stat}</div>
                  </div>
                </a>
              ))}
            </div>
          </Reveal>
          <Reveal>
            <h2 className="h2" style={{ marginBottom: 16 }}>Visit us.</h2>
            <div style={{
              background: "var(--color-parchment)", borderRadius: 20, padding: 28,
              display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24
            }} className="visit-grid">
              <div>
                <div className="section-label muted">Hours</div>
                <div style={{ marginTop: 8, fontSize: 16, lineHeight: 1.8 }}>
                  <div>Tuesday – Sunday · 8am – 3pm</div>
                  <div>Closed Mondays</div>
                  <div style={{ color: "var(--color-stone)", fontSize: 13, marginTop: 6 }}>Closed Christmas Eve through New Year's Day</div>
                </div>
              </div>
              <div>
                <div className="section-label muted">Address</div>
                <div style={{ marginTop: 8, fontSize: 16, lineHeight: 1.8 }}>
                  <div>1420 41st Avenue</div>
                  <div>Capitola, CA 95010</div>
                  <a href="tel:8313165081" style={{ color: "var(--color-honey)", fontWeight: 600 }}>(831) 316-5081</a>
                </div>
              </div>
            </div>
          </Reveal>
        </div>
        <style>{`@media (max-width: 640px) { .visit-grid { grid-template-columns: 1fr !important; } }`}</style>
      </div>
    </div>
  );
}

// ===== GALLERY =====
// Real photo URLs from melindasbakery.com/gallery (her wsimg CDN) + local crops.
const WSIMG_CDN = "https://img1.wsimg.com/isteam/ip/48f62440-1494-4dda-af46-2c1f8533c26b";
const GALLERY_ITEMS = [
  { src: "brand/photos/cinnamon-roll-branded.jpg", h: 320, cat: "Pastries", label: "cinnamon rolls" },
  { src: `${WSIMG_CDN}/IMG_1923.jpeg`, h: 380, cat: "Cakes", label: "birthday cake" },
  { src: "brand/photos/lp-croissant-tray.jpg", h: 280, cat: "Pastries", label: "buttery flaky croissants" },
  { src: `${WSIMG_CDN}/C60D7AB5-7EE3-494C-83EC-39F1955E6037.jpeg`, h: 280, cat: "Cakes", label: "celebration cake" },
  { src: "brand/photos/site-wedding-sunflower.jpg", h: 360, cat: "Wedding", label: "three-tier sunflower wedding cake" },
  { src: "brand/photos/donuts-new.jpg", h: 260, cat: "Pastries", label: "chocolate glazed donuts" },
  { src: `${WSIMG_CDN}/IMG_2941.jpeg`, h: 320, cat: "Cakes", label: "layered cake" },
  { src: "brand/photos/crumble-pie.png", h: 220, cat: "Pastries", label: "crumble-top pie" },
  { src: `${WSIMG_CDN}/IMG_5373-4d93ade.jpeg`, h: 340, cat: "Cakes", label: "specialty cake" },
  { src: "brand/photos/site-wedding-herreras.jpg", h: 360, cat: "Wedding", label: "two-tier wedding cake with peach roses" },
  { src: `${WSIMG_CDN}/IMG_5506.jpeg`, h: 360, cat: "Cakes", label: "birthday celebration cake" },
  { src: `${WSIMG_CDN}/IMG_6471.jpeg`, h: 320, cat: "Cakes", label: "celebration cake" },
  { src: `${WSIMG_CDN}/IMG_5335-3f76e50.jpeg`, h: 280, cat: "Cakes", label: "special occasion cake" },
  { src: `${WSIMG_CDN}/IMG_3867.jpeg`, h: 260, cat: "Pastries", label: "fresh from the bakery" },
  { src: `${WSIMG_CDN}/IMG_5035.jpeg`, h: 300, cat: "Cakes", label: "birthday cake" },
  { src: `${WSIMG_CDN}/IMG_8503.jpeg`, h: 280, cat: "Cakes", label: "custom design" },
  { src: `${WSIMG_CDN}/IMG_8440-ae0b876.jpeg`, h: 260, cat: "Pastries", label: "bakery fresh" },
  { src: "brand/photos/site-melinda-decorating.jpg", h: 320, cat: "Pastries", label: "Melinda decorating a tiered cake" },
  { src: "brand/photos/cake-raspberry-lattice.jpg", h: 280, cat: "Pastries", label: "raspberry lattice cake" },
];

function GalleryPage() {
  const [open, setOpen] = uSp(null);
  const instagramItems = uMp(() => GALLERY_ITEMS.filter((i) => i.cat !== "Wedding"), []);
  const weddingItems = uMp(() => GALLERY_ITEMS.filter((i) => i.cat === "Wedding"), []);

  const renderTile = (p, i) => (
    <div key={`${p.src}-${i}`} style={{ breakInside: "avoid", marginBottom: 16 }}>
      <Reveal delay={Math.min(i * 40, 400)}>
        <button onClick={() => setOpen(p)} style={{
          width: "100%", height: p.h, borderRadius: 14, padding: 0, overflow: "hidden",
          border: "none", background: "var(--color-biscuit)", display: "block", cursor: "zoom-in",
          transition: "transform 300ms var(--ease-out-expo), box-shadow 300ms"
        }}
          onMouseEnter={(e) => { e.currentTarget.style.transform = "scale(1.02)"; e.currentTarget.style.boxShadow = "var(--shadow-card-hover)"; }}
          onMouseLeave={(e) => { e.currentTarget.style.transform = ""; e.currentTarget.style.boxShadow = ""; }}
        >
          <img src={p.src} alt={p.label} loading="lazy"
            style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }}/>
        </button>
      </Reveal>
    </div>
  );

  return (
    <div style={{ background: "var(--color-cream)", paddingTop: 100, paddingBottom: 64 }}>
      <div className="container">
        <Reveal><span className="section-label">Gallery</span></Reveal>
        <Reveal delay={80} as="h1" className="h1" style={{ marginTop: 10, marginBottom: 10, maxWidth: 700 }}>
          What 13 years looks like.
        </Reveal>
        <Reveal delay={160} as="p" className="lead" style={{ marginBottom: 28 }}>
          Pastries, cakes, breads, and wedding cakes. All gluten-free. All from scratch.
        </Reveal>

        <Reveal delay={240}>
          <h2 className="h2" style={{ marginBottom: 16 }}>Instagram</h2>
        </Reveal>
        <div style={{ columnCount: 3, columnGap: 16 }} className="masonry">
          {instagramItems.map(renderTile)}
        </div>

        <Reveal>
          <h2 className="h2" style={{ marginTop: 48, marginBottom: 16 }}>Wedding Cakes</h2>
        </Reveal>
        <div style={{ columnCount: 3, columnGap: 16 }} className="masonry">
          {weddingItems.map(renderTile)}
        </div>
      </div>
      {open && (
        <div onClick={() => setOpen(null)} style={{
          position: "fixed", inset: 0, zIndex: 200, background: "rgba(44,26,14,0.85)",
          display: "grid", placeItems: "center", padding: 24, animation: "fadeIn 200ms ease-out"
        }}>
          <div onClick={(e) => e.stopPropagation()} style={{
            maxWidth: 900, width: "100%", maxHeight: "80vh",
            borderRadius: 20, overflow: "hidden",
            boxShadow: "var(--shadow-float)", background: "var(--color-biscuit)"
          }}>
            <img src={open.src} alt={open.label}
              style={{ width: "100%", height: "100%", objectFit: "contain", display: "block", maxHeight: "80vh" }}/>
          </div>
          <button onClick={() => setOpen(null)} aria-label="Close" style={{
            position: "fixed", top: 24, right: 24, color: "var(--color-cream)", fontSize: 28
          }}>✕</button>
        </div>
      )}
      <style>{`
        @media (max-width: 900px) { .masonry { column-count: 2 !important; } }
        @media (max-width: 540px) { .masonry { column-count: 1 !important; } }
      `}</style>
    </div>
  );
}

Object.assign(window, { MenuPage, WeddingsPage, AboutPage, GalleryPage });