/* eslint-disable */
// 7惑星 背景キービジュアル — セレクト画面用(俯瞰)/ バトル背景用(地面視点)
// viewBox 1920x1080 で1ファイル/惑星×2モード

const Bg = ({ children, sky, planet, fog }) => (
  <svg viewBox="0 0 1920 1080" width="100%" height="100%" preserveAspectRatio="xMidYMid slice">
    <defs>
      <linearGradient id="sky-grad" x1="0" y1="0" x2="0" y2="1">
        {sky.map((c, i) => <stop key={i} offset={`${(i/(sky.length-1))*100}%`} stopColor={c[0]} stopOpacity={c[1]||1}/>)}
      </linearGradient>
      {planet && (
        <radialGradient id="planet-grad" cx="40%" cy="40%">
          <stop offset="0%" stopColor={planet[0]}/>
          <stop offset="60%" stopColor={planet[1]}/>
          <stop offset="100%" stopColor={planet[2]}/>
        </radialGradient>
      )}
      {fog && (
        <radialGradient id="fog-grad" cx="50%" cy="100%">
          <stop offset="0%" stopColor={fog[0]} stopOpacity={fog[1]||0.6}/>
          <stop offset="100%" stopColor={fog[0]} stopOpacity="0"/>
        </radialGradient>
      )}
    </defs>
    <rect width="1920" height="1080" fill="url(#sky-grad)"/>
    {children}
  </svg>
);

const Stars = ({ count=80, seed=1 }) => {
  const out = [];
  let s = seed * 9301 + 49297;
  for (let i=0; i<count; i++) {
    s = (s * 9301 + 49297) % 233280;
    const x = (s / 233280) * 1920;
    s = (s * 9301 + 49297) % 233280;
    const y = (s / 233280) * 720;
    s = (s * 9301 + 49297) % 233280;
    const r = (s / 233280) * 2.5 + 0.4;
    out.push(<circle key={i} cx={x} cy={y} r={r} fill="#fff" opacity={r/3+0.3}/>);
  }
  return <g>{out}</g>;
};

// ─── CH.1 月面 LUNA ───
const Luna = ({mode='select'}) => (
  <Bg sky={[["#0A0F2E"],["#06091F"]]} planet={["#9BB4D4","#5D6E8E","#1E2342"]}>
    <Stars count={120} seed={1}/>
    {/* earth in distance */}
    <circle cx="1640" cy="220" r="80" fill="url(#planet-grad)" opacity="0.95"/>
    <circle cx="1640" cy="220" r="80" fill="none" stroke="#9BF0FF" strokeWidth="1.5" opacity="0.6"/>
    <ellipse cx="1620" cy="220" rx="20" ry="60" fill="#3A6FB0" opacity="0.5"/>
    {/* large moon close */}
    <circle cx="-200" cy="800" r="900" fill="#D8DDE6"/>
    <circle cx="-200" cy="800" r="900" fill="url(#planet-grad)" opacity="0.5"/>
    {/* craters */}
    <ellipse cx="200" cy="200" rx="60" ry="20" fill="#9BA5B8" opacity="0.5"/>
    <ellipse cx="500" cy="60" rx="100" ry="25" fill="#9BA5B8" opacity="0.4"/>
    <ellipse cx="350" cy="350" rx="40" ry="14" fill="#9BA5B8" opacity="0.5"/>
    {/* ground craters */}
    {mode==='battle' && (
      <g>
        <ellipse cx="960" cy="900" rx="500" ry="120" fill="#1A2040" opacity="0.7"/>
        <ellipse cx="960" cy="940" rx="700" ry="160" fill="#0E1230"/>
        <ellipse cx="300" cy="880" rx="180" ry="40" fill="#252C50" opacity="0.6"/>
        <ellipse cx="1600" cy="900" rx="200" ry="45" fill="#252C50" opacity="0.6"/>
        {/* base structures silhouette */}
        <path d="M 700 760 L 760 760 L 770 880 L 690 880 Z" fill="#0A0F2E"/>
        <path d="M 1180 740 L 1260 740 L 1280 880 L 1170 880 Z" fill="#0A0F2E"/>
        <rect x="1220" y="660" width="20" height="80" fill="#0A0F2E"/>
        <circle cx="1230" cy="650" r="6" fill="#FF3CAA"/>
      </g>
    )}
  </Bg>
);

