// ============================================================
// 10 modern website style directions, each rendered as a hero/
// landing fragment. All content is invented for the exercise —
// no real brands, no copied marks.
// ============================================================

// Reusable placeholder block: striped SVG with a monospace label.
const ImgSlot = ({ label, h = 240, tone = "warm" }) => {
  const palettes = {
    warm:   { bg: "#efe9df", stripe: "#e3d9c8", ink: "#6b5e48" },
    cool:   { bg: "#e6eaef", stripe: "#d4dae3", ink: "#536175" },
    dark:   { bg: "#1a1a1c", stripe: "#242427", ink: "#8a8a90" },
    mono:   { bg: "#f1f1f1", stripe: "#e4e4e4", ink: "#6b6b6b" },
    neon:   { bg: "#0a0a14", stripe: "#11112a", ink: "#7b7ba8" },
    blush:  { bg: "#f3e7e3", stripe: "#ebd6d0", ink: "#7a5048" },
  };
  const p = palettes[tone] || palettes.warm;
  return (
    <div style={{
      width: "100%", height: h, background: p.bg, position: "relative",
      backgroundImage: `repeating-linear-gradient(135deg, ${p.bg} 0 14px, ${p.stripe} 14px 15px)`,
      display: "flex", alignItems: "center", justifyContent: "center",
      overflow: "hidden",
    }}>
      <span style={{
        fontFamily: "ui-monospace, 'SF Mono', Menlo, monospace",
        fontSize: 11, letterSpacing: "0.08em", textTransform: "uppercase",
        color: p.ink, padding: "4px 10px",
        border: `1px solid ${p.ink}40`, background: `${p.bg}d0`,
      }}>{label}</span>
    </div>
  );
};

// ============================================================
// 1. EDITORIAL SWISS — oversized serif, strict grid, restraint
// ============================================================
const StyleEditorial = () => (
  <div style={{
    width: "100%", height: "100%", background: "#f6f4ef", color: "#1a1a1a",
    fontFamily: "'Times New Roman', Times, serif",
    display: "grid", gridTemplateRows: "auto 1fr auto",
  }}>
    <header style={{
      display: "flex", justifyContent: "space-between", alignItems: "center",
      padding: "28px 56px", borderBottom: "1px solid #1a1a1a",
      fontSize: 13, fontFamily: "ui-sans-serif, system-ui, sans-serif",
      letterSpacing: "0.04em",
    }}>
      <div style={{ fontWeight: 700, letterSpacing: "0.18em" }}>VOLUME — N°14</div>
      <nav style={{ display: "flex", gap: 32 }}>
        <span>Index</span><span>Letters</span><span>About</span><span>Shop</span>
      </nav>
      <div style={{ fontVariantNumeric: "tabular-nums" }}>20.V.2026</div>
    </header>

    <main style={{
      display: "grid", gridTemplateColumns: "1fr 1fr", gap: 56,
      padding: "56px", alignItems: "end",
    }}>
      <div>
        <div style={{
          fontSize: 11, fontFamily: "ui-sans-serif, system-ui, sans-serif",
          letterSpacing: "0.2em", textTransform: "uppercase", marginBottom: 32,
        }}>Issue One · Spring</div>
        <h1 style={{
          fontSize: 132, lineHeight: 0.92, letterSpacing: "-0.04em",
          margin: 0, fontWeight: 400, textWrap: "balance",
        }}>
          A quiet<br/><em style={{ fontStyle: "italic" }}>periodical</em><br/>for the<br/>working hand.
        </h1>
      </div>
      <div style={{ display: "grid", gap: 24 }}>
        <ImgSlot label="cover photograph · 4:5" h={340} tone="warm" />
        <p style={{
          fontSize: 16, lineHeight: 1.5, margin: 0, maxWidth: 360,
          fontFamily: "ui-sans-serif, system-ui, sans-serif", color: "#3a3a3a",
        }}>
          Twelve essays, one folio of plates, and a removable broadsheet.
          Printed in two passes on uncoated stock. Mailed flat.
        </p>
        <button style={{
          background: "#1a1a1a", color: "#f6f4ef", border: "none",
          padding: "18px 28px", fontSize: 13, letterSpacing: "0.16em",
          textTransform: "uppercase", fontFamily: "ui-sans-serif, system-ui, sans-serif",
          width: "fit-content", cursor: "pointer",
        }}>Subscribe · $48 / yr</button>
      </div>
    </main>

    <footer style={{
      display: "flex", justifyContent: "space-between",
      padding: "20px 56px", borderTop: "1px solid #1a1a1a",
      fontSize: 11, fontFamily: "ui-sans-serif, system-ui, sans-serif",
      letterSpacing: "0.16em", textTransform: "uppercase",
    }}>
      <span>001 / 048</span><span>Printed in Leipzig</span><span>ISSN 0000-0000</span>
    </footer>
  </div>
);

