/* global React, Btn, WingDivider */

function Splash({ onEnter }) {
  return React.createElement("div", {
    className: "screen-scroll fade-in",
    style: { display: "flex", flexDirection: "column", overflow: "hidden" }
  },
    // speed-line backdrop
    React.createElement("div", { style: {
      position: "absolute", inset: 0, zIndex: 0,
      background: "radial-gradient(130% 80% at 50% 20%, #2a1e6e 0%, #140d40 50%, #070418 100%)"
    } }),
    React.createElement("div", { style: {
      position: "absolute", inset: 0, zIndex: 0, opacity: .5,
      backgroundImage: "linear-gradient(rgba(120,160,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(120,160,255,.06) 1px, transparent 1px)",
      backgroundSize: "40px 40px"
    } }),
    // glow
    React.createElement("div", { style: {
      position: "absolute", left: "50%", top: "36%", transform: "translate(-50%,-50%)", zIndex: 0,
      width: 440, height: 300, borderRadius: "50%",
      background: "radial-gradient(50% 50% at 50% 50%, rgba(124,77,255,.38), transparent 70%)", filter: "blur(6px)"
    } }),
    // motion: 速度线流动 + 入场白闪（参考竞品开场）
    React.createElement("div", { className: "speedlines" }),
    React.createElement("div", { className: "splash-flash" }),

    React.createElement("div", { style: { position: "relative", zIndex: 1, flex: 1, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", padding: "0 28px", gap: 6 } },
      React.createElement(WingDivider, { w: 240 }),
      // wordmark
      React.createElement("div", { style: { textAlign: "center", margin: "6px 0 0" } },
        React.createElement("div", { className: "splash-title", style: {
          fontFamily: "var(--font-cjk)", fontWeight: 900, fontSize: 62, lineHeight: .92, letterSpacing: ".02em",
          transform: "skewX(-8deg)",
          background: "linear-gradient(180deg,#ffffff 0%,#cfe6ff 34%,#7eb3ff 62%,#3f6fe0 100%)",
          WebkitBackgroundClip: "text", backgroundClip: "text", WebkitTextFillColor: "transparent",
          filter: "drop-shadow(0 2px 0 #2a1c6a) drop-shadow(0 4px 14px rgba(90,120,255,.6))"
        } }, "跑車", React.createElement("br"), "盛宴")),
      React.createElement("div", { className: "disp upper", style: { fontSize: 13, letterSpacing: ".42em", color: "var(--cyan-400)", marginTop: 4 } }, "SPORTS CAR FEAST"),

      // car art placeholder
      React.createElement("div", { className: "art-ph splash-car", style: { width: "82%", height: 168, marginTop: 22 } },
        React.createElement(CarSilhouette, { w: 200, color: "#ff6a52" }),
        React.createElement("div", { style: { marginTop: 4 } }, "座駕美術 · 主視覺")),

      React.createElement("div", { style: { flex: "none", height: 40 } })
    ),

    React.createElement("div", { style: { position: "relative", zIndex: 1, padding: "0 40px 56px" } },
      React.createElement(Btn, { kind: "red", size: "lg", full: true, onClick: onEnter,
        style: { fontSize: 20, letterSpacing: ".1em" } }, "點 擊 進 入"),
      React.createElement("div", { style: { textAlign: "center", marginTop: 14, fontSize: 11, color: "var(--txt-mute)" } }, "3 秒後自動進入 · 點擊跳過"))
  );
}

// shared sports-car side silhouette placeholder
function CarSilhouette({ w = 200, color = "rgba(246,221,147,.42)" }) {
  return React.createElement("svg", { width: w, height: w * 0.42, viewBox: "0 0 200 84", fill: "none" },
    React.createElement("path", {
      d: "M12 58 C18 44 30 40 46 39 L70 26 C78 20 88 17 100 17 L132 17 C150 17 162 24 172 38 L186 44 C192 46 194 50 194 56 L194 60 L12 60 Z",
      fill: "none", stroke: color, strokeWidth: 1.6, strokeLinejoin: "round"
    }),
    React.createElement("path", { d: "M74 30 L100 22 L126 22 L136 33 Z", fill: "none", stroke: color, strokeWidth: 1.2 }),
    React.createElement("circle", { cx: 56, cy: 62, r: 13, fill: "none", stroke: color, strokeWidth: 1.6 }),
    React.createElement("circle", { cx: 154, cy: 62, r: 13, fill: "none", stroke: color, strokeWidth: 1.6 }),
    React.createElement("path", { d: "M2 52 L40 52 M0 58 L34 58", stroke: color, strokeWidth: 1, opacity: .6 })
  );
}

Object.assign(window, { Splash, CarSilhouette });