/*
  Direction A — SATURDAY MORNING (responsive)
  90s Saturday-morning cartoon / cereal-box packaging energy.
*/
function useIsMobile(bp = 768) {
  const [m, setM] = React.useState(() => typeof window !== 'undefined' && window.innerWidth < bp);
  React.useEffect(() => {
    const on = () => setM(window.innerWidth < bp);
    on();
    window.addEventListener('resize', on);
    return () => window.removeEventListener('resize', on);
  }, [bp]);
  return m;
}

const SMstyles = {
  root: {
    fontFamily: "'Space Grotesk', system-ui, sans-serif",
    color: "#0B0B0F",
    background: "#FFF7EC",
    minHeight: "100%",
    width: "100%",
  },
  display: {
    fontFamily: "'Bagel Fat One', 'Luckiest Guy', 'Archivo Black', sans-serif",
    letterSpacing: "-0.01em",
    lineHeight: 0.95,
  },
  script: {
    fontFamily: "'Lobster', 'Pacifico', cursive",
  },
};

function SMBurst({ children, rot = -8, bg = "var(--ts-yellow)", color = "var(--ts-black)", size = 120, style }) {
  const pts = 24;
  const r1 = 50, r2 = 42;
  const coords = [];
  for (let i = 0; i < pts * 2; i++) {
    const a = (i / (pts * 2)) * Math.PI * 2 - Math.PI / 2;
    const r = i % 2 === 0 ? r1 : r2;
    coords.push(`${50 + Math.cos(a) * r}% ${50 + Math.sin(a) * r}%`);
  }
  const clip = `polygon(${coords.join(",")})`;
  return (
    <div style={{
      position: "relative", width: size, height: size, display: "inline-flex",
      alignItems: "center", justifyContent: "center",
      transform: `rotate(${rot}deg)`, ...style,
    }}>
      <div style={{ position: "absolute", inset: 0, background: bg, clipPath: clip }} />
      <div style={{
        position: "relative", color, textAlign: "center", padding: 10,
        fontFamily: SMstyles.display.fontFamily, letterSpacing: "-0.01em",
        lineHeight: 0.9,
      }}>{children}</div>
    </div>
  );
}

function SMButton({ children, color = "var(--ts-pink)", fg = "#fff", href = "#", onClick, small, target }) {
  const m = useIsMobile();
  return (
    <a href={href} onClick={onClick} target={target} rel={target === "_blank" ? "noopener noreferrer" : undefined} style={{
      display: "inline-flex", alignItems: "center", gap: 10,
      background: color, color: fg, textDecoration: "none",
      padding: small ? (m ? "10px 16px" : "12px 20px") : (m ? "14px 20px" : "18px 28px"),
      fontFamily: SMstyles.display.fontFamily,
      fontSize: small ? (m ? 13 : 16) : (m ? 16 : 20),
      borderRadius: 999,
      border: "3px solid #0B0B0F",
      boxShadow: "4px 4px 0 #0B0B0F",
      transition: "transform .15s, box-shadow .15s",
      letterSpacing: "0.01em",
    }}
    onMouseEnter={(e) => { e.currentTarget.style.transform = "translate(-2px,-2px)"; e.currentTarget.style.boxShadow = "6px 6px 0 #0B0B0F"; }}
    onMouseLeave={(e) => { e.currentTarget.style.transform = ""; e.currentTarget.style.boxShadow = "4px 4px 0 #0B0B0F"; }}>
      {children}
    </a>
  );
}

function SMPill({ children, color = "var(--ts-cyan)", fg = "#fff" }) {
  return (
    <span style={{
      display: "inline-block", background: color, color: fg,
      padding: "4px 12px", borderRadius: 999,
      border: "2px solid #0B0B0F",
      fontFamily: SMstyles.display.fontFamily, fontSize: 13,
      letterSpacing: "0.02em",
    }}>{children}</span>
  );
}

