// Heavens Shot — Premium Heavenly Landing (Variant A)
// Original design inspired by user-supplied character art & noble aesthetic.
// No third-party casino/game UI is recreated — all visuals are original.

// ----------------------------------------------------------------------
// Ornaments & small primitives
// ----------------------------------------------------------------------

const Ornament = ({ width = 320, variant = 'divider' }) => {
  if (variant === 'divider') {
    return (
      <svg viewBox="0 0 400 24" width={width} height={Math.round(24 * width / 400)} style={{ display: 'block' }}>
        <defs>
          <linearGradient id="ornGrad" x1="0" y1="0" x2="1" y2="0">
            <stop offset="0%" stopColor="#B8892A" stopOpacity="0"/>
            <stop offset="30%" stopColor="#C9A13F"/>
            <stop offset="50%" stopColor="#F0D98C"/>
            <stop offset="70%" stopColor="#C9A13F"/>
            <stop offset="100%" stopColor="#B8892A" stopOpacity="0"/>
          </linearGradient>
        </defs>
        <line x1="20" y1="12" x2="150" y2="12" stroke="url(#ornGrad)" strokeWidth="1"/>
        <line x1="250" y1="12" x2="380" y2="12" stroke="url(#ornGrad)" strokeWidth="1"/>
        <g transform="translate(200 12)">
          <circle cx="0" cy="0" r="5" fill="none" stroke="#C9A13F" strokeWidth="1"/>
          <circle cx="0" cy="0" r="2" fill="#F0D98C"/>
          <path d="M-30 0 Q-20 -4 -12 0 Q-20 4 -30 0 Z" fill="#C9A13F"/>
          <path d="M30 0 Q20 -4 12 0 Q20 4 30 0 Z" fill="#C9A13F"/>
          <circle cx="-35" cy="0" r="1.5" fill="#C9A13F"/>
          <circle cx="35" cy="0" r="1.5" fill="#C9A13F"/>
        </g>
      </svg>
    );
  }
  return (
    <svg viewBox="0 0 200 40" width={width} height={Math.round(40 * width / 200)}>
      <g stroke="#C9A13F" strokeWidth="1" fill="none">
        <path d="M100 20 Q80 8 60 14 Q40 20 30 12"/>
        <path d="M100 20 Q120 8 140 14 Q160 20 170 12"/>
        <circle cx="30" cy="12" r="2" fill="#C9A13F"/>
        <circle cx="170" cy="12" r="2" fill="#C9A13F"/>
        <path d="M100 10 L95 20 L100 30 L105 20 Z" fill="#C9A13F"/>
        <circle cx="100" cy="20" r="1.5" fill="#F0D98C" stroke="none"/>
      </g>
    </svg>
  );
};

const RomanMedal = ({ n, size = 120 }) => {
  const roman = ['I', 'II', 'III', 'IV', 'V', 'VI'][n - 1];
  return (
    <div className="roman-num" style={{ width: size, height: size }}>
      <svg viewBox="0 0 120 120" width={size} height={size}>
        <defs>
          <radialGradient id={`rg-bg-${n}`} cx="0.3" cy="0.3">
            <stop offset="0%" stopColor="#1A2D5F"/>
            <stop offset="100%" stopColor="#0A1338"/>
          </radialGradient>
          <linearGradient id={`rg-gold-${n}`} x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor="#F7E4A3"/>
            <stop offset="50%" stopColor="#D9B356"/>
            <stop offset="100%" stopColor="#8B6518"/>
          </linearGradient>
        </defs>
        <circle cx="60" cy="60" r="58" fill={`url(#rg-bg-${n})`} stroke={`url(#rg-gold-${n})`} strokeWidth="1.5"/>
        <circle cx="60" cy="60" r="54" fill="none" stroke="#C9A13F" strokeWidth="0.5" opacity="0.5"/>
        <g fill="none" stroke={`url(#rg-gold-${n})`} strokeWidth="1.2" strokeLinecap="round">
          <path d="M22 60 Q24 50 28 46" /><path d="M22 60 Q24 68 28 72" />
          <path d="M26 54 Q30 50 34 52"/><path d="M26 66 Q30 70 34 68"/>
          <path d="M30 48 Q34 46 37 48"/><path d="M30 72 Q34 74 37 72"/>
          <path d="M98 60 Q96 50 92 46" /><path d="M98 60 Q96 68 92 72" />
          <path d="M94 54 Q90 50 86 52"/><path d="M94 66 Q90 70 86 68"/>
          <path d="M90 48 Q86 46 83 48"/><path d="M90 72 Q86 74 83 72"/>
        </g>
      </svg>
      <div className="roman-inner">
        <span className="roman-label">STEP</span>
        <span className="roman-letter">{roman}</span>
      </div>
    </div>
  );
};

const StepConnector = () => (
  <div className="p-step-connector" aria-hidden>
    <svg viewBox="0 0 20 80" width={16} height={64}>
      <line x1="10" y1="0" x2="10" y2="80" stroke="#C9A13F" strokeWidth="1" strokeDasharray="2 4"/>
      <circle cx="10" cy="40" r="3" fill="#C9A13F"/>
    </svg>
  </div>
);

// ----------------------------------------------------------------------
// Step card — reusable for the 6-stage ritual
// ----------------------------------------------------------------------
const StepCard = ({ n, chapter, title, desc, visual, impact }) => (
  <div className={`p-step reveal ${impact ? 'impact-step' : ''}`}>
    <div className="p-step-numcol"><RomanMedal n={n} size={130} /></div>
    <div className="p-step-body">
      <div className="p-step-meta">
        <div className="p-step-chapter-row no-avatar">
          <div className="p-step-chapter-meta">
            <span className={`p-step-chapter ${impact ? 'impact-chapter' : ''}`}>{chapter}</span>
          </div>
        </div>
        <h3 className="p-step-title">{title}</h3>
        <p className="p-step-desc">{desc}</p>
      </div>
      {visual ? <div className="p-step-visual">{visual}</div> : null}
    </div>
  </div>
);

