// Game cards + grids
function GameCard({ game, onClick }) {
  return (
    <button className="game-card" onClick={onClick}>
      {game.reward && (
        <div className="game-card-corner">
          <span style={{ fontSize: 12 }}>🎁</span>
          Gir kode
        </div>
      )}
      <div className="game-card-tile" style={{ background: game.bg }}>
        <span className={`game-card-symbol ${game.symbolDark ? 'dark' : ''}`} style={game.isEmoji ? { fontSize: 72 } : {}}>
          {game.symbol}
        </span>
      </div>
      <div className="game-card-title">{game.title}</div>
      <div className="game-card-desc">{game.desc}</div>
      <div className="game-card-foot">
        <span className={`chip ${game.diffClass}`}>{game.difficulty}</span>
        <span className="play-btn">
          Spill
          <span className="play-btn-arrow">→</span>
        </span>
      </div>
    </button>
  );
}

// SVG art for random game cards
function RandomArt({ type }) {
  if (type === 'unicorn') {
    return (
      <svg viewBox="0 0 200 130" width="100%" height="100%" style={{ maxHeight: 130 }}>
        <ellipse cx="60" cy="115" rx="50" ry="6" fill="#7BD389" opacity="0.5" />
        <ellipse cx="155" cy="118" rx="35" ry="4" fill="#7BD389" opacity="0.5" />
        <g transform="translate(40, 40)">
          <ellipse cx="40" cy="50" rx="38" ry="26" fill="#fff" stroke="#FF7AB8" strokeWidth="2" />
          <circle cx="65" cy="35" r="20" fill="#fff" stroke="#FF7AB8" strokeWidth="2" />
          <polygon points="62,16 70,2 78,16" fill="#FFD93D" stroke="#F4B71A" strokeWidth="1.5" />
          <path d="M55 35 Q40 30 35 22" stroke="#FF7AB8" strokeWidth="3" fill="none" strokeLinecap="round" />
          <path d="M50 38 Q35 38 30 30" stroke="#9B72E8" strokeWidth="3" fill="none" strokeLinecap="round" />
          <circle cx="70" cy="35" r="2" fill="#1F2D4A" />
          <line x1="20" y1="68" x2="20" y2="80" stroke="#FF7AB8" strokeWidth="3" strokeLinecap="round" />
          <line x1="55" y1="68" x2="55" y2="80" stroke="#FF7AB8" strokeWidth="3" strokeLinecap="round" />
        </g>
        <text x="135" y="60" fontSize="20">🌸</text>
        <text x="160" y="85" fontSize="16">🌼</text>
      </svg>
    );
  }
  if (type === 'snake') {
    return (
      <svg viewBox="0 0 200 130" width="100%" height="100%" style={{ maxHeight: 130 }}>
        <path d="M30 90 Q50 60 80 80 T130 70 T180 80" stroke="#4FB561" strokeWidth="14" fill="none" strokeLinecap="round" />
        <path d="M30 90 Q50 60 80 80 T130 70 T180 80" stroke="#7BD389" strokeWidth="6" fill="none" strokeLinecap="round" strokeDasharray="2,8" />
        <circle cx="180" cy="80" r="9" fill="#4FB561" />
        <circle cx="183" cy="77" r="2" fill="#fff" />
        <text x="55" y="40" fontSize="26">🎻</text>
        <g fill="#FFD93D">
          <text x="105" y="38" fontSize="14">♪</text>
          <text x="135" y="32" fontSize="16">♫</text>
          <text x="155" y="50" fontSize="14">♪</text>
        </g>
      </svg>
    );
  }
  if (type === 'moon') {
    return (
      <svg viewBox="0 0 200 130" width="100%" height="100%" style={{ maxHeight: 130 }}>
        <rect x="0" y="0" width="200" height="130" fill="#1F2D4A" rx="8" />
        <circle cx="40" cy="35" r="1.5" fill="#fff" />
        <circle cx="80" cy="20" r="1" fill="#fff" />
        <circle cx="160" cy="30" r="1.5" fill="#fff" />
        <circle cx="180" cy="55" r="1" fill="#fff" />
        <ellipse cx="100" cy="115" rx="100" ry="18" fill="#9B72E8" opacity="0.7" />
        <circle cx="55" cy="108" r="6" fill="#1F2D4A" opacity="0.4" />
        <circle cx="140" cy="112" r="8" fill="#1F2D4A" opacity="0.4" />
        <g transform="translate(95, 60)">
          <rect x="-8" y="0" width="16" height="22" fill="#fff" rx="2" />
          <polygon points="-8,0 0,-12 8,0" fill="#FF7AB8" />
          <rect x="-12" y="22" width="6" height="8" fill="#9B72E8" />
          <rect x="6" y="22" width="6" height="8" fill="#9B72E8" />
          <polygon points="-4,30 0,40 4,30" fill="#FFD93D" opacity="0.8" />
        </g>
      </svg>
    );
  }
  if (type === 'paint') {
    return (
      <svg viewBox="0 0 200 130" width="100%" height="100%" style={{ maxHeight: 130 }}>
        <path d="M20 20 Q60 110 100 50 T180 90" stroke="#FF7AB8" strokeWidth="6" fill="none" strokeLinecap="round" opacity="0.8" />
        <path d="M30 100 Q80 30 120 80 T190 30" stroke="#9B72E8" strokeWidth="5" fill="none" strokeLinecap="round" opacity="0.8" />
        <path d="M10 60 Q70 90 110 40 T170 60" stroke="#4DA8E8" strokeWidth="5" fill="none" strokeLinecap="round" opacity="0.8" />
        <circle cx="20" cy="20" r="6" fill="#FF7AB8" />
        <circle cx="180" cy="90" r="6" fill="#FF7AB8" />
        <circle cx="190" cy="30" r="6" fill="#9B72E8" />
        <circle cx="10" cy="60" r="6" fill="#4DA8E8" />
      </svg>
    );
  }
  if (type === 'asteroid') {
    return (
      <svg viewBox="0 0 200 130" width="100%" height="100%" style={{ maxHeight: 130 }}>
        <rect x="0" y="0" width="200" height="130" fill="#2A1A4A" rx="8" />
        <circle cx="20" cy="20" r="1" fill="#fff" />
        <circle cx="50" cy="50" r="1" fill="#fff" />
        <circle cx="170" cy="25" r="1.5" fill="#fff" />
        <circle cx="120" cy="100" r="1" fill="#fff" />
        <g fill="#9B72E8" stroke="#fff" strokeWidth="1.5">
          <polygon points="40,30 55,25 60,40 50,50 35,45" />
          <polygon points="155,80 170,75 175,90 165,100 150,95" />
          <polygon points="80,90 92,85 98,95 88,103" />
        </g>
        <g transform="translate(95, 55)">
          <polygon points="0,-10 -8,8 0,4 8,8" fill="#FFD93D" stroke="#F4B71A" strokeWidth="1" />
          <polygon points="0,4 -4,12 0,16 4,12" fill="#FF7AB8" />
        </g>
      </svg>
    );
  }
  if (type === 'planet') {
    return (
      <svg viewBox="0 0 200 130" width="100%" height="100%" style={{ maxHeight: 130 }}>
        <defs>
          <radialGradient id="pg" cx="40%" cy="40%">
            <stop offset="0%" stopColor="#B8F2D4" />
            <stop offset="100%" stopColor="#4FB561" />
          </radialGradient>
        </defs>
        <circle cx="100" cy="75" r="50" fill="url(#pg)" />
        <ellipse cx="80" cy="60" rx="14" ry="6" fill="#7BD389" opacity="0.7" />
        <ellipse cx="120" cy="85" rx="18" ry="7" fill="#7BD389" opacity="0.7" />
        <g transform="translate(85, 30)">
          <rect x="0" y="6" width="3" height="10" fill="#6B4A00" />
          <circle cx="1.5" cy="6" r="6" fill="#FF7AB8" />
        </g>
        <g transform="translate(115, 35)">
          <rect x="0" y="6" width="3" height="10" fill="#6B4A00" />
          <circle cx="1.5" cy="6" r="5" fill="#FFD93D" />
        </g>
        <text x="55" y="50" fontSize="16">☁️</text>
        <text x="155" y="35" fontSize="14">☀️</text>
      </svg>
    );
  }
  return null;
}