function SMHero() {
  const m = useIsMobile();
  const halftone = "radial-gradient(circle at 10% 20%, rgba(233,30,132,.15) 2px, transparent 2.5px) 0 0/22px 22px, radial-gradient(circle at 60% 70%, rgba(43,168,224,.15) 2px, transparent 2.5px) 11px 11px/22px 22px";
  return (
    <section style={{
      position: "relative",
      background: `${halftone}, var(--ts-cream)`,
      borderBottom: "6px solid #0B0B0F",
      overflow: "hidden",
      padding: "20px 0 0",
    }}>
      {/* Top ribbon */}
      <div style={{
        background: "#0B0B0F", color: "#fff",
        fontFamily: SMstyles.display.fontFamily, fontSize: m ? 12 : 14,
        padding: m ? "8px 0" : "10px 0", overflow: "hidden", whiteSpace: "nowrap",
        letterSpacing: "0.04em",
      }}>
        <div style={{ display: "inline-flex", gap: 24, animation: "sm-marquee 30s linear infinite" }}>
          {Array.from({length: 8}).map((_, i) => (
            <span key={i} style={{display:"inline-flex",gap:24,alignItems:"center"}}>
              <span>✦ NOW SWIRLING IN MURRIETA</span>
              <span style={{color:"var(--ts-pink)"}}>✦ 20 SIGNATURE SWIRLS</span>
              <span style={{color:"var(--ts-cyan)"}}>✦ CEREALIOUSLY DELICIOUS</span>
              <span style={{color:"var(--ts-yellow)"}}>✦ DAIRY FREE OPTIONS</span>
            </span>
          ))}
        </div>
      </div>

      {/* Nav */}
      <div style={{
        display: "flex", alignItems: "center", justifyContent: "space-between",
        padding: m ? "14px 16px" : "20px 48px", borderBottom: "3px solid #0B0B0F",
        background: "#FFF7EC", gap: 12,
      }}>
        <div style={{ display: "flex", alignItems: "center", gap: m ? 10 : 14, minWidth: 0 }}>
          <div style={{
            width: m ? 40 : 52, height: m ? 40 : 52, borderRadius: "50%",
            background: "#0B0B0F",
            display: "flex", alignItems: "center", justifyContent: "center",
            border: "3px solid #0B0B0F", flexShrink: 0,
            overflow: "hidden",
          }}>
            <img src="assets/logo.jpg" alt="Twisted Spoons" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
          </div>
          <div style={{ minWidth: 0 }}>
            <div style={{ ...SMstyles.display, fontSize: m ? 16 : 20, color: "var(--ts-cyan-deep)" }}>Twisted Spoons</div>
            <div style={{ fontSize: m ? 9 : 11, letterSpacing: "0.18em", color: "var(--ts-pink)", fontWeight: 700 }}>ICE CREAM · CEREAL BAR</div>
          </div>
        </div>
        {!m && (
          <nav style={{ display: "flex", gap: 28, fontFamily: SMstyles.display.fontFamily, fontSize: 15 }}>
            <a href="#menu" style={{ color: "#0B0B0F", textDecoration: "none" }}>MENU</a>
            <a href="#story" style={{ color: "#0B0B0F", textDecoration: "none" }}>OUR STORY</a>
            <a href="#parties" style={{ color: "#0B0B0F", textDecoration: "none" }}>PARTIES</a>
            <a href="#visit" style={{ color: "#0B0B0F", textDecoration: "none" }}>VISIT</a>
          </nav>
        )}
        <SMButton small color="var(--ts-cyan)" href="#menu">{m ? "ORDER →" : "ORDER ONLINE →"}</SMButton>
      </div>

      {/* Hero content */}
      <div style={{
        padding: m ? "40px 16px 60px" : "60px 48px 80px",
        display: "grid",
        gridTemplateColumns: m ? "1fr" : "1.1fr 0.9fr",
        gap: m ? 40 : 48, alignItems: "center",
      }}>
        <div style={{ position: "relative" }}>
          <div style={{ display: "flex", gap: 10, marginBottom: 20, flexWrap: "wrap" }}>
            <SMPill color="var(--ts-yellow)" fg="#0B0B0F">★ NOW OPEN</SMPill>
            <SMPill color="var(--ts-pink)">MURRIETA, CA</SMPill>
          </div>
          <h1 style={{ ...SMstyles.display, fontSize: m ? 58 : 112, margin: "0 0 8px", color: "#0B0B0F" }}>
            EAT YOUR<br/>
            <span style={{ color: "var(--ts-pink)" }}>CEREAL</span>
            <span style={{...SMstyles.script, fontSize: m ? 28 : 48, color: "var(--ts-cyan-deep)", display: "inline-block", transform: m ? "rotate(-4deg) translate(-4px, -10px)" : "rotate(-4deg) translate(-8px, -20px)"}}>with a twist!</span>
          </h1>
          <p style={{ fontSize: m ? 16 : 20, lineHeight: 1.5, maxWidth: 520, color: "#3a3530", margin: "24px 0 28px" }}>
            Hand-swirled ice cream blended with the cereals you grew up loving — plus the ones you always wanted for dinner. Made to order, every single scoop.
          </p>
          <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
            <SMButton href="#menu">SEE THE SIGNATURE SWIRLS</SMButton>
            <SMButton href="#visit" color="#fff" fg="#0B0B0F">VISIT THE SHOP</SMButton>
          </div>
        </div>
        <div style={{ position: "relative", height: m ? 340 : 560, marginTop: m ? 10 : 0 }}>
          <div style={{
            position: "absolute", inset: 0, borderRadius: 24,
            background: "var(--ts-cyan)", border: "4px solid #0B0B0F",
            boxShadow: m ? "6px 6px 0 #0B0B0F" : "10px 10px 0 #0B0B0F",
            overflow: "hidden",
          }}>
            <img src="assets/product1.jpg" alt="Signature swirl"
              style={{ width: "100%", height: "100%", objectFit: "cover" }}
              onError={(e) => { e.currentTarget.style.display = "none"; }}
            />
          </div>
          <div style={{ position: "absolute", top: m ? -14 : -30, right: m ? -10 : -30 }}>
            <SMBurst size={m ? 104 : 160} rot={12} bg="var(--ts-yellow)">
              <div style={{fontSize: m ? 10 : 14, letterSpacing: "0.04em"}}>ONLY</div>
              <div style={{fontSize: m ? 30 : 44, lineHeight: 0.9}}>$8</div>
              <div style={{fontSize: m ? 9 : 12, letterSpacing: "0.04em"}}>SWIRL CUP</div>
            </SMBurst>
          </div>
          <div style={{ position: "absolute", bottom: m ? -10 : -20, left: m ? -12 : -30 }}>
            <SMBurst size={m ? 88 : 130} rot={-14} bg="var(--ts-pink)" color="#fff">
              <div style={{fontSize: m ? 20 : 28, lineHeight: 0.9}}>20</div>
              <div style={{fontSize: m ? 10 : 13}}>SIGNATURE<br/>SWIRLS</div>
            </SMBurst>
          </div>
        </div>
      </div>

      <style>{`
        @keyframes sm-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
      `}</style>
    </section>
  );
}

