// meta-ads-creatives.jsx
// Library of square (1:1) and vertical (9:16) ad creatives, each rendered as a
// pure visual mock at the right aspect ratio. These get sized down inside the
// playbook page — the layouts hold up because everything is fluid.

const POSTER = "assets/poster-eamon.png";

// ───────────────────────────────────────────────────────────────
// SQUARE FEED CREATIVES (1:1)
// ───────────────────────────────────────────────────────────────

// A · "Make your kid a legend"
function CreativeLegend() {
  return (
    <div style={squareBase("var(--cream)")}>
      {/* halftone bg */}
      <div className="halftone" style={overlay({ opacity: 0.4 })} />
      {/* red diagonal */}
      <div style={{ ...overlay(), background: "linear-gradient(120deg, transparent 55%, var(--red) 55% 62%, transparent 62%)", opacity: .5 }} />

      <div style={{ position: "relative", display: "grid", gridTemplateColumns: "1.2fr 1fr", height: "100%", padding: 32, gap: 24, alignItems: "center" }}>
        <div>
          <div style={{ fontFamily: "var(--f-mono)", fontSize: 11, color: "var(--red)", letterSpacing: ".14em", textTransform: "uppercase" }}>
            ◆ Little League · 2026
          </div>
          <h2 className="display" style={{ fontSize: 68, color: "var(--navy)", textTransform: "uppercase", lineHeight: .9, marginTop: 12 }}>
            Make<br/>your kid<br/>
            <span style={{ fontFamily: "var(--f-script)", color: "var(--brand)", fontSize: 72 }}>a legend.</span>
          </h2>
          <div style={{ marginTop: 18, display: "inline-block", padding: "10px 16px", borderRadius: 999, background: "var(--brand)", color: "white", fontWeight: 700, fontSize: 14, letterSpacing: ".04em" }}>
            FREE PREVIEW · 20 SECONDS
          </div>
        </div>
        <div style={{ position: "relative", transform: "rotate(-3deg)" }}>
          <img src={POSTER} style={{ width: "100%", borderRadius: 8, boxShadow: "0 30px 60px -20px rgba(11,19,64,.45)" }} />
        </div>
      </div>
    </div>
  );
}

// B · Before / After phone snap → poster — the TRANSFORMATION hook
function CreativeBeforeAfter() {
  return (
    <div style={squareBase("var(--cream)")}>
      <div className="halftone" style={overlay({ opacity: .35 })} />
      {/* big diagonal split */}
      <div aria-hidden style={{
        position: "absolute", inset: 0,
        background: "linear-gradient(115deg, var(--cream) 0 48%, var(--red) 48% 52%, var(--navy) 52% 100%)",
      }} />

      {/* BEFORE label */}
      <div style={{
        position: "absolute", top: 26, left: 26, color: "var(--navy)",
        fontFamily: "var(--f-mono)", fontSize: 11, letterSpacing: ".2em",
      }}>BEFORE ↓</div>

      {/* AFTER label */}
      <div style={{
        position: "absolute", top: 26, right: 26, color: "white",
        fontFamily: "var(--f-mono)", fontSize: 11, letterSpacing: ".2em",
      }}>↓ AFTER</div>

      {/* Before — phone photo placeholder */}
      <div style={{
        position: "absolute", left: "8%", top: "20%", width: "36%", aspectRatio: "0.75/1",
        borderRadius: 10, overflow: "hidden",
        background: "linear-gradient(160deg, #c8b899, #9e8a6e)",
        border: "4px solid white", boxShadow: "0 18px 40px -16px rgba(0,0,0,.4)",
        transform: "rotate(-5deg)",
      }}>
        <div style={{
          position: "absolute", inset: "20% 30% 22% 30%", borderRadius: "50%",
          background: "radial-gradient(circle at 50% 35%, #d9c8a8 0, #8d7858 80%)",
          opacity: .9,
        }} />
        <div style={{
          position: "absolute", bottom: 8, left: 0, right: 0, textAlign: "center",
          fontFamily: "var(--f-mono)", fontSize: 8, color: "rgba(0,0,0,.5)", letterSpacing: ".1em",
        }}>IMG_5829 · HEIC</div>
      </div>

      {/* After — the real poster, much bigger */}
      <div style={{
        position: "absolute", right: "6%", top: "16%", width: "44%",
        borderRadius: 10, overflow: "hidden",
        boxShadow: "0 30px 60px -16px rgba(0,0,0,.5)",
        transform: "rotate(4deg)",
      }}>
        <img src={POSTER} style={{ width: "100%", display: "block" }} />
      </div>

      {/* Center burst */}
      <div style={{
        position: "absolute", left: "50%", top: "50%",
        transform: "translate(-50%, -50%) rotate(-8deg)",
        zIndex: 3,
      }}>
        <div style={{
          fontFamily: "var(--f-script)", fontSize: 64,
          color: "white", textShadow: "0 4px 0 var(--red), 0 8px 12px rgba(0,0,0,.4)",
          lineHeight: .9, textAlign: "center",
        }}>
          jaw<br/>drop
        </div>
      </div>

      {/* Bottom strap */}
      <div style={{
        position: "absolute", left: 0, right: 0, bottom: 0,
        background: "var(--navy)", color: "white",
        padding: "14px 24px", display: "flex", justifyContent: "space-between", alignItems: "center",
      }}>
        <div className="stencil" style={{ fontSize: 18, color: "white" }}>
          ONE PHONE PIC → ONE LEGEND
        </div>
        <div style={{
          background: "var(--red)", padding: "6px 12px", borderRadius: 999,
          fontWeight: 700, fontSize: 12, letterSpacing: ".04em",
        }}>SHOP NOW ▸</div>
      </div>
    </div>
  );
}