// ─── CH.2 火星 MARS ───
const Mars = ({mode='select'}) => (
  <Bg sky={[["#3D1A0E"],["#7A2A14"],["#C9512A",0.8]]} planet={["#FF8B5A","#D4502E","#5A1F0E"]}
       fog={["#C97A4A", 0.4]}>
    {/* hazy sun */}
    <circle cx="400" cy="280" r="180" fill="#FFD4A0" opacity="0.35"/>
    <circle cx="400" cy="280" r="120" fill="#FFE4B5" opacity="0.5"/>
    {/* distant mountains */}
    <path d="M 0 580 L 200 460 L 380 540 L 520 480 L 720 540 L 900 460 L 1080 540 L 1280 480 L 1480 540 L 1700 460 L 1920 540 L 1920 720 L 0 720 Z" fill="#5A2415" opacity="0.7"/>
    <path d="M 0 640 L 220 540 L 480 600 L 700 540 L 920 600 L 1180 540 L 1420 620 L 1700 560 L 1920 620 L 1920 720 L 0 720 Z" fill="#3D1A0E"/>
    {/* dust haze bottom */}
    <rect width="1920" height="360" y="720" fill="url(#fog-grad)"/>
    {/* phobos */}
    <ellipse cx="1500" cy="180" rx="14" ry="10" fill="#9BA5B8" opacity="0.6"/>
    {mode==='battle' && (
      <g>
        {/* ground */}
        <rect width="1920" height="280" y="800" fill="#3D1A0E"/>
        <path d="M 0 820 L 1920 820" stroke="#7A2A14" strokeWidth="2"/>
        {/* rocks */}
        <path d="M 200 850 L 280 810 L 360 850 L 340 880 L 220 880 Z" fill="#5A2415"/>
        <path d="M 1500 870 L 1600 820 L 1680 860 L 1660 900 L 1520 900 Z" fill="#5A2415"/>
        <ellipse cx="900" cy="940" rx="120" ry="20" fill="#1F0A05"/>
        {/* base flag */}
        <rect x="1240" y="700" width="6" height="120" fill="#1A0A0A"/>
        <path d="M 1246 700 L 1320 720 L 1246 740 Z" fill="#FF3CAA"/>
      </g>
    )}
  </Bg>
);

// ─── CH.3 木星 JUPITER ───
const Jupiter = ({mode='select'}) => (
  <Bg sky={[["#2C1448"],["#5A1F6E"],["#8C2E6E",0.9]]}>
    <Stars count={60} seed={3}/>
    {/* huge gas giant */}
    <g>
      <circle cx="900" cy="500" r="600" fill="#E8A85A"/>
      {/* bands */}
      <ellipse cx="900" cy="360" rx="600" ry="36" fill="#C97A4A" opacity="0.7"/>
      <ellipse cx="900" cy="440" rx="600" ry="22" fill="#FFD8A0" opacity="0.5"/>
      <ellipse cx="900" cy="500" rx="600" ry="40" fill="#A85A2E" opacity="0.65"/>
      <ellipse cx="900" cy="560" rx="600" ry="28" fill="#FFE4B5" opacity="0.5"/>
      <ellipse cx="900" cy="620" rx="600" ry="34" fill="#C9512A" opacity="0.7"/>
      <ellipse cx="900" cy="680" rx="580" ry="24" fill="#5A2415" opacity="0.55"/>
      {/* great red spot */}
      <ellipse cx="1100" cy="540" rx="110" ry="50" fill="#D4264E" opacity="0.85"/>
      <ellipse cx="1100" cy="540" rx="80" ry="34" fill="#7A1428" opacity="0.7"/>
      {/* shading */}
      <circle cx="900" cy="500" r="600" fill="url(#planet-shade)" opacity="0.6"/>
    </g>
    <defs>
      <radialGradient id="planet-shade" cx="30%" cy="30%">
        <stop offset="0%" stopColor="#fff" stopOpacity="0"/>
        <stop offset="70%" stopColor="#000" stopOpacity="0"/>
        <stop offset="100%" stopColor="#000" stopOpacity="0.6"/>
      </radialGradient>
    </defs>
    {/* moons */}
    <circle cx="180" cy="280" r="18" fill="#D8DDE6"/>
    <circle cx="380" cy="160" r="10" fill="#FFD8A0"/>
    <circle cx="1740" cy="320" r="14" fill="#9BA5B8"/>
    {mode==='battle' && (
      <g>
        <rect width="1920" height="160" y="920" fill="rgba(40,15,80,.85)"/>
        <path d="M 0 920 Q 400 880 800 920 T 1920 920 L 1920 1080 L 0 1080 Z" fill="#2C1448"/>
        {/* metallic platform */}
        <rect width="1920" height="20" y="900" fill="#FFD86A"/>
        <path d="M 0 900 L 1920 900" stroke="#D4264E" strokeWidth="2"/>
      </g>
    )}
  </Bg>
);