function SMStats() {
  const m = useIsMobile();
  const items = [
    { n: "20", l: "Signature Swirls" },
    { n: "50+", l: "Cereals on the Wall" },
    { n: "∞", l: "Combos to Invent" },
    { n: "1", l: "Wild Murrieta Shop" },
  ];
  return (
    <section style={{ background: "#0B0B0F", color: "#fff", padding: m ? "28px 16px" : "40px 48px", borderBottom: "6px solid #0B0B0F" }}>
      <div style={{ display: "grid", gridTemplateColumns: m ? "repeat(2, 1fr)" : "repeat(4, 1fr)", gap: m ? 20 : 40 }}>
        {items.map((it, i) => (
          <div key={i} style={{ textAlign: "center" }}>
            <div style={{ ...SMstyles.display, fontSize: m ? 44 : 72, color: i % 2 ? "var(--ts-cyan)" : "var(--ts-pink)" }}>{it.n}</div>
            <div style={{ ...SMstyles.display, fontSize: m ? 11 : 14, letterSpacing: "0.1em", color: "#fff" }}>{it.l.toUpperCase()}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

function SMSwirlOfWeek() {
  const m = useIsMobile();
  const d = window.TS_DATA;
  const pick = d.swirls.find(s => s.n === 11);
  return (
    <section style={{
      background: "var(--ts-pink)", color: "#fff",
      padding: m ? "50px 16px" : "80px 48px",
      borderBottom: "6px solid #0B0B0F",
      position: "relative", overflow: "hidden",
    }}>
      <div style={{
        position: "absolute", inset: 0,
        backgroundImage: `radial-gradient(circle at 15% 30%, rgba(255,255,255,.08) 40px, transparent 41px),
                          radial-gradient(circle at 80% 60%, rgba(255,255,255,.06) 60px, transparent 61px),
                          radial-gradient(circle at 40% 85%, rgba(255,255,255,.08) 30px, transparent 31px)`,
      }}/>
      <div style={{ position: "relative", display: "grid", gridTemplateColumns: m ? "1fr" : "1fr 1fr", gap: m ? 32 : 60, alignItems: "center" }}>
        <div>
          <div style={{ ...SMstyles.display, fontSize: m ? 12 : 14, letterSpacing: "0.25em", color: "var(--ts-yellow)", marginBottom: 12 }}>
            ✦ SWIRL OF THE WEEK ✦
          </div>
          <h2 style={{ ...SMstyles.display, fontSize: m ? 54 : 120, margin: "0 0 16px", lineHeight: 0.9 }}>
            #{pick.n}<br/>
            {pick.name.toUpperCase()}
          </h2>
          <div style={{ fontSize: m ? 15 : 17, lineHeight: 1.6, maxWidth: 440, marginBottom: 24 }}>
            <div><strong>Base:</strong> {pick.base} ice cream</div>
            <div><strong>Blended:</strong> {pick.blend}</div>
            <div><strong>Topped with:</strong> {pick.top}</div>
            <div><strong>Drizzle:</strong> {pick.drizzle}</div>
          </div>
          <SMButton href="#menu" color="var(--ts-yellow)" fg="#0B0B0F">COME TRY IT THIS WEEK →</SMButton>
        </div>
        <div style={{ position: "relative", height: m ? 300 : 520 }}>
          <div style={{
            position: "absolute", inset: 0, borderRadius: 24,
            background: "var(--ts-yellow)", border: "4px solid #0B0B0F",
            boxShadow: m ? "-6px 6px 0 #0B0B0F" : "-10px 10px 0 #0B0B0F",
            overflow: "hidden",
          }}>
            <img src="assets/product3.jpg" alt={pick.name}
              style={{ width: "100%", height: "100%", objectFit: "cover" }}
              onError={(e) => { e.currentTarget.style.display = "none"; }}
            />
          </div>
          <div style={{ position: "absolute", top: m ? 20 : 30, left: m ? -14 : -30, transform: "rotate(-8deg)" }}>
            <SMBurst size={m ? 90 : 130} rot={0} bg="var(--ts-cyan)" color="#fff">
              <div style={{fontSize: m ? 14 : 18}}>LUCKY<br/>CHARMS</div>
              <div style={{fontSize: m ? 9 : 11, marginTop: 4}}>+ COOKIE<br/>DOUGH</div>
            </SMBurst>
          </div>
        </div>
      </div>
    </section>
  );
}

function SMMenu() {
  const m = useIsMobile();
  const d = window.TS_DATA;
  const [tab, setTab] = React.useState("all");
  const filtered = d.swirls.filter(s => {
    if (tab === "all") return true;
    const hay = (s.name + " " + s.blend + " " + s.top + " " + s.drizzle).toLowerCase();
    if (tab === "choc") return /chocolate|oreo|brownie|reese|nutter|cookie|cocoa|peanut|m&m|chip/.test(hay);
    if (tab === "fruit") return /strawberr|berry|fruit|banana|raspberry|cactus|silly|pebble|trix|rainbow/.test(hay);
    if (tab === "classic") return /cinnamon|toast|flake|krave|honey|frosted|captain|goat|crunch/.test(hay);
    return true;
  });
  return (
    <section id="menu" style={{
      background: "var(--ts-cream)", padding: m ? "50px 16px" : "80px 48px",
      borderBottom: "6px solid #0B0B0F",
      position: "relative",
    }}>
      <div style={{
        position: "absolute", inset: 0,
        backgroundImage: "radial-gradient(circle at 1px 1px, rgba(11,11,15,0.08) 1px, transparent 1.5px)",
        backgroundSize: "20px 20px", pointerEvents: "none",
      }}/>
      <div style={{ position: "relative" }}>
        <div style={{ textAlign: "center", marginBottom: m ? 20 : 28 }}>
          <div style={{ ...SMstyles.display, fontSize: m ? 12 : 14, letterSpacing: "0.25em", color: "var(--ts-pink)", marginBottom: 12 }}>
            ✦ THE SIGNATURE SWIRLS ✦
          </div>
          <h2 style={{ ...SMstyles.display, fontSize: m ? 48 : 110, margin: 0, color: "#0B0B0F", lineHeight: 0.88 }}>
            TWENTY WAYS<br/>
            <span style={{ color: "var(--ts-pink)" }}>TO GET SWIRLED.</span>
          </h2>
        </div>

        <div style={{ display: "flex", justifyContent: "center", gap: m ? 8 : 12, marginTop: 24, marginBottom: 18, flexWrap: "wrap" }}>
          {d.formats.map((f, i) => (
            <div key={i} style={{
              background: "#fff", border: "3px solid #0B0B0F",
              boxShadow: "3px 3px 0 #0B0B0F",
              padding: m ? "8px 12px" : "10px 18px", borderRadius: 10,
              display: "flex", alignItems: "center", gap: 8,
            }}>
              <span style={{ ...SMstyles.display, fontSize: m ? 12 : 14, color: "var(--ts-pink)" }}>{f.name.toUpperCase()}</span>
              <span style={{ fontSize: m ? 10 : 11, color: "#3a3530" }}>{f.size}</span>
              <span style={{ ...SMstyles.display, fontSize: m ? 18 : 24, color: "#0B0B0F" }}>{f.price}</span>
            </div>
          ))}
        </div>

        <div style={{ display: "flex", justifyContent: "center", gap: m ? 6 : 10, marginBottom: m ? 24 : 32, flexWrap: "wrap" }}>
          {[["all","ALL 20"],["choc","CHOCOLATE"],["fruit","FRUITY"],["classic","CLASSIC"]].map(([k,l]) => (
            <button key={k} onClick={() => setTab(k)} style={{
              ...SMstyles.display, fontSize: m ? 12 : 14, letterSpacing: "0.04em",
              padding: m ? "8px 14px" : "10px 20px", borderRadius: 999, cursor: "pointer",
              background: tab === k ? "var(--ts-pink)" : "#fff",
              color: tab === k ? "#fff" : "#0B0B0F",
              border: "3px solid #0B0B0F",
              boxShadow: tab === k ? "4px 4px 0 #0B0B0F" : "2px 2px 0 #0B0B0F",
              transform: tab === k ? "translate(-1px,-1px)" : "none",
              transition: "all .12s",
              fontFamily: "inherit",
            }}>{l}</button>
          ))}
        </div>

        <div style={{ display: "grid", gridTemplateColumns: m ? "repeat(2, 1fr)" : "repeat(4, 1fr)", gap: m ? 18 : 14 }}>
          {filtered.map((sw) => {
            const tilt = ((sw.n % 5) - 2) * 0.4;
            const accent = sw.n % 3 === 0 ? "var(--ts-cyan)" : sw.n % 3 === 1 ? "var(--ts-pink)" : "var(--ts-yellow)";
            const accentFg = accent === "var(--ts-yellow)" ? "#0B0B0F" : "#fff";
            return (
              <div key={sw.n} style={{
                background: "#fff",
                border: "3px solid #0B0B0F",
                borderRadius: 8,
                padding: m ? "18px 14px 14px" : "22px 20px 18px",
                position: "relative",
                boxShadow: "4px 4px 0 #0B0B0F",
                transform: `rotate(${tilt}deg)`,
                transition: "transform .15s, box-shadow .15s",
              }}
              onMouseEnter={(e) => { e.currentTarget.style.transform = `rotate(${tilt}deg) translate(-2px,-2px)`; e.currentTarget.style.boxShadow = "6px 6px 0 #0B0B0F"; }}
              onMouseLeave={(e) => { e.currentTarget.style.transform = `rotate(${tilt}deg)`; e.currentTarget.style.boxShadow = "4px 4px 0 #0B0B0F"; }}
              >
                <div style={{
                  position: "absolute", top: -14, left: 14,
                  background: accent, color: accentFg,
                  ...SMstyles.display, fontSize: m ? 12 : 14,
                  padding: "5px 12px", borderRadius: 6,
                  border: "3px solid #0B0B0F",
                  boxShadow: "2px 2px 0 #0B0B0F",
                  transform: "rotate(-4deg)",
                }}>#{String(sw.n).padStart(2,"0")}</div>
                <div style={{ fontSize: m ? 30 : 36, marginTop: 4, lineHeight: 1 }}>{sw.emoji}</div>
                <div style={{ ...SMstyles.display, fontSize: m ? 18 : 24, marginTop: 8, lineHeight: 0.95, color: "#0B0B0F" }}>
                  {sw.name.toUpperCase()}
                </div>
                <div style={{
                  borderTop: "2px dashed rgba(11,11,15,0.25)",
                  marginTop: 10, paddingTop: 10,
                  fontSize: m ? 11 : 12, lineHeight: 1.5,
                  color: "#3a3530",
                }}>
                  <div><strong style={{color:"#0B0B0F"}}>{sw.base}</strong> base</div>
                  <div>+ {sw.blend}</div>
                  <div>+ {sw.top}</div>
                  <div style={{ ...SMstyles.display, fontSize: m ? 10 : 11, color: "var(--ts-pink)", marginTop: 8, letterSpacing: "0.06em" }}>
                    {sw.drizzle.toUpperCase()} DRIZZLE
                  </div>
                </div>
              </div>
            );
          })}
        </div>

        <div style={{ textAlign: "center", marginTop: 28, ...SMstyles.script, fontSize: m ? 22 : 32, color: "var(--ts-cyan-deep)", transform: "rotate(-2deg)" }}>
          dairy free options available for every swirl!
        </div>
      </div>
    </section>
  );
}

function SMStory() {
  const m = useIsMobile();
  return (
    <section id="story" style={{
      background: "var(--ts-cyan)", padding: m ? "50px 16px" : "80px 48px",
      borderBottom: "6px solid #0B0B0F", color: "#fff",
      position: "relative", overflow: "hidden",
    }}>
      <div style={{ display: "grid", gridTemplateColumns: m ? "1fr" : "1fr 1.2fr", gap: m ? 28 : 60, alignItems: "center", position: "relative" }}>
        <div style={{ position: "relative", height: m ? 280 : 520 }}>
          <div style={{
            position: "absolute", inset: m ? 0 : "0 20px 40px 0",
            background: "var(--ts-pink)", border: "4px solid #0B0B0F",
            borderRadius: 24, boxShadow: m ? "6px 6px 0 #0B0B0F" : "10px 10px 0 #0B0B0F",
            overflow: "hidden",
          }}>
            <img src="assets/astronaut-wall.jpg" alt="Twisted Spoons mascot on the ice-cream bench"
              style={{ width: "100%", height: "100%", objectFit: "cover" }}
              onError={(e) => { e.currentTarget.style.display = "none"; }}
            />
          </div>
        </div>
        <div>
          <div style={{ ...SMstyles.display, fontSize: m ? 12 : 14, letterSpacing: "0.25em", color: "var(--ts-yellow)", marginBottom: 12 }}>
            ✦ OUR STORY ✦
          </div>
          <h2 style={{ ...SMstyles.display, fontSize: m ? 42 : 88, margin: "0 0 20px", lineHeight: 0.9 }}>
            A LITTLE SHOP.<br/>
            <span style={{ color: "var(--ts-yellow)" }}>A LOTTA SWIRL.</span>
          </h2>
          <p style={{ fontSize: m ? 15 : 19, lineHeight: 1.6, marginBottom: 14, maxWidth: 560 }}>
            We grew up eating cereal like it was a sport. Saturday mornings, cartoons on, bowl in hand, milk a little too sweet on purpose. Twisted Spoons is that feeling — but frozen, swirled, and loaded into a cup.
          </p>
          <p style={{ fontSize: m ? 15 : 19, lineHeight: 1.6, maxWidth: 560 }}>
            Every swirl is made to order right in front of you, because watching it happen is half the fun. Come hang out. Pick a booth. Pose with the mascot. Leave a little stickier than you arrived.
          </p>
        </div>
      </div>
    </section>
  );
}

function SMGallery() {
  const m = useIsMobile();
  const items = [
    { src: "assets/product1.jpg", label: "Strawberry · Teddy Grahams" },
    { src: "assets/product2.jpg", label: "Mint · Cookie Sprinkle" },
    { src: "assets/product3.jpg", label: "Peanut Butter Shake" },
    { src: "assets/product4.jpg", label: "Fruity Pebbles Shake" },
    { src: "assets/product5.jpg", label: "Reese's Cup Scoop" },
    { src: "assets/mascot-bench.jpg", label: "The twenty-swirl menu" },
    { src: "assets/product6.jpg", label: "Berry Tale Crumble" },
    { src: "assets/astronaut-wall.jpg", label: "Photo-op bench" },
  ];
  return (
    <section id="gallery" style={{
      background: "var(--ts-cream)", padding: m ? "50px 16px" : "80px 48px",
      borderBottom: "6px solid #0B0B0F",
    }}>
      <div style={{
        display: "flex", flexDirection: m ? "column" : "row",
        justifyContent: "space-between", alignItems: m ? "flex-start" : "flex-end",
        gap: 16, marginBottom: m ? 22 : 28,
      }}>
        <div>
          <div style={{ ...SMstyles.display, fontSize: m ? 12 : 14, letterSpacing: "0.25em", color: "var(--ts-pink)", marginBottom: 8 }}>FROM THE SHOP</div>
          <h2 style={{ ...SMstyles.display, fontSize: m ? 36 : 72, margin: 0, color: "#0B0B0F", lineHeight: 0.9 }}>
            LOOKS AS GOOD AS IT TASTES.
          </h2>
        </div>
        <SMButton small color="var(--ts-cyan)" href="https://instagram.com/twistedspoons" target="_blank">{m ? "TAG @TWISTEDSPOONS" : "TAG US @TWISTEDSPOONS"}</SMButton>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: m ? "repeat(2, 1fr)" : "repeat(4, 1fr)", gap: m ? 10 : 14 }}>
        {items.map((it, i) => (
          <div key={i} style={{
            position: "relative", aspectRatio: "1/1",
            borderRadius: 12, overflow: "hidden",
            border: "3px solid #0B0B0F",
            boxShadow: "4px 4px 0 #0B0B0F",
            background: ["#FFD23F","#2BA8E0","#E91E84","#8B5CF6"][i%4],
          }}>
            <img src={it.src} alt={it.label}
              style={{ width: "100%", height: "100%", objectFit: "cover" }}
              onError={(e) => { e.currentTarget.style.display = "none"; }}
            />
            <div style={{
              position: "absolute", bottom: 8, left: 8, maxWidth: "calc(100% - 16px)",
              background: "#0B0B0F", color: "#fff",
              fontFamily: SMstyles.display.fontFamily, fontSize: m ? 9 : 11,
              padding: "4px 10px", borderRadius: 999, letterSpacing: "0.04em",
              whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis",
            }}>{it.label.toUpperCase()}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

function SMPartyModal({ open, onClose }) {
  const m = useIsMobile();
  const [status, setStatus] = React.useState('idle'); // idle | sending | sent
  const [form, setForm] = React.useState({ name:'', email:'', phone:'', date:'', guests:'', type:'Birthday', notes:'' });
  if (!open) return null;
  const set = k => e => setForm(f => ({ ...f, [k]: e.target.value }));
  const submit = e => {
    e.preventDefault();
    setStatus('sending');
    setTimeout(() => setStatus('sent'), 1800);
  };
  const reset = () => { setStatus('idle'); setForm({ name:'', email:'', phone:'', date:'', guests:'', type:'Birthday', notes:'' }); onClose(); };
  const inp = { width:'100%', boxSizing:'border-box', padding:'10px 14px', borderRadius:8, border:'2px solid #0B0B0F', fontSize:14, fontFamily:'Space Grotesk,system-ui,sans-serif', background:'#fff', outline:'none' };
  const lbl = { ...SMstyles.display, fontSize:12, letterSpacing:'0.1em', color:'#0B0B0F', display:'block', marginBottom:5 };
  return (
    <div onClick={reset} style={{ position:'fixed', inset:0, zIndex:10000, background:'rgba(11,11,15,0.7)', backdropFilter:'blur(6px)', display:'flex', alignItems:'center', justifyContent:'center', padding:16 }}>
      <div onClick={e => e.stopPropagation()} style={{ background:'#FFF7EC', border:'4px solid #0B0B0F', boxShadow:'8px 8px 0 #0B0B0F', borderRadius:16, width:'100%', maxWidth:520, maxHeight:'90vh', overflowY:'auto', padding: m ? 20 : 36, position:'relative' }}>
        <button onClick={reset} style={{ position:'absolute', top:14, right:14, background:'none', border:'none', fontSize:22, cursor:'pointer', lineHeight:1 }}>✕</button>
        {status === 'sent' ? (
          <div style={{ textAlign:'center', padding:'40px 20px' }}>
            <div style={{ fontSize:56 }}>🎉</div>
            <h3 style={{ ...SMstyles.display, fontSize:36, margin:'12px 0 10px', color:'#0B0B0F' }}>REQUEST SENT!</h3>
            <p style={{ fontSize:15, lineHeight:1.6, color:'#3a3530', marginBottom:24 }}>We got your party request! We'll reach out within 24 hours to lock in your date. Get ready to get swirled.</p>
            <SMButton color="var(--ts-pink)" onClick={reset}>CLOSE ✕</SMButton>
          </div>
        ) : (
          <>
            <div style={{ ...SMstyles.display, fontSize: m ? 10 : 11, color:'var(--ts-pink)', letterSpacing:'0.2em', marginBottom:8 }}>✦ PARTY REQUEST ✦</div>
            <h3 style={{ ...SMstyles.display, fontSize: m ? 30 : 42, margin:'0 0 20px', lineHeight:0.9 }}>BOOK THE<br/><span style={{color:'var(--ts-pink)'}}>WHOLE SHOP.</span></h3>
            <form onSubmit={submit} style={{ display:'flex', flexDirection:'column', gap:14 }}>
              <div style={{ display:'grid', gridTemplateColumns: m ? '1fr' : '1fr 1fr', gap:12 }}>
                <div><label style={lbl}>YOUR NAME</label><input required style={inp} value={form.name} onChange={set('name')} placeholder="e.g. Jamie Torres"/></div>
                <div><label style={lbl}>EMAIL</label><input required type="email" style={inp} value={form.email} onChange={set('email')} placeholder="jamie@email.com"/></div>
              </div>
              <div style={{ display:'grid', gridTemplateColumns: m ? '1fr' : '1fr 1fr', gap:12 }}>
                <div><label style={lbl}>PHONE</label><input style={inp} value={form.phone} onChange={set('phone')} placeholder="(555) 000-0000"/></div>
                <div><label style={lbl}>PREFERRED DATE</label><input required type="date" style={inp} value={form.date} onChange={set('date')}/></div>
              </div>
              <div style={{ display:'grid', gridTemplateColumns: m ? '1fr' : '1fr 1fr', gap:12 }}>
                <div><label style={lbl}>GUESTS</label><input required type="number" min="1" max="30" style={inp} value={form.guests} onChange={set('guests')} placeholder="Up to 30"/></div>
                <div><label style={lbl}>EVENT TYPE</label>
                  <select style={{...inp}} value={form.type} onChange={set('type')}>
                    {['Birthday','Graduation','Team Party','Corporate','Just Because'].map(t => <option key={t}>{t}</option>)}
                  </select>
                </div>
              </div>
              <div><label style={lbl}>SPECIAL REQUESTS</label><textarea style={{...inp, resize:'vertical', minHeight:80}} value={form.notes} onChange={set('notes')} placeholder="Favorite cereals, dietary needs, theme ideas..."/></div>
              <SMButton color="var(--ts-pink)" onClick={() => {}}>{status === 'sending' ? 'SENDING…' : 'SEND REQUEST →'}</SMButton>
            </form>
          </>
        )}
      </div>
    </div>
  );
}

function SMParties() {
  const m = useIsMobile();
  const [showForm, setShowForm] = React.useState(false);
  return (
    <section id="parties" style={{
      background: "var(--ts-yellow)",
      padding: m ? "50px 16px" : "80px 48px",
      borderBottom: "6px solid #0B0B0F",
      position: "relative", overflow: "hidden",
    }}>
      <div style={{
        position: "absolute", inset: 0,
        backgroundImage: "repeating-linear-gradient(45deg, rgba(0,0,0,0.05) 0 20px, transparent 20px 40px)",
      }}/>
      <div style={{ position: "relative", display: "grid", gridTemplateColumns: m ? "1fr" : "1.2fr 0.8fr", gap: m ? 32 : 60, alignItems: "center" }}>
        <div>
          <div style={{ ...SMstyles.display, fontSize: m ? 12 : 14, letterSpacing: "0.25em", color: "var(--ts-pink)", marginBottom: 12 }}>
            ✦ PARTIES & PRIVATE EVENTS ✦
          </div>
          <h2 style={{ ...SMstyles.display, fontSize: m ? 46 : 96, margin: "0 0 18px", lineHeight: 0.9, color: "#0B0B0F" }}>
            BOOK THE<br/>
            <span style={{ color: "var(--ts-pink)" }}>WHOLE SHOP.</span>
          </h2>
          <p style={{ fontSize: m ? 15 : 19, lineHeight: 1.6, maxWidth: 520, color: "#3a3530", marginBottom: 24 }}>
            Birthdays, team parties, graduations, or Tuesdays for no reason at all. Rent out Twisted Spoons for your crew — we'll make the swirls, you bring the playlist.
          </p>
          <div style={{ display: "grid", gridTemplateColumns: m ? "1fr" : "repeat(3,1fr)", gap: m ? 10 : 12, marginBottom: 24, maxWidth: 520 }}>
            {[
              { t: "Up to 30 guests", s: "kids or grown-ups" },
              { t: "Custom swirl menu", s: "pick your flavors" },
              { t: "Photo-op bench", s: "mascot on request" },
            ].map((it, i) => (
              <div key={i} style={{
                background: "#fff", border: "3px solid #0B0B0F",
                boxShadow: "3px 3px 0 #0B0B0F",
                padding: "12px 14px", borderRadius: 10,
              }}>
                <div style={{ ...SMstyles.display, fontSize: m ? 14 : 16, color: "#0B0B0F" }}>{it.t.toUpperCase()}</div>
                <div style={{ fontSize: m ? 11 : 12, color: "#3a3530", marginTop: 4 }}>{it.s}</div>
              </div>
            ))}
          </div>
          <SMButton color="var(--ts-pink)" onClick={e => { e.preventDefault(); setShowForm(true); }}>REQUEST A PARTY DATE →</SMButton>
        </div>
        <div style={{ position: "relative", display: "flex", justifyContent: "center" }}>
          <SMBurst size={m ? 220 : 320} rot={-6} bg="var(--ts-pink)" color="#fff">
            <div style={{fontSize: m ? 16 : 22, letterSpacing: "0.02em"}}>BIRTHDAYS</div>
            <div style={{...SMstyles.script, fontSize: m ? 30 : 44, margin: "4px 0", color: "var(--ts-yellow)"}}>are</div>
            <div style={{fontSize: m ? 26 : 40, lineHeight: 0.9}}>CEREALIOUS</div>
            <div style={{fontSize: m ? 12 : 16, marginTop: 8}}>BUSINESS</div>
          </SMBurst>
        </div>
      </div>
      <SMPartyModal open={showForm} onClose={() => setShowForm(false)} />
    </section>
  );
}

function SMVisit() {
  const m = useIsMobile();
  const d = window.TS_DATA;
  return (
    <section id="visit" style={{
      background: "#0B0B0F", color: "#fff",
      padding: m ? "50px 16px" : "80px 48px",
      borderBottom: "6px solid var(--ts-pink)",
    }}>
      <div style={{ display: "grid", gridTemplateColumns: m ? "1fr" : "1fr 1fr", gap: m ? 32 : 60 }}>
        <div>
          <div style={{ ...SMstyles.display, fontSize: m ? 12 : 14, letterSpacing: "0.25em", color: "var(--ts-yellow)", marginBottom: 12 }}>
            ✦ VISIT US ✦
          </div>
          <h2 style={{ ...SMstyles.display, fontSize: m ? 46 : 88, margin: "0 0 20px", lineHeight: 0.9 }}>
            COME GET<br/>
            <span style={{ color: "var(--ts-cyan)" }}>SWIRLED.</span>
          </h2>
          <div style={{ fontSize: m ? 18 : 22, lineHeight: 1.5, marginBottom: 6 }}>
            <strong>{d.address}</strong>
          </div>
          <div style={{ fontSize: m ? 15 : 18, color: "#BDB5A8", marginBottom: 20 }}>{d.addressLine2}</div>
          <div style={{ ...SMstyles.display, fontSize: m ? 24 : 28, color: "var(--ts-pink)", marginBottom: 24 }}>
            <a href={d.phoneHref} style={{ color: "inherit", textDecoration: "none" }}>{d.phone}</a>
          </div>
          <div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
            <SMButton color="var(--ts-cyan)" href="https://maps.google.com/?q=40575+California+Oaks+Rd+Ste+D-3+Murrieta+CA+92562" target="_blank">GET DIRECTIONS</SMButton>
            <SMButton color="var(--ts-yellow)" fg="#0B0B0F" href="tel:19512390390">CALL THE SHOP</SMButton>
          </div>
        </div>
        <div>
          <div style={{ ...SMstyles.display, fontSize: m ? 18 : 22, color: "var(--ts-cyan)", marginBottom: 14 }}>HOURS</div>
          <div style={{ borderTop: "2px solid rgba(255,255,255,0.2)" }}>
            {d.hours.map((h, i) => (
              <div key={i} style={{
                display: "flex", justifyContent: "space-between",
                padding: "12px 0", borderBottom: "2px solid rgba(255,255,255,0.2)",
                fontSize: m ? 15 : 18,
              }}>
                <div style={{ ...SMstyles.display, letterSpacing: "0.05em" }}>{h.d.toUpperCase()}</div>
                <div style={{ color: "#fff" }}>{h.h}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function SMFooter() {
  const m = useIsMobile();
  return (
    <footer style={{
      background: "var(--ts-pink)", color: "#fff",
      padding: m ? "28px 16px 24px" : "40px 48px 32px",
      borderTop: "4px solid #0B0B0F",
    }}>
      <div style={{ display: "grid", gridTemplateColumns: m ? "1fr" : "1fr auto", gap: m ? 18 : 28, alignItems: "center" }}>
        <div>
          <div style={{ ...SMstyles.display, fontSize: m ? 26 : 40, lineHeight: 0.9 }}>TWISTED SPOONS</div>
          <div style={{ fontSize: m ? 11 : 13, letterSpacing: "0.22em", marginTop: 4 }}>ICE CREAM · CEREAL BAR · MURRIETA, CA</div>
        </div>
        <div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
          <a href={window.TS_DATA.social.instagram} target="_blank" rel="noopener noreferrer" style={{ display:"inline-block", background:"#0B0B0F", color:"#fff", padding:"4px 12px", borderRadius:999, border:"2px solid #0B0B0F", fontFamily:SMstyles.display.fontFamily, fontSize:13, letterSpacing:"0.02em", textDecoration:"none" }}>INSTAGRAM</a>
          <a href={window.TS_DATA.social.tiktok} target="_blank" rel="noopener noreferrer" style={{ display:"inline-block", background:"#0B0B0F", color:"#fff", padding:"4px 12px", borderRadius:999, border:"2px solid #0B0B0F", fontFamily:SMstyles.display.fontFamily, fontSize:13, letterSpacing:"0.02em", textDecoration:"none" }}>TIKTOK</a>
          <a href={window.TS_DATA.social.facebook} target="_blank" rel="noopener noreferrer" style={{ display:"inline-block", background:"#0B0B0F", color:"#fff", padding:"4px 12px", borderRadius:999, border:"2px solid #0B0B0F", fontFamily:SMstyles.display.fontFamily, fontSize:13, letterSpacing:"0.02em", textDecoration:"none" }}>FACEBOOK</a>
        </div>
      </div>
      <div style={{ marginTop: 24, paddingTop: 14, borderTop: "2px dashed rgba(255,255,255,0.5)", fontSize: 12, opacity: 0.85 }}>
        © 2026 Twisted Spoons Ice Cream Cereal Bar — Cerealiously delicious since forever.
      </div>
    </footer>
  );
}

function SMBackToTop() {
  const [vis, setVis] = React.useState(false);
  React.useEffect(() => {
    const fn = () => setVis(window.scrollY > 300);
    window.addEventListener('scroll', fn, { passive: true });
    return () => window.removeEventListener('scroll', fn);
  }, []);
  if (!vis) return null;
  return (
    <button
      onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
      style={{
        position: 'fixed', bottom: 24, right: 24, zIndex: 9998,
        width: 48, height: 48, borderRadius: '50%',
        background: 'var(--ts-orange)', color: '#fff',
        border: '3px solid #0B0B0F',
        boxShadow: '3px 3px 0 #0B0B0F',
        fontSize: 22, cursor: 'pointer',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        transition: 'transform .15s ease',
      }}
      onMouseEnter={e => e.currentTarget.style.transform = 'translateY(-2px)'}
      onMouseLeave={e => e.currentTarget.style.transform = 'translateY(0)'}
    >↑</button>
  );
}

function SaturdayMorning() {
  return (
    <div className="artboard-root" style={SMstyles.root}>
      <SMHero />
      <SMStats />
      <SMSwirlOfWeek />
      <SMMenu />
      <SMStory />
      <SMGallery />
      <SMParties />
      <SMVisit />
      <SMFooter />
      <SMBackToTop />
    </div>
  );
}

window.SaturdayMorning = SaturdayMorning;