// C · Testimonial / 5-star — jaw-drop framing
function CreativeTestimonial() {
  return (
    <div style={squareBase("var(--brand)")}>
      <div className="halftone" style={overlay({ opacity: .14, color: "white" })} />
      <div style={{ position: "relative", display: "grid", gridTemplateColumns: "1.1fr .9fr", height: "100%", padding: 32, gap: 18 }}>
        <div style={{ display: "flex", flexDirection: "column", justifyContent: "center", color: "white" }}>
          <div style={{ color: "#FFD850", fontSize: 28, letterSpacing: ".05em", marginBottom: 12 }}>★★★★★</div>
          <p className="display" style={{ fontSize: 38, textTransform: "none", letterSpacing: ".005em", lineHeight: 1.05, color: "white" }}>
            "His jaw<br/>hit the floor.<br/>Ran around the kitchen for ten minutes screaming."
          </p>
          <div style={{ marginTop: 18, fontSize: 14, opacity: .85 }}>
            — Mike T., dad of #11 · Verified buyer
          </div>
        </div>
        <div style={{ display: "flex", alignItems: "center" }}>
          <div style={{ position: "relative", transform: "rotate(3deg)", boxShadow: "0 24px 50px -16px rgba(0,0,0,.4)", borderRadius: 10, overflow: "hidden" }}>
            <img src={POSTER} style={{ width: "100%", display: "block" }} />
          </div>
        </div>
      </div>
      <div style={{ position: "absolute", top: 24, right: 28, color: "white", fontFamily: "var(--f-display)", fontSize: 13, letterSpacing: ".18em", opacity: .8 }}>
        ◆ 4.96 / 5 ON TRUSTPILOT
      </div>
    </div>
  );
}