// ============================================================
// 2. NEO-BRUTALISM — thick borders, hard shadows, primary colors
// ============================================================
const StyleBrutalist = () => (
  <div style={{
    width: "100%", height: "100%", background: "#fff8e6",
    fontFamily: "'Space Grotesk', ui-sans-serif, system-ui, sans-serif",
    color: "#0a0a0a", position: "relative", overflow: "hidden",
    padding: 40,
  }}>
    <header style={{
      display: "flex", justifyContent: "space-between", alignItems: "center",
      padding: "14px 22px", border: "3px solid #0a0a0a", background: "#fff",
      boxShadow: "6px 6px 0 #0a0a0a", marginBottom: 32,
    }}>
      <div style={{
        fontWeight: 800, fontSize: 22, letterSpacing: "-0.02em",
        display: "flex", alignItems: "center", gap: 10,
      }}>
        <div style={{ width: 22, height: 22, background: "#ff5b3a", border: "2px solid #0a0a0a" }}></div>
        STAMPR
      </div>
      <nav style={{ display: "flex", gap: 8 }}>
        {["Templates", "Pricing", "Docs"].map(l => (
          <span key={l} style={{
            padding: "6px 14px", border: "2px solid #0a0a0a", background: "#fff",
            fontWeight: 600, fontSize: 14,
          }}>{l}</span>
        ))}
        <span style={{
          padding: "6px 14px", border: "2px solid #0a0a0a", background: "#0a0a0a",
          color: "#fff8e6", fontWeight: 700, fontSize: 14,
        }}>Sign up →</span>
      </nav>
    </header>

    <div style={{
      display: "grid", gridTemplateColumns: "1.3fr 1fr", gap: 28,
    }}>
      <div style={{
        background: "#74d0a4", border: "3px solid #0a0a0a",
        boxShadow: "10px 10px 0 #0a0a0a", padding: "44px 40px",
      }}>
        <div style={{
          display: "inline-block", padding: "4px 10px", background: "#0a0a0a",
          color: "#fff8e6", fontSize: 12, fontWeight: 700, letterSpacing: "0.04em",
          marginBottom: 24,
        }}>NEW · v3.0 SHIPPED</div>
        <h1 style={{
          fontSize: 84, lineHeight: 0.92, margin: 0, letterSpacing: "-0.04em",
          fontWeight: 800,
        }}>
          Ship the<br/>damn<br/><span style={{
            background: "#0a0a0a", color: "#ff5b3a", padding: "0 14px",
            display: "inline-block",
          }}>landing</span>.
        </h1>
        <p style={{
          fontSize: 17, lineHeight: 1.4, marginTop: 28, maxWidth: 440,
          fontWeight: 500,
        }}>
          80 blocks. 12 themes. Zero JavaScript. Drag, drop, deploy.
          Loved by 14,200 makers who hated their old builder.
        </p>
        <div style={{ display: "flex", gap: 12, marginTop: 28 }}>
          <button style={{
            background: "#ff5b3a", border: "3px solid #0a0a0a", padding: "16px 28px",
            fontWeight: 800, fontSize: 16, cursor: "pointer",
            boxShadow: "5px 5px 0 #0a0a0a", fontFamily: "inherit",
          }}>Start free →</button>
          <button style={{
            background: "#fff", border: "3px solid #0a0a0a", padding: "16px 28px",
            fontWeight: 700, fontSize: 16, cursor: "pointer", fontFamily: "inherit",
          }}>See templates</button>
        </div>
      </div>

      <div style={{ display: "grid", gap: 20, gridTemplateRows: "1fr 1fr" }}>
        <div style={{
          background: "#fff", border: "3px solid #0a0a0a",
          boxShadow: "6px 6px 0 #0a0a0a", padding: 22,
        }}>
          <div style={{ fontSize: 56, fontWeight: 800, lineHeight: 1 }}>4.9★</div>
          <div style={{ fontSize: 14, fontWeight: 500, marginTop: 8 }}>
            from 2,140 makers on ProductHunt
          </div>
        </div>
        <div style={{
          background: "#7ec1ff", border: "3px solid #0a0a0a",
          boxShadow: "6px 6px 0 #0a0a0a", padding: 22, position: "relative",
        }}>
          <div style={{ fontSize: 13, fontWeight: 700, letterSpacing: "0.08em" }}>
            LIVE
          </div>
          <div style={{ fontSize: 28, fontWeight: 700, marginTop: 4, lineHeight: 1.1 }}>
            Builds in 19 seconds — try the demo, no signup.
          </div>
          <div style={{
            position: "absolute", bottom: 18, right: 18, width: 44, height: 44,
            border: "3px solid #0a0a0a", background: "#fff8e6",
            display: "flex", alignItems: "center", justifyContent: "center",
            fontSize: 22, fontWeight: 800,
          }}>→</div>
        </div>
      </div>
    </div>
  </div>
);