// ─── CH.4 土星 SATURN ───
const Saturn = ({mode='select'}) => (
  <Bg sky={[["#1A0E3D"],["#3A1A5C"],["#5C2E7A"]]}>
    <Stars count={100} seed={4}/>
    {/* saturn with rings */}
    <g transform="translate(960, 540)">
      <ellipse cx="0" cy="0" rx="520" ry="100" fill="#9D4ED4" opacity="0.3" transform="rotate(-15)"/>
      <ellipse cx="0" cy="0" rx="500" ry="90" fill="none" stroke="#FFD86A" strokeWidth="8" opacity="0.7" transform="rotate(-15)"/>
      <ellipse cx="0" cy="0" rx="450" ry="80" fill="none" stroke="#9D4ED4" strokeWidth="4" opacity="0.8" transform="rotate(-15)"/>
      <ellipse cx="0" cy="0" rx="400" ry="68" fill="none" stroke="#FF8FD0" strokeWidth="3" opacity="0.6" transform="rotate(-15)"/>
      {/* planet */}
      <circle r="240" fill="#E8C078"/>
      <ellipse cx="0" cy="-60" rx="240" ry="20" fill="#C9912C" opacity="0.5"/>
      <ellipse cx="0" cy="0" rx="240" ry="14" fill="#A8703C" opacity="0.4"/>
      <ellipse cx="0" cy="60" rx="240" ry="18" fill="#7A4A2C" opacity="0.5"/>
      <circle r="240" fill="url(#planet-shade2)"/>
      {/* front ring slice */}
      <path d="M -500 60 A 500 90 -15 0 0 500 60" fill="none" stroke="#FFD86A" strokeWidth="6" opacity="0.85"/>
    </g>
    <defs>
      <radialGradient id="planet-shade2" cx="30%" cy="30%">
        <stop offset="0%" stopColor="#fff" stopOpacity="0"/>
        <stop offset="70%" stopColor="#000" stopOpacity="0"/>
        <stop offset="100%" stopColor="#000" stopOpacity="0.7"/>
      </radialGradient>
    </defs>
    {mode==='battle' && (
      <g>
        {/* ring fragments as floating platforms */}
        <rect width="1920" height="200" y="880" fill="rgba(26,14,61,.9)"/>
        <ellipse cx="500" cy="900" rx="240" ry="20" fill="#FFD86A" opacity="0.7"/>
        <ellipse cx="500" cy="900" rx="240" ry="20" fill="none" stroke="#9D4ED4" strokeWidth="2"/>
        <ellipse cx="1400" cy="930" rx="280" ry="22" fill="#FFD86A" opacity="0.6"/>
        <ellipse cx="1400" cy="930" rx="280" ry="22" fill="none" stroke="#9D4ED4" strokeWidth="2"/>
      </g>
    )}
  </Bg>
);