// ----------------------------------------------------------------------
// Replay Guide — real screenshots of the Pragmatic replay flow,
// framed with noble gold corners + subtle spotlight.
// ----------------------------------------------------------------------
const ReplayShot = ({ src, alt }) => (
  <div className="replay-shot">
    <div className="replay-shot-inner">
      <img src={src} alt={alt} loading="lazy"/>
      <span className="replay-shot-corner tl"/>
      <span className="replay-shot-corner tr"/>
      <span className="replay-shot-corner bl"/>
      <span className="replay-shot-corner br"/>
    </div>
  </div>
);

// Legacy SVG diagrams (unused after screenshot swap, kept for reference)
const ReplayDiagram = ({ step }) => {
  if (step === 1) {
    // Hamburger menu on a generic window chrome
    return (
      <svg viewBox="0 0 220 140" width="100%" className="replay-diagram">
        <rect x="6" y="6" width="208" height="128" rx="6" fill="#0A1338" stroke="#C9A13F" strokeWidth="1"/>
        <rect x="14" y="14" width="192" height="16" rx="3" fill="#1A2D5F"/>
        <circle cx="22" cy="22" r="2.5" fill="#F0D98C"/>
        <circle cx="30" cy="22" r="2.5" fill="#F0D98C" opacity="0.4"/>
        <rect x="14" y="38" width="56" height="88" rx="3" fill="#121A4A" stroke="#C9A13F" strokeWidth="0.5" opacity="0.6"/>
        <rect x="76" y="38" width="130" height="88" rx="3" fill="#1A2D5F" opacity="0.4"/>
        <g stroke="#F0D98C" strokeWidth="2" strokeLinecap="round">
          <line x1="22" y1="110" x2="42" y2="110"/>
          <line x1="22" y1="115" x2="42" y2="115"/>
          <line x1="22" y1="120" x2="42" y2="120"/>
        </g>
        <circle cx="32" cy="115" r="14" fill="none" stroke="#F0D98C" strokeWidth="1" strokeDasharray="2 2" opacity="0.8">
          <animate attributeName="r" values="10;18;10" dur="2.2s" repeatCount="indefinite"/>
          <animate attributeName="opacity" values="0.9;0.3;0.9" dur="2.2s" repeatCount="indefinite"/>
        </circle>
        <text x="110" y="72" textAnchor="middle" fontFamily="Cormorant Garamond, serif" fontSize="9" letterSpacing="3" fill="#F0D98C" opacity="0.7">GAME · WINDOW</text>
      </svg>
    );
  }
  if (step === 2) {
    // Side menu with "リプレイ" highlighted
    return (
      <svg viewBox="0 0 220 140" width="100%" className="replay-diagram">
        <rect x="6" y="6" width="208" height="128" rx="6" fill="#0A1338" stroke="#C9A13F" strokeWidth="1"/>
        <rect x="14" y="14" width="80" height="112" rx="4" fill="#121A4A" stroke="#C9A13F" strokeWidth="0.6"/>
        {[0,1,2,3].map(i => (
          <g key={i}>
            <rect x="20" y={22 + i*22} width="68" height="18" rx="3"
              fill={i === 2 ? '#F0D98C' : 'transparent'}
              stroke={i === 2 ? '#F0D98C' : '#3A4684'} strokeWidth="0.8"/>
            <text x="30" y={34 + i*22} fontFamily="Shippori Mincho, serif" fontSize="9"
              fill={i === 2 ? '#0A1338' : '#8EA4D0'}>
              {['ホーム','設定','リプレイ','賞金'][i]}
            </text>
          </g>
        ))}
        <g transform="translate(118 50)">
          <path d="M0 0 L24 12 L16 12 L16 28 L8 28 L8 12 L0 12 Z" fill="#F0D98C" stroke="#8B6518" strokeWidth="1"/>
        </g>
        <text x="160" y="100" textAnchor="middle" fontFamily="Cormorant Garamond, serif" fontSize="9" letterSpacing="2" fill="#F0D98C" opacity="0.7">SELECT · REPLAY</text>
      </svg>
    );
  }
  if (step === 3) {
    // "作成" button press
    return (
      <svg viewBox="0 0 220 140" width="100%" className="replay-diagram">
        <rect x="6" y="6" width="208" height="128" rx="6" fill="#0A1338" stroke="#C9A13F" strokeWidth="1"/>
        <rect x="14" y="14" width="192" height="24" rx="3" fill="#121A4A"/>
        <text x="110" y="30" textAnchor="middle" fontFamily="Cormorant Garamond, serif" fontSize="10" letterSpacing="3" fill="#F0D98C">PRAGMATIC · REPLAY</text>
        <g fontFamily="Zen Kaku Gothic New, sans-serif" fontSize="8" fill="#8EA4D0">
          <text x="22" y="56">時間</text><text x="60" y="56">ベットID</text><text x="110" y="56">ウィンX</text><text x="150" y="56">ウィン</text>
        </g>
        <line x1="14" y1="62" x2="206" y2="62" stroke="#3A4684" strokeWidth="0.5"/>
        <g fontFamily="Zen Kaku Gothic New, sans-serif" fontSize="8" fill="#F5EAD0">
          <text x="22" y="78">05·11</text>
          <text x="60" y="78">78332...</text>
          <circle cx="110" cy="74" r="6" fill="#F0D98C"/>
          <text x="110" y="77" textAnchor="middle" fontSize="6" fontWeight="700" fill="#0A1338">73x</text>
          <text x="150" y="78">¥7,300</text>
        </g>
        <rect x="170" y="68" width="30" height="14" rx="3" fill="#F0D98C" stroke="#8B6518" strokeWidth="1"/>
        <text x="185" y="78" textAnchor="middle" fontFamily="Shippori Mincho, serif" fontSize="8" fontWeight="700" fill="#0A1338">作成</text>
        <circle cx="185" cy="75" r="12" fill="none" stroke="#F0D98C" strokeWidth="1" strokeDasharray="2 2">
          <animate attributeName="r" values="10;18;10" dur="2s" repeatCount="indefinite"/>
          <animate attributeName="opacity" values="1;0.2;1" dur="2s" repeatCount="indefinite"/>
        </circle>
        <text x="110" y="118" textAnchor="middle" fontFamily="Cormorant Garamond, serif" fontSize="8" letterSpacing="2" fill="#F0D98C" opacity="0.7">TAP · CREATE</text>
      </svg>
    );
  }
  // step 4 — link icon + copy
  return (
    <svg viewBox="0 0 220 140" width="100%" className="replay-diagram">
      <rect x="6" y="6" width="208" height="128" rx="6" fill="#0A1338" stroke="#C9A13F" strokeWidth="1"/>
      <g transform="translate(110 62)">
        <circle cx="0" cy="0" r="36" fill="none" stroke="#F0D98C" strokeWidth="1" strokeDasharray="3 3" opacity="0.6"/>
        <g stroke="#F0D98C" strokeWidth="2.5" fill="none" strokeLinecap="round" strokeLinejoin="round">
          <path d="M-12 0 a8 8 0 0 1 8 -8 h6 a8 8 0 0 1 8 8 M12 0 a8 8 0 0 1 -8 8 h-6 a8 8 0 0 1 -8 -8" transform="rotate(-30)"/>
          <line x1="-6" y1="0" x2="6" y2="0" transform="rotate(-30)" stroke="#FFF9D6"/>
        </g>
      </g>
      <g transform="translate(110 116)">
        <rect x="-42" y="-8" width="84" height="16" rx="8" fill="#F0D98C"/>
        <text x="0" y="3" textAnchor="middle" fontFamily="Shippori Mincho, serif" fontSize="9" fontWeight="700" fill="#0A1338">COPY LINK</text>
      </g>
      <text x="110" y="28" textAnchor="middle" fontFamily="Cormorant Garamond, serif" fontSize="9" letterSpacing="3" fill="#F0D98C" opacity="0.7">LINK · COPIED</text>
    </svg>
  );
};