// ============================================================
// 3. BENTO GRID — modular cards, soft pastels, product-led
// ============================================================
const StyleBento = () => (
  <div style={{
    width: "100%", height: "100%", background: "#0f0f12", color: "#fff",
    fontFamily: "'Inter', ui-sans-serif, system-ui, sans-serif",
    padding: 36, display: "grid", gridTemplateRows: "auto 1fr",
    gap: 24,
  }}>
    <header style={{
      display: "flex", justifyContent: "space-between", alignItems: "center",
    }}>
      <div style={{ display: "flex", alignItems: "center", gap: 10, fontWeight: 600 }}>
        <div style={{
          width: 28, height: 28, borderRadius: 8,
          background: "linear-gradient(135deg, #b794f6 0%, #4fd1c5 100%)",
        }}></div>
        Layr Studio
      </div>
      <nav style={{ display: "flex", gap: 28, fontSize: 14, color: "#a0a0aa" }}>
        <span>Product</span><span>Showcase</span><span>Changelog</span><span>Pricing</span>
      </nav>
      <button style={{
        background: "#fff", color: "#0f0f12", border: "none",
        padding: "10px 20px", borderRadius: 999, fontWeight: 600, fontSize: 14,
        cursor: "pointer",
      }}>Open app</button>
    </header>

    <div style={{
      display: "grid", gridTemplateColumns: "1.4fr 1fr 1fr",
      gridTemplateRows: "1fr 1fr", gap: 16,
    }}>
      <div style={{
        gridRow: "span 2", borderRadius: 24,
        background: "linear-gradient(160deg, #1c1c22 0%, #14141a 100%)",
        border: "1px solid #ffffff10", padding: 32, position: "relative",
        overflow: "hidden",
      }}>
        <div style={{
          fontSize: 12, color: "#b794f6", letterSpacing: "0.12em",
          textTransform: "uppercase", fontWeight: 600,
        }}>Layr 4.0 · ai layouts</div>
        <h1 style={{
          fontSize: 56, lineHeight: 1, margin: "16px 0 18px", letterSpacing: "-0.03em",
          fontWeight: 600, textWrap: "balance",
        }}>
          Design systems that{" "}
          <span style={{
            background: "linear-gradient(90deg, #b794f6, #4fd1c5)",
            WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent",
          }}>ship themselves.</span>
        </h1>
        <p style={{ fontSize: 16, color: "#9a9aa6", lineHeight: 1.5, maxWidth: 380 }}>
          One source of truth. Code, Figma, docs — always in step.
        </p>
        <div style={{ display: "flex", gap: 10, marginTop: 24 }}>
          <button style={{
            background: "#fff", color: "#0f0f12", border: "none", padding: "12px 22px",
            borderRadius: 999, fontWeight: 600, fontSize: 14, cursor: "pointer",
          }}>Start building →</button>
          <button style={{
            background: "transparent", color: "#fff", border: "1px solid #ffffff20",
            padding: "12px 22px", borderRadius: 999, fontSize: 14, cursor: "pointer",
          }}>Watch 2-min tour</button>
        </div>
        <div style={{
          position: "absolute", right: -60, bottom: -40, width: 260, height: 260,
          borderRadius: "50%",
          background: "radial-gradient(circle, #b794f650 0%, transparent 70%)",
          filter: "blur(8px)",
        }}></div>
      </div>

      <div style={{
        borderRadius: 24, background: "#14141a", border: "1px solid #ffffff10",
        padding: 22, display: "flex", flexDirection: "column", justifyContent: "space-between",
      }}>
        <div style={{ fontSize: 13, color: "#9a9aa6" }}>Components synced</div>
        <div style={{ fontSize: 52, fontWeight: 600, letterSpacing: "-0.03em" }}>
          1,284
        </div>
        <div style={{ display: "flex", alignItems: "center", gap: 6, color: "#4fd1c5", fontSize: 13 }}>
          ↑ 18% this week
        </div>
      </div>

      <div style={{
        borderRadius: 24, background: "#1d1426", border: "1px solid #b794f630",
        padding: 22, position: "relative", overflow: "hidden",
      }}>
        <div style={{ fontSize: 13, color: "#c0a8e8" }}>Live preview</div>
        <div style={{
          marginTop: 14, height: 120, borderRadius: 12,
          background: "#0f0f12", border: "1px solid #ffffff10",
          display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 6, padding: 10,
        }}>
          {[..."abcdef"].map((_, i) => (
            <div key={i} style={{
              background: "#ffffff08", borderRadius: 6,
              border: i === 2 ? "1px solid #b794f680" : "1px solid transparent",
            }}></div>
          ))}
        </div>
      </div>

      <div style={{
        borderRadius: 24, background: "#14141a", border: "1px solid #ffffff10",
        padding: 22, gridColumn: "span 2",
        display: "grid", gridTemplateColumns: "1fr auto", alignItems: "center", gap: 16,
      }}>
        <div>
          <div style={{ fontSize: 13, color: "#9a9aa6", marginBottom: 6 }}>
            Trusted by teams at
          </div>
          <div style={{
            display: "flex", gap: 22, alignItems: "center",
            fontWeight: 600, fontSize: 17, color: "#cfcfd6",
            letterSpacing: "-0.01em",
          }}>
            <span>Halcyon</span><span>·</span><span>Kestrel</span><span>·</span>
            <span>Mossbank</span><span>·</span><span>Tide</span><span>·</span>
            <span>Verra</span>
          </div>
        </div>
        <div style={{
          padding: "10px 18px", borderRadius: 999,
          background: "#ffffff08", border: "1px solid #ffffff14",
          fontSize: 13, color: "#cfcfd6",
        }}>+ 240 more →</div>
      </div>
    </div>
  </div>
);

