/*
  Direction C — COSMIC SWIRL (responsive)
  Starfield cosmos. Aurora gradients. Constellation menu.
*/
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 CSstyles = {
  root: {
    fontFamily: "'Space Grotesk', system-ui, sans-serif",
    color: "#F8E9F0",
    background: "#05081A",
    minHeight: "100%",
    width: "100%",
  },
  display: {
    fontFamily: "'Bagel Fat One', 'Luckiest Guy', sans-serif",
    letterSpacing: "-0.01em",
    lineHeight: 0.92,
  },
  script: {
    fontFamily: "'Lobster', 'Pacifico', cursive",
  },
  mono: {
    fontFamily: "'JetBrains Mono', ui-monospace, monospace",
    letterSpacing: "0.08em",
  },
};

function CSStars({ density = 80, shooting = 0, seed = 1, style }) {
  const stars = React.useMemo(() => {
    let s = seed;
    const r = () => { s = (s * 9301 + 49297) % 233280; return s / 233280; };
    return Array.from({ length: density }).map(() => ({
      x: r() * 100, y: r() * 100,
      s: r() * 1.5 + 0.4,
      o: r() * 0.7 + 0.3,
      tw: r() * 4 + 2,
    }));
  }, [density, seed]);
  return (
    <div style={{ position: "absolute", inset: 0, pointerEvents: "none", overflow: "hidden", ...style }}>
      {stars.map((st, i) => (
        <div key={i} style={{
          position: "absolute",
          left: `${st.x}%`, top: `${st.y}%`,
          width: st.s, height: st.s,
          background: "#fff", borderRadius: "50%",
          opacity: st.o,
          boxShadow: st.s > 1.2 ? `0 0 ${st.s*3}px rgba(255,255,255,0.8)` : undefined,
          animation: `cs-twinkle ${st.tw}s ease-in-out infinite`,
          animationDelay: `${i*0.13}s`,
        }}/>
      ))}
      {shooting > 0 && Array.from({ length: shooting }).map((_, i) => (
        <div key={`sh-${i}`} style={{
          position: "absolute", left: `${(i*37)%100}%`, top: `${(i*23)%60}%`,
          width: 80, height: 1,
          background: "linear-gradient(90deg, transparent, #fff 50%, transparent)",
          opacity: 0.8,
          transform: "rotate(-20deg)",
          animation: `cs-shoot ${4 + i*1.3}s linear infinite`,
          animationDelay: `${i*2.1}s`,
        }}/>
      ))}
      <style>{`
        @keyframes cs-twinkle { 0%,100% {opacity: var(--o,0.7);} 50% {opacity: 0.2;} }
        @keyframes cs-shoot { 0% {transform: translate(-20vw,-5vh) rotate(-20deg); opacity: 0;}
                              10% {opacity: 1;}
                              60% {opacity: 1;}
                              100% {transform: translate(120vw,30vh) rotate(-20deg); opacity: 0;} }
      `}</style>
    </div>
  );
}

function CSAurora({ style }) {
  return (
    <div style={{ position: "absolute", inset: 0, pointerEvents: "none", overflow: "hidden", ...style }}>
      <div style={{
        position: "absolute", top: "-10%", left: "-10%",
        width: "55%", height: "65%", borderRadius: "50%",
        background: "radial-gradient(circle, rgba(233,30,132,0.45) 0%, transparent 60%)",
        filter: "blur(60px)",
      }}/>
      <div style={{
        position: "absolute", top: "10%", right: "-15%",
        width: "60%", height: "70%", borderRadius: "50%",
        background: "radial-gradient(circle, rgba(43,168,224,0.4) 0%, transparent 60%)",
        filter: "blur(70px)",
      }}/>
      <div style={{
        position: "absolute", bottom: "-20%", left: "20%",
        width: "60%", height: "60%", borderRadius: "50%",
        background: "radial-gradient(circle, rgba(139,92,246,0.35) 0%, transparent 60%)",
        filter: "blur(70px)",
      }}/>
    </div>
  );
}

function CSSwirl({ size = 200, style }) {
  return (
    <svg width={size} height={size} viewBox="0 0 200 200" style={{ ...style }}>
      <defs>
        <linearGradient id={`swirl-g-${size}`} x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stopColor="#FF4D9E"/>
          <stop offset="50%" stopColor="#FFD23F"/>
          <stop offset="100%" stopColor="#2BA8E0"/>
        </linearGradient>
      </defs>
      <g style={{ transformOrigin: "100px 100px", animation: "cs-spin 14s linear infinite" }}>
        {[...Array(3)].map((_, i) => {
          const r = 80 - i*22;
          const offset = i * 60;
          return <circle key={i} cx="100" cy="100" r={r} fill="none"
            stroke={`url(#swirl-g-${size})`} strokeWidth={14 - i*3}
            strokeDasharray={`${30 + i*8} ${10}`}
            strokeDashoffset={offset}
            strokeLinecap="round" />
        })}
      </g>
      <style>{`@keyframes cs-spin { to { transform: rotate(360deg); } }`}</style>
    </svg>
  );
}

function CSScanlines({ children, style }) {
  return (
    <div style={{ position: "relative", overflow: "hidden", ...style }}>
      {children}
      <div style={{
        position: "absolute", inset: 0, pointerEvents: "none",
        backgroundImage: "repeating-linear-gradient(180deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 3px)",
        mixBlendMode: "overlay",
      }}/>
    </div>
  );
}

function CSButton({ children, variant = "primary", href = "#", small, target }) {
  const m = useIsMobile();
  const styles = {
    primary: { bg: "linear-gradient(135deg, #FF4D9E 0%, #E91E84 100%)", fg: "#fff", shadow: "0 0 32px rgba(233,30,132,0.55), inset 0 1px 0 rgba(255,255,255,0.3)" },
    secondary: { bg: "linear-gradient(135deg, #2BA8E0 0%, #0E7FB8 100%)", fg: "#fff", shadow: "0 0 32px rgba(43,168,224,0.55), inset 0 1px 0 rgba(255,255,255,0.3)" },
    ghost: { bg: "rgba(255,255,255,0.04)", fg: "#F8E9F0", shadow: "inset 0 0 0 1.5px rgba(248,233,240,0.35)" },
    gold: { bg: "linear-gradient(135deg, #FFD23F 0%, #F59E0B 100%)", fg: "#1A0A2E", shadow: "0 0 32px rgba(255,210,63,0.55), inset 0 1px 0 rgba(255,255,255,0.4)" },
  };
  const s = styles[variant];
  return (
    <a href={href} target={target} rel={target === "_blank" ? "noopener noreferrer" : undefined} style={{
      display: "inline-flex", alignItems: "center", gap: 10,
      background: s.bg, color: s.fg, textDecoration: "none",
      padding: small ? (m ? "9px 16px" : "10px 20px") : (m ? "13px 22px" : "16px 30px"),
      fontFamily: CSstyles.display.fontFamily,
      fontSize: small ? (m ? 13 : 14) : (m ? 15 : 17),
      letterSpacing: "0.02em",
      borderRadius: 999,
      boxShadow: s.shadow,
      transition: "transform .15s, box-shadow .15s",
    }}
    onMouseEnter={(e) => { e.currentTarget.style.transform = "translateY(-2px)"; }}
    onMouseLeave={(e) => { e.currentTarget.style.transform = ""; }}
    >{children}</a>
  );
}

function CSTag({ children, color = "#2BA8E0" }) {
  return (
    <span style={{
      display: "inline-flex", alignItems: "center", gap: 8,
      padding: "5px 14px",
      background: "rgba(255,255,255,0.04)",
      border: `1.5px solid ${color}`,
      borderRadius: 999,
      color,
      ...CSstyles.mono, fontSize: 11,
      boxShadow: `0 0 14px ${color}33`,
    }}>
      <span style={{ width: 6, height: 6, borderRadius: 3, background: color, boxShadow: `0 0 10px ${color}` }}/>
      {children}
    </span>
  );
}