// ----------------------------------------------------------------------
// Target Game tile — text-only (game titles are factual references)
// ----------------------------------------------------------------------
const GameGlyph = ({ theme }) => {
  // Original stylized glyph evoking each game theme (no branded art)
  const glyphs = {
    olympus: (
      <g>
        <path d="M12 38 L12 22 L22 18 L32 22 L32 38 Z" fill="url(#g-gold)" stroke="#8B6518" strokeWidth="0.8"/>
        <rect x="15" y="22" width="2" height="14" fill="#8B6518" opacity="0.5"/>
        <rect x="21" y="22" width="2" height="14" fill="#8B6518" opacity="0.5"/>
        <rect x="27" y="22" width="2" height="14" fill="#8B6518" opacity="0.5"/>
        <path d="M22 4 L19 12 L22 11 L20 18 L25 10 L22 11 Z" fill="#FFE54D" stroke="#8B5E0D" strokeWidth="0.6"/>
      </g>
    ),
    princess: (
      <g>
        <path d="M10 20 L14 14 L18 18 L22 10 L26 18 L30 14 L34 20 L30 30 L14 30 Z"
          fill="url(#g-gold)" stroke="#8B6518" strokeWidth="0.8"/>
        <circle cx="14" cy="14" r="1.5" fill="#FFE54D"/>
        <circle cx="22" cy="10" r="2" fill="#FFE54D"/>
        <circle cx="30" cy="14" r="1.5" fill="#FFE54D"/>
        <circle cx="22" cy="36" r="3" fill="none" stroke="#F0D98C" strokeWidth="0.8"/>
      </g>
    ),
    xmas: (
      <g>
        <path d="M22 6 L16 16 L20 16 L14 26 L19 26 L13 36 L31 36 L25 26 L30 26 L24 16 L28 16 Z"
          fill="url(#g-gold)" stroke="#8B6518" strokeWidth="0.8"/>
        <path d="M22 4 L20 8 L22 7 L21 12 L23 8 L22 7 Z" fill="#FFE54D"/>
        <circle cx="18" cy="22" r="1" fill="#E8583B"/>
        <circle cx="26" cy="24" r="1" fill="#E8583B"/>
        <circle cx="22" cy="30" r="1" fill="#E8583B"/>
      </g>
    ),
    athena: (
      <g>
        <circle cx="22" cy="22" r="14" fill="url(#g-gold)" stroke="#8B6518" strokeWidth="0.8"/>
        <circle cx="22" cy="22" r="11" fill="none" stroke="#8B6518" strokeWidth="0.5"/>
        <circle cx="18" cy="20" r="2" fill="#0A1338"/>
        <circle cx="26" cy="20" r="2" fill="#0A1338"/>
        <circle cx="18" cy="20" r="0.8" fill="#FFE54D"/>
        <circle cx="26" cy="20" r="0.8" fill="#FFE54D"/>
        <path d="M14 26 Q22 30 30 26" fill="none" stroke="#8B6518" strokeWidth="0.8"/>
      </g>
    ),
    gatot: (
      <g>
        <path d="M22 4 L34 10 L34 26 Q34 34 22 40 Q10 34 10 26 L10 10 Z" fill="url(#g-gold)" stroke="#8B6518" strokeWidth="0.8"/>
        <path d="M22 10 L29 13 L29 25 Q29 30 22 34 Q15 30 15 25 L15 13 Z" fill="none" stroke="#8B6518" strokeWidth="0.5"/>
        <path d="M22 14 L24 20 L28 20 L25 23 L26 28 L22 25 L18 28 L19 23 L16 20 L20 20 Z" fill="#FFE54D"/>
      </g>
    ),
    sugar: (
      <g>
        <circle cx="22" cy="22" r="12" fill="#FFD4E5" stroke="#E86FA3" strokeWidth="0.8"/>
        <path d="M22 10 Q28 16 22 22 Q16 28 22 34" fill="none" stroke="#E86FA3" strokeWidth="1.5" strokeLinecap="round"/>
        <path d="M10 22 Q16 16 22 22 Q28 28 34 22" fill="none" stroke="#E86FA3" strokeWidth="1.5" strokeLinecap="round"/>
        <circle cx="22" cy="22" r="3" fill="#FFF" stroke="#E86FA3" strokeWidth="0.8"/>
      </g>
    ),
    bonanza: (
      <g>
        <circle cx="15" cy="18" r="5" fill="#E8583B" stroke="#8B2E1E" strokeWidth="0.6"/>
        <circle cx="28" cy="16" r="4.5" fill="#9B4DC4" stroke="#5E2E80" strokeWidth="0.6"/>
        <circle cx="21" cy="28" r="5.5" fill="#3AAE55" stroke="#1E6E30" strokeWidth="0.6"/>
        <circle cx="32" cy="30" r="4" fill="#F5B938" stroke="#8B6518" strokeWidth="0.6"/>
        <path d="M15 13 L16 10" stroke="#2E6E30" strokeWidth="1" strokeLinecap="round"/>
        <path d="M28 11.5 L29 8" stroke="#2E6E30" strokeWidth="1" strokeLinecap="round"/>
      </g>
    ),
    fruit: (
      <g>
        <circle cx="16" cy="16" r="5" fill="#E8583B" stroke="#8B2E1E" strokeWidth="0.6"/>
        <circle cx="30" cy="20" r="4" fill="#F5B938" stroke="#8B6518" strokeWidth="0.6"/>
        <ellipse cx="20" cy="30" rx="6" ry="4.5" fill="#F5B938" stroke="#8B6518" strokeWidth="0.6"/>
        <path d="M16 11 L17 8" stroke="#2E6E30" strokeWidth="1" strokeLinecap="round"/>
        <path d="M30 16 L31 13" stroke="#2E6E30" strokeWidth="1" strokeLinecap="round"/>
      </g>
    ),
  };
  return (
    <svg viewBox="0 0 44 44" width={48} height={48} className="p-game-glyph">
      <defs>
        <linearGradient id="g-gold" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#F7E4A3"/>
          <stop offset="60%" stopColor="#D9B356"/>
          <stop offset="100%" stopColor="#8B6518"/>
        </linearGradient>
      </defs>
      {glyphs[theme] || glyphs.olympus}
    </svg>
  );
};