function RandomCard({ game, onClick }) {
  return (
    <button className="random-card" onClick={onClick}>
      <div className="random-card-art" style={{ background: game.bg }}>
        <RandomArt type={game.artType} />
      </div>
      <div className="random-card-body">
        <div className="random-card-title">{game.title}</div>
        <div className="random-card-desc">{game.desc}</div>
      </div>
    </button>
  );
}

function MathSection({ onOpen }) {
  return (
    <section className="section" id="matte">
      <div className="section-head">
        <div className="section-head-left">
          <div className="section-icon" style={{ background: 'linear-gradient(135deg,#FFE066,#F4B71A)' }}>
            <span style={{ fontSize: 32 }}>🧮</span>
          </div>
          <div>
            <h2>Mattespill</h2>
            <div className="section-sub">Lær med tall, former og klokker</div>
          </div>
        </div>
        <div className="section-counter">8 spill • 6 gir koder</div>
      </div>
      <div className="grid">
        {MATH_GAMES.map(g => <GameCard key={g.id} game={g} onClick={() => onOpen(g, 'math')} />)}
      </div>
    </section>
  );
}

function RandomSection({ onOpen }) {
  return (
    <section className="section" id="tilfeldige">
      <div className="section-head">
        <div className="section-head-left">
          <div className="section-icon" style={{ background: 'linear-gradient(135deg,#FFC9E2,#FF7AB8)' }}>
            <span style={{ fontSize: 32 }}>🎲</span>
          </div>
          <div>
            <h2>Tilfeldige spill</h2>
            <div className="section-sub">Pause fra matten — bare gøy</div>
          </div>
        </div>
        <div className="section-counter">6 spill</div>
      </div>
      <div className="random-list">
        {RANDOM_GAMES.map(g => <RandomCard key={g.id} game={g} onClick={() => onOpen(g, 'random')} />)}
      </div>
    </section>
  );
}

Object.assign(window, { GameCard, RandomCard, MathSection, RandomSection, RandomArt });