function CSHero() {
  const m = useIsMobile();
  const d = window.TS_DATA;
  return (
    <section style={{
      position: "relative",
      background: "radial-gradient(ellipse 80% 60% at 50% 0%, #1a0f45 0%, #0A0F1F 50%, #05081A 100%)",
      overflow: "hidden",
      minHeight: m ? "auto" : 960,
    }}>
      <CSStars density={m ? 100 : 180} shooting={3}/>
      <CSAurora/>

      {/* Transmission bar */}
      <div style={{
        position: "relative", zIndex: 5,
        background: "rgba(0,0,0,0.4)", backdropFilter: "blur(10px)",
        borderBottom: "1px solid rgba(255,255,255,0.08)",
        padding: m ? "8px 14px" : "10px 40px",
        ...CSstyles.mono, fontSize: m ? 9 : 10.5,
        color: "rgba(248,233,240,0.6)",
        display: "flex", justifyContent: "space-between", letterSpacing: m ? "0.15em" : "0.25em",
        flexWrap: "wrap", gap: 4,
      }}>
        <div><span style={{color:"#FF4D9E"}}>●</span>&nbsp;&nbsp;LIVE FROM MURRIETA · CA</div>
        {!m && <div>STATION 40575 · CEREALIOUSLY DELICIOUS · NOW SERVING</div>}
      </div>

      {/* Nav */}
      <div style={{
        position: "relative", zIndex: 5,
        display: "flex", justifyContent: "space-between", alignItems: "center",
        padding: m ? "16px 14px" : "22px 40px", gap: 10,
      }}>
        <div style={{ display: "flex", alignItems: "center", gap: 12, minWidth: 0 }}>
          <div style={{
            width: m ? 42 : 54, height: m ? 42 : 54, borderRadius: "50%",
            overflow: "hidden", flexShrink: 0,
            boxShadow: "0 0 24px rgba(233,30,132,0.7), inset 0 0 0 2px rgba(255,255,255,0.15)",
          }}>
            <img src="assets/logo.jpg" style={{ width: "100%", height: "100%", objectFit: "cover" }}/>
          </div>
          <div style={{ minWidth: 0 }}>
            <div style={{ ...CSstyles.display, fontSize: m ? 17 : 22,
              background: "linear-gradient(90deg,#2BA8E0,#FF4D9E)",
              WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent" }}>
              Twisted Spoons
            </div>
            <div style={{ ...CSstyles.mono, fontSize: m ? 9 : 10, color: "rgba(248,233,240,0.5)", letterSpacing: "0.25em" }}>
              ICE CREAM · CEREAL BAR
            </div>
          </div>
        </div>
        {!m && (
          <nav style={{ display: "flex", gap: 32, ...CSstyles.mono, fontSize: 12 }}>
            {["MENU","STORY","PARTIES","VISIT"].map(l => (
              <a key={l} href={`#${l.toLowerCase()}`} style={{ color: "#F8E9F0", textDecoration: "none", position: "relative" }}>{l}</a>
            ))}
          </nav>
        )}
        <CSButton small variant="primary" href="#menu">{m ? "ORDER →" : "ORDER ONLINE →"}</CSButton>
      </div>

      {/* Hero body */}
      <div style={{
        position: "relative", zIndex: 3,
        padding: m ? "40px 16px 40px" : "80px 40px 60px",
        display: "grid",
        gridTemplateColumns: m ? "1fr" : "1.1fr 0.9fr",
        gap: m ? 40 : 60, alignItems: "center",
      }}>
        <div>
          <div style={{ display: "flex", gap: 8, marginBottom: m ? 20 : 26, flexWrap: "wrap" }}>
            <CSTag color="#2BA8E0">NOW OPEN</CSTag>
            <CSTag color="#FF4D9E">20 SIGNATURE SWIRLS</CSTag>
            <CSTag color="#FFD23F">DAIRY FREE · YES</CSTag>
          </div>
          <h1 style={{ ...CSstyles.display, fontSize: m ? 64 : 140, margin: "0 0 6px", lineHeight: 0.88 }}>
            <span style={{ color: "#F8E9F0" }}>ICE CREAM</span><br/>
            <span style={{ ...CSstyles.script, fontSize: m ? 38 : 72, color: "#FFD23F", display: "inline-block", transform: m ? "rotate(-4deg) translate(4px,-4px)" : "rotate(-4deg) translate(10px,-6px)", margin: m ? "-4px 0" : "-10px 0" }}>among</span><br/>
            <span style={{
              background: "linear-gradient(90deg,#FF4D9E 0%,#FFD23F 50%,#2BA8E0 100%)",
              WebkitBackgroundClip: "text",
              WebkitTextFillColor: "transparent",
              filter: "drop-shadow(0 0 40px rgba(255,77,158,0.5))",
            }}>THE STARS.</span>
          </h1>
          <p style={{ fontSize: m ? 16 : 20, lineHeight: 1.55, color: "rgba(248,233,240,0.85)", maxWidth: 560, margin: m ? "28px 0 28px" : "36px 0 36px" }}>
            Hand-swirled ice cream blended with your favorite cereals, made to order in a tiny Murrieta shop with a cereal-box wall and a spacesuit on the back wall.
          </p>
          <div style={{ display: "flex", gap: 12, flexWrap: "wrap", alignItems: "center" }}>
            <CSButton variant="primary" href="#menu">SEE THE 20 SWIRLS →</CSButton>
            <CSButton variant="ghost" href="#visit">VISIT THE SHOP</CSButton>
            {!m && (
              <div style={{ ...CSstyles.mono, fontSize: 10, color: "rgba(248,233,240,0.45)", marginLeft: 8, letterSpacing: "0.25em", lineHeight: 1.5 }}>
                40575 CA OAKS RD<br/>STE D-3 · MURRIETA
              </div>
            )}
          </div>
        </div>

        {/* Right: big product vignette with orbital swirls */}
        <div style={{ position: "relative", height: m ? 360 : 640, marginTop: m ? 10 : 0 }}>
          <svg viewBox="0 0 600 600" style={{ position: "absolute", inset: 0, width: "100%", height: "100%" }}>
            <defs>
              <radialGradient id="ring-glow" cx="50%" cy="50%" r="50%">
                <stop offset="0%" stopColor="rgba(255,77,158,0)"/>
                <stop offset="85%" stopColor="rgba(255,77,158,0.3)"/>
                <stop offset="100%" stopColor="rgba(255,77,158,0)"/>
              </radialGradient>
            </defs>
            <circle cx="300" cy="300" r="280" fill="none" stroke="rgba(43,168,224,0.3)" strokeWidth="1.5"/>
            <circle cx="300" cy="300" r="220" fill="none" stroke="rgba(255,77,158,0.35)" strokeWidth="1.5" strokeDasharray="4 6"/>
            <circle cx="300" cy="300" r="180" fill="none" stroke="rgba(255,210,63,0.2)" strokeWidth="1"/>
            <circle cx="580" cy="300" r="4" fill="#2BA8E0">
              <animateTransform attributeName="transform" type="rotate" from="0 300 300" to="360 300 300" dur="40s" repeatCount="indefinite"/>
            </circle>
            <circle cx="80" cy="300" r="3" fill="#FF4D9E">
              <animateTransform attributeName="transform" type="rotate" from="0 300 300" to="-360 300 300" dur="28s" repeatCount="indefinite"/>
            </circle>
            <circle cx="300" cy="120" r="3" fill="#FFD23F">
              <animateTransform attributeName="transform" type="rotate" from="0 300 300" to="360 300 300" dur="32s" repeatCount="indefinite"/>
            </circle>
          </svg>

          <div style={{
            position: "absolute", inset: "20% 20%", borderRadius: "50%",
            overflow: "hidden",
            boxShadow: "0 0 80px rgba(233,30,132,0.5), inset 0 0 0 4px rgba(255,255,255,0.1), inset 0 -30px 80px rgba(0,0,0,0.5)",
          }}>
            <img src="assets/product1.jpg" style={{ width: "100%", height: "100%", objectFit: "cover" }}
              onError={(e) => { e.currentTarget.style.display = "none"; e.currentTarget.parentElement.style.background = "linear-gradient(135deg,#FF4D9E,#2BA8E0)"; }} />
          </div>

          <div style={{
            position: "absolute", top: m ? 16 : 40, right: m ? 10 : 30,
            width: m ? 80 : 120, height: m ? 80 : 120, borderRadius: "50%",
            overflow: "hidden",
            border: "2px solid rgba(255,255,255,0.15)",
            boxShadow: "0 0 32px rgba(43,168,224,0.6)",
          }}>
            <img src="assets/product4.jpg" style={{ width: "100%", height: "100%", objectFit: "cover" }}
              onError={(e) => { e.currentTarget.style.display = "none"; }} />
          </div>

          <div style={{
            position: "absolute", top: m ? 14 : 30, left: m ? 0 : 10,
            background: "rgba(10,15,31,0.92)", border: "1.5px solid rgba(255,77,158,0.5)",
            padding: m ? "8px 12px" : "12px 18px", borderRadius: 12,
            boxShadow: "0 0 24px rgba(255,77,158,0.35)",
            backdropFilter: "blur(8px)",
          }}>
            <div style={{ ...CSstyles.mono, fontSize: m ? 9 : 10, color: "#FF4D9E", letterSpacing: "0.2em" }}>SWIRL CUP</div>
            <div style={{ ...CSstyles.display, fontSize: m ? 24 : 36 }}>$8</div>
          </div>
          <div style={{
            position: "absolute", bottom: m ? 26 : 40, right: m ? 0 : -10,
            background: "rgba(10,15,31,0.92)", border: "1.5px solid rgba(43,168,224,0.5)",
            padding: m ? "8px 12px" : "12px 18px", borderRadius: 12,
            boxShadow: "0 0 24px rgba(43,168,224,0.35)",
            backdropFilter: "blur(8px)",
          }}>
            <div style={{ ...CSstyles.mono, fontSize: m ? 9 : 10, color: "#2BA8E0", letterSpacing: "0.2em" }}>SHAKE · 20oz</div>
            <div style={{ ...CSstyles.display, fontSize: m ? 24 : 36 }}>$10</div>
          </div>
          <div style={{ position: "absolute", bottom: m ? -6 : -10, left: m ? -10 : -20 }}>
            <CSSwirl size={m ? 84 : 130}/>
          </div>
        </div>
      </div>

      {/* Stats strip at bottom of hero */}
      <div style={{
        position: "relative", zIndex: 3,
        borderTop: "1px solid rgba(255,255,255,0.08)",
        background: "rgba(0,0,0,0.3)", backdropFilter: "blur(10px)",
        padding: m ? "20px 16px" : "24px 40px",
        display: "grid", gridTemplateColumns: m ? "repeat(2, 1fr)" : "repeat(4, 1fr)", gap: m ? 16 : 20,
      }}>
        {[
          { n: "20", l: "SIGNATURE SWIRLS", c: "#FF4D9E" },
          { n: "50+", l: "CEREALS ON THE WALL", c: "#2BA8E0" },
          { n: "∞", l: "COMBOS TO INVENT", c: "#FFD23F" },
          { n: "1", l: "WILD MURRIETA SHOP", c: "#8B5CF6" },
        ].map((it, i) => (
          <div key={i} style={{ display: "flex", alignItems: "center", gap: m ? 10 : 14 }}>
            <div style={{ ...CSstyles.display, fontSize: m ? 36 : 54, color: it.c, lineHeight: 1, filter: `drop-shadow(0 0 14px ${it.c})` }}>{it.n}</div>
            <div style={{ ...CSstyles.mono, fontSize: m ? 9 : 10, letterSpacing: "0.25em", color: "rgba(248,233,240,0.65)" }}>{it.l}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

function CSBoxBand() {
  const m = useIsMobile();
  return (
    <section style={{
      position: "relative",
      background: "linear-gradient(180deg, #05081A 0%, #0A0F1F 50%, #05081A 100%)",
      padding: m ? "28px 0" : "40px 0",
      overflow: "hidden",
      borderTop: "1px solid rgba(255,255,255,0.06)",
      borderBottom: "1px solid rgba(255,255,255,0.06)",
    }}>
      <CSStars density={40} seed={17}/>
      <div style={{ textAlign: "center", marginBottom: m ? 14 : 20, position: "relative", padding: "0 16px" }}>
        <div style={{ ...CSstyles.mono, fontSize: m ? 9 : 11, color: "rgba(248,233,240,0.5)", letterSpacing: "0.3em" }}>
          ★ THE CEREAL CATALOG · 50+ BOXES ★
        </div>
      </div>
      <div style={{
        position: "relative", overflow: "hidden",
        maskImage: "linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent)",
        WebkitMaskImage: "linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent)",
      }}>
        <div style={{
          display: "flex",
          width: "fit-content",
          animation: "cs-box-marq 90s linear infinite",
        }}>
          {[1,2,3,1,2,3].map((n, i) => (
            <img key={i}
              src={n === 1 ? "assets/cereal-collage-1.jpg" : n === 2 ? "assets/cereal-collage-2.jpg" : "assets/cereal-collage-3.webp"}
              style={{
                height: m ? 140 : 220,
                width: "auto",
                display: "block",
                marginRight: 8,
                boxShadow: "inset 0 0 0 1px rgba(255,255,255,0.08)",
              }}
            />
          ))}
        </div>
        <style>{`@keyframes cs-box-marq { from {transform: translateX(0);} to {transform: translateX(-50%);} }`}</style>
      </div>
    </section>
  );
}

function CSSwirlOfWeek() {
  const m = useIsMobile();
  const d = window.TS_DATA;
  const s = d.swirls.find(x => x.n === 11);
  return (
    <section style={{
      position: "relative",
      padding: m ? "60px 16px" : "90px 40px",
      background: "radial-gradient(ellipse at 80% 20%, #2a0f55 0%, #05081A 70%)",
      overflow: "hidden",
    }}>
      <CSStars density={m ? 40 : 80} seed={42}/>
      <CSAurora style={{ opacity: 0.55 }}/>

      <div style={{ position: "relative", zIndex: 3, display: "grid", gridTemplateColumns: m ? "1fr" : "0.95fr 1fr", gap: m ? 36 : 70, alignItems: "center" }}>
        <div style={{ position: "relative" }}>
          <div style={{ position: "absolute", top: -14, left: 14, zIndex: 5 }}>
            <CSTag color="#FFD23F">★ BROADCAST · WEEK 42 ★</CSTag>
          </div>
          <CSScanlines style={{
            borderRadius: m ? 18 : 22,
            background: "#0A0F1F",
            border: "2px solid rgba(255,210,63,0.35)",
            boxShadow: "0 0 60px rgba(255,210,63,0.25), inset 0 0 0 1px rgba(255,255,255,0.05)",
            padding: m ? 10 : 14,
          }}>
            <div style={{
              position: "relative",
              aspectRatio: "1/1",
              borderRadius: m ? 12 : 14,
              overflow: "hidden",
              background: "linear-gradient(135deg, #FF4D9E, #2BA8E0)",
            }}>
              <img src="assets/product3.jpg" style={{ width: "100%", height: "100%", objectFit: "cover" }}
                onError={(e) => { e.currentTarget.style.display = "none"; }} />
              <div style={{
                position: "absolute", top: 12, left: 12,
                display: "flex", alignItems: "center", gap: 6,
                ...CSstyles.mono, fontSize: 10, color: "#FF4D9E",
                background: "rgba(0,0,0,0.6)", padding: "4px 8px", borderRadius: 4,
              }}>
                <span style={{ width: 8, height: 8, borderRadius: 4, background: "#FF4D9E", boxShadow: "0 0 8px #FF4D9E", animation: "cs-rec 1.5s ease-in-out infinite" }}/>
                REC · 0:42
              </div>
              <div style={{
                position: "absolute", bottom: 12, right: 12,
                ...CSstyles.mono, fontSize: 10, color: "#FFD23F",
                background: "rgba(0,0,0,0.6)", padding: "4px 8px", borderRadius: 4,
              }}>
                TSBC-11 · LIVE
              </div>
            </div>
          </CSScanlines>
          <style>{`@keyframes cs-rec { 50% { opacity: 0.2; } }`}</style>
          <div style={{
            margin: "0 auto",
            width: "60%", height: 18,
            background: "linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02))",
            borderRadius: "0 0 14px 14px",
            borderTop: "1px solid rgba(255,255,255,0.1)",
          }}/>
        </div>

        <div>
          <div style={{ ...CSstyles.mono, fontSize: m ? 10 : 11, color: "#FFD23F", letterSpacing: "0.3em", marginBottom: 10 }}>
            SWIRL OF THE WEEK · No.{String(s.n).padStart(2,"0")}
          </div>
          <h2 style={{
            ...CSstyles.display, fontSize: m ? 56 : 128, margin: "0 0 20px", lineHeight: 0.88,
            background: "linear-gradient(135deg,#fff 0%, #FFD23F 40%, #FF4D9E 100%)",
            WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent",
            filter: "drop-shadow(0 0 40px rgba(255,210,63,0.35))",
          }}>
            {s.name.toUpperCase()}
          </h2>
          <div style={{
            background: "rgba(255,255,255,0.04)",
            border: "1px solid rgba(255,255,255,0.12)",
            padding: m ? 18 : 26, borderRadius: 16, backdropFilter: "blur(12px)",
            maxWidth: 520, marginBottom: 22,
          }}>
            <div style={{ display: "grid", gridTemplateColumns: "auto 1fr", gap: "10px 14px", fontSize: m ? 14 : 16, lineHeight: 1.4 }}>
              <div style={{...CSstyles.mono, fontSize: 10, color: "#2BA8E0", letterSpacing: "0.25em", paddingTop: 3}}>BASE</div>
              <div>{s.base} ice cream</div>
              <div style={{...CSstyles.mono, fontSize: 10, color: "#2BA8E0", letterSpacing: "0.25em", paddingTop: 3}}>BLEND</div>
              <div>{s.blend}</div>
              <div style={{...CSstyles.mono, fontSize: 10, color: "#2BA8E0", letterSpacing: "0.25em", paddingTop: 3}}>TOP</div>
              <div>{s.top}</div>
              <div style={{...CSstyles.mono, fontSize: 10, color: "#FF4D9E", letterSpacing: "0.25em", paddingTop: 3}}>DRIZZLE</div>
              <div>{s.drizzle}</div>
            </div>
          </div>
          <div style={{ display: "flex", gap: 12, alignItems: "center", flexWrap: "wrap" }}>
            <CSButton variant="gold" href="#menu">ORDER THIS SWIRL →</CSButton>
            <div style={{ ...CSstyles.script, fontSize: m ? 24 : 30, color: "#FF4D9E", transform: "rotate(-4deg)" }}>
              only this week!
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function CSMenu() {
  const m = useIsMobile();
  const d = window.TS_DATA;
  const [hovered, setHovered] = React.useState(null);
  const [selected, setSelected] = React.useState(1);
  const s = d.swirls.find(x => x.n === selected);

  const positions = [
    { x: 12, y: 20 },  { x: 25, y: 14 }, { x: 38, y: 22 }, { x: 52, y: 12 }, { x: 68, y: 18 },
    { x: 82, y: 24 },  { x: 90, y: 38 }, { x: 78, y: 46 }, { x: 64, y: 40 }, { x: 50, y: 48 },
    { x: 36, y: 42 },  { x: 20, y: 48 }, { x: 8,  y: 56 }, { x: 22, y: 68 }, { x: 38, y: 72 },
    { x: 52, y: 66 },  { x: 66, y: 74 }, { x: 80, y: 68 }, { x: 90, y: 82 }, { x: 70, y: 88 },
  ];

  const connections = [
    [0,1],[1,2],[2,3],[3,4],[4,5],[5,6],[6,7],[7,8],[8,9],[9,10],[10,11],
    [11,12],[12,13],[13,14],[14,15],[15,16],[16,17],[17,18],[18,19],
    [2,10],[4,8],[10,15],[14,19]
  ];

  return (
    <section id="menu" style={{
      position: "relative",
      background: "radial-gradient(ellipse at center, #0D0930 0%, #05081A 70%)",
      padding: m ? "60px 16px 70px" : "90px 40px 100px",
      overflow: "hidden",
    }}>
      <CSStars density={m ? 60 : 120} seed={99}/>

      <div style={{ textAlign: "center", marginBottom: 18, position: "relative" }}>
        <CSTag color="#2BA8E0">THE CONSTELLATION MENU</CSTag>
        <h2 style={{
          ...CSstyles.display, fontSize: m ? 48 : 104, margin: "16px 0 0", lineHeight: 0.9,
        }}>
          <span style={{
            background: "linear-gradient(90deg,#FF4D9E,#FFD23F,#2BA8E0)",
            WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent",
          }}>TWENTY SWIRLS.</span><br/>
          ONE UNIVERSE.
        </h2>
        <div style={{ ...CSstyles.mono, fontSize: m ? 10 : 12, color: "rgba(248,233,240,0.5)", marginTop: 12, letterSpacing: "0.2em" }}>
          {m ? "TAP A CARD TO OPEN" : "HOVER A STAR TO PREVIEW · CLICK TO OPEN"}
        </div>
      </div>

      {/* Formats strip */}
      <div style={{ display: "grid", gridTemplateColumns: m ? "repeat(2, 1fr)" : "repeat(4,1fr)", gap: m ? 10 : 12, marginTop: m ? 22 : 28, marginBottom: m ? 28 : 36, maxWidth: 900, marginLeft: "auto", marginRight: "auto" }}>
        {d.formats.map((f, i) => {
          const colors = ["#FF4D9E","#2BA8E0","#FFD23F","#8B5CF6"];
          return (
            <div key={i} style={{
              background: "rgba(255,255,255,0.03)",
              border: `1.5px solid ${colors[i]}44`,
              borderRadius: 12, padding: m ? "12px 14px" : "14px 18px",
              textAlign: "center",
              boxShadow: `0 0 18px ${colors[i]}22`,
            }}>
              <div style={{ ...CSstyles.mono, fontSize: m ? 9 : 10, color: colors[i], letterSpacing: "0.25em" }}>{f.name.toUpperCase()}</div>
              <div style={{ ...CSstyles.display, fontSize: m ? 24 : 32, marginTop: 4 }}>{f.price}</div>
              <div style={{ fontSize: m ? 10 : 11, color: "rgba(248,233,240,0.5)" }}>{f.size}</div>
            </div>
          );
        })}
      </div>

      {/* Constellation sky — desktop only; mobile uses tile grid */}
      {!m && (
        <div style={{
          position: "relative",
          aspectRatio: "2/1",
          background: "radial-gradient(ellipse at 30% 20%, rgba(139,92,246,0.2) 0%, transparent 50%), radial-gradient(ellipse at 70% 70%, rgba(255,77,158,0.15) 0%, transparent 50%)",
          border: "1px solid rgba(255,255,255,0.08)",
          borderRadius: 20,
          overflow: "hidden",
          marginBottom: 28,
        }}>
          <CSStars density={160} seed={7}/>
          <svg viewBox="0 0 100 50" preserveAspectRatio="none" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", pointerEvents: "none" }}>
            {connections.map(([a,b], i) => {
              const pa = positions[a], pb = positions[b];
              return (
                <line key={i}
                  x1={pa.x} y1={pa.y/2}
                  x2={pb.x} y2={pb.y/2}
                  stroke="rgba(43,168,224,0.35)"
                  strokeWidth="0.08"
                  strokeDasharray="0.5 0.6"
                />
              );
            })}
          </svg>

          {d.swirls.map((sw, i) => {
            const p = positions[i];
            const isHov = hovered === sw.n;
            const isSel = selected === sw.n;
            const colors = ["#FF4D9E","#2BA8E0","#FFD23F","#8B5CF6","#10D9B5"];
            const c = colors[i % colors.length];
            return (
              <button
                key={sw.n}
                onMouseEnter={() => setHovered(sw.n)}
                onMouseLeave={() => setHovered(null)}
                onClick={() => setSelected(sw.n)}
                style={{
                  position: "absolute",
                  left: `${p.x}%`, top: `${p.y}%`,
                  transform: "translate(-50%,-50%)",
                  background: "transparent",
                  border: "none",
                  padding: 0,
                  cursor: "pointer",
                  fontFamily: "inherit",
                  color: "#fff",
                  zIndex: isHov || isSel ? 5 : 2,
                }}
              >
                <div style={{
                  position: "relative",
                  width: isSel ? 22 : isHov ? 18 : 12, height: isSel ? 22 : isHov ? 18 : 12,
                  borderRadius: "50%",
                  background: c,
                  boxShadow: `0 0 ${isSel ? 30 : isHov ? 20 : 10}px ${c}, 0 0 4px #fff`,
                  transition: "all .2s",
                  margin: "0 auto",
                }}/>
                <div style={{
                  ...CSstyles.mono, fontSize: 8, color: "rgba(248,233,240,0.5)",
                  marginTop: 4, letterSpacing: "0.15em", textAlign: "center",
                }}>#{String(sw.n).padStart(2,"0")}</div>
                <div style={{
                  ...CSstyles.display, fontSize: isSel || isHov ? 14 : 11,
                  color: isSel ? c : "#F8E9F0",
                  marginTop: 2, whiteSpace: "nowrap", textAlign: "center",
                  textShadow: "0 0 6px rgba(0,0,0,0.8)",
                  transition: "all .2s",
                }}>
                  {sw.name.toUpperCase()}
                </div>
              </button>
            );
          })}
        </div>
      )}

      {/* Mobile: swirl-tile grid (2-col) */}
      {m && (
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10, marginBottom: 24 }}>
          {d.swirls.map((sw, i) => {
            const colors = ["#FF4D9E","#2BA8E0","#FFD23F","#8B5CF6","#10D9B5"];
            const c = colors[i % colors.length];
            const isSel = selected === sw.n;
            return (
              <button key={sw.n} onClick={() => setSelected(sw.n)} style={{
                background: isSel ? `linear-gradient(135deg, ${c}33, transparent)` : "rgba(255,255,255,0.03)",
                border: `1.5px solid ${isSel ? c : 'rgba(255,255,255,0.1)'}`,
                borderRadius: 10,
                padding: "12px 12px",
                color: "#F8E9F0",
                textAlign: "left", cursor: "pointer",
                fontFamily: "inherit",
                boxShadow: isSel ? `0 0 20px ${c}44` : "none",
              }}>
                <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 4 }}>
                  <span style={{ ...CSstyles.mono, fontSize: 9, color: c, letterSpacing: "0.2em" }}>#{String(sw.n).padStart(2,"0")}</span>
                  <span style={{ fontSize: 18 }}>{sw.emoji}</span>
                </div>
                <div style={{ ...CSstyles.display, fontSize: 14, lineHeight: 1, color: isSel ? c : "#F8E9F0" }}>
                  {sw.name.toUpperCase()}
                </div>
              </button>
            );
          })}
        </div>
      )}

      {/* Selected detail card */}
      <div style={{
        background: "linear-gradient(135deg, rgba(255,77,158,0.15), rgba(43,168,224,0.12))",
        border: "1px solid rgba(255,255,255,0.15)",
        borderRadius: 18,
        padding: m ? 20 : 32,
        display: "grid",
        gridTemplateColumns: m ? "auto 1fr" : "auto 1fr auto",
        gridTemplateAreas: m ? '"emoji info" "cta cta"' : '"emoji info cta"',
        gap: m ? "14px 18px" : "32px", alignItems: "center",
        backdropFilter: "blur(14px)",
        boxShadow: "0 0 40px rgba(255,77,158,0.15)",
      }}>
        <div style={{ fontSize: m ? 48 : 72, gridArea: "emoji" }}>{s.emoji}</div>
        <div style={{ gridArea: "info" }}>
          <div style={{ ...CSstyles.mono, fontSize: m ? 10 : 11, color: "#FF4D9E", letterSpacing: "0.25em", marginBottom: 4 }}>
            No. {String(s.n).padStart(2,"0")} · NOW SELECTED
          </div>
          <div style={{
            ...CSstyles.display, fontSize: m ? 30 : 48, lineHeight: 0.95, marginBottom: 8,
            background: "linear-gradient(180deg,#fff,#FF4D9E)",
            WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent",
          }}>
            {s.name.toUpperCase()}
          </div>
          <div style={{ fontSize: m ? 13 : 14, lineHeight: 1.5, color: "rgba(248,233,240,0.85)", maxWidth: 640 }}>
            <strong style={{color:"#2BA8E0"}}>{s.base}</strong> base · blended with <strong>{s.blend}</strong> · topped with <strong>{s.top}</strong> · drizzled with <strong style={{color:"#FF4D9E"}}>{s.drizzle}</strong>
          </div>
        </div>
        <div style={{ gridArea: "cta", marginTop: m ? 6 : 0 }}>
          <CSButton variant="primary" href="#menu">ADD TO ORDER</CSButton>
        </div>
      </div>

      <div style={{ textAlign: "center", marginTop: 22, ...CSstyles.mono, fontSize: m ? 10 : 11, color: "rgba(248,233,240,0.45)", letterSpacing: "0.25em" }}>
        ★ ALL 20 SWIRLS DAIRY FREE · ASK AT THE COUNTER ★
      </div>
    </section>
  );
}

function CSStory() {
  const m = useIsMobile();
  return (
    <section id="story" style={{
      position: "relative",
      background: "radial-gradient(ellipse at 70% 40%, #2a1555 0%, #05081A 60%)",
      padding: m ? "60px 16px" : "90px 40px",
      overflow: "hidden",
    }}>
      <CSStars density={m ? 40 : 90} seed={200}/>
      <div style={{ display: "grid", gridTemplateColumns: m ? "1fr" : "1fr 1.1fr", gap: m ? 36 : 60, alignItems: "center", position: "relative", zIndex: 2 }}>
        <div>
          <CSTag color="#FFD23F">THE STORY</CSTag>
          <h2 style={{ ...CSstyles.display, fontSize: m ? 48 : 92, margin: "16px 0 24px", lineHeight: 0.9 }}>
            A FAMILY SHOP,<br/>
            <span style={{
              background: "linear-gradient(90deg,#FF4D9E,#FFD23F)",
              WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent",
              filter: "drop-shadow(0 0 30px rgba(255,210,63,0.35))",
            }}>OUT OF THIS WORLD.</span>
          </h2>
          <p style={{ fontSize: m ? 15 : 18, lineHeight: 1.7, color: "rgba(248,233,240,0.85)", maxWidth: 560, marginBottom: 16 }}>
            We're a small family shop in Murrieta built around one simple idea: ice cream is better with cereal in it. So we built a place with a cereal-box wall, a waffle-cone bench, and a spacesuit on the back wall — and we hand-swirl every single scoop to order, right in front of you.
          </p>
          <p style={{ fontSize: m ? 15 : 18, lineHeight: 1.7, color: "rgba(248,233,240,0.85)", maxWidth: 560 }}>
            Come on a Saturday morning. Bring your kid. Bring yourself as a kid. We'll get you swirled.
          </p>
          <div style={{ ...CSstyles.script, fontSize: m ? 26 : 34, color: "#FFD23F", marginTop: 22, transform: "rotate(-2deg)" }}>
            — The Twisted Spoons fam
          </div>
        </div>
        <div style={{ position: "relative", height: m ? 380 : 560, display: "flex", alignItems: "center", justifyContent: "center" }}>
          <div style={{
            width: m ? "100%" : 480, height: m ? 380 : 560, borderRadius: m ? 18 : 22,
            overflow: "hidden",
            boxShadow: "0 0 80px rgba(43,168,224,0.35)",
            border: "1.5px solid rgba(255,255,255,0.1)",
            background: "#1a1145",
          }}>
            <img src="assets/astronaut-wall.jpg" style={{ width: "100%", height: "100%", objectFit: "cover" }}
              onError={(e) => { e.currentTarget.style.display = "none"; }} />
          </div>
          <div style={{
            position: "absolute", top: 20, left: m ? 8 : -24,
            background: "rgba(10,15,31,0.92)",
            border: "1.5px solid rgba(43,168,224,0.5)",
            borderRadius: 10, padding: m ? "8px 12px" : "10px 14px",
            ...CSstyles.mono, fontSize: m ? 9 : 11, color: "#2BA8E0", letterSpacing: "0.2em",
            boxShadow: "0 0 22px rgba(43,168,224,0.35)",
            backdropFilter: "blur(8px)",
          }}>★ THE ASTRONAUT WALL</div>
          <div style={{
            position: "absolute", bottom: 30, right: m ? 8 : -24,
            background: "rgba(10,15,31,0.92)",
            border: "1.5px solid rgba(255,77,158,0.5)",
            borderRadius: 10, padding: m ? "8px 12px" : "10px 14px",
            ...CSstyles.mono, fontSize: m ? 9 : 11, color: "#FF4D9E", letterSpacing: "0.2em",
            boxShadow: "0 0 22px rgba(255,77,158,0.35)",
            backdropFilter: "blur(8px)",
          }}>★ MASCOT ON WEEKENDS</div>
        </div>
      </div>
    </section>
  );
}

function CSGallery() {
  const m = useIsMobile();
  const items = [
    { src: "assets/product1.jpg", label: "BERRY TALE CRUMBLE", c: "#FF4D9E" },
    { src: "assets/product3.jpg", label: "SHAKE TIME", c: "#2BA8E0" },
    { src: "assets/product4.jpg", label: "PEBBLES / GREEN", c: "#10D9B5" },
    { src: "assets/product5.jpg", label: "CAPT. REESE", c: "#FFD23F" },
    { src: "assets/product2.jpg", label: "#18 SMASHER", c: "#8B5CF6" },
    { src: "assets/product6.jpg", label: "STRAWBERRY STACK", c: "#FF4D9E" },
    { src: "assets/mascot-bench.jpg", label: "PHOTO-OP BENCH", c: "#FFD23F" },
    { src: "assets/astronaut-wall.jpg", label: "INSIDE THE SHOP", c: "#2BA8E0" },
  ];
  return (
    <section style={{
      background: "#05081A",
      padding: m ? "50px 16px" : "80px 40px",
      borderTop: "1px solid rgba(255,255,255,0.06)",
      position: "relative",
    }}>
      <div style={{
        display: "flex", flexDirection: m ? "column" : "row",
        justifyContent: "space-between", alignItems: m ? "flex-start" : "flex-end",
        gap: 16, marginBottom: m ? 24 : 32,
      }}>
        <div>
          <CSTag color="#FF4D9E">FROM THE SHOP</CSTag>
          <h2 style={{ ...CSstyles.display, fontSize: m ? 38 : 72, margin: m ? "12px 0 0" : "16px 0 0", lineHeight: 0.9 }}>
            SEEN AROUND<br/>THE ORBIT.
          </h2>
        </div>
        <CSButton variant="ghost" small href="https://instagram.com/twistedspoons" target="_blank">@TWISTEDSPOONS ↗</CSButton>
      </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={{
            aspectRatio: "1/1",
            borderRadius: m ? 10 : 14, overflow: "hidden",
            position: "relative",
            border: "1px solid rgba(255,255,255,0.08)",
            boxShadow: `0 0 24px ${it.c}22`,
          }}>
            <img src={it.src} style={{ width: "100%", height: "100%", objectFit: "cover" }}
              onError={(e) => { e.currentTarget.style.display = "none"; }}/>
            <div style={{
              position: "absolute", bottom: 0, left: 0, right: 0,
              padding: m ? "22px 10px 8px" : "30px 12px 10px",
              background: "linear-gradient(180deg, transparent, rgba(5,8,26,0.95))",
            }}>
              <div style={{ ...CSstyles.mono, fontSize: m ? 9 : 10, color: it.c, letterSpacing: "0.2em" }}>{it.label}</div>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

function CSPartyModal({ open, onClose }) {
  const m = useIsMobile();
  const [status, setStatus] = React.useState('idle');
  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:'1px solid rgba(255,255,255,0.2)', fontSize:14, fontFamily:'Space Grotesk,system-ui,sans-serif', background:'rgba(255,255,255,0.07)', color:'#fff', outline:'none' };
  const lbl = { ...CSstyles.mono, fontSize:10, letterSpacing:'0.2em', color:'rgba(255,255,255,0.6)', display:'block', marginBottom:5 };
  return (
    <div onClick={reset} style={{ position:'fixed', inset:0, zIndex:10000, background:'rgba(5,5,14,0.85)', backdropFilter:'blur(8px)', display:'flex', alignItems:'center', justifyContent:'center', padding:16 }}>
      <div onClick={e => e.stopPropagation()} style={{ background:'linear-gradient(160deg,#0d0a24 0%,#1a0533 100%)', border:'1px solid rgba(139,92,246,0.4)', boxShadow:'0 0 60px rgba(139,92,246,0.3)', borderRadius:20, width:'100%', maxWidth:520, maxHeight:'90vh', overflowY:'auto', padding: m ? 20 : 36, position:'relative', color:'#fff' }}>
        <button onClick={reset} style={{ position:'absolute', top:14, right:14, background:'none', border:'none', color:'rgba(255,255,255,0.6)', fontSize:22, cursor:'pointer', lineHeight:1 }}>✕</button>
        {status === 'sent' ? (
          <div style={{ textAlign:'center', padding:'40px 20px' }}>
            <div style={{ fontSize:56 }}>🚀</div>
            <h3 style={{ ...CSstyles.display, fontSize:36, margin:'12px 0 10px', background:'linear-gradient(90deg,#8B5CF6,#2BA8E0)', WebkitBackgroundClip:'text', WebkitTextFillColor:'transparent' }}>REQUEST SENT!</h3>
            <p style={{ fontSize:15, lineHeight:1.6, color:'rgba(255,255,255,0.75)', marginBottom:24 }}>Your party is launching soon. We'll reach out within 24 hours to confirm your date.</p>
            <button onClick={reset} style={{ background:'linear-gradient(90deg,#8B5CF6,#2BA8E0)', color:'#fff', border:'none', borderRadius:999, padding:'13px 28px', ...CSstyles.display, fontSize:15, cursor:'pointer' }}>CLOSE ✕</button>
          </div>
        ) : (
          <>
            <div style={{ ...CSstyles.mono, fontSize:10, color:'#FFD23F', letterSpacing:'0.25em', marginBottom:8 }}>★ PARTY REQUEST ★</div>
            <h3 style={{ ...CSstyles.display, fontSize: m ? 30 : 42, margin:'0 0 20px', lineHeight:0.9 }}>BOOK THE<br/><span style={{ background:'linear-gradient(90deg,#8B5CF6,#2BA8E0)', WebkitBackgroundClip:'text', WebkitTextFillColor:'transparent' }}>WHOLE GALAXY.</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} style={{background:'#1a0533'}}>{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>
              <button type="submit" style={{ background:'linear-gradient(90deg,#8B5CF6,#2BA8E0)', color:'#fff', border:'none', borderRadius:999, padding:'14px 28px', ...CSstyles.display, fontSize:16, cursor:'pointer', letterSpacing:'0.03em' }}>
                {status === 'sending' ? 'SENDING…' : 'SEND REQUEST →'}
              </button>
            </form>
          </>
        )}
      </div>
    </div>
  );
}

function CSParties() {
  const m = useIsMobile();
  const [showForm, setShowForm] = React.useState(false);
  return (
    <section id="parties" style={{
      position: "relative",
      background: "linear-gradient(135deg, #E91E84 0%, #8B5CF6 45%, #2BA8E0 100%)",
      padding: m ? "60px 16px" : "100px 40px",
      overflow: "hidden",
    }}>
      <div style={{ position: "absolute", inset: 0, backgroundImage: "radial-gradient(circle at 1px 1px, rgba(255,255,255,0.22) 1px, transparent 1.5px)", backgroundSize: "26px 26px", opacity: 0.5 }}/>
      <div style={{ position: "relative", display: "grid", gridTemplateColumns: m ? "1fr" : "1fr 1fr", gap: m ? 36 : 50, alignItems: "center" }}>
        <div>
          <div style={{ ...CSstyles.mono, fontSize: m ? 10 : 11, color: "#FFD23F", letterSpacing: "0.3em", marginBottom: 14 }}>
            ★ PARTIES + PRIVATE EVENTS ★
          </div>
          <h2 style={{ ...CSstyles.display, fontSize: m ? 52 : 104, margin: "0 0 20px", lineHeight: 0.88, color: "#fff", textShadow: m ? "2px 2px 0 rgba(0,0,0,0.25)" : "4px 4px 0 rgba(0,0,0,0.25)" }}>
            BOOK THE<br/>WHOLE GALAXY.
          </h2>
          <p style={{ fontSize: m ? 15 : 19, lineHeight: 1.6, maxWidth: 520, color: "rgba(255,255,255,0.95)", marginBottom: 26 }}>
            Birthdays, graduations, team wins, or just because it's Tuesday. Reserve Twisted Spoons for your crew — we bring the mascot, the cereal wall, and the swirls. You bring the playlist.
          </p>
          <div style={{ display: "grid", gridTemplateColumns: m ? "1fr 1fr" : "repeat(2,1fr)", gap: m ? 8 : 10, maxWidth: 500, marginBottom: 24 }}>
            {[
              { t: "Up to 30 guests", s: "90 min private shop" },
              { t: "Custom swirl bar", s: "pick your cereals" },
              { t: "Mascot on request", s: "photo-op bench ready" },
              { t: "From $240", s: "+ $8/guest over 10" },
            ].map((it, i) => (
              <div key={i} style={{
                background: "rgba(0,0,0,0.22)",
                backdropFilter: "blur(10px)",
                border: "1px solid rgba(255,255,255,0.22)",
                borderRadius: 12, padding: m ? "10px 12px" : "14px 18px",
              }}>
                <div style={{ ...CSstyles.display, fontSize: m ? 13 : 17, color: "#fff" }}>{it.t.toUpperCase()}</div>
                <div style={{ fontSize: m ? 11 : 12, color: "rgba(255,255,255,0.8)", marginTop: 3 }}>{it.s}</div>
              </div>
            ))}
          </div>
          <a href="#" onClick={e => { e.preventDefault(); setShowForm(true); }} style={{
            display: "inline-flex", alignItems: "center", gap: 10,
            background: "#05081A", color: "#fff",
            padding: m ? "13px 22px" : "16px 30px", borderRadius: 999,
            ...CSstyles.display, fontSize: m ? 15 : 17, textDecoration: "none",
            boxShadow: "0 12px 40px rgba(0,0,0,0.35)",
          }}>REQUEST A PARTY DATE →</a>
        </div>

        {/* Boarding pass / ticket stub */}
        <div style={{
          position: "relative",
          background: "#FEF3C7",
          color: "#1A0A2E",
          borderRadius: 16,
          padding: "0",
          boxShadow: m ? "8px 8px 0 rgba(0,0,0,0.25), 0 0 60px rgba(255,210,63,0.4)" : "12px 12px 0 rgba(0,0,0,0.25), 0 0 60px rgba(255,210,63,0.4)",
          transform: "rotate(-2deg)",
          overflow: "hidden",
          fontFamily: CSstyles.mono.fontFamily,
        }}>
          <div style={{
            position: "absolute", left: "68%", top: 0, bottom: 0,
            borderLeft: "2px dashed rgba(26,10,46,0.25)",
          }}/>
          <div style={{
            position: "absolute", left: "68%", top: "50%",
            transform: "translate(-50%,-50%)",
            width: 26, height: 26, borderRadius: "50%",
            background: "linear-gradient(135deg, #E91E84 0%, #8B5CF6 100%)",
          }}/>
          <div style={{ display: "grid", gridTemplateColumns: "2fr 1fr", minHeight: m ? 280 : 360 }}>
            <div style={{ padding: m ? "18px 20px" : "24px 28px" }}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 14 }}>
                <div style={{ fontSize: m ? 8 : 10, letterSpacing: "0.3em", color: "rgba(26,10,46,0.6)" }}>★ BOARDING PASS ★</div>
                <div style={{ fontSize: m ? 8 : 10, letterSpacing: "0.3em", color: "#E91E84" }}>GROUND CTRL</div>
              </div>
              <div style={{ ...CSstyles.display, fontSize: m ? 32 : 46, lineHeight: 0.95, marginBottom: 4, color: "#1A0A2E" }}>
                CEREAL BOWL
              </div>
              <div style={{ ...CSstyles.display, fontSize: m ? 16 : 22, color: "#E91E84", marginBottom: 14 }}>
                PRIVATE LAUNCH
              </div>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "10px 14px", fontSize: m ? 11 : 13 }}>
                <div>
                  <div style={{ fontSize: m ? 8 : 9, letterSpacing: "0.3em", color: "rgba(26,10,46,0.55)" }}>FROM</div>
                  <div style={{ ...CSstyles.display, fontSize: m ? 15 : 20 }}>HOME</div>
                </div>
                <div>
                  <div style={{ fontSize: m ? 8 : 9, letterSpacing: "0.3em", color: "rgba(26,10,46,0.55)" }}>TO</div>
                  <div style={{ ...CSstyles.display, fontSize: m ? 15 : 20 }}>TSBC-01</div>
                </div>
                <div>
                  <div style={{ fontSize: m ? 8 : 9, letterSpacing: "0.3em", color: "rgba(26,10,46,0.55)" }}>DURATION</div>
                  <div style={{ fontSize: m ? 12 : 15, fontWeight: 600 }}>90 MIN</div>
                </div>
                <div>
                  <div style={{ fontSize: m ? 8 : 9, letterSpacing: "0.3em", color: "rgba(26,10,46,0.55)" }}>SIZE</div>
                  <div style={{ fontSize: m ? 12 : 15, fontWeight: 600 }}>UP TO 30</div>
                </div>
                <div>
                  <div style={{ fontSize: m ? 8 : 9, letterSpacing: "0.3em", color: "rgba(26,10,46,0.55)" }}>MASCOT</div>
                  <div style={{ fontSize: m ? 12 : 15, fontWeight: 600 }}>ON REQUEST</div>
                </div>
                <div>
                  <div style={{ fontSize: m ? 8 : 9, letterSpacing: "0.3em", color: "rgba(26,10,46,0.55)" }}>FROM</div>
                  <div style={{ ...CSstyles.display, fontSize: m ? 15 : 20, color: "#E91E84" }}>$240</div>
                </div>
              </div>
              <div style={{ marginTop: m ? 14 : 20, display: "flex", gap: 1, alignItems: "flex-end", height: m ? 22 : 28 }}>
                {[3,2,4,1,3,5,2,4,3,1,2,4,5,2,3,4,1,3,2,5,3,2,4,2,3,5,1,3,4,2,3].map((w,i) => (
                  <div key={i} style={{ width: w, height: "100%", background: "#1A0A2E" }}/>
                ))}
              </div>
              <div style={{ fontSize: m ? 8 : 10, letterSpacing: "0.25em", marginTop: 4, color: "rgba(26,10,46,0.6)" }}>TSBC · 951 · 239 · 0390</div>
            </div>
            <div style={{
              background: "linear-gradient(135deg, #FFD23F 0%, #F59E0B 100%)",
              padding: m ? "16px 12px" : "24px 18px", textAlign: "center",
              display: "flex", flexDirection: "column", justifyContent: "space-between",
            }}>
              <div style={{ fontSize: m ? 8 : 9, letterSpacing: "0.3em" }}>★ GATE ★</div>
              <div>
                <div style={{ ...CSstyles.display, fontSize: m ? 40 : 56, lineHeight: 0.9 }}>D-3</div>
                <div style={{ fontSize: m ? 8 : 10, letterSpacing: "0.2em", marginTop: 4 }}>CA OAKS RD</div>
              </div>
              <div style={{ fontSize: m ? 8 : 9, letterSpacing: "0.3em" }}>MURRIETA</div>
            </div>
          </div>
        </div>
      </div>
      <CSPartyModal open={showForm} onClose={() => setShowForm(false)} />
    </section>
  );
}

function CSVisit() {
  const m = useIsMobile();
  const d = window.TS_DATA;
  return (
    <section id="visit" style={{
      position: "relative",
      background: "radial-gradient(ellipse at 20% 50%, #1a0f45 0%, #05081A 65%)",
      padding: m ? "60px 16px" : "90px 40px",
      overflow: "hidden",
    }}>
      <CSStars density={m ? 50 : 100} seed={11}/>
      <div style={{ position: "relative", display: "grid", gridTemplateColumns: m ? "1fr" : "1fr 1fr", gap: m ? 32 : 60 }}>
        <div>
          <CSTag color="#2BA8E0">VISIT THE SHOP</CSTag>
          <h2 style={{ ...CSstyles.display, fontSize: m ? 48 : 92, margin: "16px 0 24px", lineHeight: 0.9 }}>
            TOUCH DOWN<br/>
            <span style={{
              background: "linear-gradient(90deg,#FF4D9E,#2BA8E0)",
              WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent",
              filter: "drop-shadow(0 0 30px rgba(255,77,158,0.35))",
            }}>
              IN MURRIETA.
            </span>
          </h2>
          <div style={{ fontSize: m ? 18 : 21, marginBottom: 4 }}><strong>{d.address}</strong></div>
          <div style={{ fontSize: m ? 15 : 17, color: "rgba(248,233,240,0.7)", marginBottom: 20 }}>{d.addressLine2}</div>
          <div style={{
            ...CSstyles.display, fontSize: m ? 32 : 44, marginBottom: 24,
            background: "linear-gradient(90deg,#FF4D9E,#FFD23F)",
            WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent",
          }}>
            <a href={d.phoneHref} style={{ color: "inherit", textDecoration: "none" }}>{d.phone}</a>
          </div>
          <div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
            <CSButton variant="primary" href="https://maps.google.com/?q=40575+California+Oaks+Rd+Ste+D-3+Murrieta+CA+92562" target="_blank">GET DIRECTIONS</CSButton>
            <CSButton variant="ghost" href="tel:19512390390">CALL THE SHOP</CSButton>
          </div>
        </div>
        <div style={{
          background: "rgba(255,255,255,0.03)",
          border: "1px solid rgba(255,255,255,0.12)",
          borderRadius: 18, padding: m ? 22 : 32,
          backdropFilter: "blur(12px)",
          boxShadow: "0 0 40px rgba(43,168,224,0.15)",
        }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 18, flexWrap: "wrap", gap: 8 }}>
            <div style={{ ...CSstyles.mono, fontSize: m ? 10 : 11, color: "#FFD23F", letterSpacing: "0.3em" }}>★ HOURS ★</div>
            <div style={{ ...CSstyles.mono, fontSize: m ? 9 : 10, color: "rgba(248,233,240,0.5)", letterSpacing: "0.2em" }}>TSBC-01</div>
          </div>
          {d.hours.map((h, i) => (
            <div key={i} style={{
              display: "flex", justifyContent: "space-between", alignItems: "center",
              padding: m ? "10px 0" : "14px 0",
              borderBottom: i < 6 ? "1px solid rgba(255,255,255,0.08)" : "none",
              fontSize: m ? 14 : 17,
            }}>
              <div style={{ ...CSstyles.display, fontSize: m ? 15 : 19, color: "#F8E9F0" }}>{h.d.toUpperCase()}</div>
              <div style={{ ...CSstyles.mono, fontSize: m ? 12 : 14, color: "rgba(248,233,240,0.85)" }}>{h.h}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function CSFooter() {
  const m = useIsMobile();
  return (
    <footer style={{
      background: "linear-gradient(180deg, #05081A 0%, #000 100%)",
      borderTop: "1px solid rgba(255,255,255,0.08)",
      padding: m ? "30px 16px 24px" : "40px 40px 32px",
      color: "rgba(248,233,240,0.7)",
    }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 14 }}>
        <div style={{
          ...CSstyles.display, fontSize: m ? 20 : 30,
          background: "linear-gradient(90deg,#2BA8E0,#FF4D9E)",
          WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent",
        }}>
          TWISTED SPOONS · MURRIETA, CA
        </div>
        <div style={{ display: "flex", gap: m ? 14 : 24, ...CSstyles.mono, fontSize: m ? 11 : 12 }}>
          <a href={window.TS_DATA.social.instagram} target="_blank" rel="noopener noreferrer" style={{ color: "inherit", textDecoration: "none" }}>IG ↗</a>
          <a href={window.TS_DATA.social.tiktok} target="_blank" rel="noopener noreferrer" style={{ color: "inherit", textDecoration: "none" }}>TIKTOK ↗</a>
          <a href={window.TS_DATA.social.facebook} target="_blank" rel="noopener noreferrer" style={{ color: "inherit", textDecoration: "none" }}>FB ↗</a>
        </div>
      </div>
      <div style={{ marginTop: 14, ...CSstyles.mono, fontSize: m ? 9 : 10, opacity: 0.5, letterSpacing: "0.2em" }}>
        © 2026 TWISTED SPOONS ICE CREAM CEREAL BAR · CEREALIOUSLY DELICIOUS
      </div>
    </footer>
  );
}

function CSBackToTop() {
  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: 'linear-gradient(135deg, #8B5CF6, #2BA8E0)',
        color: '#fff',
        border: '1px solid rgba(255,255,255,0.25)',
        boxShadow: '0 4px 18px rgba(139,92,246,0.5)',
        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 CosmicSwirl() {
  return (
    <div className="artboard-root" style={CSstyles.root}>
      <CSHero />
      <CSBoxBand />
      <CSSwirlOfWeek />
      <CSMenu />
      <CSStory />
      <CSGallery />
      <CSParties />
      <CSVisit />
      <CSFooter />
      <CSBackToTop />
    </div>
  );
}

window.CosmicSwirl = CosmicSwirl;