// ─── CH.5 天王星 URANUS ───
const Uranus = ({mode='select'}) => (
  <Bg sky={[["#0E2A4A"],["#1A4A7A"],["#2E7A9C"]]}>
    <Stars count={70} seed={5}/>
    {/* tilted planet */}
    <g transform="translate(1100, 500)">
      {/* vertical rings (uranus tilted axis) */}
      <ellipse cx="0" cy="0" rx="80" ry="500" fill="none" stroke="#9BF0FF" strokeWidth="4" opacity="0.7" transform="rotate(8)"/>
      <ellipse cx="0" cy="0" rx="100" ry="540" fill="none" stroke="#9BF0FF" strokeWidth="2" opacity="0.5" transform="rotate(8)"/>
      <ellipse cx="0" cy="0" rx="130" ry="580" fill="none" stroke="#00C8FF" strokeWidth="2" opacity="0.4" transform="rotate(8)"/>
      <circle r="320" fill="#7ED8E8"/>
      <circle r="320" fill="url(#urn-shade)"/>
      <ellipse cx="0" cy="-100" rx="320" ry="40" fill="#A0E8F0" opacity="0.5"/>
      <ellipse cx="0" cy="100" rx="320" ry="50" fill="#4A9CB0" opacity="0.4"/>
    </g>
    <defs>
      <radialGradient id="urn-shade" cx="30%" cy="30%">
        <stop offset="0%" stopColor="#fff" stopOpacity="0.2"/>
        <stop offset="70%" stopColor="#000" stopOpacity="0"/>
        <stop offset="100%" stopColor="#000" stopOpacity="0.7"/>
      </radialGradient>
    </defs>
    {/* aurora */}
    <path d="M 0 0 Q 400 100 800 60 T 1920 80 L 1920 0 Z" fill="#9BF0FF" opacity="0.15"/>
    <path d="M 0 0 Q 600 140 1200 100 T 1920 120 L 1920 0 Z" fill="#00C8FF" opacity="0.12"/>
    {mode==='battle' && (
      <g>
        <rect width="1920" height="240" y="840" fill="rgba(14,42,74,.85)"/>
        <path d="M 0 840 Q 400 800 800 840 T 1920 840 L 1920 1080 L 0 1080 Z" fill="#0A2A4A"/>
        {/* ice spikes */}
        <path d="M 200 900 L 280 700 L 320 900 Z" fill="#7ED8E8" opacity="0.7"/>
        <path d="M 1400 880 L 1500 740 L 1560 880 Z" fill="#7ED8E8" opacity="0.7"/>
        <path d="M 1640 920 L 1710 800 L 1760 920 Z" fill="#7ED8E8" opacity="0.6"/>
      </g>
    )}
  </Bg>
);

// ─── CH.6 海王星 NEPTUNE ───
const Neptune = ({mode='select'}) => (
  <Bg sky={[["#06173D"],["#0E2A6E"],["#1A4AA8"]]}>
    <Stars count={80} seed={6}/>
    {/* deep blue planet */}
    <g transform="translate(960, 540)">
      <circle r="400" fill="#2E5AC9"/>
      {/* storm bands */}
      <ellipse cx="0" cy="-100" rx="400" ry="50" fill="#1A3A8C" opacity="0.6"/>
      <ellipse cx="0" cy="40" rx="400" ry="40" fill="#5A7AD4" opacity="0.5"/>
      <ellipse cx="0" cy="160" rx="400" ry="44" fill="#0E2A6E" opacity="0.7"/>
      {/* dark spot */}
      <ellipse cx="-100" cy="-50" rx="80" ry="40" fill="#0A1A4A" opacity="0.85"/>
      <circle r="400" fill="url(#nep-shade)"/>
    </g>
    <defs>
      <radialGradient id="nep-shade" cx="30%" cy="30%">
        <stop offset="0%" stopColor="#9BF0FF" stopOpacity="0.2"/>
        <stop offset="60%" stopColor="#000" stopOpacity="0"/>
        <stop offset="100%" stopColor="#000" stopOpacity="0.8"/>
      </radialGradient>
    </defs>
    {/* lightning */}
    <path d="M 300 100 L 320 240 L 280 260 L 340 380 L 300 420" stroke="#FF3CAA" strokeWidth="3" fill="none" opacity="0.7"/>
    <path d="M 1620 60 L 1660 200 L 1620 220 L 1700 340" stroke="#9D4ED4" strokeWidth="2" fill="none" opacity="0.6"/>
    {mode==='battle' && (
      <g>
        <rect width="1920" height="280" y="800" fill="rgba(6,23,61,.9)"/>
        {/* dark waves */}
        <path d="M 0 800 Q 200 760 400 800 T 800 800 T 1200 800 T 1600 800 T 1920 800 L 1920 1080 L 0 1080 Z" fill="#0A1A4A"/>
        <path d="M 0 880 Q 240 850 480 880 T 960 880 T 1440 880 T 1920 880 L 1920 1080 L 0 1080 Z" fill="#06123A" opacity="0.85"/>
        {/* foam */}
        <path d="M 200 820 L 220 815 L 240 820 M 600 830 L 620 825 L 640 830 M 1300 820 L 1320 815 L 1340 820" stroke="#FF3CAA" strokeWidth="2" opacity="0.5" fill="none"/>
      </g>
    )}
  </Bg>
);

