/* Variation B: ポップ＆遊び心 - イラスト的、図形装飾、グラデアクセント、楽しい雰囲気 */
const DISCORD_SERVER_ID = '1250448904940421262';
const DISCORD_INVITE = 'https://disboard.org/ja/server/join/1250448904940421262';
const BOT_MANUAL_URL = '/manual';

function useBreakpoint() {
  const [w, setW] = React.useState(window.innerWidth);
  React.useEffect(() => {
    const handler = () => setW(window.innerWidth);
    window.addEventListener('resize', handler);
    return () => window.removeEventListener('resize', handler);
  }, []);
  return { mobile: w < 640, tablet: w < 1024, w };
}

function VariationB() {
  useScrollReveal('#var-b');
  const widget = useDiscordWidget(DISCORD_SERVER_ID);
  const { mobile, tablet } = useBreakpoint();
  const px = mobile ? '20px' : tablet ? '32px' : '48px';

  return (
    <div id="var-b" className="lol-root" style={{ width: '100%', background: '#FFFCF5', position: 'relative', overflow: 'hidden' }}>
      {/* Background decorations */}
      <div style={{
        position: 'absolute', top: 200, left: -120, width: 280, height: 280,
        background: '#F5C842', borderRadius: '50%', opacity: 0.15, filter: 'blur(20px)',
        pointerEvents: 'none',
      }}></div>
      <div style={{
        position: 'absolute', top: 600, right: -100, width: 320, height: 320,
        background: '#4DA3FF', borderRadius: '50%', opacity: 0.13, filter: 'blur(30px)',
        pointerEvents: 'none',
      }}></div>

      {/* NAV */}
      <nav style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: `16px ${px}`, position: 'relative', zIndex: 5,
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <BrandIcon size={36} />
          <div style={{ fontWeight: 900, fontSize: 16, fontFamily: "'Plus Jakarta Sans', sans-serif" }}>LOL Gamers</div>
        </div>

        {!mobile && (
          <div style={{
            display: 'flex', gap: 4, fontSize: 13, fontWeight: 700, color: 'var(--ink-2)',
            background: '#fff', padding: 6, borderRadius: 999,
            boxShadow: '0 4px 14px rgba(15,26,46,0.06)',
          }}>
            {['特徴', 'Bot', 'FAQ'].map((t, i) => (
              <a key={i} href={`#${t}`} style={{
                padding: '8px 14px', borderRadius: 999,
                background: i === 0 ? 'var(--brand-blue-soft)' : 'transparent',
                color: i === 0 ? 'var(--brand-blue-deep)' : undefined,
              }}>{t}</a>
            ))}
            <a href={BOT_MANUAL_URL} style={{
              padding: '8px 14px', borderRadius: 999,
              background: 'var(--brand-yellow-soft)',
              color: 'var(--brand-yellow-deep)',
            }}>📖 マニュアル</a>
          </div>
        )}

        <a href={DISCORD_INVITE} target="_blank" rel="noopener" style={{
          background: 'linear-gradient(135deg, #4DA3FF, #2A6FDB)', color: '#fff',
          padding: mobile ? '10px 16px' : '12px 22px',
          borderRadius: 999, fontSize: 13, fontWeight: 800,
          boxShadow: '0 6px 18px rgba(77,163,255,0.45)',
          display: 'flex', alignItems: 'center', gap: 6, whiteSpace: 'nowrap',
        }}>
          <span>✨</span> 参加する
        </a>
      </nav>

      {/* HERO */}
      <section style={{ padding: `${mobile ? '48px' : '72px'} ${px} ${mobile ? '56px' : '80px'}`, position: 'relative', zIndex: 2 }}>
        <div className="fade-up" style={{ textAlign: 'center', position: 'relative', maxWidth: 900, margin: '0 auto' }}>
          {/* Floating sticker badges */}
          {!mobile && (
            <>
              <div style={{
                position: 'absolute', top: 0, left: 40, transform: 'rotate(-12deg)',
                background: '#FFE4F0', color: '#C8417A',
                padding: '8px 14px', borderRadius: 14, fontSize: 12, fontWeight: 800,
                border: '2px solid #FF6B9D', boxShadow: '0 6px 0 0 #FF6B9D',
              }}>🔰 初心者歓迎</div>
              <div style={{
                position: 'absolute', top: 30, right: 60, transform: 'rotate(8deg)',
                background: 'var(--brand-yellow-soft)', color: 'var(--brand-yellow-deep)',
                padding: '8px 14px', borderRadius: 14, fontSize: 12, fontWeight: 800,
                border: '2px solid var(--brand-yellow)', boxShadow: '0 6px 0 0 var(--brand-yellow)',
              }}>🏆 大会あり</div>
              <div style={{
                position: 'absolute', top: 220, left: 90, transform: 'rotate(-6deg)',
                background: 'var(--brand-blue-soft)', color: 'var(--brand-blue-deep)',
                padding: '8px 14px', borderRadius: 14, fontSize: 12, fontWeight: 800,
                border: '2px solid var(--brand-blue)', boxShadow: '0 6px 0 0 var(--brand-blue)',
              }}>🤖 独自Bot</div>
            </>
          )}

          <h1 className="ja-display" style={{
            fontSize: mobile ? 52 : tablet ? 68 : 88,
            lineHeight: 1.05, position: 'relative', display: 'inline-block', textAlign: 'center',
          }}>
            LoL好き、<br />
            <span style={{ position: 'relative', display: 'inline-block' }}>
              ぜんぶ集まれ
              <svg width="100%" height="14" viewBox="0 0 400 14" preserveAspectRatio="none" style={{ position: 'absolute', bottom: -6, left: 0 }}>
                <path d="M2,8 Q100,2 200,7 T398,8" stroke="#F5C842" strokeWidth="6" strokeLinecap="round" fill="none"/>
              </svg>
            </span>
            。
          </h1>

          <p style={{ fontSize: mobile ? 15 : 18, color: 'var(--ink-2)', marginTop: 28, maxWidth: 620, marginLeft: 'auto', marginRight: 'auto', lineHeight: 1.75 }}>
            みんなで<strong style={{ color: 'var(--brand-blue-deep)' }}>カスタム</strong>、みんなで<strong style={{ color: 'var(--brand-yellow-deep)' }}>大会</strong>、みんなでワイワイ。<br />
            初心者もベテランも、ここに来れば仲間が見つかるよ。
          </p>

          <div style={{ display: 'flex', gap: 12, marginTop: 36, justifyContent: 'center', alignItems: 'center', flexWrap: 'wrap' }}>
            <a href={DISCORD_INVITE} target="_blank" rel="noopener" style={{
              background: '#0F1A2E', color: '#fff',
              padding: '16px 28px', borderRadius: 14, fontSize: mobile ? 14 : 15, fontWeight: 800,
              boxShadow: '0 6px 0 0 var(--brand-blue), 0 14px 30px rgba(15,26,46,0.2)',
              display: 'inline-block',
            }}>🎮 Discordに参加する</a>
            {widget.online != null && (
              <div style={{
                display: 'inline-flex', alignItems: 'center', gap: 10,
                padding: '14px 20px',
                background: '#fff', borderRadius: 14,
                border: '2px solid #0F1A2E',
                boxShadow: '0 6px 0 0 #0F1A2E',
                fontSize: 14, fontWeight: 700,
              }}>
                <span className="dot live"></span>
                <span>今 <strong style={{ color: 'var(--brand-blue-deep)', fontSize: 16 }}>{widget.online.toLocaleString()}</strong> 人がオンライン中！</span>
              </div>
            )}
          </div>
        </div>
      </section>

      {/* FEATURES */}
      <section id="特徴" style={{ padding: `64px ${px}`, position: 'relative', zIndex: 2 }}>
        <div className="fade-up" style={{ textAlign: 'center', marginBottom: 56 }}>
          <div style={{ fontSize: 12, color: 'var(--brand-yellow-deep)', fontWeight: 800, letterSpacing: '0.18em' }}>★ 5つのお楽しみ ★</div>
          <h2 className="ja-display" style={{ fontSize: mobile ? 36 : tablet ? 44 : 52, marginTop: 12 }}>
            ぜんぶ盛りこんだ<br />
            <span style={{
              background: 'linear-gradient(90deg, #4DA3FF, #F5C842)',
              WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent',
            }}>欲ばりサーバー</span>
          </h2>
        </div>

        {(() => {
          const palettes = [
            { bg: '#DCEAFE', accent: '#2A6FDB', shadow: '#4DA3FF' },
            { bg: '#FFF5D1', accent: '#E0A82E', shadow: '#F5C842' },
            { bg: '#FFE4F0', accent: '#C8417A', shadow: '#FF6B9D' },
            { bg: '#D1F5DC', accent: '#1F8A5B', shadow: '#22C55E' },
            { bg: '#E8DCFF', accent: '#6B3FBE', shadow: '#9F7BE8' },
          ];
          const Card = ({ f, c, i }) => (
            <div style={{
              background: c.bg,
              border: `2px solid ${c.shadow}`,
              borderRadius: 24,
              padding: '28px 26px',
              position: 'relative',
              boxShadow: `6px 6px 0 0 ${c.shadow}`,
              transform: i % 2 ? 'rotate(-0.5deg)' : 'rotate(0.5deg)',
              display: 'flex', flexDirection: 'column',
            }}>
              <div style={{ fontSize: 48, lineHeight: 1, marginBottom: 14 }}>{f.icon}</div>
              <div style={{
                fontSize: 11, fontWeight: 800, color: c.accent,
                letterSpacing: '0.12em', marginBottom: 4,
              }}>{f.tag}</div>
              <h3 className="ja-display" style={{ fontSize: mobile ? 18 : 22, color: '#0F1A2E' }}>{f.title}</h3>
              <p style={{ color: 'var(--ink-2)', fontSize: 13.5, marginTop: 10, lineHeight: 1.7, whiteSpace: 'pre-line', flex: 1 }}>{f.desc}</p>
              {f.tag === 'Custom Bot' && (
                <a href={BOT_MANUAL_URL} style={{
                  marginTop: 16,
                  display: 'inline-flex', alignItems: 'center', gap: 6,
                  background: '#0F1A2E', color: '#F5C842',
                  padding: '10px 18px', borderRadius: 10, fontSize: 13, fontWeight: 800,
                  alignSelf: 'flex-start',
                }}>📖 Botマニュアルを見る</a>
              )}
            </div>
          );

          if (mobile) {
            return (
              <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
                {FEATURES.map((f, i) => <Card key={i} f={f} c={palettes[i]} i={i} />)}
              </div>
            );
          }
          if (tablet) {
            return (
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 16 }}>
                {FEATURES.map((f, i) => <Card key={i} f={f} c={palettes[i]} i={i} />)}
              </div>
            );
          }
          return (
            <>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 18, marginBottom: 18 }}>
                {FEATURES.slice(0, 2).map((f, i) => <Card key={i} f={f} c={palettes[i]} i={i} />)}
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 18 }}>
                {FEATURES.slice(2).map((f, i) => <Card key={i + 2} f={f} c={palettes[i + 2]} i={i + 2} />)}
              </div>
            </>
          );
        })()}
      </section>

      {/* ITEM COLLECTION */}
      <section style={{ padding: `64px ${px}`, position: 'relative', zIndex: 2 }}>
        <div className="fade-up" style={{ textAlign: 'center', marginBottom: 40 }}>
          <div style={{ fontSize: 12, color: 'var(--brand-yellow-deep)', fontWeight: 800, letterSpacing: '0.18em' }}>★ COLLECT & TRADE ★</div>
          <h2 className="ja-display" style={{ fontSize: mobile ? 30 : 42, marginTop: 12 }}>
            アイテムコレクション
          </h2>
          <p style={{ color: 'var(--ink-2)', fontSize: 15, marginTop: 10, lineHeight: 1.8, maxWidth: 620, margin: '10px auto 0' }}>
            インフィニティエッジ、トリニティフォース——<br />
            LoLでおなじみのあのアイテムたちが、ここではコレクションとして手に入る。<br />
            集めて、合成して、仲間と交換しよう。
          </p>
        </div>
        <div className="fade-up" style={{
          display: 'grid',
          gridTemplateColumns: mobile ? '1fr' : 'repeat(3, 1fr)',
          gap: 16,
        }}>
          {[
            {
              icon: '🎲', title: 'ガチャで収集', tag: 'Collect',
              bg: '#FFF5D1', border: '#F5C842', shadow: '#E0A82E', accent: '#E0A82E',
              desc: 'LoLでおなじみのアイテムがガチャで登場。VC参加で毎日1回は無料で回せるから、コツコツ集めていこう。',
            },
            {
              icon: '⚗️', title: '合成して強化', tag: 'Synthesis',
              bg: '#E8DCFF', border: '#9F7BE8', shadow: '#9F7BE8', accent: '#6B3FBE',
              desc: '手持ちのアイテム同士を組み合わせて、より強力な上位アイテムを生み出せる。レシピを解読してコレクションを強化しよう。',
            },
            {
              icon: '🔄', title: 'ユーザー間トレード', tag: 'Trade',
              bg: '#DCEAFE', border: '#4DA3FF', shadow: '#4DA3FF', accent: '#2A6FDB',
              desc: '/trade コマンドで他のプレイヤーと直接アイテム交換。欲しいアイテムは交渉でゲットしよう。',
            },
          ].map((item, i) => (
            <div key={i} style={{
              background: item.bg,
              border: `2px solid ${item.border}`,
              borderRadius: 24,
              padding: '28px 26px',
              boxShadow: `6px 6px 0 0 ${item.shadow}`,
              transform: i % 2 ? 'rotate(-0.5deg)' : 'rotate(0.5deg)',
            }}>
              <div style={{ fontSize: 48, lineHeight: 1, marginBottom: 14 }}>{item.icon}</div>
              <div style={{ fontSize: 11, fontWeight: 800, color: item.accent, letterSpacing: '0.12em', marginBottom: 4 }}>
                {item.tag}
              </div>
              <h3 className="ja-display" style={{ fontSize: mobile ? 18 : 22, color: '#0F1A2E' }}>{item.title}</h3>
              <p style={{ color: 'var(--ink-2)', fontSize: 13.5, marginTop: 10, lineHeight: 1.7 }}>{item.desc}</p>
            </div>
          ))}
        </div>
      </section>

      {/* PVP */}
      <section style={{ padding: `0 ${px} 64px`, position: 'relative', zIndex: 2 }}>
        <div className="fade-up" style={{ textAlign: 'center', marginBottom: 40 }}>
          <div style={{ fontSize: 12, color: 'var(--brand-blue-deep)', fontWeight: 800, letterSpacing: '0.18em' }}>★ AUTO BATTLE ★</div>
          <h2 className="ja-display" style={{ fontSize: mobile ? 30 : 42, marginTop: 12 }}>
            PVPシステム
          </h2>
          <p style={{ color: 'var(--ink-2)', fontSize: 15, marginTop: 10, lineHeight: 1.8, maxWidth: 640, margin: '10px auto 0' }}>
            ロール・ルーン・アイテムでビルドを組んで、オートバトルで勝負する——<br />
            LoLのゲームシステムをベースにした、サーバー独自のPVPモード。
          </p>
        </div>
        <div className="fade-up" style={{
          display: 'grid',
          gridTemplateColumns: mobile ? '1fr' : 'repeat(3, 1fr)',
          gap: 16,
        }}>
          {[
            {
              icon: '⚔️', title: 'オートバトル', tag: 'Core',
              bg: '#DCEAFE', border: '#4DA3FF', shadow: '#4DA3FF', accent: '#2A6FDB',
              desc: 'ビルドを組んだらあとは自動で対戦。運だけじゃなく、構成とアイテム選択のセンスが勝敗を分ける。',
            },
            {
              icon: '🛡️', title: 'ビルド構築', tag: 'Build',
              bg: '#D1F5DC', border: '#22C55E', shadow: '#22C55E', accent: '#1F8A5B',
              desc: 'TOP / JG / MID / BOT / SUP のロール選択、ルーンの設定、アイテムの積み方——LoLそのままの感覚でビルドを考えよう。',
            },
            {
              icon: '🎰', title: 'アイテム入手手段', tag: 'Gacha & Shop',
              bg: '#FFE4F0', border: '#FF6B9D', shadow: '#FF6B9D', accent: '#C8417A',
              desc: 'アイテムはガチャやショップで入手。強いビルドを目指してコレクションを積み上げていくのがこのPVPの楽しみ方。',
            },
          ].map((item, i) => (
            <div key={i} style={{
              background: item.bg,
              border: `2px solid ${item.border}`,
              borderRadius: 24,
              padding: '28px 26px',
              boxShadow: `6px 6px 0 0 ${item.shadow}`,
              transform: i % 2 ? 'rotate(-0.5deg)' : 'rotate(0.5deg)',
            }}>
              <div style={{ fontSize: 48, lineHeight: 1, marginBottom: 14 }}>{item.icon}</div>
              <div style={{ fontSize: 11, fontWeight: 800, color: item.accent, letterSpacing: '0.12em', marginBottom: 4 }}>
                {item.tag}
              </div>
              <h3 className="ja-display" style={{ fontSize: mobile ? 18 : 22, color: '#0F1A2E' }}>{item.title}</h3>
              <p style={{ color: 'var(--ink-2)', fontSize: 13.5, marginTop: 10, lineHeight: 1.7 }}>{item.desc}</p>
            </div>
          ))}
        </div>
      </section>

      {/* BOT */}
      <section id="Bot" style={{ padding: `0 ${px} 88px`, position: 'relative', zIndex: 2 }}>
        <div style={{
          background: 'linear-gradient(135deg, #0F1A2E 0%, #1F2E4D 100%)',
          borderRadius: 32,
          padding: mobile ? '36px 24px' : '56px 48px',
          color: '#fff',
          position: 'relative',
          overflow: 'hidden',
        }}>
          <div style={{
            position: 'absolute', top: -50, right: -50, width: 300, height: 300,
            background: 'var(--brand-yellow)', borderRadius: '50%', opacity: 0.2, filter: 'blur(80px)',
            pointerEvents: 'none',
          }}></div>
          <div style={{
            display: 'grid',
            gridTemplateColumns: mobile ? '1fr' : '1fr 1fr',
            gap: mobile ? 36 : 56,
            alignItems: 'center',
            position: 'relative',
          }}>
            <div className="fade-up">
              <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '6px 14px', borderRadius: 999, background: 'rgba(245,200,66,0.15)', color: 'var(--brand-yellow)', fontSize: 12, fontWeight: 800, letterSpacing: '0.1em' }}>
                🤖 LOL BOT — TEAM BALANCER
              </div>
              <h2 className="ja-display" style={{ fontSize: mobile ? 32 : 46, marginTop: 16, lineHeight: 1.15 }}>
                <span style={{ color: 'var(--brand-yellow)' }}>レート格差のない</span><br />
                チーム分け、自動で。
              </h2>
              <p style={{ marginTop: 18, fontSize: 15, opacity: 0.85, lineHeight: 1.75 }}>
                カスタムあるあるの「片チームだけ強すぎ問題」を独自Botが解決。<br />
                参加者のランクをもとに、<strong style={{ color: '#fff' }}>勝率がほぼ五分</strong>になる組み合わせを瞬時に算出するよ。
              </p>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginTop: 22 }}>
                {[
                  { i: '⚖️', t: 'ランク差を最小化する自動アルゴリズム' },
                  { i: '🎲', t: '希望レーンを加味したマッチメイク' },
                  { i: '⚡', t: 'コマンド一発でチーム発表 — 議論不要' },
                ].map((x, i) => (
                  <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 12, fontSize: 14 }}>
                    <span style={{
                      width: 32, height: 32, borderRadius: 10,
                      background: 'rgba(245,200,66,0.15)',
                      display: 'grid', placeItems: 'center', fontSize: 16, flexShrink: 0,
                    }}>{x.i}</span>
                    <span>{x.t}</span>
                  </div>
                ))}
              </div>
              <div style={{ marginTop: 24 }}>
                <a href={BOT_MANUAL_URL} style={{
                  background: 'var(--brand-yellow)', color: '#0F1A2E',
                  padding: '12px 24px', borderRadius: 12, fontSize: 14, fontWeight: 800,
                  display: 'inline-flex', alignItems: 'center', gap: 8,
                  boxShadow: '0 4px 0 0 var(--brand-yellow-deep)',
                }}>
                  📖 Botマニュアルを見る
                </a>
              </div>
            </div>

            {/* Team balance visualization */}
            <div className="fade-up">
              <div style={{
                background: '#2B2D31', borderRadius: 16, padding: '20px 22px',
                border: '1px solid rgba(255,255,255,0.08)',
                color: '#DCDDDE',
                boxShadow: '0 24px 60px -20px rgba(0,0,0,0.5)',
              }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 16, fontSize: 16, fontWeight: 800, color: '#fff' }}>
                  <span style={{ fontSize: 18 }}>⚔️</span>
                  <span>チーム振り分け結果</span>
                </div>
                <div style={{ marginBottom: 18 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8, fontSize: 14, fontWeight: 800 }}>
                    <span style={{ width: 12, height: 12, borderRadius: '50%', background: '#4DA3FF' }}></span>
                    <span style={{ color: '#4DA3FF' }}>チーム1</span>
                  </div>
                  {[
                    { l: 'JG',  n: 'kuro_ADC',  r: 'チャレンジャー' },
                    { l: 'TOP', n: 'tako_san',  r: 'マスター' },
                    { l: 'MID', n: 'naoki',     r: 'ゴールド III' },
                    { l: 'SUP', n: 'mooo',      r: 'UnRank' },
                    { l: 'BOT', n: 'sasuke',    r: 'UnRank IV' },
                  ].map((p, i) => (
                    <div key={i} style={{ display: 'flex', alignItems: 'baseline', gap: 12, padding: '4px 0', fontSize: 13 }}>
                      <span style={{ width: 38, color: '#fff', fontWeight: 800 }}>{p.l}</span>
                      <span style={{ color: '#fff', fontWeight: 600, minWidth: 80 }}>{p.n}</span>
                      <span style={{ color: 'rgba(255,255,255,0.65)' }}>（{p.r}）</span>
                    </div>
                  ))}
                </div>
                <div>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8, fontSize: 14, fontWeight: 800 }}>
                    <span style={{ width: 12, height: 12, borderRadius: '50%', background: '#FF6B6B' }}></span>
                    <span style={{ color: '#FF6B6B' }}>チーム2</span>
                  </div>
                  {[
                    { l: 'BOT', n: 'iceice',    r: 'UnRank' },
                    { l: 'MID', n: 'haru',      r: 'マスター' },
                    { l: 'TOP', n: 'rinrin',    r: 'シルバー I' },
                    { l: 'JG',  n: 'mikan',     r: 'チャレンジャー' },
                    { l: 'SUP', n: 'kana',      r: 'シルバー III' },
                  ].map((p, i) => (
                    <div key={i} style={{ display: 'flex', alignItems: 'baseline', gap: 12, padding: '4px 0', fontSize: 13 }}>
                      <span style={{ width: 38, color: '#fff', fontWeight: 800 }}>{p.l}</span>
                      <span style={{ color: '#fff', fontWeight: 600, minWidth: 80 }}>{p.n}</span>
                      <span style={{ color: 'rgba(255,255,255,0.65)' }}>（{p.r}）</span>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* FAQ */}
      <section id="FAQ" style={{ padding: `64px ${px} 88px`, position: 'relative', zIndex: 2 }}>
        <div className="fade-up" style={{ textAlign: 'center', marginBottom: 36 }}>
          <h2 className="ja-display" style={{ fontSize: mobile ? 30 : 44 }}>
            <span style={{
              background: '#F5C842', padding: '0 12px', borderRadius: 8, display: 'inline-block', transform: 'rotate(-1deg)',
            }}>聞きたいこと</span>、なんでも答えるよ
          </h2>
        </div>
        <div className="fade-up" style={{ maxWidth: 760, margin: '0 auto' }}>
          <FAQ items={FAQS} />
        </div>
      </section>

      {/* CTA */}
      <section style={{ padding: `0 ${px} 80px`, position: 'relative', zIndex: 2 }}>
        <div className="fade-up" style={{
          background: '#F5C842',
          borderRadius: 32,
          padding: mobile ? '40px 24px' : '56px',
          textAlign: 'center',
          position: 'relative',
          overflow: 'hidden',
          border: '3px solid #0F1A2E',
          boxShadow: '12px 12px 0 0 #0F1A2E',
        }}>
          <div style={{ position: 'absolute', top: 30, left: 40, fontSize: 60, transform: 'rotate(-15deg)', opacity: 0.4 }}>🎮</div>
          <div style={{ position: 'absolute', top: 50, right: 60, fontSize: 50, transform: 'rotate(20deg)', opacity: 0.4 }}>⚡</div>
          <div style={{ position: 'absolute', bottom: 30, left: 80, fontSize: 50, transform: 'rotate(15deg)', opacity: 0.4 }}>🏆</div>
          <div style={{ position: 'absolute', bottom: 40, right: 50, fontSize: 60, transform: 'rotate(-10deg)', opacity: 0.4 }}>✨</div>
          <h2 className="ja-display" style={{ fontSize: mobile ? 36 : 56, marginTop: 20, color: '#0F1A2E', position: 'relative' }}>
            ぜったい後悔させない！
          </h2>
          <p style={{ fontSize: mobile ? 14 : 17, marginTop: 14, color: '#0F1A2E', fontWeight: 600, position: 'relative' }}>
            参加無料・要件なし・いつでも抜けてOK
          </p>
          <a href={DISCORD_INVITE} target="_blank" rel="noopener" style={{
            background: '#0F1A2E', color: '#F5C842',
            padding: mobile ? '14px 28px' : '18px 40px',
            borderRadius: 14, fontSize: mobile ? 15 : 17, fontWeight: 800,
            marginTop: 28,
            display: 'inline-flex', alignItems: 'center', gap: 10,
            position: 'relative',
          }}>
            <span>🚀</span> いますぐ参加する
          </a>
        </div>
      </section>

      <footer style={{ padding: `32px ${px} 40px`, textAlign: 'center', fontSize: 12, color: 'var(--ink-3)' }}>
        © 2026 LOL Gamers · 作って遊んでくれてる仲間たち ありがとう ♡
      </footer>
    </div>
  );
}

function useDiscordWidget(serverId) {
  const [data, setData] = React.useState({ online: null, loading: true, error: null });
  React.useEffect(() => {
    let cancelled = false;
    fetch(`https://discord.com/api/guilds/${serverId}/widget.json`)
      .then(r => r.ok ? r.json() : Promise.reject(r.status))
      .then(d => { if (!cancelled) setData({ online: d.presence_count, loading: false, error: null }); })
      .catch(e => { if (!cancelled) setData({ online: null, loading: false, error: String(e) }); });
    return () => { cancelled = true; };
  }, [serverId]);
  return data;
}

window.VariationB = VariationB;