/* global React */
// ════════════════════════════════════════════════════════════
// FormatPreview — schematic page mockups, black line-art style
// Improved: browser chrome, X-pattern img blocks, refined hatch
// ════════════════════════════════════════════════════════════

const INK = "#1C1C1C";
const INK2 = "rgba(28,28,28,0.22)"; // lighter stroke
const FONT_MONO = "'Spline Sans Mono', monospace";

// Lighter diagonal hatch for ad slot
const HATCH = "repeating-linear-gradient(45deg, rgba(28,28,28,0.14) 0 1px, transparent 1px 9px)";
// Yellow-tinted hatch
const HATCH_Y = "repeating-linear-gradient(45deg, rgba(28,28,28,0.12) 0 1px, transparent 1px 9px)";

// ─── Ad Slot — solid yellow, bold and visible ─────────────
function AdSlot({ style, dim, label = "ADV", small }) {
  return (
    <div style={{
      border: "none",
      background: "#FFDF00",
      backgroundImage: "repeating-linear-gradient(45deg, rgba(0,0,0,0.06) 0 1px, transparent 1px 10px)",
      display: "flex", alignItems: "center", justifyContent: "center",
      overflow: "hidden", position: "relative",
      ...style
    }}>
      <div style={{
        background: "none",
        borderRadius: 3,
        padding: small ? "2px 5px" : "3px 8px",
        display: "flex", flexDirection: "column", alignItems: "center", gap: 1, lineHeight: 1
      }}>
        <span style={{ fontWeight: 800, fontSize: small ? 8 : 10, letterSpacing: 1, color: INK }}>{label}</span>
        {dim && <span style={{ fontFamily: FONT_MONO, fontSize: small ? 7 : 9, fontWeight: 600, color: "rgba(28,28,28,0.6)" }}>{dim}</span>}
      </div>
    </div>);

}

// ─── Content Image Block — X placeholder ──────────────────
function ImgBlock({ style }) {
  return (
    <div style={{
      background: "#EBEBEB",
      backgroundImage: `
        linear-gradient(to top right, transparent calc(50% - 0.5px), rgba(28,28,28,0.18) calc(50% - 0.5px), rgba(28,28,28,0.18) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
        linear-gradient(to bottom right, transparent calc(50% - 0.5px), rgba(28,28,28,0.18) calc(50% - 0.5px), rgba(28,28,28,0.18) calc(50% + 0.5px), transparent calc(50% + 0.5px))
      `,
      ...style
    }}></div>);

}

// ─── Text Lines — varied opacity ───────────────────────────
function Lines({ n = 3, w = ["100%", "88%", "60%"], gap = 4, h = 2 }) {
  const ops = [0.32, 0.2, 0.13, 0.09];
  return (
    <div style={{ display: "flex", flexDirection: "column", gap }}>
      {Array.from({ length: n }).map((_, i) =>
      <div key={i} style={{ height: h, background: `rgba(28,28,28,${ops[i] ?? 0.09})`, borderRadius: 1, width: w[i] || "100%" }}></div>
      )}
    </div>);

}

// ─── Rotating Ad Slot ──────────────────────────────────────
function RotatorSlot({ style, animated = false }) {
  const [face, setFace] = React.useState(0);
  const [flipping, setFlipping] = React.useState(false);

  React.useEffect(() => {
    if (!animated) return;
    const interval = setInterval(() => {
      setFlipping(true);
      const t = setTimeout(() => {
        setFace(f => (f + 1) % 4);
        setFlipping(false);
      }, 260);
      return () => clearTimeout(t);
    }, 1600);
    return () => clearInterval(interval);
  }, []);

  const faces = [
    { bg: "#FFDF00", color: INK,       hatch: "rgba(0,0,0,0.06)"      },
    { bg: INK,       color: "#FFDF00", hatch: "rgba(255,255,255,0.06)" },
    { bg: "#FFDF00", color: INK,       hatch: "rgba(0,0,0,0.06)"      },
    { bg: INK,       color: "#FFDF00", hatch: "rgba(255,255,255,0.06)" },
  ];
  const f = faces[face];

  return (
    <div style={{ position: "relative", overflow: "hidden", ...style }}>
      <div style={{
        position: "absolute", inset: 0,
        background: f.bg,
        backgroundImage: `repeating-linear-gradient(45deg, ${f.hatch} 0 1px, transparent 1px 10px)`,
        display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center",
        gap: 2,
        transform: flipping ? "scaleX(0)" : "scaleX(1)",
        transition: "transform 0.26s ease"
      }}>
        <span style={{ fontWeight: 800, fontSize: 8, letterSpacing: 1, color: f.color }}>ADV</span>
        <span style={{ fontFamily: FONT_MONO, fontSize: 6.5, fontWeight: 600, color: f.color, opacity: 0.7 }}>FRAME {face + 1}/4</span>
      </div>
      <div style={{ position: "absolute", bottom: 3, left: 0, right: 0, display: "flex", justifyContent: "center", gap: 3 }}>
        {[0,1,2,3].map((i) => (
          <div key={i} style={{
            width: 4, height: 4, borderRadius: "50%",
            background: i === face ? INK : "transparent",
            border: `1px solid ${INK2}`,
            transition: "background 0.2s"
          }}></div>
        ))}
      </div>
    </div>
  );
}