// ============================================================
// 4. GLASS / AURORA — vibrant gradient, frosted blur, soft sans
// ============================================================
const StyleAurora = () => (
  <div style={{
    width: "100%", height: "100%", color: "#fff",
    fontFamily: "'Inter', ui-sans-serif, system-ui, sans-serif",
    background: "#0a0420", position: "relative", overflow: "hidden",
  }}>
    {/* Aurora blobs */}
    <div style={{
      position: "absolute", top: -200, left: -100, width: 700, height: 700,
      borderRadius: "50%",
      background: "radial-gradient(circle, #ff3aa8 0%, transparent 60%)",
      filter: "blur(80px)", opacity: 0.7,
    }}></div>
    <div style={{
      position: "absolute", bottom: -200, right: -100, width: 700, height: 700,
      borderRadius: "50%",
      background: "radial-gradient(circle, #3a7bff 0%, transparent 60%)",
      filter: "blur(80px)", opacity: 0.7,
    }}></div>
    <div style={{
      position: "absolute", top: 200, right: 200, width: 400, height: 400,
      borderRadius: "50%",
      background: "radial-gradient(circle, #00e5b3 0%, transparent 60%)",
      filter: "blur(70px)", opacity: 0.5,
    }}></div>

    {/* Glass nav */}
    <header style={{
      position: "relative", margin: "24px 40px",
      padding: "12px 18px", borderRadius: 999,
      background: "#ffffff10", backdropFilter: "blur(24px)",
      border: "1px solid #ffffff20",
      display: "flex", justifyContent: "space-between", alignItems: "center",
    }}>
      <div style={{ display: "flex", alignItems: "center", gap: 10, fontWeight: 600, paddingLeft: 8 }}>
        <div style={{
          width: 22, height: 22, borderRadius: "50%",
          background: "conic-gradient(from 0deg, #ff3aa8, #3a7bff, #00e5b3, #ff3aa8)",
        }}></div>
        Halo
      </div>
      <nav style={{ display: "flex", gap: 24, fontSize: 14, opacity: 0.85 }}>
        <span>Platform</span><span>Solutions</span><span>Library</span><span>Pricing</span>
      </nav>
      <button style={{
        background: "#fff", color: "#0a0420", border: "none",
        padding: "8px 18px", borderRadius: 999, fontWeight: 600, fontSize: 13,
        cursor: "pointer",
      }}>Get early access</button>
    </header>

    {/* Hero */}
    <main style={{
      position: "relative", padding: "70px 40px 0",
      display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 40, alignItems: "center",
    }}>
      <div>
        <div style={{
          display: "inline-flex", alignItems: "center", gap: 8,
          padding: "6px 14px", borderRadius: 999,
          background: "#ffffff10", border: "1px solid #ffffff20",
          backdropFilter: "blur(12px)", fontSize: 12, marginBottom: 24,
        }}>
          <span style={{
            width: 6, height: 6, borderRadius: "50%", background: "#00e5b3",
            boxShadow: "0 0 8px #00e5b3",
          }}></span>
          New · Halo Compose enters beta
        </div>
        <h1 style={{
          fontSize: 88, lineHeight: 0.96, margin: 0, fontWeight: 500,
          letterSpacing: "-0.04em", textWrap: "balance",
        }}>
          A workspace that <span style={{ fontStyle: "italic", fontWeight: 300 }}>thinks</span> in colour.
        </h1>
        <p style={{
          fontSize: 18, lineHeight: 1.5, marginTop: 24, opacity: 0.8,
          maxWidth: 460,
        }}>
          Notes, canvases, and prompts in one luminous surface.
          Built for designers who don't need another folder tree.
        </p>
        <div style={{ display: "flex", gap: 12, marginTop: 28 }}>
          <button style={{
            background: "#fff", color: "#0a0420", border: "none",
            padding: "14px 26px", borderRadius: 999, fontWeight: 600,
            fontSize: 15, cursor: "pointer",
          }}>Try Halo free</button>
          <button style={{
            background: "#ffffff10", color: "#fff",
            border: "1px solid #ffffff30", backdropFilter: "blur(12px)",
            padding: "14px 26px", borderRadius: 999, fontSize: 15, cursor: "pointer",
          }}>▶ Watch the film</button>
        </div>
      </div>

      <div style={{
        background: "#ffffff10", backdropFilter: "blur(24px)",
        border: "1px solid #ffffff20", borderRadius: 28, padding: 18,
      }}>
        <div style={{
          display: "flex", gap: 6, marginBottom: 14,
        }}>
          {["#ff5b6b", "#ffce5b", "#5bff8c"].map(c => (
            <div key={c} style={{ width: 11, height: 11, borderRadius: "50%", background: c, opacity: 0.7 }}></div>
          ))}
        </div>
        <ImgSlot label="product canvas · 16:10" h={220} tone="dark" />
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 8, marginTop: 12 }}>
          {[1,2,3].map(i => (
            <div key={i} style={{
              borderRadius: 12, padding: 10, fontSize: 11,
              background: "#ffffff08", border: "1px solid #ffffff14",
            }}>
              <div style={{ opacity: 0.6, marginBottom: 4 }}>Board #{i}</div>
              <div style={{ fontWeight: 600 }}>3 frames</div>
            </div>
          ))}
        </div>
      </div>
    </main>
  </div>
);

// ============================================================
// 5. TERMINAL / MONO — black bg, monospace, hacker minimal
// ============================================================
const StyleTerminal = () => (
  <div style={{
    width: "100%", height: "100%", background: "#0b0b0b", color: "#e8e8d8",
    fontFamily: "ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, monospace",
    padding: 32, display: "grid", gridTemplateRows: "auto 1fr", gap: 24,
  }}>
    <header style={{
      display: "flex", justifyContent: "space-between", alignItems: "center",
      borderBottom: "1px solid #2a2a2a", paddingBottom: 16,
    }}>
      <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
        <span style={{ color: "#7cf07c" }}>$</span>
        <span style={{ fontWeight: 600 }}>localhost.dev</span>
        <span style={{ color: "#666", fontSize: 13 }}>~/forge</span>
      </div>
      <nav style={{ display: "flex", gap: 24, fontSize: 13, color: "#999" }}>
        <span>./docs</span><span>./changelog</span><span>./pricing</span>
        <span style={{ color: "#e8e8d8" }}>./login →</span>
      </nav>
    </header>

    <main style={{
      display: "grid", gridTemplateColumns: "1fr 1fr", gap: 48, alignItems: "start",
    }}>
      <div>
        <div style={{ color: "#7cf07c", fontSize: 13, marginBottom: 16 }}>
          ▸ build_0427 · 11ms cold start
        </div>
        <h1 style={{
          fontSize: 56, lineHeight: 1.05, margin: 0, fontWeight: 600,
          letterSpacing: "-0.02em",
        }}>
          forge<span style={{ color: "#7cf07c" }}>()</span><br/>
          — a tiny <span style={{ background: "#e8e8d8", color: "#0b0b0b", padding: "0 6px" }}>db</span><br/>
          for serious people.
        </h1>
        <p style={{
          fontSize: 14, lineHeight: 1.6, marginTop: 28, color: "#a8a89c",
          maxWidth: 440,
        }}>
          {`// 0 dependencies. 28kb gzipped. Edge-deployable.`}<br/>
          {`// SQL syntax, KV speed. Built in Rust.`}
        </p>

        <div style={{
          marginTop: 28, padding: 18, background: "#141414",
          border: "1px solid #2a2a2a", borderRadius: 4, fontSize: 13,
          lineHeight: 1.7,
        }}>
          <div style={{ color: "#666" }}>$ npm i @forge/edge</div>
          <div style={{ color: "#7cf07c" }}>✓ installed in 0.8s</div>
          <div style={{ color: "#666" }}>$ forge init</div>
          <div style={{ color: "#7cf07c" }}>✓ ready — visit :3000</div>
          <div style={{ color: "#e8e8d8" }}>$ <span style={{
            display: "inline-block", width: 8, height: 14, background: "#e8e8d8",
            verticalAlign: "middle", animation: "blink 1s step-end infinite",
          }}></span></div>
        </div>
      </div>

      <div style={{ display: "grid", gap: 14 }}>
        {[
          { k: "latency.p99", v: "1.4ms", h: "+0.0ms wk" },
          { k: "regions", v: "37", h: "all green" },
          { k: "stars", v: "24.8k", h: "↑ 1,204 wk" },
          { k: "uptime.90d", v: "99.998%", h: "no incidents" },
        ].map(r => (
          <div key={r.k} style={{
            display: "grid", gridTemplateColumns: "1fr auto auto", alignItems: "baseline",
            padding: "14px 18px", border: "1px solid #2a2a2a", borderRadius: 4,
            background: "#0f0f0f", fontSize: 14,
          }}>
            <span style={{ color: "#999" }}>{r.k}</span>
            <span style={{ fontSize: 24, fontWeight: 600, marginRight: 16 }}>{r.v}</span>
            <span style={{ color: "#7cf07c", fontSize: 11 }}>{r.h}</span>
          </div>
        ))}
        <div style={{ display: "flex", gap: 10, marginTop: 6 }}>
          <button style={{
            background: "#e8e8d8", color: "#0b0b0b", border: "none",
            padding: "12px 22px", fontSize: 13, fontWeight: 600,
            fontFamily: "inherit", cursor: "pointer", borderRadius: 3,
          }}>[read docs]</button>
          <button style={{
            background: "transparent", color: "#e8e8d8", border: "1px solid #2a2a2a",
            padding: "12px 22px", fontSize: 13, fontFamily: "inherit", cursor: "pointer",
            borderRadius: 3,
          }}>$ open shell</button>
        </div>
      </div>
    </main>
    <style>{`@keyframes blink { 50% { opacity: 0; } }`}</style>
  </div>
);