const GameTile = ({ title, subtitle, hot, theme, img }) => (
  <div className={`p-game-tile ${hot ? 'hot' : ''}`}>
    <div className="p-game-tile-glyph">
      {img
        ? <img src={img} alt={title} className="p-game-tile-img" loading="lazy"/>
        : <GameGlyph theme={theme} />}
    </div>
    <div className="p-game-tile-body">
      <div className="p-game-tile-title">{title}</div>
      <div className="p-game-tile-sub">{subtitle}</div>
    </div>
    {hot ? <div className="p-game-tile-hot">人 気 · HOT</div> : null}
    <svg className="p-game-tile-arr" viewBox="0 0 24 24" width={16} height={16} aria-hidden>
      <path d="M8 4 L16 12 L8 20" stroke="#C9A13F" strokeWidth="1.5" fill="none" strokeLinecap="round"/>
    </svg>
  </div>
);


// ----------------------------------------------------------------------
// Main landing
// ----------------------------------------------------------------------
const VariantPremium = () => {
  const [countTrigger, setCountTrigger] = React.useState(0);
  const [slotRunning, setSlotRunning] = React.useState(true);
  const [selectedCourse, setSelectedCourse] = React.useState(1);
  const [activeWinner, setActiveWinner] = React.useState(0);

  React.useEffect(() => {
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          setCountTrigger(v => v + 1);
          e.target.classList.add('is-visible');
        }
      });
    }, { threshold: 0.18 });
    document.querySelectorAll('.reveal, .count-target').forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);

  const courses = [
    { price: 10000, prize: 20, label: '壱', labelEn: 'I', priceLabel: '1万', sub: '天界の門をくぐる', motto: 'ENTRY', charImg: 'assets/CHAR_harpina.png', charName: 'ハルピナ' },
    { price: 50000, prize: 100, label: '伍', labelEn: 'V', priceLabel: '5万', sub: '光の導きを得る', motto: 'STANDARD', popular: true, charImg: 'assets/CHAR_gaterian.png', charName: 'ゲートリアン' },
    { price: 100000, prize: 200, label: '拾', labelEn: 'X', priceLabel: '10万', sub: '神々の恩寵を', motto: 'SUPREME', charImg: 'assets/CHAR_lucifire.png', charName: 'ルシフィーレ' },
  ];

  const winners = [
    { name: 'N さん', course: '5万', prize: 100, quote: 'まさか本当にもらえると思ってなかったし、他のカジノでこんなサービス見た事ないので楽しめました！', guide: 'アークエル', blessing: 'おめでとう！これからも一緒に楽しもうね！', guideImg: 'assets/CHAR_arquel.png', dark: false },
    { name: 'R さん', course: '10万', prize: 200, quote: 'ヘブンショット最高！！！', guide: 'ハルピナ', blessing: 'やったね！次も一緒に頑張ろう！', guideImg: 'assets/CHAR_harpina.png', dark: false },
    { name: 'K さん', course: '1万', prize: 20, quote: '初めて参加して当選！ドキドキしながらプレイしたけど、3倍超えた瞬間は叫んじゃいました笑', guide: 'セレフィム', blessing: '素敵な体験をありがとう♪', guideImg: 'assets/CHAR_seraphim.png', dark: false },
    { name: 'T さん', course: '5万', prize: 100, quote: 'Gates of Olympusで一発クリア！ゼウスに感謝です。100万円ゲットしました！', guide: 'リリシア', blessing: 'ふふ、運命の女神が微笑んだわね♡', guideImg: 'assets/CHAR_lilicia.png', dark: true },
    { name: 'M さん', course: '10万', prize: 200, quote: '200万円当選！人生変わりました。本当にありがとうございます！', guide: 'ルシフィーレ', blessing: 'その勇気、見事だ。次も期待しているぞ', guideImg: 'assets/CHAR_lucifire.png', dark: true },
    { name: 'Y さん', course: '1万', prize: 20, quote: 'Sweet Bonanza 1000で挑戦！キャンディが揃った瞬間、心臓バクバクでした。20万円嬉しい！', guide: 'ラフィエル', blessing: '甘い勝利だね！また挑戦しよう！', guideImg: 'assets/CHAR_rafiel.png', dark: false },
    { name: 'S さん', course: '5万', prize: 100, quote: '友達に勧められて参加。半信半疑だったけど、本当に100万円もらえた！信じてよかった', guide: 'ハルピナ', blessing: '信じる者は救われる！おめでとう！', guideImg: 'assets/CHAR_harpina.png', dark: false },
    { name: 'H さん', course: '1万', prize: 20, quote: 'Starlight Princessで3.5倍！ギリギリクリアでしたが、それがまた興奮しました！', guide: 'セレフィム', blessing: '星の導きがあったのね...おめでとう♪', guideImg: 'assets/CHAR_seraphim.png', dark: false },
    { name: 'A さん', course: '5万', prize: 100, quote: '達成した瞬間は嬉しさのあまり頭が真っ白になりました。最高の思い出になりました。', guide: 'ゲートリアン', blessing: '最高の思い出になったのね♡', guideImg: 'assets/CHAR_gaterian.png', dark: false },
    { name: 'O さん', course: '10万', prize: 200, quote: 'Gates of Olympus 1000で10倍超え！200万円ありがとうございます！', guide: 'ルシフィーレ', blessing: '圧倒的な勝利だ。お前は真の勇者だ', guideImg: 'assets/CHAR_lucifire.png', dark: true },
  ];

  const games = [
    { title: 'Gates of Olympus',            subtitle: 'PRAGMATIC PLAY', theme: 'olympus',  img: 'assets/game_olympus.png' },
    { title: 'Starlight Princess',          subtitle: 'PRAGMATIC PLAY', theme: 'princess', img: 'assets/game_princess.jpg' },
    { title: 'Starlight Princess Christmas',subtitle: 'PRAGMATIC PLAY', theme: 'xmas',     img: 'assets/game_xmas.jpg' },
    { title: 'Wisdom of Athena',            subtitle: 'PRAGMATIC PLAY', theme: 'athena',   img: 'assets/game_athena.jpg' },
    { title: 'Gates of Olympus 1000',       subtitle: 'PRAGMATIC PLAY', theme: 'olympus',  img: 'assets/game_olympus_1000.jpg' },
    { title: 'Gates of Gatot Kaca 1000',    subtitle: 'PRAGMATIC PLAY', theme: 'gatot',    img: 'assets/game_gatot_kaca.jpg' },
    { title: 'Sugar Rush 1000',             subtitle: 'PRAGMATIC PLAY', theme: 'sugar',    img: 'assets/game_sugar_rush_1000.jpg' },
    { title: 'Sweet Bonanza 1000',          subtitle: 'PRAGMATIC PLAY', theme: 'bonanza', hot: true, img: 'assets/game_sweet_bonanza_1000.jpg' },
    { title: 'Sugar Rush',                  subtitle: 'PRAGMATIC PLAY', theme: 'sugar',    img: 'assets/game_sugar_rush.jpg' },
    { title: 'Fruit Party',                 subtitle: 'PRAGMATIC PLAY', theme: 'fruit',    img: 'assets/game_fruit_party.png' },
  ];

  const replaySteps = [
    { n: 1, kicker: 'STEP · I', title: 'ハンバーガーメニューを押す', desc: 'ゲーム画面左下のハンバーガーメニュー（三本線）をクリックします。', img: 'assets/replay_step1.webp' },
    { n: 2, kicker: 'STEP · II', title: 'リプレイを選択', desc: '表示されたメニューから「リプレイ」をクリックします。', img: 'assets/replay_step2.webp' },
    { n: 3, kicker: 'STEP · III', title: '作成をクリックしてリンクをコピー', desc: '該当プレイの「作成」ボタンをクリック。ボタンがリンクマークに変わったら、もう一度クリックでリプレイリンクがコピーされます。', img: 'assets/replay_step3.webp' },
  ];

  return (
    <div className="premium-root">

      {/* ============ HERO ============ */}
      <section className="p-hero">
        <div className="p-hero-bg">
          <img src="assets/hero_battle.png" alt="" className="p-hero-art" />
          <div className="p-hero-vignette" />
          <div className="p-hero-goldmist" />
        </div>

        <div className="p-hero-content">
          <div className="p-hero-crest"><Ornament width={340} variant="divider" /></div>
          <div className="p-hero-eyebrow">
            <span className="latin">H · E · A · V · E · N &apos; S &nbsp; S · H · O · T</span>
          </div>
          <h1 className="p-hero-title">
            <span className="p-hero-main">ヘブンショット</span>
            <span className="p-hero-sub">— 参 加 の 流 れ —</span>
          </h1>
          <div className="p-hero-crest bottom"><Ornament width={340} variant="divider" /></div>
          <p className="p-hero-lede">
            天界の試練に挑み、<span className="noble-gold">一撃</span>の栄光を掴め。<br/>
            参加から賞金獲得まで、<span className="noble-gold">六段の儀</span>。
          </p>
          <div className="p-hero-scrollcue">
            <span className="scroll-label">PROCEED</span>
            <div className="scroll-line" />
          </div>
        </div>
      </section>

      {/* ============ INTRO BAND ============ */}
      <section className="p-intro-band">
        <div className="p-intro-inner">
          <div className="p-stat">
            <div className="p-stat-num roman-disp">VI</div>
            <div className="p-stat-label">
              <span className="jp">六つの段階</span>
              <span className="en">SIX STAGES</span>
            </div>
          </div>
          <div className="p-stat-divider" />
          <div className="p-stat">
            <div className="p-stat-num lightning-noble">×3<span className="stat-over">OVER</span></div>
            <div className="p-stat-label">
              <span className="jp">配当倍率で賞金獲得</span>
              <span className="en">PAYOUT MULTIPLIER</span>
            </div>
          </div>
          <div className="p-stat-divider" />
          <div className="p-stat">
            <div className="p-stat-num noble-gold-lg">
              <CountUp to={200} trigger={countTrigger} duration={1400} />
              <span className="stat-over">万円</span>
            </div>
            <div className="p-stat-label">
              <span className="jp">最大賞金</span>
              <span className="en">MAX REWARD</span>
            </div>
          </div>
        </div>
      </section>

      {/* ============ NOTICES ============ */}
      <section className="p-notice-band">
        <div className="p-notice-inner reveal">
          <div className="p-notice-head">
            <Ornament width={160} variant="flourish" />
            <div className="p-notice-kicker">IMPORTANT · 申 請 時 の ご 注 意</div>
          </div>
          <ul className="p-notice-list">
            <li>
              <span className="p-notice-mark">✦</span>
              <span>申請時に当日同じゲームでのプレイがある場合、<strong>チャットにてプレイヤーIDをお伝えください。</strong></span>
            </li>
            <li>
              <span className="p-notice-mark">✦</span>
              <span>参加申請後、対象ベット額での<strong>最初のボーナスBUY</strong>が自動的に対象となります。</span>
            </li>
            <li>
              <span className="p-notice-mark">✦</span>
              <span>参加前にプレイしていた場合は、ゲームプレイ画面の<strong>プレイヤーIDのスクリーンショット</strong>が必要です。</span>
            </li>
          </ul>
        </div>
      </section>

      {/* ============ STEPS (6) ============ */}
      <section className="p-steps" id="howto">
        <div className="p-section-head reveal">
          <div className="p-eyebrow-ornament"><Ornament width={200} variant="flourish" /></div>
          <div className="p-section-kicker">HOW TO JOIN · 儀 式 の 手 順</div>
          <h2 className="p-section-title">
            <span className="title-char">参</span>
            <span className="title-char">加</span>
            <span className="title-char">か</span>
            <span className="title-char">ら</span>
            <span className="title-sep">·</span>
            <span className="title-char">賞</span>
            <span className="title-char">金</span>
            <span className="title-char">ま</span>
            <span className="title-char">で</span>
          </h2>
          <Ornament width={280} variant="divider" />
          <p className="p-section-lede">六 つ の 段 階 を 経 て 、 栄 光 へ 至 る</p>
        </div>

        <StepCard
          n={1}
          chapter="CHAPTER I"
          title="参加プランを含めて申請"
          desc={<>希望の参加費（<span className="noble-gold">1万・5万・10万</span>）を選び、カスタマーサポートへ参加申請を。<br/><span className="noble-muted">当日同じゲームでプレイがある場合はチャットにIDを添えて。</span></>}
          visual={
            <div className="p-course-pills">
              <div className="p-course-pill"><span className="pill-kanji">壱</span><span className="pill-yen">1万円</span></div>
              <div className="p-course-pill"><span className="pill-kanji">伍</span><span className="pill-yen">5万円</span></div>
              <div className="p-course-pill"><span className="pill-kanji">拾</span><span className="pill-yen">10万円</span></div>
            </div>
          }
        />
        <StepConnector/>

        <StepCard
          n={2}
          chapter="CHAPTER II"
          title="機種選定をする"
          desc={<>対象機種の中から、挑戦するゲームを選択しカスタマーサポートへ申請。<br/><span className="noble-muted">十の神器より一を選べ。</span></>}
          visual={
            <div className="p-machine-badge">
              <div className="p-machine-label">対 象 機 種</div>
              <div className="p-machine-count"><CountUp to={10} trigger={countTrigger} duration={900}/></div>
              <div className="p-machine-sub">TITLES AVAILABLE</div>
            </div>
          }
        />
        <StepConnector/>

        <StepCard
          n={3}
          chapter="CHAPTER III"
          title="入金をする"
          desc={<>選択したプランの金額を入金。<br/><span className="noble-muted">※参加費とプレイ費用は別途。残高から引くのもOK。</span></>}
          visual={
            <div className="p-deposit-seal">
              <svg viewBox="0 0 140 100" width="100%" style={{maxWidth: 220}}>
                <defs>
                  <linearGradient id="coinLg" x1="0" y1="0" x2="0" y2="1">
                    <stop offset="0%" stopColor="#FFF5C6"/>
                    <stop offset="55%" stopColor="#FFD15A"/>
                    <stop offset="100%" stopColor="#B57B12"/>
                  </linearGradient>
                </defs>
                <rect x="8" y="26" width="90" height="60" rx="4" fill="#FAF4E4" stroke="#8B6518" strokeWidth="1"/>
                <rect x="14" y="32" width="78" height="48" rx="2" fill="none" stroke="#C9A13F" strokeWidth="0.5" strokeDasharray="2 2"/>
                <text x="53" y="56" textAnchor="middle" fontFamily="Cormorant Garamond, serif" fontStyle="italic" fontSize="10" fill="#6E4E0E" letterSpacing="2">DEPOSIT</text>
                <text x="53" y="72" textAnchor="middle" fontFamily="Shippori Mincho, serif" fontSize="14" fontWeight="700" fill="#8B6518">¥ 50,000</text>
                <circle cx="108" cy="50" r="22" fill="url(#coinLg)" stroke="#8B5E0D" strokeWidth="1.5"/>
                <text x="108" y="56" textAnchor="middle" fontFamily="Shippori Mincho, serif" fontSize="18" fontWeight="900" fill="#8B5E0D">¥</text>
                <circle cx="124" cy="30" r="2" fill="#F0D98C"/>
                <circle cx="130" cy="44" r="1.5" fill="#F0D98C"/>
              </svg>
            </div>
          }
        />
        <StepConnector/>

        <StepCard
          n={4}
          chapter="CHAPTER IV"
          title="ボーナスBUYを実行"
          desc={<>指定のゲームで、<span className="noble-gold">参加費と同額</span>のボーナスBUYを実行。<br/><span className="noble-muted">申請後の最初のボーナスBUYが自動的に対象となる。</span></>}
          visual={
            <div className="p-slot-frame" onMouseEnter={() => setSlotRunning(true)}>
              <div className="p-slot-frame-top">SACRED REELS</div>
              <SlotReel running={slotRunning} size={110} />
              <div className="p-slot-frame-bot">SPIN · TO · WIN</div>
            </div>
          }
        />
        <StepConnector/>

        <StepCard
          n={5}
          chapter="CHAPTER V"
          impact
          title={<>配当 <span className="noble-gold-lg">×3</span> 以上で <br className="br-sm"/><span className="noble-gold">勝 利 確 定</span></>}
          desc={<>購入金額の三倍以上の配当が出れば、見事賞金ゲット！<br/><span className="noble-muted">そのまま、賞金として手中に収まる。</span></>}
          visual={
            <div className="p-verdict">
              <div className="p-verdict-label">VERDICT</div>
              <div className="p-verdict-num count-target">
                <span className="verdict-x">×</span>
                <span className="verdict-val"><CountUp to={3} duration={700} trigger={countTrigger} /></span>
              </div>
              <div className="p-verdict-over">O · V · E · R</div>
            </div>
          }
        />
        <StepConnector/>

        <StepCard
          n={6}
          chapter="FINAL CHAPTER"
          title="リプレイリンクを報告"
          desc={<>達成後、ゲームのリプレイリンクをカスタマーサポートへ報告。<br/><span className="noble-muted">報告確認後、翌日18時より賞金が付与されます。</span></>}
          visual={
            <div className="p-report-card">
              <div className="p-report-row">
                <span className="dot"/><span>REPLAY LINK</span>
              </div>
              <div className="p-report-link">https://…replay…/h-shot</div>
              <div className="p-report-row">
                <span className="dot gold"/><span>翌日 18:00 · 賞金付与</span>
              </div>
            </div>
          }
        />
      </section>

      {/* ============ REPLAY GUIDE ============ */}
      <section className="p-replay">
        <div className="p-section-head reveal light">
          <div className="p-eyebrow-ornament"><Ornament width={200} variant="flourish" /></div>
          <div className="p-section-kicker white">REPLAY GUIDE · リ プ レ イ 取 得 法</div>
          <h2 className="p-section-title white">
            <span className="title-char">リ</span><span className="title-char">プ</span><span className="title-char">レ</span><span className="title-char">イ</span>
            <span className="title-sep">·</span>
            <span className="title-char">リ</span><span className="title-char">ン</span><span className="title-char">ク</span>
          </h2>
          <Ornament width={280} variant="divider" />
          <p className="p-section-lede-dark">達成後は以下の四手順でリンクを報告</p>
        </div>

        <div className="p-replay-grid">
          {replaySteps.map((s) => (
            <div key={s.n} className="p-replay-card reveal">
              <div className="p-replay-idx">
                <span className="idx-num">{String(s.n).padStart(2,'0')}</span>
                <span className="idx-kicker">{s.kicker}</span>
              </div>
              <div className="p-replay-diagram-wrap">
                <ReplayShot src={s.img} alt={s.title} />
              </div>
              <div className="p-replay-body">
                <h4 className="p-replay-title">{s.title}</h4>
                <p className="p-replay-desc">{s.desc}</p>
              </div>
            </div>
          ))}
        </div>

        <div className="p-replay-foot reveal">
          <div className="p-replay-foot-mark">※</div>
          <p>
            Pragmaticリプレイには、合計ベット額の10x以上の最高勝利のうち<strong>最新の100件のみ</strong>が表示されます。<br/>
            コピーしたリンクはカスタマーサポートのチャットへ送信してください。
          </p>
        </div>
      </section>

      {/* ============ COURSES ============ */}
      <section className="p-courses">
        <div className="p-courses-bg" />
        <div className="p-section-head reveal light">
          <div className="p-eyebrow-ornament"><Ornament width={200} variant="flourish" /></div>
          <div className="p-section-kicker white">THE THREE COURSES · 三 つ の 道</div>
          <h2 className="p-section-title white">
            <span className="title-char">挑</span>
            <span className="title-char">む</span>
            <span className="title-char">額</span>
            <span className="title-sep">·</span>
            <span className="title-char">賞</span>
            <span className="title-char">金</span>
          </h2>
          <Ornament width={280} variant="divider" />
        </div>

        <div className="p-course-grid">
          {courses.map((c, i) => (
            <button
              key={i}
              className={`p-course ${selectedCourse === i ? 'selected' : ''} ${c.popular ? 'popular' : ''}`}
              onClick={() => setSelectedCourse(i)}
            >
              {c.popular && <div className="p-course-banner">POPULAR · 人 気</div>}
              <div className="p-course-top">
                <div className="p-course-char">
                  <div className="p-course-char-glow" />
                  <img src={c.charImg} alt={c.charName} className="p-course-char-img" />
                  <div className="p-course-char-crest">
                    <svg viewBox="0 0 40 44" width="42" height="46">
                      <defs>
                        <linearGradient id={`cc${i}`} x1="0" y1="0" x2="0" y2="1">
                          <stop offset="0%" stopColor="#F7E4A3"/>
                          <stop offset="50%" stopColor="#D9B356"/>
                          <stop offset="100%" stopColor="#8B6518"/>
                        </linearGradient>
                      </defs>
                      <path d="M20 1 L37 5 L37 24 Q37 36 20 43 Q3 36 3 24 L3 5 Z" fill={`url(#cc${i})`} stroke="#5E430E" strokeWidth="1"/>
                    </svg>
                    <span className="p-course-char-kanji">{c.label}</span>
                  </div>
                </div>
                <div className="p-course-motto">{c.motto}</div>
              </div>
              <div className="p-course-entry">
                <div className="entry-k">参加費</div>
                <div className="entry-v">
                  <span className="entry-big">{c.priceLabel}</span>
                  <span className="entry-unit">円</span>
                </div>
              </div>
              <div className="p-course-arrow" aria-hidden>
                <svg viewBox="0 0 120 30" width={110} height={24}>
                  <defs>
                    <linearGradient id={`ag${i}`} x1="0" y1="0" x2="1" y2="0">
                      <stop offset="0%" stopColor="#C9A13F" stopOpacity="0"/>
                      <stop offset="50%" stopColor="#F0D98C"/>
                      <stop offset="100%" stopColor="#C9A13F" stopOpacity="0"/>
                    </linearGradient>
                  </defs>
                  <line x1="10" y1="15" x2="110" y2="15" stroke={`url(#ag${i})`} strokeWidth="1"/>
                  <path d="M95 8 L108 15 L95 22" stroke="#C9A13F" strokeWidth="1" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
                  <circle cx="60" cy="15" r="2" fill="#F0D98C"/>
                </svg>
              </div>
              <div className="p-course-prize">
                <div className="prize-k">最大賞金 · PRIZE</div>
                <div className="prize-v">
                  <span className="prize-big count-target">
                    <CountUp to={c.prize} duration={1400} trigger={countTrigger + selectedCourse + i} />
                  </span>
                  <span className="prize-unit">万円</span>
                </div>
              </div>
              <div className="p-course-motto-jp">{c.sub}</div>
              <div className="p-course-select">
                {selectedCourse === i ? '✦ 選 択 中' : 'TAP TO SELECT'}
              </div>
            </button>
          ))}
        </div>
      </section>

      {/* ============ WINNERS' VOICES ============ */}
      <section className="p-voices">
        <div className="p-section-head reveal">
          <div className="p-eyebrow-ornament"><Ornament width={200} variant="flourish" /></div>
          <div className="p-section-kicker">WINNERS' VOICES · 勝 利 者 の 声</div>
          <h2 className="p-section-title">
            <span className="title-char">当</span><span className="title-char">選</span><span className="title-char">者</span>
            <span className="title-sep">·</span>
            <span className="title-char">の</span><span className="title-char">声</span>
          </h2>
          <Ornament width={280} variant="divider" />
        </div>

        <div className="p-voices-tabs">
          <span className="p-voices-tab-label">天 界 の 証 言</span>
          <div className="p-voices-tab-count">
            <span className="tc-num"><CountUp to={winners.length} trigger={countTrigger} /></span>
            <span className="tc-of">/ TESTIMONIES</span>
          </div>
        </div>

        <div className="p-voices-grid">
          {winners.map((w, i) => (
            <div
              key={i}
              className={`p-voice ${activeWinner === i ? 'active' : ''} ${w.dark ? 'dark' : ''}`}
              onMouseEnter={() => setActiveWinner(i)}
            >
              <div className="p-voice-ribbon">{w.course}万コース 当選</div>
              <div className="p-voice-amount">
                <span className="p-voice-amount-num">{w.prize}</span>
                <span className="p-voice-amount-unit">万円</span>
              </div>
              <div className="p-voice-quote">
                <span className="quote-open">“</span>
                <p>{w.quote}</p>
                <span className="quote-close">”</span>
              </div>
              <div className="p-voice-who">— {w.name}</div>

              <div className="p-voice-blessing">
                <div className="p-voice-blessing-char">
                  <div className="p-voice-blessing-glow" />
                  <img src={w.guideImg} alt={w.guide} />
                </div>
                <div className="p-voice-blessing-body">
                  <div className="p-voice-blessing-who">{w.guide} より</div>
                  <div className="p-voice-blessing-text">「{w.blessing}」</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* ============ TARGET GAMES ============ */}
      <section className="p-games">
        <div className="p-section-head reveal light">
          <div className="p-eyebrow-ornament"><Ornament width={200} variant="flourish" /></div>
          <div className="p-section-kicker white">TARGET GAMES · 対 象 機 種</div>
          <h2 className="p-section-title white">
            <span className="title-char">対</span><span className="title-char">象</span><span className="title-char">機</span><span className="title-char">種</span>
            <span className="title-sep">·</span>
            <span className="title-char">一</span><span className="title-char">覧</span>
          </h2>
          <Ornament width={280} variant="divider" />
          <p className="p-section-lede-dark">十 の 神 器 よ り 一 を 選 べ</p>
        </div>

        <div className="p-games-scroll">
          <div className="p-games-scroll-head">
            <span>SACRED REGISTRY</span>
            <span className="dot">·</span>
            <span>P R A G M A T I C&nbsp;&nbsp;P L A Y</span>
          </div>
          <div className="p-games-grid">
            {games.map((g, i) => <GameTile key={i} {...g} />)}
          </div>
          <div className="p-games-foot">※ 上 記 の 機 種 か ら お 選 び い た だ け ま す</div>
        </div>
      </section>

      {/* ============ FINAL CTA ============ */}
      <section className="p-cta">
        <div className="p-cta-bg">
          <img src="assets/hero_vs.png" alt="" className="p-cta-art" />
          <div className="p-cta-overlay" />
        </div>
        <div className="p-cta-inner reveal">
          <div className="p-cta-eyebrow">
            <Ornament width={220} variant="divider" />
            <div className="p-cta-kicker">THE CALLING · 天 界 の 招 き</div>
            <Ornament width={220} variant="divider" />
          </div>
          <h2 className="p-cta-title">
            さあ、一撃を。<br/>
            <span className="noble-gold-xl">天 界 が 君 を 待 つ 。</span>
          </h2>
          <div className="p-cta-selected">
            <span>選 択 中</span>
            <strong className="noble-gold">{courses[selectedCourse].priceLabel}円コース</strong>
            <span className="sep-dot">·</span>
            <span>最大賞金</span>
            <strong className="noble-gold">{courses[selectedCourse].prize}万円</strong>
          </div>
          <button className="p-cta-btn" onClick={() => window.location.href = 'https://sloten.io'}>
            <span className="btn-shine" />
            <span className="btn-inner">
              <span className="btn-jp">ヘブンショットに参加する</span>
              <span className="btn-en">— ENTER THE HEAVENS —</span>
            </span>
            <svg viewBox="0 0 24 24" width={22} height={22} className="btn-arrow">
              <path d="M5 12 L19 12 M13 6 L19 12 L13 18" stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
          </button>
          <p className="p-cta-fine">
            ※参加費は選択コースと同額となります<br/>
            配当がBUY金額の3倍を超えた場合に、賞金を獲得いたします
          </p>
        </div>
      </section>

    </div>
  );
};

window.VariantPremium = VariantPremium;