// ─── CH.7 暗黒星雲 NEBULA ───
const Nebula = ({mode='select'}) => (
  <Bg sky={[["#1A0A2A"],["#3D1A4A"],["#5A1F6E"],["#1A0A2A"]]}>
    <defs>
      <radialGradient id="neb-mag" cx="30%" cy="40%">
        <stop offset="0%" stopColor="#FF3CAA" stopOpacity="0.85"/>
        <stop offset="60%" stopColor="#9D4ED4" stopOpacity="0.4"/>
        <stop offset="100%" stopColor="#3D1A4A" stopOpacity="0"/>
      </radialGradient>
      <radialGradient id="neb-cyan" cx="70%" cy="60%">
        <stop offset="0%" stopColor="#00C8FF" stopOpacity="0.6"/>
        <stop offset="100%" stopColor="#00C8FF" stopOpacity="0"/>
      </radialGradient>
      <radialGradient id="neb-gold" cx="50%" cy="50%">
        <stop offset="0%" stopColor="#FFD86A" stopOpacity="0.6"/>
        <stop offset="100%" stopColor="#FFD86A" stopOpacity="0"/>
      </radialGradient>
    </defs>
    {/* magenta nebula clouds */}
    <ellipse cx="600" cy="400" rx="700" ry="380" fill="url(#neb-mag)"/>
    <ellipse cx="1400" cy="600" rx="600" ry="320" fill="url(#neb-cyan)"/>
    <circle cx="1100" cy="300" r="200" fill="url(#neb-gold)"/>
    <Stars count={200} seed={7}/>
    {/* glowing core */}
    <circle cx="960" cy="540" r="200" fill="#fff" opacity="0.15"/>
    <circle cx="960" cy="540" r="80" fill="#FF3CAA" opacity="0.6"/>
    <circle cx="960" cy="540" r="40" fill="#fff" opacity="0.85"/>
    {/* lightning rays */}
    <path d="M 960 540 L 1300 200 M 960 540 L 600 220 M 960 540 L 1400 880 M 960 540 L 500 860" stroke="#FF3CAA" strokeWidth="2" opacity="0.4"/>
    {mode==='battle' && (
      <g>
        <rect width="1920" height="200" y="880" fill="rgba(26,10,42,.85)"/>
        {/* floating debris */}
        <path d="M 0 900 L 1920 900" stroke="#9D4ED4" strokeWidth="2" opacity="0.4"/>
        <rect x="200" y="880" width="80" height="20" fill="#3D1A4A"/>
        <rect x="500" y="900" width="120" height="14" fill="#3D1A4A"/>
        <rect x="900" y="890" width="100" height="16" fill="#3D1A4A"/>
        <rect x="1400" y="900" width="180" height="18" fill="#3D1A4A"/>
        {/* purple flames */}
        <path d="M 300 900 Q 320 860 340 900 Z" fill="#FF3CAA" opacity="0.6"/>
        <path d="M 1500 905 Q 1520 870 1540 905 Z" fill="#9D4ED4" opacity="0.6"/>
      </g>
    )}
  </Bg>
);

window.PLANETS = [
  { id:'luna', name:'月面基地', en:'LUNA BASE', chapter:1, theme:'#9BB4D4',
    sub:'初出撃 / 重力1/6 / 真空', mood:'静謐な銀世界', Bg: Luna },
  { id:'mars', name:'火星砂漠', en:'MARS DESERT', chapter:2, theme:'#C9512A',
    sub:'砂塵嵐 / 重力1/3 / 高温', mood:'赤い荒野', Bg: Mars },
  { id:'jupiter', name:'木星圏', en:'JUPITER ORBIT', chapter:3, theme:'#E8A85A',
    sub:'巨大ガス / 強風 / 海賊横行', mood:'渦巻く大気', Bg: Jupiter },
  { id:'saturn', name:'土星リング', en:'SATURN RINGS', chapter:4, theme:'#FFD86A',
    sub:'氷塊回廊 / 反射光 / 幻影域', mood:'神秘の輝き', Bg: Saturn },
  { id:'uranus', name:'天王星氷海', en:'URANUS ICE SEA', chapter:5, theme:'#7ED8E8',
    sub:'極低温 / 縦リング / オーロラ', mood:'凍てつく蒼', Bg: Uranus },
  { id:'neptune', name:'海王星深海', en:'NEPTUNE DEEP', chapter:6, theme:'#2E5AC9',
    sub:'超高圧 / 嵐 / 帝国前線', mood:'深淵の青', Bg: Neptune },
  { id:'nebula', name:'暗黒星雲', en:'DARK NEBULA', chapter:7, theme:'#FF3CAA',
    sub:'時空歪曲 / 最終決戦地', mood:'禁忌の領域', Bg: Nebula },
];