// ─── Mini Page Chrome ──────────────────────────────────────
function MiniPage({ children, pad = 8, header = true, siteHeader = false }) {
  return (
    <div style={{ width: "100%", height: "100%", background: "#F8F8F8", display: "flex", flexDirection: "column", overflow: "hidden" }}>
      {header &&
      <div style={{
        height: 18, background: "#fff",
        borderBottom: `1px solid rgba(28,28,28,0.1)`,
        display: "flex", alignItems: "center", padding: "0 7px", gap: 6, flexShrink: 0
      }}>
          {/* traffic light dots */}
          <div style={{ display: "flex", gap: 3 }}>
            {["rgba(28,28,28,0.2)", "rgba(28,28,28,0.14)", "rgba(28,28,28,0.1)"].map((bg, i) =>
          <div key={i} style={{ width: 5, height: 5, borderRadius: "50%", background: bg }}></div>
          )}
          </div>
          {/* URL bar */}
          <div style={{ flex: 1, height: 8, borderRadius: 3, border: `1px solid rgba(28,28,28,0.14)`, background: "rgb(255, 255, 255)" }}></div>
        </div>
      }
      {siteHeader &&
        <div style={{ flexShrink: 0, borderBottom: `1px solid rgba(28,28,28,0.08)`, overflow: "hidden" }}>
          <img src="uploads/header.png" style={{ width: "100%", display: "block" }} alt="Moto.it" />
        </div>
      }
      <div style={{ flex: 1, padding: pad, display: "flex", flexDirection: "column", gap: 6, minHeight: 0, background: "#fff" }}>
        {children}
      </div>
    </div>);

}