// ============================================================
// 6. ORGANIC / WARM SERIF — soft shapes, blush palette, slow
// ============================================================
const StyleOrganic = () => (
  <div style={{
    width: "100%", height: "100%", background: "#f5ece3", color: "#3a2820",
    fontFamily: "'DM Serif Display', 'Times New Roman', serif",
    padding: "32px 48px", position: "relative", overflow: "hidden",
  }}>
    <div style={{
      position: "absolute", top: -120, right: -120, width: 380, height: 380,
      background: "#e8b4a0", borderRadius: "62% 38% 51% 49% / 47% 56% 44% 53%",
      opacity: 0.7,
    }}></div>
    <div style={{
      position: "absolute", bottom: -150, left: -80, width: 420, height: 320,
      background: "#c8d8c0", borderRadius: "38% 62% 49% 51% / 56% 47% 53% 44%",
      opacity: 0.6,
    }}></div>

    <header style={{
      display: "flex", justifyContent: "space-between", alignItems: "center",
      marginBottom: 64, position: "relative",
      fontFamily: "'Inter', ui-sans-serif, system-ui, sans-serif",
    }}>
      <div style={{ display: "flex", alignItems: "baseline", gap: 6 }}>
        <span style={{ fontFamily: "'DM Serif Display', serif", fontSize: 26, fontStyle: "italic" }}>marrow</span>
        <span style={{ fontSize: 11, color: "#7a5048" }}>· slow goods co.</span>
      </div>
      <nav style={{ display: "flex", gap: 28, fontSize: 13, color: "#5a3e34" }}>
        <span>Field notes</span><span>The pantry</span><span>Stockists</span><span>Letters</span>
      </nav>
      <div style={{
        padding: "8px 16px", border: "1px solid #3a2820", borderRadius: 999,
        fontSize: 12, color: "#3a2820",
      }}>bag · 0</div>
    </header>

    <main style={{
      position: "relative",
      display: "grid", gridTemplateColumns: "1.1fr 0.9fr", gap: 48,
      alignItems: "center",
    }}>
      <div>
        <div style={{
          fontFamily: "'Inter', ui-sans-serif, system-ui, sans-serif",
          fontSize: 11, letterSpacing: "0.2em", textTransform: "uppercase",
          color: "#7a5048", marginBottom: 24,
        }}>
          · the spring releases ·
        </div>
        <h1 style={{
          fontSize: 108, lineHeight: 0.96, margin: 0, fontWeight: 400,
          letterSpacing: "-0.02em",
        }}>
          A little<br/>
          <em style={{ fontStyle: "italic" }}>honey,</em>{" "}
          <em style={{ fontStyle: "italic" }}>a little</em><br/>
          patience.
        </h1>
        <p style={{
          fontFamily: "'Inter', ui-sans-serif, system-ui, sans-serif",
          fontSize: 16, lineHeight: 1.6, marginTop: 28, maxWidth: 420,
          color: "#5a3e34",
        }}>
          Twenty-eight new jars from the spring meadow harvest,
          poured by hand, labelled in pencil, sent in straw.
        </p>
        <div style={{
          display: "flex", gap: 14, marginTop: 32, alignItems: "center",
          fontFamily: "'Inter', ui-sans-serif, system-ui, sans-serif",
        }}>
          <button style={{
            background: "#3a2820", color: "#f5ece3", border: "none",
            padding: "16px 30px", borderRadius: 999, fontSize: 14, fontWeight: 500,
            cursor: "pointer",
          }}>Shop the harvest →</button>
          <span style={{ fontSize: 13, color: "#7a5048", fontStyle: "italic" }}>
            ships in straw, mondays
          </span>
        </div>
      </div>

      <div style={{
        background: "#fff8f0", borderRadius: 220,
        padding: 22, aspectRatio: "0.85",
        boxShadow: "0 30px 60px -20px #3a282020",
        display: "flex", alignItems: "center", justifyContent: "center",
        overflow: "hidden",
      }}>
        <div style={{
          width: "100%", height: "100%", borderRadius: 200,
          background: `repeating-linear-gradient(135deg, #f5d8c0 0 14px, #e8c8a8 14px 15px)`,
          display: "flex", alignItems: "center", justifyContent: "center",
          fontFamily: "ui-monospace, monospace", fontSize: 11, color: "#7a5048",
          letterSpacing: "0.08em", textTransform: "uppercase",
        }}>
          jar · still life
        </div>
      </div>
    </main>
  </div>
);