// D · END-OF-YEAR TEAM PARTY reveal
function CreativeTeamBundle() {
  return (
    <div style={squareBase("#0a1228")}>
      <div className="halftone" style={overlay({ opacity: .12, color: "white" })} />

      {/* Wall of posters */}
      <div style={{
        position: "absolute", inset: 0,
        display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gridTemplateRows: "repeat(3, 1fr)",
        gap: 6, padding: 12, opacity: .35,
      }}>
        {Array.from({ length: 12 }).map((_, i) => (
          <div key={i} style={{
            borderRadius: 4, overflow: "hidden",
            transform: `rotate(${(Math.sin(i * 1.5) * 3).toFixed(2)}deg)`,
          }}>
            <img src={POSTER} style={{ width: "100%", height: "100%", objectFit: "cover" }} />
          </div>
        ))}
      </div>
      <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, rgba(11,19,64,.7) 0%, rgba(11,19,64,.95) 60%)" }} />

      <div style={{ position: "relative", height: "100%", display: "flex", flexDirection: "column", justifyContent: "center", padding: 32, textAlign: "center", color: "white" }}>
        <div style={{ fontFamily: "var(--f-mono)", fontSize: 11, color: "var(--red)", letterSpacing: ".18em", marginBottom: 12 }}>◆ END-OF-SEASON TEAM PARTY</div>
        <h2 className="display" style={{ fontSize: 64, textTransform: "uppercase", lineHeight: .9, color: "white" }}>
          The reveal<br/>at pizza night.<br/><span style={{ color: "var(--red)" }}>Kids lose it.</span>
        </h2>
        <p style={{ marginTop: 20, fontSize: 15, color: "rgba(255,255,255,.78)", maxWidth: 460, marginInline: "auto" }}>
          Bundle the whole roster. Hand them out at the end-of-year party. Save 20%, coach poster free.
        </p>
        <div style={{ marginTop: 22, display: "inline-flex", alignSelf: "center", padding: "10px 16px", borderRadius: 999, background: "var(--red)", fontWeight: 700, fontSize: 14, letterSpacing: ".04em" }}>
          CODE: DUGOUT20
        </div>
      </div>
    </div>
  );
}

// E · "Trophy in the closet. Poster on the wall."
function CreativeTrophy() {
  return (
    <div style={squareBase("var(--navy)")}>
      <div style={{ ...overlay(), background: "repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 12px, transparent 12px 26px)" }} />
      <div style={{ position: "relative", height: "100%", display: "grid", gridTemplateColumns: "1fr 1fr", gap: 0 }}>
        {/* Left — trophy crossed out */}
        <div style={{ padding: 32, display: "flex", flexDirection: "column", justifyContent: "center", color: "white", position: "relative", overflow: "hidden" }}>
          <div style={{ fontSize: 110, lineHeight: 1, opacity: .35, filter: "grayscale(1)" }}>🏆</div>
          <div style={{ position: "absolute", inset: 0, pointerEvents: "none" }}>
            <svg viewBox="0 0 100 100" preserveAspectRatio="none" style={{ width: "100%", height: "100%" }}>
              <line x1="10" y1="20" x2="90" y2="80" stroke="var(--red)" strokeWidth="2.5" strokeLinecap="round" />
            </svg>
          </div>
          <h3 className="display" style={{ marginTop: 16, fontSize: 30, textTransform: "uppercase", color: "rgba(255,255,255,.85)", lineHeight: 1 }}>
            Trophy.<br/><span style={{ opacity: .55 }}>In the closet.</span>
          </h3>
        </div>
        {/* Right — the poster */}
        <div style={{ background: "var(--red)", padding: 22, display: "flex", flexDirection: "column", justifyContent: "center", alignItems: "center", color: "white" }}>
          <img src={POSTER} style={{ width: "85%", borderRadius: 8, boxShadow: "0 20px 40px -10px rgba(0,0,0,.5)" }} />
          <h3 className="display" style={{ marginTop: 14, fontSize: 26, textTransform: "uppercase", textAlign: "center", lineHeight: 1 }}>
            Poster.<br/>On the wall.
          </h3>
        </div>
      </div>
    </div>
  );
}