// ─── Format Preview ────────────────────────────────────────
function FormatPreview({ kind, dim, height = 130, animated = false }) {
  let inner;
  switch (kind) {

    case "leaderboard":
      inner =
      <MiniPage siteHeader={true}>
          <AdSlot style={{ height: 22, width: "82%", alignSelf: "center" }} dim={dim} small />
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 6, flex: 1 }}>
            {[0, 1].map((j) =>
          <div key={j} style={{ display: "flex", flexDirection: "column", gap: 5 }}>
                <ImgBlock style={{ flex: 1 }} />
                <Lines n={2} w={["100%", "68%"]} />
              </div>
          )}
          </div>
        </MiniPage>;
      break;

    case "masthead":
      inner =
      <MiniPage siteHeader={true}>
          <AdSlot style={{ height: 44, width: "100%" }} dim={dim} />
          <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 6, flex: 1 }}>
            <ImgBlock style={{ height: "100%" }} />
            <div style={{ display: "flex", flexDirection: "column", gap: 5, paddingTop: 2 }}>
              <Lines n={4} w={["100%", "88%", "94%", "50%"]} />
            </div>
          </div>
        </MiniPage>;
      break;

    case "mobile-top": {
      // Parse banner aspect ratio from dim (e.g. "320×50" → ratio 320/50)
      const [bw, bh] = (dim || "320×50").split(/[×x]/).map(Number);
      const bannerRatio = bh / bw; // height as % of width
      inner =
        <div style={{ width: "100%", height: "100%", background: "#fff", display: "flex", flexDirection: "column", overflow: "hidden" }}>
          {/* status bar */}
          <div style={{ height: 10, background: "#fff", borderBottom: `1px solid rgba(28,28,28,0.07)`, display: "flex", alignItems: "center", justifyContent: "space-between", padding: "0 8px", flexShrink: 0 }}>
            <div style={{ width: 14, height: 2, background: "rgba(28,28,28,0.25)", borderRadius: 1 }}></div>
            <div style={{ width: 10, height: 10, borderRadius: "50%", border: `1px solid rgba(28,28,28,0.15)` }}></div>
            <div style={{ display: "flex", gap: 2 }}>
              {[10, 7, 5].map((w, i) => <div key={i} style={{ width: w, height: 2, background: "rgba(28,28,28,0.2)", borderRadius: 1 }}></div>)}
            </div>
          </div>
          {/* URL bar */}
          <div style={{ height: 12, background: "#F5F5F5", borderBottom: `1px solid rgba(28,28,28,0.06)`, display: "flex", alignItems: "center", padding: "0 6px", flexShrink: 0 }}>
            <div style={{ flex: 1, height: 6, background: "#EBEBEB", borderRadius: 3 }}></div>
          </div>
          {/* mobile site header */}
          <div style={{ flexShrink: 0, borderBottom: `1px solid rgba(28,28,28,0.08)`, overflow: "hidden" }}>
            <img src="uploads/Screenshot 2026-07-02 alle 09.46.39.png" style={{ width: "100%", display: "block" }} alt="Moto.it" />
          </div>
          {/* ADV banner — correct proportions */}
          <div style={{ width: "100%", paddingTop: `${bannerRatio * 100}%`, position: "relative", flexShrink: 0 }}>
            <AdSlot style={{ position: "absolute", inset: 0 }} dim={dim} small />
          </div>
          {/* single-column content */}
          <div style={{ flex: 1, padding: "7px 8px", display: "flex", flexDirection: "column", gap: 6, overflow: "hidden" }}>
            <div style={{ height: 3, width: "55%", background: "rgba(28,28,28,0.5)", borderRadius: 1 }}></div>
            <ImgBlock style={{ height: "35%", borderRadius: 3 }} />
            <Lines n={4} w={["100%", "92%", "85%", "55%"]} gap={4} />
          </div>
        </div>;
      break;
    }

    case "takeover-mobile": {
      inner =
        <div style={{ width: "100%", height: "100%", background: "#fff", display: "flex", flexDirection: "column", overflow: "hidden" }}>
          {/* status bar */}
          <div style={{ height: 10, background: "#fff", borderBottom: `1px solid rgba(28,28,28,0.07)`, display: "flex", alignItems: "center", justifyContent: "space-between", padding: "0 8px", flexShrink: 0 }}>
            <div style={{ width: 14, height: 2, background: "rgba(28,28,28,0.25)", borderRadius: 1 }}></div>
            <div style={{ width: 10, height: 10, borderRadius: "50%", border: `1px solid rgba(28,28,28,0.15)` }}></div>
            <div style={{ display: "flex", gap: 2 }}>
              {[10, 7, 5].map((w, i) => <div key={i} style={{ width: w, height: 2, background: "rgba(28,28,28,0.2)", borderRadius: 1 }}></div>)}
            </div>
          </div>
          {/* URL bar */}
          <div style={{ height: 12, background: "#F5F5F5", borderBottom: `1px solid rgba(28,28,28,0.06)`, display: "flex", alignItems: "center", padding: "0 6px", flexShrink: 0 }}>
            <div style={{ flex: 1, height: 6, background: "#EBEBEB", borderRadius: 3 }}></div>
          </div>
          {/* mobile site header */}
          <div style={{ flexShrink: 0, borderBottom: `1px solid rgba(28,28,28,0.08)`, overflow: "hidden" }}>
            <img src="uploads/Screenshot 2026-07-02 alle 09.46.39.png" style={{ width: "100%", display: "block" }} alt="Moto.it" />
          </div>
          {/* Masthead 320×100 */}
          <AdSlot style={{ width: "100%", height: "20%", flexShrink: 0 }} label="MASTHEAD" dim="320×100" small />
          {/* page content with box */}
          <div style={{ flex: 1, padding: "6px 7px", display: "flex", flexDirection: "column", gap: 5, overflow: "hidden" }}>
            <div style={{ height: 3, width: "55%", background: "rgba(28,28,28,0.5)", borderRadius: 1 }}></div>
            <ImgBlock style={{ height: "26%", borderRadius: 3 }} />
            <Lines n={2} w={["100%", "80%"]} gap={4} />
            {/* Box 300×250 centered */}
            <div style={{ display: "flex", justifyContent: "center", marginTop: 2 }}>
              <AdSlot style={{ width: "88%", aspectRatio: "300/250" }} label="BOX" dim="300×250" small />
            </div>
          </div>
        </div>;
      break;
    }

    case "box":
      inner =
      <MiniPage siteHeader={true}>
          <div style={{ display: "flex", gap: 6, flex: 1, minHeight: 0 }}>
            {/* main content */}
            <div style={{ flex: 1, display: "flex", flexDirection: "column", gap: 5 }}>
              <ImgBlock style={{ height: "38%" }} />
              <Lines n={4} w={["100%", "92%", "84%", "55%"]} />
            </div>
            {/* sidebar box 300×250 */}
            <div style={{ flexShrink: 0, width: "34%", display: "flex", flexDirection: "column", gap: 5 }}>
              <AdSlot style={{ width: "100%", aspectRatio: "300/250" }} dim={dim} small />
              <Lines n={2} w={["100%", "70%"]} />
            </div>
          </div>
        </MiniPage>;
      break;

    case "halfpage":
      inner =
      <MiniPage siteHeader={true}>
          <div style={{ display: "flex", gap: 6, flex: 1, minHeight: 0 }}>
            {/* main content */}
            <div style={{ flex: 1, display: "flex", flexDirection: "column", gap: 5 }}>
              <ImgBlock style={{ height: "28%" }} />
              <Lines n={5} w={["100%", "92%", "88%", "76%", "50%"]} />
              <ImgBlock style={{ height: "22%", marginTop: 4 }} />
              <Lines n={2} w={["100%", "66%"]} />
            </div>
            {/* sidebar halfpage 300×600 — tall column */}
            <AdSlot style={{ flexShrink: 0, width: "34%", alignSelf: "stretch" }} dim={dim} small />
          </div>
        </MiniPage>;
      break;

    case "intext":
      inner =
      <MiniPage siteHeader={true}>
          <Lines n={2} w={["100%", "78%"]} />
          <AdSlot style={{ height: 38, width: "100%" }} dim={dim} small />
          <Lines n={3} w={["100%", "94%", "58%"]} />
        </MiniPage>;
      break;

    case "mobile-interstitial": {
      // 320×480 = 2:3 portrait. Show the ad filling a phone-screen-like area
      // paddingtop trick: 480/320 = 150% keeps the correct ratio
      inner =
        <div style={{ width: "100%", height: "100%", background: "rgba(0,0,0,0.35)", display: "flex", alignItems: "center", justifyContent: "center" }}>
          <div style={{ width: "68%", position: "relative" }}>
            {/* 2:3 ratio box */}
            <div style={{ paddingTop: "150%", position: "relative", borderRadius: 6, overflow: "hidden", border: `1.5px solid rgba(28,28,28,0.5)` }}>
              <div style={{ position: "absolute", inset: 0 }}>
                <AdSlot style={{ position: "absolute", inset: 0, border: "none" }} dim="320×480" />
              </div>
              {/* close button */}
              <div style={{ position: "absolute", top: 6, right: 6, width: 16, height: 16, borderRadius: 4, background: "rgba(255,255,255,0.9)", border: `1px solid rgba(28,28,28,0.3)`, display: "flex", alignItems: "center", justifyContent: "center", fontSize: 9, fontWeight: 800, color: INK, zIndex: 2 }}>✕</div>
            </div>
          </div>
        </div>;
      break;
    }

    case "interstitial":
      inner =
      <div style={{ width: "100%", height: "100%", display: "flex", alignItems: "center", justifyContent: "center", background: "#F0F0F0", padding: 10 }}>
          <div style={{ width: "54%", height: "100%", position: "relative", display: "flex", flexDirection: "column", border: `1.5px solid rgba(28,28,28,0.5)`, borderRadius: 8, overflow: "hidden" }}>
            <AdSlot style={{ flex: 1, width: "100%", border: "none" }} dim={dim} />
            <div style={{ position: "absolute", top: 5, right: 5, width: 14, height: 14, border: `1px solid rgba(28,28,28,0.4)`, background: "rgba(255,255,255,0.9)", color: INK, fontSize: 8, display: "flex", alignItems: "center", justifyContent: "center", borderRadius: 3, fontWeight: 700 }}>✕</div>
          </div>
        </div>;
      break;

    case "interscroller":
      inner =
      <MiniPage pad={0} siteHeader={true}>
          <div style={{ position: "relative", flex: 1, overflow: "hidden" }}>
            <AdSlot style={{ position: "absolute", inset: 0, border: "none" }} dim={dim} />
            <div style={{
            position: "absolute", left: 8, right: 8, bottom: 0, top: "55%",
            background: "#fff", borderTop: `1px solid rgba(28,28,28,0.15)`,
            boxShadow: "0 -4px 12px rgba(0,0,0,0.12)", padding: 6,
            display: "flex", flexDirection: "column", gap: 4
          }}>
              <Lines n={3} w={["100%", "88%", "58%"]} />
            </div>
          </div>
        </MiniPage>;
      break;

    case "takeover-pkg": {
      const YF = { background: "#FFDF00", backgroundImage: "repeating-linear-gradient(45deg, rgba(0,0,0,0.06) 0 1px, transparent 1px 10px)" };
      inner =
        <div style={{ position: "relative", width: "100%", height: "100%", ...YF }}>
          {/* skin top label */}
          <div style={{ position: "absolute", top: 0, left: 0, right: 0, height: "18%", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 6.5, fontWeight: 800, letterSpacing: 1, color: INK }}>SKIN</div>
          {/* skin left label */}
          <div style={{ position: "absolute", top: "18%", left: 0, width: "13%", bottom: 0, display: "flex", alignItems: "center", justifyContent: "center", fontSize: 6.5, fontWeight: 800, color: INK, writingMode: "vertical-rl" }}>SKIN</div>
          {/* content area */}
          <div style={{ position: "absolute", top: "18%", left: "13%", right: "13%", bottom: 0, background: "#fff", border: `1px solid rgba(28,28,28,0.12)`, display: "flex", flexDirection: "column", overflow: "hidden" }}>
            {/* browser chrome */}
            <div style={{ height: 10, background: "#F8F8F8", borderBottom: `1px solid rgba(28,28,28,0.1)`, display: "flex", alignItems: "center", padding: "0 5px", gap: 3, flexShrink: 0 }}>
              {[0,1,2].map(i => <div key={i} style={{ width: 4, height: 4, borderRadius: "50%", background: "rgba(28,28,28,0.18)" }}></div>)}
            </div>
            {/* site header */}
            <div style={{ flexShrink: 0, borderBottom: `1px solid rgba(28,28,28,0.08)`, overflow: "hidden" }}>
              <img src="uploads/header.png" style={{ width: "100%", display: "block" }} alt="Moto.it" />
            </div>
            {/* masthead */}
            <AdSlot style={{ height: "22%", width: "100%", flexShrink: 0 }} label="MASTHEAD" small />
            {/* page body with box */}
            <div style={{ flex: 1, display: "flex", gap: 5, padding: 5, overflow: "hidden", minHeight: 0 }}>
              <div style={{ flex: 1, display: "flex", flexDirection: "column", gap: 3 }}>
                <ImgBlock style={{ height: "38%" }} />
                <Lines n={3} w={["100%", "85%", "60%"]} gap={3} />
              </div>
              {/* box 300×250 */}
              <AdSlot style={{ width: "32%", flexShrink: 0, aspectRatio: "300/250", alignSelf: "flex-start" }} label="BOX" dim="300×250" small />
            </div>
          </div>
        </div>;
      break;
    }

    case "skin": {
      const YBASE = { background: "#FFDF00", backgroundImage: "repeating-linear-gradient(45deg, rgba(0,0,0,0.06) 0 1px, transparent 1px 10px)" };
      inner =
        <div style={{ position: "relative", width: "100%", height: "100%", ...YBASE }}>
          {/* top label */}
          <div style={{ position: "absolute", top: 0, left: 0, right: 0, height: "22%", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 7, fontWeight: 800, letterSpacing: 1, color: INK }}>SKIN</div>
          {/* left label */}
          <div style={{ position: "absolute", top: "22%", left: 0, width: "15%", bottom: 0, display: "flex", alignItems: "center", justifyContent: "center", fontSize: 7, fontWeight: 800, color: INK, writingMode: "vertical-rl", letterSpacing: 1 }}>SKIN</div>
          {/* center page content */}
          <div style={{ position: "absolute", top: "22%", left: "15%", right: "15%", bottom: 0, border: `1px solid rgba(28,28,28,0.15)`, overflow: "hidden" }}>
            <MiniPage pad={6} header={false}>
              <ImgBlock style={{ height: 28 }} />
              <Lines n={3} w={["100%", "88%", "58%"]} />
            </MiniPage>
          </div>
        </div>;
      break;
    }

    case "rotator":{
        const parts = (dim || "1×1").split(/[×x]/).map(Number);
        const r = (parts[0] || 1) / (parts[1] || 1);
        if (r >= 2) {
          // wide banner (es. 970×250) — leaderboard in cima
          inner =
          <MiniPage siteHeader={true}>
            <RotatorSlot animated={animated} dim={dim} style={{ height: 44, width: "100%" }} />
            <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 6, flex: 1 }}>
              <ImgBlock style={{ height: "100%" }} />
              <Lines n={4} w={["100%", "88%", "94%", "50%"]} />
            </div>
          </MiniPage>;
        } else {
          // sidebar (es. 300×250, 300×600) — colonna destra
          inner =
          <MiniPage siteHeader={true}>
            <div style={{ display: "flex", gap: 6, flex: 1, minHeight: 0 }}>
              <div style={{ flex: 1, display: "flex", flexDirection: "column", gap: 5 }}>
                <ImgBlock style={{ height: "35%" }} />
                <Lines n={4} w={["100%", "90%", "84%", "48%"]} />
              </div>
              <RotatorSlot animated={animated} dim={dim} style={{ width: "34%", flexShrink: 0 }} />
            </div>
          </MiniPage>;
        }
        break;
      }

    case "clipbanner":
      inner =
      <MiniPage siteHeader={true}>
          <div style={{ position: "relative", height: 48, width: "100%", overflow: "hidden", border: `1.5px solid rgba(28,28,28,0.5)`, borderRadius: 3, display: "flex", alignItems: "center", justifyContent: "center", background: "#1A1A1A" }}>
            <div style={{ position: "absolute", inset: 0, backgroundImage: "linear-gradient(135deg, #2A2A2A, #111)" }}></div>
            <div style={{ position: "relative", width: 20, height: 20, borderRadius: "50%", border: `1.5px solid rgba(255,255,255,0.5)`, display: "flex", alignItems: "center", justifyContent: "center" }}>
              <div style={{ width: 0, height: 0, borderLeft: "6px solid rgba(255,255,255,0.7)", borderTop: "4px solid transparent", borderBottom: "4px solid transparent", marginLeft: 2 }}></div>
            </div>
            <div style={{ position: "absolute", bottom: 3, left: 4, background: "rgba(255,255,255,0.12)", color: "rgba(255,255,255,0.7)", fontSize: 7, fontWeight: 700, padding: "1px 4px", borderRadius: 2 }}>CLIP</div>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 6, flex: 1 }}>
            <ImgBlock style={{ height: "100%" }} />
            <Lines n={3} w={["100%", "88%", "52%"]} />
          </div>
        </MiniPage>;
      break;

    case "native":
      inner =
      <MiniPage siteHeader={true}>
          <Lines n={1} w={["52%"]} h={2.5} />
          <div style={{ border: `1.5px solid rgba(28,28,28,0.45)`, borderRadius: 3, padding: 6, display: "flex", gap: 8, alignItems: "center" }}>
            <ImgBlock style={{ width: 36, height: 36, flexShrink: 0, borderRadius: 2 }} />
            <div style={{ flex: 1, display: "flex", flexDirection: "column", gap: 4 }}>
              <div style={{ fontSize: 7, fontWeight: 800, color: "rgba(28,28,28,0.5)", letterSpacing: 1 }}>SPONSOR</div>
              <div style={{ height: 2, background: "rgba(28,28,28,0.6)", width: "82%", borderRadius: 1 }}></div>
              <div style={{ height: 1.5, background: "rgba(28,28,28,0.2)", width: "58%", borderRadius: 1 }}></div>
            </div>
          </div>
          <Lines n={2} w={["100%", "74%"]} />
        </MiniPage>;
      break;

    case "video":
      if (dim === "16:9") {
        // Full 16:9 video frame — dominates the preview
        inner =
          <MiniPage siteHeader={true}>
            <div style={{ position: "relative", width: "100%", aspectRatio: "16/9", background: "#111", borderRadius: 3, overflow: "hidden", flexShrink: 0 }}>
              <div style={{ position: "absolute", inset: 0, backgroundImage: "linear-gradient(135deg, #2A2A2A, #0A0A0A)" }}></div>
              {/* play button */}
              <div style={{ position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center" }}>
                <div style={{ width: 28, height: 28, borderRadius: "50%", border: "1.5px solid rgba(255,255,255,0.45)", display: "flex", alignItems: "center", justifyContent: "center" }}>
                  <div style={{ width: 0, height: 0, borderLeft: "9px solid rgba(255,255,255,0.75)", borderTop: "6px solid transparent", borderBottom: "6px solid transparent", marginLeft: 3 }}></div>
                </div>
              </div>
              {/* skip badge */}
              <div style={{ position: "absolute", top: 4, right: 4, background: "rgba(0,0,0,0.55)", color: "rgba(255,255,255,0.6)", fontSize: 6.5, fontWeight: 700, padding: "1px 5px", borderRadius: 2, fontFamily: FONT_MONO }}>SKIP 5s</div>
              {/* controls bar */}
              <div style={{ position: "absolute", bottom: 0, left: 0, right: 0, padding: "4px 6px 3px", background: "linear-gradient(transparent, rgba(0,0,0,0.6))" }}>
                <div style={{ height: 2, background: "rgba(255,255,255,0.15)", borderRadius: 1 }}>
                  <div style={{ width: "28%", height: "100%", background: "#FFDF00", borderRadius: 1 }}></div>
                </div>
              </div>
            </div>
            <Lines n={2} w={["100%", "72%"]} />
          </MiniPage>;
      } else {
        inner =
          <MiniPage siteHeader={true}>
            <div style={{ position: "relative", height: 52, width: "100%", background: "#111", borderRadius: 3, display: "flex", alignItems: "center", justifyContent: "center", overflow: "hidden" }}>
              <div style={{ position: "absolute", inset: 0, backgroundImage: "linear-gradient(135deg, #222, #0A0A0A)" }}></div>
              <div style={{ position: "relative", width: 24, height: 24, borderRadius: "50%", border: `1.5px solid rgba(255,255,255,0.4)`, display: "flex", alignItems: "center", justifyContent: "center" }}>
                <div style={{ width: 0, height: 0, borderLeft: "8px solid rgba(255,255,255,0.7)", borderTop: "5px solid transparent", borderBottom: "5px solid transparent", marginLeft: 2 }}></div>
              </div>
              <div style={{ position: "absolute", bottom: 0, left: 0, right: 0, height: 2, background: "rgba(255,255,255,0.1)" }}>
                <div style={{ width: "38%", height: "100%", background: "rgba(255,223,0,0.7)" }}></div>
              </div>
              <div style={{ position: "absolute", bottom: 5, right: 6, background: "rgba(0,0,0,0.5)", color: "rgba(255,255,255,0.6)", fontSize: 7, fontWeight: 700, padding: "1px 4px", borderRadius: 2, fontFamily: FONT_MONO }}>{dim}</div>
            </div>
            <Lines n={3} w={["100%", "88%", "52%"]} />
          </MiniPage>;
      }
      break;

    case "dem":
      inner =
        <div style={{ width: "100%", height: "100%", background: "#DEDEDE", padding: "6px 14px", display: "flex", flexDirection: "column", gap: 0, overflow: "hidden" }}>
          {/* email client meta bar */}
          <div style={{ background: "#fff", borderRadius: "3px 3px 0 0", padding: "4px 7px", flexShrink: 0, borderBottom: `1px solid rgba(28,28,28,0.08)` }}>
            <div style={{ display: "flex", alignItems: "center", gap: 4 }}>
              <div style={{ fontSize: 6.5, color: "rgba(28,28,28,0.4)", fontWeight: 700, width: 12 }}>Da:</div>
              <div style={{ height: 1.5, width: 50, background: "rgba(28,28,28,0.25)", borderRadius: 1 }}></div>
            </div>
            <div style={{ display: "flex", alignItems: "center", gap: 4, marginTop: 2 }}>
              <div style={{ fontSize: 6.5, color: "rgba(28,28,28,0.4)", fontWeight: 700, width: 12 }}>Ogg:</div>
              <div style={{ height: 2, width: 70, background: "rgba(28,28,28,0.45)", borderRadius: 1 }}></div>
            </div>
          </div>
          {/* email body — tall 600px-wide format */}
          <div style={{ flex: 1, background: "#fff", display: "flex", flexDirection: "column", overflow: "hidden", border: `1px solid rgba(28,28,28,0.1)`, borderTop: "none", borderRadius: "0 0 3px 3px" }}>
            {/* logo header strip */}
            <div style={{ height: 14, background: INK, display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
              <div style={{ width: 28, height: 3, background: "#FFDF00", borderRadius: 1 }}></div>
            </div>
            {/* hero image */}
            <ImgBlock style={{ height: "28%", flexShrink: 0 }} />
            {/* content */}
            <div style={{ padding: "5px 7px", display: "flex", flexDirection: "column", gap: 4, flex: 1 }}>
              <div style={{ height: 3, background: "rgba(28,28,28,0.6)", width: "70%", borderRadius: 1 }}></div>
              <Lines n={3} w={["100%", "95%", "68%"]} gap={3} />
              {/* CTA button */}
              <div style={{ marginTop: 4, height: 10, background: "#FFDF00", borderRadius: 100, width: "55%", alignSelf: "center" }}></div>
              <Lines n={2} w={["100%", "80%"]} gap={3} />
            </div>
            {/* footer strip */}
            <div style={{ height: 8, background: "#F4F4F4", borderTop: `1px solid rgba(28,28,28,0.06)`, flexShrink: 0 }}></div>
          </div>
        </div>;
      break;

    case "newsletter":
      inner =
      <div style={{ width: "100%", height: "100%", background: "#DEDEDE", display: "flex", flexDirection: "column", overflow: "hidden" }}>
          {/* email client meta bar */}
          <div style={{ background: "#fff", padding: "4px 7px", flexShrink: 0, borderBottom: `1px solid rgba(28,28,28,0.08)` }}>
            <div style={{ display: "flex", alignItems: "center", gap: 4 }}>
              <div style={{ fontSize: 6.5, color: "rgba(28,28,28,0.4)", fontWeight: 700, width: 12 }}>Da:</div>
              <div style={{ height: 1.5, width: 50, background: "rgba(28,28,28,0.25)", borderRadius: 1 }}></div>
            </div>
            <div style={{ display: "flex", alignItems: "center", gap: 4, marginTop: 2 }}>
              <div style={{ fontSize: 6.5, color: "rgba(28,28,28,0.4)", fontWeight: 700, width: 12 }}>Ogg:</div>
              <div style={{ height: 2, width: 70, background: "rgba(28,28,28,0.45)", borderRadius: 1 }}></div>
            </div>
          </div>
          {/* email viewport — wide grey area with narrow newsletter column centered */}
          <div style={{ flex: 1, background: "#DEDEDE", display: "flex", justifyContent: "center", alignItems: "flex-start", padding: "6px 0", overflow: "hidden" }}>
            {/* narrow newsletter column ~55% of total width */}
            <div style={{ width: "55%", background: "#fff", display: "flex", flexDirection: "column", overflow: "hidden", flexShrink: 0, boxShadow: "0 1px 4px rgba(0,0,0,0.10)" }}>
              {/* logo header strip */}
              <div style={{ height: 12, background: INK, display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
                <div style={{ width: 22, height: 2.5, background: "#FFDF00", borderRadius: 1 }}></div>
              </div>
              {/* content above */}
              <div style={{ padding: "5px 6px 4px", display: "flex", flexDirection: "column", gap: 3 }}>
                <div style={{ height: 2.5, background: "rgba(28,28,28,0.5)", width: "52%", borderRadius: 1 }}></div>
                <Lines n={2} w={["100%", "72%"]} gap={3} />
              </div>
              {/* sponsor banner */}
              <AdSlot style={{ height: 28, width: "100%" }} label="SPONSOR" dim={dim} small />
              {/* content below */}
              <div style={{ padding: "4px 6px", display: "flex", flexDirection: "column", gap: 3 }}>
                <Lines n={2} w={["100%", "60%"]} gap={3} />
              </div>
            </div>
          </div>
        </div>;
      break;

    default:
      inner = <MiniPage><AdSlot style={{ flex: 1 }} dim={dim} /></MiniPage>;
  }

  return (
    <div style={{
      height, width: "100%",
      border: "1px solid rgba(28,28,28,0.12)",
      borderRadius: 8,
      overflow: "hidden",
      background: "#fff",
      boxShadow: "0 1px 4px rgba(0,0,0,0.05)"
    }}>
      {inner}
    </div>);

}

// ─── Dimension Schema ──────────────────────────────────────
function DimSchema({ w, h, label, maxW = 240, maxH = 150 }) {
  const ratio = w / h;
  let dw = maxW,dh = maxW / ratio;
  if (dh > maxH) {dh = maxH;dw = maxH * ratio;}
  dw = Math.max(dw, 40);dh = Math.max(dh, 28);
  return (
    <div style={{ display: "inline-flex", flexDirection: "column", alignItems: "center", gap: 6, padding: "18px 20px 6px" }}>
      <div style={{ position: "relative" }}>
        <div style={{ position: "absolute", top: -14, left: 0, width: dw, display: "flex", alignItems: "center", gap: 4, fontSize: 9, fontFamily: FONT_MONO, color: "#9E9E9E", fontWeight: 700 }}>
          <div style={{ flex: 1, height: 1, background: "#C7C7C7" }}></div>
          <span>{w}px</span>
          <div style={{ flex: 1, height: 1, background: "#C7C7C7" }}></div>
        </div>
        <div style={{ width: dw, height: dh, border: `1.5px solid rgba(28,28,28,0.6)`, backgroundImage: HATCH, borderRadius: 3, display: "flex", alignItems: "center", justifyContent: "center" }}>
          <span style={{ background: "#fff", border: `1px solid rgba(28,28,28,0.4)`, borderRadius: 3, padding: "2px 6px", fontFamily: FONT_MONO, fontSize: 11, fontWeight: 700, color: INK }}>{w}×{h}</span>
        </div>
        <div style={{ position: "absolute", top: 0, right: -22, height: dh, display: "flex", flexDirection: "column", alignItems: "center", gap: 4, fontSize: 9, fontFamily: FONT_MONO, color: "#9E9E9E", fontWeight: 700 }}>
          <div style={{ flex: 1, width: 1, background: "#C7C7C7" }}></div>
          <span style={{ writingMode: "vertical-rl" }}>{h}px</span>
          <div style={{ flex: 1, width: 1, background: "#C7C7C7" }}></div>
        </div>
      </div>
      {label && <div style={{ fontSize: 11, fontWeight: 700, color: "#9E9E9E", marginTop: 4 }}>{label}</div>}
    </div>);

}

Object.assign(window, { FormatPreview, DimSchema, AdSlot });