// ============================================================
// 7. CYBER / NEON GRID — dense data, neon accent, technical
// ============================================================
const StyleCyber = () => (
  <div style={{
    width: "100%", height: "100%", color: "#e0e0f0",
    background: "#06060f",
    backgroundImage: `
      linear-gradient(#0d0d1f 1px, transparent 1px),
      linear-gradient(90deg, #0d0d1f 1px, transparent 1px)
    `,
    backgroundSize: "32px 32px",
    fontFamily: "'Inter', ui-sans-serif, system-ui, sans-serif",
    padding: 32, position: "relative", overflow: "hidden",
  }}>
    <div style={{
      position: "absolute", top: 0, left: 0, right: 0, height: 6,
      background: "linear-gradient(90deg, #ff007a, #00f0ff, #b400ff)",
    }}></div>

    <header style={{
      display: "flex", justifyContent: "space-between", alignItems: "center",
      marginBottom: 40,
      fontFamily: "ui-monospace, 'JetBrains Mono', monospace",
    }}>
      <div style={{ display: "flex", alignItems: "center", gap: 14, fontSize: 14 }}>
        <span style={{
          color: "#00f0ff", textShadow: "0 0 8px #00f0ff80",
          fontWeight: 700, letterSpacing: "0.04em",
        }}>NULL//STATE</span>
        <span style={{ color: "#555" }}>v2.6.1-rc</span>
        <span style={{
          padding: "2px 8px", background: "#00f0ff20", color: "#00f0ff",
          fontSize: 11, border: "1px solid #00f0ff40",
        }}>● ONLINE</span>
      </div>
      <nav style={{ display: "flex", gap: 24, fontSize: 13, color: "#888" }}>
        <span>// runtime</span><span>// observability</span>
        <span>// console</span><span style={{ color: "#00f0ff" }}>// access</span>
      </nav>
    </header>

    <main style={{
      display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 32,
    }}>
      <div>
        <div style={{
          fontFamily: "ui-monospace, monospace", fontSize: 12,
          color: "#ff007a", marginBottom: 20,
        }}>
          ▶ TARGET_OS: ANY · CPU: 0.4% · MEM: 28MB
        </div>
        <h1 style={{
          fontSize: 84, lineHeight: 0.96, margin: 0, fontWeight: 700,
          letterSpacing: "-0.04em",
          background: "linear-gradient(180deg, #fff 0%, #888 100%)",
          WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent",
        }}>
          Run the<br/>
          <span style={{
            background: "linear-gradient(90deg, #ff007a, #00f0ff)",
            WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent",
          }}>edge,</span> not the<br/>
          datacentre.
        </h1>
        <p style={{
          fontSize: 16, color: "#a0a0c0", lineHeight: 1.5, marginTop: 24,
          maxWidth: 460,
        }}>
          A microVM runtime that boots in 12ms, anywhere on the planet.
          Stop renting servers. Start renting milliseconds.
        </p>
        <div style={{ display: "flex", gap: 12, marginTop: 28 }}>
          <button style={{
            background: "#00f0ff", color: "#06060f", border: "none",
            padding: "14px 26px", fontWeight: 700, fontSize: 14,
            fontFamily: "inherit", cursor: "pointer",
            clipPath: "polygon(0 0, 100% 0, 100% 70%, 92% 100%, 0 100%)",
          }}>DEPLOY NOW →</button>
          <button style={{
            background: "transparent", color: "#e0e0f0",
            border: "1px solid #00f0ff60", padding: "14px 26px",
            fontSize: 14, fontFamily: "inherit", cursor: "pointer",
          }}>$ open_console</button>
        </div>
      </div>

      <div style={{
        background: "#0a0a1a", border: "1px solid #00f0ff40", padding: 22,
        position: "relative",
      }}>
        <div style={{
          fontFamily: "ui-monospace, monospace", fontSize: 11,
          color: "#666", marginBottom: 12, display: "flex", justifyContent: "space-between",
        }}>
          <span>LIVE.TELEMETRY</span><span>14:22:09 UTC</span>
        </div>
        {[
          { region: "AMS", lat: "1.2ms", load: 72 },
          { region: "SFO", lat: "0.9ms", load: 58 },
          { region: "NRT", lat: "1.4ms", load: 81 },
          { region: "GRU", lat: "1.1ms", load: 44 },
          { region: "JNB", lat: "1.8ms", load: 33 },
        ].map(r => (
          <div key={r.region} style={{
            display: "grid", gridTemplateColumns: "50px 60px 1fr",
            gap: 12, alignItems: "center", padding: "10px 0",
            borderBottom: "1px solid #1a1a2a",
            fontFamily: "ui-monospace, monospace", fontSize: 13,
          }}>
            <span style={{ color: "#00f0ff" }}>{r.region}</span>
            <span>{r.lat}</span>
            <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
              <div style={{
                flex: 1, height: 4, background: "#1a1a2a", position: "relative",
              }}>
                <div style={{
                  position: "absolute", left: 0, top: 0, bottom: 0,
                  width: `${r.load}%`,
                  background: r.load > 70 ? "#ff007a" : "#00f0ff",
                  boxShadow: r.load > 70 ? "0 0 8px #ff007a" : "0 0 8px #00f0ff",
                }}></div>
              </div>
              <span style={{ color: "#888", fontSize: 11, width: 32 }}>{r.load}%</span>
            </div>
          </div>
        ))}
      </div>
    </main>
  </div>
);

