// Background decoration — floating clouds + sparkles
function Cloud({ width = 120, opacity = 0.55 }) {
  return (
    <svg viewBox="0 0 200 110" width={width} style={{ opacity }}>
      <defs>
        <radialGradient id="cg" cx="50%" cy="40%">
          <stop offset="0%" stopColor="#fff" />
          <stop offset="100%" stopColor="#E8F0FA" />
        </radialGradient>
      </defs>
      <ellipse cx="60" cy="70" rx="50" ry="32" fill="url(#cg)" />
      <ellipse cx="110" cy="55" rx="55" ry="38" fill="url(#cg)" />
      <ellipse cx="150" cy="75" rx="42" ry="28" fill="url(#cg)" />
      <ellipse cx="100" cy="80" rx="60" ry="20" fill="url(#cg)" />
    </svg>
  );
}

function BgDecor() {
  return (
    <div className="bg-decor">
      <div className="bg-cloud c1" style={{ top: '8%', left: '4%' }}><Cloud width={140} /></div>
      <div className="bg-cloud c2" style={{ top: '32%', right: '6%' }}><Cloud width={180} opacity={0.45} /></div>
      <div className="bg-cloud c3" style={{ top: '62%', left: '8%' }}><Cloud width={100} opacity={0.5} /></div>
      <div className="bg-cloud c4" style={{ top: '85%', right: '12%' }}><Cloud width={130} opacity={0.4} /></div>
      <div className="bg-cloud c1" style={{ top: '48%', left: '50%' }}><Cloud width={90} opacity={0.35} /></div>
    </div>
  );
}

function Header() {
  return (
    <header className="header">
      <a className="brand" href="#top">
        <img src="assets/logo.png" alt="Math4Kids" className="brand-logo" />
        <div>
          <div className="brand-name">Math<span>4</span>Kids</div>
          <div className="brand-tag">Lær matte med skyer & enhjørninger</div>
        </div>
      </a>
      <nav className="nav">
        <a href="#matte">Mattespill</a>
        <a href="#tilfeldige">Tilfeldige spill</a>
        <a href="#klistremerker">Klistremerker</a>
        <a href="#kode" className="cta">🎁 Løs inn kode</a>
      </nav>
    </header>
  );
}

function Hero() {
  return (
    <section className="hero" id="top">
      <div>
        <div className="hero-eyebrow">
          <span className="dot"></span>
          12 spill klare til å spilles
        </div>
        <h1>
          Matte er <span className="accent-1">moro</span><br />
          når <span className="accent-2">skyene</span> hjelper<br />
          deg å <span className="accent-3">telle!</span>
        </h1>
        <p className="lede">
          Spill, lær og samle hemmelige koder. Hver kode låser opp en
          overraskelse — en video, et bilde eller en GIF kun for deg.
        </p>
        <div className="hero-stats">
          <div className="hero-stat">
            <div className="hero-stat-icon" style={{ background: 'linear-gradient(135deg,#FFE066,#F4B71A)' }}>
              <span style={{ fontSize: 22, fontWeight: 700, color: '#6B4A00' }}>8</span>
            </div>
            <div>
              <div className="hero-stat-num">Mattespill</div>
              <div className="hero-stat-label">+ − × ÷ og mer</div>
            </div>
          </div>
          <div className="hero-stat">
            <div className="hero-stat-icon" style={{ background: 'linear-gradient(135deg,#FFC9E2,#FF7AB8)' }}>
              <span style={{ fontSize: 22 }}>🎲</span>
            </div>
            <div>
              <div className="hero-stat-num">6 morsomme</div>
              <div className="hero-stat-label">Tilfeldige spill</div>
            </div>
          </div>
          <div className="hero-stat">
            <div className="hero-stat-icon" style={{ background: 'linear-gradient(135deg,#DCC8FF,#9B72E8)' }}>
              <span style={{ fontSize: 22 }}>🦄</span>
            </div>
            <div>
              <div className="hero-stat-num">24 klistre­merker</div>
              <div className="hero-stat-label">Å samle på</div>
            </div>
          </div>
        </div>
      </div>
      <div className="hero-visual">
        <div className="hero-cube-stack">
          <div className="hero-cube c1">+</div>
          <div className="hero-cube c2">−</div>
          <div className="hero-cube c3">×</div>
          <div className="hero-cube c4">÷</div>
          <div className="hero-sparkle" style={{ top: '4%', left: '46%' }}>✨</div>
          <div className="hero-sparkle" style={{ top: '52%', left: '0%', animationDelay: '1s' }}>⭐</div>
          <div className="hero-sparkle" style={{ top: '40%', right: '0%', animationDelay: '0.5s' }}>✨</div>
          <div className="hero-sparkle" style={{ bottom: '0%', right: '40%', animationDelay: '1.5s' }}>⭐</div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { BgDecor, Header, Hero, Cloud });