// F · "Wait WHAT?!" kid-reaction quote
function CreativeKidQuote() {
  return (
    <div style={squareBase("var(--paper)")}>
      <div className="halftone" style={overlay({ opacity: .5 })} />
      <div style={{ position: "relative", height: "100%", padding: 36, display: "flex", flexDirection: "column", justifyContent: "space-between" }}>
        <div>
          <div style={{ fontFamily: "var(--f-mono)", fontSize: 11, color: "var(--red)", letterSpacing: ".14em", marginBottom: 14 }}>◆ ACTUAL KID, ACTUAL QUOTE</div>
          <div style={{ fontFamily: "var(--f-script)", fontSize: 72, lineHeight: .95, color: "var(--navy)" }}>
            "Wait.<br/>that's<br/>ME?!"
          </div>
          <div style={{ marginTop: 16, fontSize: 14, color: "var(--muted)" }}>
            — Eamon, age 9, two seconds after his coach handed him the rolled poster
          </div>
        </div>
        <div style={{ display: "flex", alignItems: "end", gap: 16 }}>
          <img src={POSTER} style={{ width: 140, borderRadius: 6, boxShadow: "0 14px 30px -10px rgba(11,19,64,.3)", transform: "rotate(-4deg)" }} />
          <div>
            <div className="display" style={{ fontSize: 28, color: "var(--navy)", textTransform: "uppercase", lineHeight: 1 }}>
              Yep.<br/>That's you.
            </div>
            <div style={{ marginTop: 8, padding: "6px 12px", background: "var(--brand)", color: "white", display: "inline-block", borderRadius: 999, fontWeight: 700, fontSize: 12, letterSpacing: ".04em" }}>
              FREE PREVIEW
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// ───────────────────────────────────────────────────────────────
// STORY CREATIVES (9:16)
// ───────────────────────────────────────────────────────────────

function StoryShell({ children, name = "scribbly" }) {
  return (
    <div className="ig-story">
      <div className="ig-story-bar" />
      <div className="ig-story-head">
        <div className="ig-story-av"><div>S</div></div>
        <div>
          <div className="ig-story-name">{name} <span style={{ color: "rgba(255,255,255,.7)", fontWeight: 400 }}>· Sponsored</span></div>
          <div className="ig-story-sub">scribblylittleleague.com</div>
        </div>
        <div style={{ marginLeft: "auto", fontSize: 18 }}>×</div>
      </div>
      {children}
      <div className="ig-story-cta">SHOP NOW</div>
    </div>
  );
}

function StoryLegend() {
  return (
    <StoryShell>
      <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, var(--navy) 0%, #050d2b 100%)" }} />
      <div className="halftone" style={{ position: "absolute", inset: 0, opacity: .18, backgroundImage: "radial-gradient(rgba(255,255,255,.7) 1px, transparent 1.6px)", backgroundSize: "10px 10px" }} />
      <div style={{ position: "absolute", inset: 0, background: "linear-gradient(115deg, transparent 0 70%, var(--red) 70% 76%, transparent 76%)", opacity: .45 }} />
      <img src={POSTER} style={{
        position: "absolute", left: "8%", right: "8%", top: "32%", width: "84%",
        borderRadius: 8, boxShadow: "0 24px 60px -16px rgba(0,0,0,.5)",
        transform: "rotate(-3deg)",
      }} />
      <div style={{ position: "absolute", top: 78, left: 18, right: 18, color: "white", textAlign: "center" }}>
        <div style={{ fontFamily: "var(--f-mono)", fontSize: 10, color: "var(--red)", letterSpacing: ".18em" }}>◆ LITTLE LEAGUE 2026</div>
        <h2 className="display" style={{ marginTop: 6, fontSize: 42, color: "white", lineHeight: .9, textTransform: "uppercase" }}>
          Make<br/>your kid<br/><span style={{ fontFamily: "var(--f-script)", color: "var(--brand)" }}>a legend.</span>
        </h2>
      </div>
    </StoryShell>
  );
}

function StoryUnbox() {
  return (
    <StoryShell>
      <div style={{ position: "absolute", inset: 0, background: "linear-gradient(160deg, #f1e6cf 0%, var(--cream) 100%)" }} />
      <div className="halftone" style={{ position: "absolute", inset: 0, opacity: .35 }} />

      <div style={{ position: "absolute", top: "12%", left: "10%", right: "10%", textAlign: "center", color: "var(--navy)" }}>
        <div className="display" style={{ fontSize: 36, textTransform: "uppercase", lineHeight: .9 }}>
          The look<br/>on her face.
        </div>
        <div style={{ marginTop: 8, fontFamily: "var(--f-script)", fontSize: 30, color: "var(--red)" }}>↓ ↓ ↓</div>
      </div>

      {/* Frame around the poster, "unboxed" */}
      <div style={{
        position: "absolute", left: "10%", right: "10%", top: "38%",
        padding: 14, background: "white", borderRadius: 6,
        boxShadow: "0 30px 60px -18px rgba(11,19,64,.35)",
        transform: "rotate(-2deg)",
      }}>
        <img src={POSTER} style={{ width: "100%", display: "block", borderRadius: 4 }} />
      </div>

      <div style={{
        position: "absolute", bottom: 80, left: 20, padding: "8px 14px",
        background: "var(--navy)", color: "white", borderRadius: 999, fontWeight: 700, fontSize: 12,
        transform: "rotate(-6deg)", boxShadow: "0 10px 20px -6px rgba(0,0,0,.3)",
      }}>★ 4.96 / 5 · TRUSTPILOT</div>
    </StoryShell>
  );
}

function StoryStat() {
  return (
    <StoryShell>
      <div style={{ position: "absolute", inset: 0, background: "var(--brand)" }} />
      <div className="halftone" style={{ position: "absolute", inset: 0, opacity: .15, backgroundImage: "radial-gradient(rgba(255,255,255,.85) 1px, transparent 1.6px)" }} />
      <div style={{ position: "absolute", top: "18%", left: 24, right: 24, color: "white" }}>
        <div style={{ fontFamily: "var(--f-display)", fontSize: 160, lineHeight: .85, color: "white" }}>2,140</div>
        <div style={{ fontSize: 16, fontWeight: 600, marginTop: 8, letterSpacing: ".02em" }}>
          families turned their kid<br/>into a poster last season.
        </div>
        <div style={{ marginTop: 16, color: "#FFD850", fontSize: 22 }}>★★★★★</div>
        <div style={{ fontSize: 13, opacity: .85, marginTop: 2 }}>100% 5-star on Trustpilot</div>
      </div>
      <img src={POSTER} style={{
        position: "absolute", right: -20, bottom: 110, width: 180,
        borderRadius: 6, boxShadow: "0 18px 40px -10px rgba(0,0,0,.4)", transform: "rotate(8deg)",
      }} />
    </StoryShell>
  );
}

function StoryCountdown() {
  return (
    <StoryShell>
      <div style={{ position: "absolute", inset: 0, background: "linear-gradient(160deg, #161a30 0%, var(--brand-ink) 100%)" }} />
      <div className="halftone" style={{ position: "absolute", inset: 0, opacity: .14, backgroundImage: "radial-gradient(rgba(255,255,255,.7) 1px, transparent 1.6px)" }} />

      <div style={{ position: "absolute", top: 70, left: 20, right: 20, textAlign: "center", color: "white" }}>
        <div style={{ fontFamily: "var(--f-mono)", fontSize: 11, color: "var(--red)", letterSpacing: ".18em" }}>◆ TIME TO PREVIEW</div>
        <div style={{ fontFamily: "var(--f-display)", fontSize: 230, lineHeight: .85, color: "white", margin: "6px 0 -6px" }}>20</div>
        <div className="display" style={{ fontSize: 32, color: "var(--red)", textTransform: "uppercase" }}>seconds.</div>
        <div style={{ marginTop: 10, fontSize: 14, opacity: .8, maxWidth: 220, marginInline: "auto" }}>
          That's all it takes to see your kid as a custom-illustrated poster.
        </div>
      </div>

      <div style={{ position: "absolute", bottom: 110, left: 20, right: 20, display: "flex", justifyContent: "center", gap: 6 }}>
        {["FREE PREVIEW", "NO PAYMENT", "5-DAY SHIP"].map(t => (
          <div key={t} style={{ background: "rgba(255,255,255,.08)", border: "1px solid rgba(255,255,255,.2)", padding: "5px 9px", borderRadius: 999, fontSize: 10, color: "white", fontWeight: 600, letterSpacing: ".05em" }}>{t}</div>
        ))}
      </div>
    </StoryShell>
  );
}

// ───────────────────────────────────────────────────────────────
// NEW · "REVEAL" — kid reaction + the poster they just unrolled
// ───────────────────────────────────────────────────────────────
function CreativeReveal() {
  return (
    <div style={squareBase("var(--navy)")}>
      <div className="halftone" style={overlay({ opacity: .18, color: "white" })} />
      <div style={{
        position: "absolute", inset: 0,
        background: "radial-gradient(circle at 30% 40%, rgba(216,35,42,.25) 0, transparent 50%)",
      }} />

      <div style={{ position: "relative", height: "100%", display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12, padding: 28, alignItems: "center" }}>
        {/* Left — "kid reaction" placeholder */}
        <div style={{ position: "relative" }}>
          <div style={{
            aspectRatio: "0.85/1", borderRadius: 12,
            background: "linear-gradient(160deg, #2a2f5a, #131838)",
            overflow: "hidden", boxShadow: "0 20px 40px -12px rgba(0,0,0,.5)",
            border: "3px solid var(--red)", position: "relative",
          }}>
            <div style={{
              position: "absolute", inset: "12% 18% 30% 18%", borderRadius: "50%",
              background: "radial-gradient(circle at 50% 40%, #f3e4cb 0, #b08f6a 90%)",
              opacity: .55,
            }} />
            {/* big "O" mouth */}
            <div style={{
              position: "absolute", bottom: "30%", left: "50%", transform: "translateX(-50%)",
              width: 38, height: 50, borderRadius: "50%",
              background: "#2a1a14", boxShadow: "0 0 0 4px rgba(0,0,0,.35)",
            }} />
            {/* big "O" eyes */}
            {[35, 65].map((x, i) => (
              <div key={i} style={{
                position: "absolute", top: "30%", left: `${x}%`, transform: "translate(-50%, -50%)",
                width: 18, height: 18, borderRadius: "50%", background: "white",
                border: "2px solid #2a1a14",
              }}><div style={{ position: "absolute", inset: 5, borderRadius: "50%", background: "#2a1a14" }} /></div>
            ))}
            <div style={{
              position: "absolute", left: 10, top: 10,
              fontFamily: "var(--f-mono)", fontSize: 9, color: "rgba(255,255,255,.7)", letterSpacing: ".14em",
            }}>// THE REACTION</div>
          </div>
          {/* speech sticker */}
          <div style={{
            position: "absolute", top: -16, right: -16,
            transform: "rotate(8deg)",
            background: "var(--red)", color: "white",
            padding: "10px 14px", borderRadius: 10,
            fontFamily: "var(--f-script)", fontSize: 28, lineHeight: 1,
            boxShadow: "0 10px 24px -8px rgba(0,0,0,.4)",
          }}>WAIT what?!</div>
        </div>

        {/* Right — the poster */}
        <div style={{ position: "relative", transform: "rotate(3deg)" }}>
          <img src={POSTER} style={{
            width: "100%", borderRadius: 8,
            boxShadow: "0 24px 50px -16px rgba(0,0,0,.5)",
          }} />
          <div style={{
            position: "absolute", left: -14, bottom: 10,
            background: "white", padding: "4px 10px",
            borderRadius: 4, fontFamily: "var(--f-mono)", fontSize: 10,
            color: "var(--navy)", letterSpacing: ".1em",
            boxShadow: "0 6px 14px -4px rgba(0,0,0,.4)",
            transform: "rotate(-6deg)",
          }}>THE POSTER</div>
        </div>
      </div>

      {/* Bottom strap */}
      <div style={{
        position: "absolute", left: 0, right: 0, bottom: 0,
        background: "var(--red)", color: "white",
        padding: "12px 24px", display: "flex", justifyContent: "space-between", alignItems: "center",
        fontWeight: 700,
      }}>
        <span className="stencil" style={{ fontSize: 18 }}>KIDS LOSE THEIR MINDS.</span>
        <span style={{ fontSize: 12, letterSpacing: ".06em" }}>FREE PREVIEW · 20 SEC</span>
      </div>
    </div>
  );
}

// 9:16 version of the reveal for stories
function StoryReveal() {
  return (
    <StoryShell>
      <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, var(--navy) 0%, #050d2b 100%)" }} />
      <div className="halftone" style={{ position: "absolute", inset: 0, opacity: .15, backgroundImage: "radial-gradient(rgba(255,255,255,.7) 1px, transparent 1.6px)", backgroundSize: "10px 10px" }} />

      <div style={{ position: "absolute", top: 70, left: 18, right: 18, color: "white", textAlign: "center" }}>
        <div style={{ fontFamily: "var(--f-mono)", fontSize: 10, color: "var(--red)", letterSpacing: ".2em" }}>◆ THE MOMENT</div>
        <h2 className="display" style={{ marginTop: 6, fontSize: 38, lineHeight: .9, textTransform: "uppercase", color: "white" }}>
          Watch their<br/>jaw drop.
        </h2>
      </div>

      {/* Kid reaction tile */}
      <div style={{
        position: "absolute", top: "26%", left: "12%", right: "12%",
        aspectRatio: "1/1.1", borderRadius: 14, overflow: "hidden",
        background: "linear-gradient(160deg, #2a2f5a, #131838)",
        border: "3px solid var(--red)", boxShadow: "0 24px 50px -16px rgba(0,0,0,.6)",
      }}>
        <div style={{
          position: "absolute", inset: "18% 22% 30% 22%", borderRadius: "50%",
          background: "radial-gradient(circle at 50% 40%, #f3e4cb 0, #b08f6a 90%)", opacity: .55,
        }} />
        {[38, 62].map((x, i) => (
          <div key={i} style={{
            position: "absolute", top: "34%", left: `${x}%`, transform: "translate(-50%, -50%)",
            width: 20, height: 20, borderRadius: "50%", background: "white",
            border: "2px solid #2a1a14",
          }}><div style={{ position: "absolute", inset: 5, borderRadius: "50%", background: "#2a1a14" }} /></div>
        ))}
        <div style={{
          position: "absolute", bottom: "26%", left: "50%", transform: "translateX(-50%)",
          width: 40, height: 52, borderRadius: "50%", background: "#2a1a14",
        }} />
      </div>

      {/* Poster peek */}
      <img src={POSTER} style={{
        position: "absolute", left: "20%", right: "20%", bottom: 130, width: "60%",
        borderRadius: 6, boxShadow: "0 16px 30px -10px rgba(0,0,0,.5)",
        transform: "rotate(4deg)",
      }} />

      {/* Caption sticker */}
      <div style={{
        position: "absolute", right: 14, top: "44%",
        background: "var(--red)", color: "white",
        padding: "8px 12px", borderRadius: 8,
        fontFamily: "var(--f-script)", fontSize: 24, lineHeight: 1,
        transform: "rotate(10deg)",
      }}>WAIT what?!</div>
    </StoryShell>
  );
}

// ───────────────────────────────────────────────────────────────
// Shared helpers
// ───────────────────────────────────────────────────────────────
function squareBase(bg) {
  return {
    position: "relative", aspectRatio: "1/1", borderRadius: 4,
    overflow: "hidden", background: bg,
  };
}
function overlay(extra = {}) {
  const { color = "var(--navy)", opacity = 0.4, ...rest } = extra;
  return {
    position: "absolute", inset: 0, pointerEvents: "none",
    backgroundImage: `radial-gradient(${color === "white" ? "rgba(255,255,255,.7)" : "rgba(11,30,79,.18)"} 1px, transparent 1.4px)`,
    backgroundSize: "10px 10px",
    opacity, ...rest,
  };
}

Object.assign(window, {
  POSTER,
  CreativeLegend, CreativeBeforeAfter, CreativeTestimonial,
  CreativeTeamBundle, CreativeTrophy, CreativeKidQuote, CreativeReveal,
  StoryLegend, StoryUnbox, StoryStat, StoryCountdown, StoryReveal,
});