// ============================================================
// 8. ANTI-DESIGN — overlapping, mixed type, raw, "more is more"
// ============================================================
const StyleAntiDesign = () => (
  <div style={{
    width: "100%", height: "100%", background: "#ebe6dd", color: "#111",
    fontFamily: "'Inter', ui-sans-serif, system-ui, sans-serif",
    position: "relative", overflow: "hidden", padding: 32,
  }}>
    {/* Floating sticker tape */}
    <div style={{
      position: "absolute", top: 40, right: -40, transform: "rotate(8deg)",
      background: "#ff4d3a", color: "#fff", padding: "6px 60px",
      fontWeight: 800, letterSpacing: "0.1em", fontSize: 13,
    }}>★ NEW ★ NEW ★ NEW ★ NEW ★</div>

    <header style={{
      display: "flex", justifyContent: "space-between", alignItems: "center",
      paddingBottom: 16, borderBottom: "2px solid #111",
    }}>
      <div style={{
        fontFamily: "'Times New Roman', serif", fontSize: 32, fontWeight: 700,
        fontStyle: "italic",
      }}>noise<span style={{ color: "#ff4d3a" }}>*</span>floor</div>
      <nav style={{ display: "flex", gap: 18, alignItems: "center", fontSize: 14 }}>
        <span style={{ textDecoration: "underline" }}>diary</span>
        <span style={{ background: "#111", color: "#ebe6dd", padding: "4px 10px" }}>SHOP↗</span>
        <span style={{ fontFamily: "monospace" }}>[ contact ]</span>
        <span style={{
          fontFamily: "'Times New Roman', serif", fontStyle: "italic",
          fontSize: 16,
        }}>about us</span>
      </nav>
    </header>

    <main style={{ position: "relative", marginTop: 32 }}>
      <h1 style={{
        fontFamily: "'Times New Roman', serif", margin: 0,
        fontSize: 220, lineHeight: 0.88, fontWeight: 400,
        letterSpacing: "-0.06em",
      }}>
        we make<br/>
        <span style={{
          fontFamily: "ui-monospace, monospace", fontSize: 100, fontWeight: 400,
          background: "#111", color: "#ebe6dd", padding: "0 14px",
          letterSpacing: "0", display: "inline-block",
          transform: "translateY(-12px)",
        }}>ugly</span>{" "}
        <span style={{ fontStyle: "italic" }}>magazines</span>
      </h1>

      <div style={{
        position: "absolute", top: 70, right: 40, width: 260,
        transform: "rotate(-3deg)",
        background: "#fff", padding: 14,
        boxShadow: "8px 8px 0 #111",
      }}>
        <ImgSlot label="issue 04 · cover" h={200} tone="mono" />
        <div style={{
          fontFamily: "ui-monospace, monospace", fontSize: 11,
          marginTop: 8, display: "flex", justifyContent: "space-between",
        }}>
          <span>ISSUE 04</span><span>£12.00</span>
        </div>
      </div>

      <div style={{
        position: "absolute", bottom: -10, left: 40, right: 40,
        display: "flex", alignItems: "center", justifyContent: "space-between",
      }}>
        <p style={{
          maxWidth: 380, fontSize: 15, lineHeight: 1.4,
          padding: 14, background: "#fff8a8", border: "2px solid #111",
          margin: 0,
        }}>
          A quarterly print zine for people who think websites peaked in 1998.
          Hand-collated. Sometimes stapled. Always opinionated.
        </p>
        <div style={{
          fontFamily: "'Times New Roman', serif", fontStyle: "italic",
          fontSize: 22, textAlign: "right",
        }}>
          <span style={{ textDecoration: "underline wavy #ff4d3a" }}>
            → subscribe, you coward
          </span>
        </div>
      </div>
    </main>
  </div>
);

// ============================================================
// 9. MINIMAL MONO — pure black on white, all type, one image
// ============================================================
const StyleMinimal = () => (
  <div style={{
    width: "100%", height: "100%", background: "#fafaf8", color: "#0a0a0a",
    fontFamily: "'Inter', ui-sans-serif, system-ui, sans-serif",
    padding: "32px 56px", display: "grid", gridTemplateRows: "auto 1fr auto",
  }}>
    <header style={{
      display: "flex", justifyContent: "space-between", alignItems: "center",
      fontSize: 13,
    }}>
      <div style={{ fontWeight: 600 }}>Atelier No.7</div>
      <nav style={{ display: "flex", gap: 32 }}>
        <span>Work</span><span>Studio</span><span>Journal</span>
        <span style={{ color: "#888" }}>Contact</span>
      </nav>
    </header>

    <main style={{
      display: "grid", gridTemplateColumns: "1fr 0.9fr", gap: 80,
      alignItems: "end", paddingBottom: 32,
    }}>
      <div>
        <div style={{
          fontSize: 12, letterSpacing: "0.18em", textTransform: "uppercase",
          color: "#888", marginBottom: 80,
        }}>
          Brand & identity, since 2017
        </div>
        <h1 style={{
          fontSize: 96, lineHeight: 1, margin: 0, fontWeight: 400,
          letterSpacing: "-0.04em",
        }}>
          We design<br/>
          the <span style={{
            borderBottom: "2px solid #0a0a0a", paddingBottom: 4,
          }}>quiet&nbsp;parts</span><br/>
          of loud companies.
        </h1>
        <div style={{
          marginTop: 56, display: "flex", gap: 48, fontSize: 13, color: "#444",
        }}>
          <div>
            <div style={{ color: "#888", fontSize: 11, letterSpacing: "0.12em", textTransform: "uppercase" }}>
              Currently
            </div>
            <div style={{ marginTop: 4 }}>One opening · Q3</div>
          </div>
          <div>
            <div style={{ color: "#888", fontSize: 11, letterSpacing: "0.12em", textTransform: "uppercase" }}>
              Based
            </div>
            <div style={{ marginTop: 4 }}>Copenhagen / NYC</div>
          </div>
          <div>
            <div style={{ color: "#888", fontSize: 11, letterSpacing: "0.12em", textTransform: "uppercase" }}>
              Selected
            </div>
            <div style={{ marginTop: 4 }}>Aesop · Loewe · MoMA</div>
          </div>
        </div>
      </div>
      <ImgSlot label="featured project · 4:5" h={460} tone="mono" />
    </main>

    <footer style={{
      display: "flex", justifyContent: "space-between", alignItems: "center",
      fontSize: 12, color: "#888", borderTop: "1px solid #0a0a0a20", paddingTop: 16,
    }}>
      <span>01 / 04 — Index</span>
      <span>↓ Scroll for the work</span>
      <span>© MMXXVI</span>
    </footer>
  </div>
);

// ============================================================
// 10. MAXIMALIST Y2K — gradient, chunky type, decoration
// ============================================================
const StyleMaximalist = () => (
  <div style={{
    width: "100%", height: "100%", color: "#1a0a3a",
    background: "linear-gradient(135deg, #ffb3d9 0%, #b3d9ff 50%, #d9b3ff 100%)",
    fontFamily: "'Inter', ui-sans-serif, system-ui, sans-serif",
    padding: 32, position: "relative", overflow: "hidden",
  }}>
    {/* Decorative shapes */}
    <div style={{
      position: "absolute", top: 80, right: 80, width: 120, height: 120,
      borderRadius: "50%",
      background: "radial-gradient(circle at 30% 30%, #fff, #ff66cc 60%)",
      boxShadow: "0 0 60px #ff66cc60",
    }}></div>
    <div style={{
      position: "absolute", bottom: 100, left: 100, width: 80, height: 80,
      background: "#7aff66", transform: "rotate(45deg)",
      boxShadow: "0 0 40px #7aff6680",
    }}></div>
    <div style={{
      position: "absolute", top: 280, left: 280, fontSize: 28,
      color: "#1a0a3a", transform: "rotate(-15deg)",
    }}>✦</div>

    <header style={{
      display: "flex", justifyContent: "space-between", alignItems: "center",
      padding: "10px 16px", borderRadius: 999, background: "#1a0a3a",
      color: "#fff",
    }}>
      <div style={{
        fontWeight: 800, fontSize: 18, letterSpacing: "-0.02em",
        display: "flex", alignItems: "center", gap: 8,
      }}>
        <span style={{ fontSize: 20 }}>✺</span>
        sugarglass.fm
      </div>
      <nav style={{ display: "flex", gap: 24, fontSize: 13 }}>
        <span>tunes</span><span>mixes</span><span>shop</span><span>RSVP →</span>
      </nav>
    </header>

    <main style={{
      position: "relative",
      display: "grid", gridTemplateColumns: "1.2fr 1fr",
      gap: 40, marginTop: 60, alignItems: "center",
    }}>
      <div>
        <div style={{
          display: "inline-block", padding: "6px 14px", borderRadius: 999,
          background: "#1a0a3a", color: "#7aff66", fontSize: 12, fontWeight: 700,
          letterSpacing: "0.08em", marginBottom: 24,
        }}>● LIVE BROADCAST · WED 8PM</div>
        <h1 style={{
          fontSize: 132, lineHeight: 0.9, margin: 0, fontWeight: 800,
          letterSpacing: "-0.05em", textWrap: "balance",
        }}>
          The sound<br/>
          of a <span style={{
            background: "linear-gradient(135deg, #ff66cc, #ffaa00)",
            WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent",
            fontStyle: "italic",
          }}>good</span><br/>
          summer.
        </h1>
        <div style={{ display: "flex", gap: 12, marginTop: 36, alignItems: "center" }}>
          <button style={{
            background: "#1a0a3a", color: "#fff", border: "none",
            padding: "16px 30px", borderRadius: 999, fontWeight: 700,
            fontSize: 15, cursor: "pointer", display: "flex", alignItems: "center", gap: 8,
          }}>▶ tune in</button>
          <button style={{
            background: "#fff", color: "#1a0a3a", border: "2px solid #1a0a3a",
            padding: "14px 28px", borderRadius: 999, fontWeight: 700,
            fontSize: 15, cursor: "pointer",
          }}>see the lineup ✦</button>
        </div>
      </div>

      <div style={{
        position: "relative", aspectRatio: "1", maxWidth: 380, margin: "0 auto",
      }}>
        <div style={{
          position: "absolute", inset: 0, borderRadius: "50%",
          background: "conic-gradient(from 0deg, #ff66cc, #ffaa00, #7aff66, #66ddff, #ff66cc)",
          padding: 6,
        }}>
          <div style={{
            width: "100%", height: "100%", borderRadius: "50%",
            background: "#1a0a3a", display: "flex", flexDirection: "column",
            alignItems: "center", justifyContent: "center", color: "#fff",
            textAlign: "center", padding: 30, gap: 8,
          }}>
            <div style={{ fontSize: 11, letterSpacing: "0.2em", color: "#ff66cc" }}>
              NOW PLAYING
            </div>
            <div style={{ fontSize: 28, fontWeight: 700, lineHeight: 1.1, fontStyle: "italic" }}>
              "Peach Skin"
            </div>
            <div style={{ fontSize: 13, color: "#b3d9ff" }}>by tangerine club</div>
            <div style={{
              marginTop: 14, height: 3, background: "#ffffff20",
              width: "70%", borderRadius: 999, position: "relative",
            }}>
              <div style={{
                position: "absolute", left: 0, top: 0, bottom: 0, width: "40%",
                background: "#7aff66", borderRadius: 999,
              }}></div>
            </div>
            <div style={{ fontSize: 11, fontFamily: "monospace", color: "#888" }}>
              01:42 / 04:21
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>
);

// ============================================================
// Export to window so the canvas file can pick them up
// ============================================================
Object.assign(window, {
  StyleEditorial, StyleBrutalist, StyleBento, StyleAurora, StyleTerminal,
  StyleOrganic, StyleCyber, StyleAntiDesign, StyleMinimal, StyleMaximalist,
});