// Brevemente — pre-register landing page (split hero + features + email capture)
// Inspired by AAA mobile-game landing layout: logo+CTA left, video right, features row, rewards row.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "youtubeId": "GrAPLnNLtjU",
  "playersCount": "10,000+",
  "headline": "FORJA",
  "headlineAccent": "A TUA LENDA.",
  "eyebrow": "AVENTURA ÉPICA",
  "tagline": "Um mundo de ação sem fim, bosses épicos e segredos escondidos.",
  "showFloatingCrystals": true,
  "discordUrl": "https://discord.gg/s9kBPrfay",
  "youtubeUrl": "https://www.youtube.com/@minilandsgame",
  "instagramUrl": "https://instagram.com/minilandsgame",
  "redditUrl": "https://www.reddit.com/r/MiniLandsGame/"
}/*EDITMODE-END*/;

const SUPPORT_EMAIL = 'support@minilands.io';

// ---------- Pixel icons (SVG) ----------
const PixelIcon = ({ kind, size = 56 }) => {
  // Polished SVG game-UI icons with gradients, outlines, and shading.
  const baseProps = { width: size, height: size, viewBox: '0 0 64 64' };
  const OUTLINE = '#1a0e04';

  if (kind === 'sword') {
    return (
      <svg {...baseProps}>
        <defs>
          <linearGradient id="bld" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0" stopColor="#fff" />
            <stop offset="0.5" stopColor="#cdd5e0" />
            <stop offset="1" stopColor="#7a8090" />
          </linearGradient>
          <linearGradient id="gld" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0" stopColor="#fde583" />
            <stop offset="1" stopColor="#c8941b" />
          </linearGradient>
        </defs>
        <ellipse cx="32" cy="60" rx="14" ry="2" fill="rgba(0,0,0,0.55)" />
        <polygon points="32,4 38,10 38,40 32,46 26,40 26,10" fill="url(#bld)" stroke={OUTLINE} strokeWidth="2.5" strokeLinejoin="round" />
        <line x1="32" y1="8" x2="32" y2="40" stroke={OUTLINE} strokeWidth="1.5" />
        <rect x="18" y="40" width="28" height="6" rx="1.5" fill="url(#gld)" stroke={OUTLINE} strokeWidth="2.5" />
        <rect x="29" y="46" width="6" height="11" fill="#7e3a12" stroke={OUTLINE} strokeWidth="2.5" />
        <line x1="29" y1="49" x2="35" y2="49" stroke={OUTLINE} strokeWidth="1" />
        <line x1="29" y1="53" x2="35" y2="53" stroke={OUTLINE} strokeWidth="1" />
        <circle cx="32" cy="58" r="4" fill="url(#gld)" stroke={OUTLINE} strokeWidth="2.5" />
      </svg>
    );
  }

  if (kind === 'skull') {
    return (
      <svg {...baseProps}>
        <defs>
          <linearGradient id="sk-g" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0" stopColor="#e0aaff" />
            <stop offset="0.5" stopColor="#9d4edd" />
            <stop offset="1" stopColor="#5a2c91" />
          </linearGradient>
          <radialGradient id="sk-eye" cx="0.5" cy="0.5" r="0.5">
            <stop offset="0" stopColor="#fff" />
            <stop offset="0.4" stopColor="#ff2eb8" />
            <stop offset="1" stopColor="#5a0030" />
          </radialGradient>
        </defs>
        <ellipse cx="32" cy="60" rx="16" ry="2.5" fill="rgba(0,0,0,0.55)" />
        <path d="M32 6 C17 6 9 17 9 30 C9 38 12 44 17 47 L17 54 L23 54 L23 49 L26 49 L26 54 L32 54 L32 49 L38 49 L38 54 L41 54 L41 49 L47 47 C52 44 55 38 55 30 C55 17 47 6 32 6Z" fill="url(#sk-g)" stroke={OUTLINE} strokeWidth="2.5" strokeLinejoin="round" />
        <ellipse cx="22" cy="28" rx="6" ry="7" fill="url(#sk-eye)" stroke={OUTLINE} strokeWidth="2" />
        <ellipse cx="42" cy="28" rx="6" ry="7" fill="url(#sk-eye)" stroke={OUTLINE} strokeWidth="2" />
        <circle cx="20" cy="26" r="1.6" fill="#fff" />
        <circle cx="40" cy="26" r="1.6" fill="#fff" />
        <path d="M30 38 L34 38 L32 44 Z" fill={OUTLINE} />
        <rect x="22" y="44" width="20" height="6" rx="1" fill="#fff8d6" stroke={OUTLINE} strokeWidth="1.5" />
        <line x1="27" y1="44" x2="27" y2="50" stroke={OUTLINE} strokeWidth="1.5" />
        <line x1="32" y1="44" x2="32" y2="50" stroke={OUTLINE} strokeWidth="1.5" />
        <line x1="37" y1="44" x2="37" y2="50" stroke={OUTLINE} strokeWidth="1.5" />
        <path d="M14 18 Q18 13 24 13" fill="none" stroke="rgba(255,255,255,0.45)" strokeWidth="2.5" strokeLinecap="round" />
      </svg>
    );
  }

  if (kind === 'portal') {
    return (
      <svg {...baseProps}>
        <defs>
          <linearGradient id="stn" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0" stopColor="#9b8db5" />
            <stop offset="0.6" stopColor="#5a4878" />
            <stop offset="1" stopColor="#332558" />
          </linearGradient>
          <radialGradient id="ptl" cx="0.5" cy="0.5" r="0.6">
            <stop offset="0" stopColor="#fff8d6" />
            <stop offset="0.3" stopColor="#c77dff" />
            <stop offset="0.75" stopColor="#7028b8" />
            <stop offset="1" stopColor="#1a0840" />
          </radialGradient>
        </defs>
        <ellipse cx="32" cy="58" rx="20" ry="2.5" fill="rgba(0,0,0,0.55)" />
        <path d="M10 56 L10 30 C10 17 19 7 32 7 C45 7 54 17 54 30 L54 56 L44 56 L44 32 C44 26 39 21 32 21 C25 21 20 26 20 32 L20 56 Z" fill="url(#stn)" stroke={OUTLINE} strokeWidth="2.5" strokeLinejoin="round" />
        <path d="M20 32 C20 26 25 21 32 21 C39 21 44 26 44 32 L44 56 L20 56 Z" fill="url(#ptl)" stroke={OUTLINE} strokeWidth="2" />
        <ellipse cx="32" cy="40" rx="8" ry="3" fill="#fff" opacity="0.35" />
        <circle cx="30" cy="32" r="2.5" fill="#fff" opacity="0.85" />
        <circle cx="36" cy="46" r="1.5" fill="#fff" opacity="0.6" />
        <line x1="10" y1="38" x2="20" y2="38" stroke={OUTLINE} strokeWidth="1.5" />
        <line x1="44" y1="38" x2="54" y2="38" stroke={OUTLINE} strokeWidth="1.5" />
        <line x1="10" y1="46" x2="20" y2="46" stroke={OUTLINE} strokeWidth="1.5" />
        <line x1="44" y1="46" x2="54" y2="46" stroke={OUTLINE} strokeWidth="1.5" />
        <line x1="14" y1="22" x2="14" y2="56" stroke="rgba(255,255,255,0.25)" strokeWidth="2" />
      </svg>
    );
  }

  if (kind === 'swords') {
    return (
      <svg {...baseProps}>
        <defs>
          <linearGradient id="sw-bld" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0" stopColor="#fff" />
            <stop offset="0.5" stopColor="#cdd5e0" />
            <stop offset="1" stopColor="#7a8090" />
          </linearGradient>
          <linearGradient id="sw-gld" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0" stopColor="#fde583" />
            <stop offset="1" stopColor="#c8941b" />
          </linearGradient>
        </defs>
        <ellipse cx="32" cy="60" rx="20" ry="2.5" fill="rgba(0,0,0,0.55)" />
        <g transform="rotate(-45 32 32)">
          <polygon points="30,6 34,6 34,40 32,44 30,40" fill="url(#sw-bld)" stroke={OUTLINE} strokeWidth="2" strokeLinejoin="round" />
          <line x1="32" y1="8" x2="32" y2="40" stroke={OUTLINE} strokeWidth="1" />
          <rect x="22" y="40" width="20" height="5" rx="1" fill="url(#sw-gld)" stroke={OUTLINE} strokeWidth="2" />
          <rect x="29" y="45" width="6" height="10" fill="#7e3a12" stroke={OUTLINE} strokeWidth="2" />
          <circle cx="32" cy="57" r="3.5" fill="url(#sw-gld)" stroke={OUTLINE} strokeWidth="2" />
        </g>
        <g transform="rotate(45 32 32)">
          <polygon points="30,6 34,6 34,40 32,44 30,40" fill="url(#sw-bld)" stroke={OUTLINE} strokeWidth="2" strokeLinejoin="round" />
          <line x1="32" y1="8" x2="32" y2="40" stroke={OUTLINE} strokeWidth="1" />
          <rect x="22" y="40" width="20" height="5" rx="1" fill="url(#sw-gld)" stroke={OUTLINE} strokeWidth="2" />
          <rect x="29" y="45" width="6" height="10" fill="#7e3a12" stroke={OUTLINE} strokeWidth="2" />
          <circle cx="32" cy="57" r="3.5" fill="url(#sw-gld)" stroke={OUTLINE} strokeWidth="2" />
        </g>
        <circle cx="32" cy="32" r="3.5" fill="#fff8d6" />
        <circle cx="32" cy="32" r="6" fill="none" stroke="#fff8d6" strokeWidth="1.2" opacity="0.55" />
      </svg>
    );
  }

  if (kind === 'chest') {
    return (
      <svg {...baseProps}>
        <defs>
          <linearGradient id="ch-w" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0" stopColor="#a85a1e" />
            <stop offset="1" stopColor="#5a2c0a" />
          </linearGradient>
          <linearGradient id="ch-g" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0" stopColor="#fff8d6" />
            <stop offset="0.5" stopColor="#f7c93b" />
            <stop offset="1" stopColor="#a06814" />
          </linearGradient>
        </defs>
        <ellipse cx="32" cy="60" rx="22" ry="2.5" fill="rgba(0,0,0,0.55)" />
        <path d="M9 22 Q9 8 32 8 Q55 8 55 22 L55 30 L9 30 Z" fill="url(#ch-w)" stroke={OUTLINE} strokeWidth="2.5" strokeLinejoin="round" />
        <ellipse cx="32" cy="29" rx="22" ry="3" fill="url(#ch-g)" />
        <circle cx="20" cy="20" r="3" fill="#9d4edd" stroke={OUTLINE} strokeWidth="1.5" />
        <circle cx="44" cy="20" r="3" fill="#ff2eb8" stroke={OUTLINE} strokeWidth="1.5" />
        <circle cx="32" cy="14" r="3.5" fill="#f7c93b" stroke={OUTLINE} strokeWidth="1.5" />
        <rect x="9" y="26" width="46" height="6" fill="url(#ch-g)" stroke={OUTLINE} strokeWidth="2" />
        <rect x="9" y="30" width="46" height="24" fill="url(#ch-w)" stroke={OUTLINE} strokeWidth="2.5" />
        <rect x="9" y="40" width="46" height="4" fill="url(#ch-g)" stroke={OUTLINE} strokeWidth="2" />
        <rect x="28" y="34" width="8" height="10" rx="1" fill="url(#ch-g)" stroke={OUTLINE} strokeWidth="2" />
        <circle cx="32" cy="39" r="1.8" fill={OUTLINE} />
        <line x1="14" y1="34" x2="14" y2="50" stroke="rgba(255,255,255,0.3)" strokeWidth="2" strokeLinecap="round" />
      </svg>
    );
  }

  if (kind === 'gems') {
    return (
      <svg {...baseProps}>
        <defs>
          <linearGradient id="gm-1" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0" stopColor="#e0aaff" />
            <stop offset="0.5" stopColor="#9d4edd" />
            <stop offset="1" stopColor="#5a2c91" />
          </linearGradient>
          <linearGradient id="gm-2" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0" stopColor="#a3e9ff" />
            <stop offset="0.5" stopColor="#3d9eff" />
            <stop offset="1" stopColor="#1a4d99" />
          </linearGradient>
          <linearGradient id="gm-3" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0" stopColor="#ffb3d9" />
            <stop offset="0.5" stopColor="#ff2eb8" />
            <stop offset="1" stopColor="#7a0044" />
          </linearGradient>
        </defs>
        <ellipse cx="32" cy="60" rx="22" ry="2.5" fill="rgba(0,0,0,0.55)" />
        <g transform="translate(40 36) scale(0.55)">
          <polygon points="0,-18 14,-4 8,22 -8,22 -14,-4" fill="url(#gm-2)" stroke={OUTLINE} strokeWidth="3.5" strokeLinejoin="round" />
          <polygon points="0,-18 7,-4 0,8 -7,-4" fill="#a3e9ff" opacity="0.7" />
          <polygon points="0,-12 3,-6 0,-2 -3,-6" fill="#fff" opacity="0.85" />
        </g>
        <g transform="translate(20 40) scale(0.55)">
          <polygon points="0,-18 14,-4 8,22 -8,22 -14,-4" fill="url(#gm-3)" stroke={OUTLINE} strokeWidth="3.5" strokeLinejoin="round" />
          <polygon points="0,-18 7,-4 0,8 -7,-4" fill="#ffb3d9" opacity="0.7" />
          <polygon points="0,-12 3,-6 0,-2 -3,-6" fill="#fff" opacity="0.85" />
        </g>
        <g transform="translate(32 28)">
          <polygon points="0,-20 16,-4 9,24 -9,24 -16,-4" fill="url(#gm-1)" stroke={OUTLINE} strokeWidth="2.5" strokeLinejoin="round" />
          <polygon points="0,-20 8,-4 0,9 -8,-4" fill="#c77dff" opacity="0.9" />
          <polygon points="0,-14 3.5,-7 0,-1 -3.5,-7" fill="#fff" opacity="0.85" />
          <polygon points="0,9 9,24 0,24" fill="#5a2c91" opacity="0.5" />
        </g>
      </svg>
    );
  }

  if (kind === 'shirt') {
    return (
      <svg {...baseProps}>
        <defs>
          <linearGradient id="ar-g" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0" stopColor="#fff8d6" />
            <stop offset="0.5" stopColor="#f7c93b" />
            <stop offset="1" stopColor="#a06814" />
          </linearGradient>
          <radialGradient id="ar-gem" cx="0.5" cy="0.5" r="0.5">
            <stop offset="0" stopColor="#fff" />
            <stop offset="0.4" stopColor="#c77dff" />
            <stop offset="1" stopColor="#5a2c91" />
          </radialGradient>
        </defs>
        <ellipse cx="32" cy="60" rx="22" ry="2.5" fill="rgba(0,0,0,0.55)" />
        <path d="M6 18 L18 11 L24 22 L14 28 Z" fill="url(#ar-g)" stroke={OUTLINE} strokeWidth="2.5" strokeLinejoin="round" />
        <path d="M58 18 L46 11 L40 22 L50 28 Z" fill="url(#ar-g)" stroke={OUTLINE} strokeWidth="2.5" strokeLinejoin="round" />
        <path d="M16 14 L48 14 L52 24 L48 50 L32 56 L16 50 L12 24 Z" fill="url(#ar-g)" stroke={OUTLINE} strokeWidth="2.5" strokeLinejoin="round" />
        <line x1="32" y1="20" x2="32" y2="50" stroke={OUTLINE} strokeWidth="2" />
        <rect x="14" y="42" width="36" height="6" fill="#7e3a12" stroke={OUTLINE} strokeWidth="2" />
        <rect x="28" y="44" width="8" height="4" fill="url(#ar-g)" stroke={OUTLINE} strokeWidth="1.5" />
        <polygon points="32,22 39,30 32,42 25,30" fill="url(#ar-gem)" stroke={OUTLINE} strokeWidth="2" strokeLinejoin="round" />
        <polygon points="32,22 35,30 32,33 29,30" fill="#fff" opacity="0.55" />
        <path d="M19 20 L19 32" stroke="rgba(255,255,255,0.55)" strokeWidth="2" strokeLinecap="round" />
        <path d="M45 20 L45 32" stroke="rgba(255,255,255,0.55)" strokeWidth="2" strokeLinecap="round" />
      </svg>
    );
  }

  if (kind === 'players') {
    return (
      <svg {...baseProps}>
        <defs>
          <linearGradient id="pl-g" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0" stopColor="#fde583" />
            <stop offset="1" stopColor="#c8941b" />
          </linearGradient>
          <linearGradient id="pl-s" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0" stopColor="#fad4a8" />
            <stop offset="1" stopColor="#d6986d" />
          </linearGradient>
        </defs>
        <ellipse cx="32" cy="60" rx="22" ry="2.5" fill="rgba(0,0,0,0.55)" />
        <g opacity="0.55">
          <circle cx="44" cy="22" r="8" fill="url(#pl-s)" stroke={OUTLINE} strokeWidth="2" />
          <path d="M44 32 Q56 32 56 50 L56 56 L34 56 L34 50 Q34 32 44 32 Z" fill="url(#pl-g)" stroke={OUTLINE} strokeWidth="2" strokeLinejoin="round" />
        </g>
        <circle cx="22" cy="22" r="9" fill="url(#pl-s)" stroke={OUTLINE} strokeWidth="2.5" />
        <circle cx="19" cy="20" r="2" fill="#fff" opacity="0.7" />
        <circle cx="19.5" cy="23" r="1.3" fill={OUTLINE} />
        <circle cx="25" cy="23" r="1.3" fill={OUTLINE} />
        <path d="M20 27 Q22 29 24 27" stroke={OUTLINE} strokeWidth="1.4" fill="none" strokeLinecap="round" />
        <path d="M22 32 Q8 32 8 52 L8 56 L36 56 L36 52 Q36 32 22 32 Z" fill="url(#pl-g)" stroke={OUTLINE} strokeWidth="2.5" strokeLinejoin="round" />
        <path d="M22 32 L18 42 L26 42 Z" fill="#fff8d6" stroke={OUTLINE} strokeWidth="2" strokeLinejoin="round" />
      </svg>
    );
  }

  if (kind === 'gift') {
    return (
      <svg {...baseProps}>
        <defs>
          <linearGradient id="gf-p" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0" stopColor="#c77dff" />
            <stop offset="1" stopColor="#5a2c91" />
          </linearGradient>
          <linearGradient id="gf-g" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0" stopColor="#fde583" />
            <stop offset="1" stopColor="#c8941b" />
          </linearGradient>
        </defs>
        <ellipse cx="32" cy="60" rx="20" ry="2.5" fill="rgba(0,0,0,0.55)" />
        <rect x="10" y="28" width="44" height="26" rx="2" fill="url(#gf-p)" stroke={OUTLINE} strokeWidth="2.5" />
        <rect x="8" y="20" width="48" height="10" rx="2" fill="url(#gf-p)" stroke={OUTLINE} strokeWidth="2.5" />
        <rect x="28" y="20" width="8" height="34" fill="url(#gf-g)" stroke={OUTLINE} strokeWidth="2" />
        <rect x="8" y="22" width="48" height="6" fill="url(#gf-g)" stroke={OUTLINE} strokeWidth="2" />
        <path d="M32 18 Q22 10 18 16 Q16 20 22 20 Q28 20 32 18 Z" fill="url(#gf-g)" stroke={OUTLINE} strokeWidth="2" strokeLinejoin="round" />
        <path d="M32 18 Q42 10 46 16 Q48 20 42 20 Q36 20 32 18 Z" fill="url(#gf-g)" stroke={OUTLINE} strokeWidth="2" strokeLinejoin="round" />
        <circle cx="32" cy="18" r="3" fill="#fff8d6" stroke={OUTLINE} strokeWidth="2" />
        <path d="M14 32 L14 50" stroke="rgba(255,255,255,0.35)" strokeWidth="2" strokeLinecap="round" />
      </svg>
    );
  }

  return null;
};

// ---------- Floating decorative crystals (purple) ----------
const FloatingCrystals = () => {
  const crystals = [
    { x: '4%',  y: '8%',  s: 38, d: 0,   r: -8 },
    { x: '8%',  y: '38%', s: 28, d: 1.5, r: 12 },
    { x: '5%',  y: '70%', s: 32, d: 0.8, r: -6 },
    { x: '92%', y: '12%', s: 30, d: 2.2, r: 10 },
    { x: '95%', y: '52%', s: 36, d: 1.0, r: -10 },
    { x: '90%', y: '82%', s: 24, d: 3.0, r: 6 },
    { x: '50%', y: '4%',  s: 22, d: 1.7, r: -4 },
  ];
  return (
    <div aria-hidden="true" style={{
      position: 'absolute', inset: 0, pointerEvents: 'none', overflow: 'hidden', zIndex: 1,
    }}>
      {crystals.map((c, i) => (
        <svg key={i} width={c.s} height={c.s * 1.6} viewBox="0 0 20 32" style={{
          position: 'absolute', left: c.x, top: c.y,
          transform: `rotate(${c.r}deg)`,
          animation: `crystal-float-${i} ${5 + (i % 3)}s ease-in-out infinite`,
          animationDelay: `${c.d}s`,
          filter: 'drop-shadow(0 0 8px rgba(157, 78, 221, 0.6))',
        }}>
          <polygon points="10,0 18,10 14,28 6,28 2,10" fill="#9d4edd" stroke="#1a0e04" strokeWidth="1" />
          <polygon points="10,0 14,10 10,28 6,10" fill="#c77dff" stroke="none" />
          <polygon points="10,2 12,8 10,16 8,8" fill="#fff" opacity="0.5" />
        </svg>
      ))}
      <style>{`
        ${crystals.map((_, i) => `
          @keyframes crystal-float-${i} {
            0%, 100% { transform: translateY(0) rotate(${crystals[i].r}deg); }
            50% { transform: translateY(${i % 2 === 0 ? -10 : -6}px) rotate(${crystals[i].r + (i % 2 === 0 ? 4 : -3)}deg); }
          }
        `).join('')}
      `}</style>
    </div>
  );
};

// ---------- Top Nav ----------
const TopNav = () => {
  const links = [
    { label: 'HOME', href: '#' },
    { label: 'SOBRE', href: 'index.html#features' },
    { label: 'CLASSES', href: 'index.html#classes' },
    { label: 'MAPA', href: 'map.html' },
    { label: 'FAQ', href: 'index.html#faq' },
  ];
  return (
    <nav data-screen-label="top-nav" style={{
      position: 'relative', zIndex: 20,
      padding: '20px 0',
    }}>
      <div className="container" style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24,
      }}>
        <span aria-hidden="true" style={{ width: 48 }}></span>

        <ul className="nav-center-links" style={{
          display: 'flex', gap: 36, listStyle: 'none', margin: 0, padding: 0,
          fontFamily: "'Luckiest Guy', cursive",
          fontSize: 16, letterSpacing: '0.16em',
        }}>
          {links.map((l, i) => (
            <li key={l.label}>
              <a href={l.href} style={{
                color: i === 0 ? '#f7c93b' : '#fff',
                textDecoration: 'none',
                textShadow: i === 0
                  ? '0 2px 0 rgba(0,0,0,0.6), 0 0 12px rgba(247,201,59,0.5)'
                  : '0 2px 0 rgba(0,0,0,0.6)',
                position: 'relative',
                display: 'inline-block',
                paddingBottom: 4,
                borderBottom: i === 0 ? '3px solid #f7c93b' : '3px solid transparent',
                transition: 'all 120ms',
              }}>
                {l.label}
              </a>
            </li>
          ))}
        </ul>

        <a href="pre-register.html" className="btn-3d btn-gold" style={{ textDecoration: 'none', padding: '12px 22px', fontSize: 14 }}>
          PRÉ-REGISTAR
          <span style={{ fontSize: 14, marginLeft: 8 }}>♛</span>
        </a>
      </div>
    </nav>
  );
};

// ---------- Hero Split ----------
const HeroSplit = ({ tw }) => (
  <section data-screen-label="hero" style={{
    position: 'relative', zIndex: 5,
    padding: '36px 0 24px',
  }}>
    <div className="container">
      <div className="hero-grid" style={{
        display: 'grid',
        gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1.15fr)',
        gap: 56,
        alignItems: 'center',
      }}>
        {/* LEFT — logo, headline, CTA */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 22 }}>
          {/* Big logo (wordmark) */}
          <div style={{ position: 'relative', width: 'min(480px, 100%)', marginLeft: -8 }}>
            <img src="assets/minilands-hero-logo.png" alt="Minilands" style={{
              display: 'block', width: '100%', height: 'auto',
              filter: 'drop-shadow(0 8px 0 rgba(0,0,0,0.5)) drop-shadow(0 0 30px rgba(247,201,59,0.45)) drop-shadow(0 0 50px rgba(157,78,221,0.4))',
            }} />
          </div>

          {/* Eyebrow with sparkles */}
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 14,
            fontFamily: "'Luckiest Guy', cursive",
            fontSize: 18, letterSpacing: '0.18em',
            color: '#f7c93b',
            textShadow: '0 2px 0 #000, 0 0 12px rgba(247,201,59,0.4)',
          }}>
            <span style={{ color: '#9d4edd' }}>✦</span>
            {tw.eyebrow}
            <span style={{ color: '#9d4edd' }}>✦</span>
          </div>

          {/* Headline — two lines */}
          <h1 style={{ margin: 0, lineHeight: 0.95 }}>
            <span style={{
              display: 'block',
              fontFamily: "'Luckiest Guy', cursive",
              fontSize: 'clamp(48px, 7vw, 84px)',
              color: '#fff',
              letterSpacing: '0.01em',
              textShadow:
                '-2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000,' +
                ' 0 4px 0 #5a4878, 0 6px 0 #1a0e04, 0 10px 16px rgba(0,0,0,0.6)',
              WebkitTextStroke: '1px #000',
            }}>{tw.headline}</span>
            <span className="bevel-text-gold" style={{
              display: 'block',
              fontSize: 'clamp(56px, 8.5vw, 104px)',
              fontStyle: 'italic',
              letterSpacing: '0.02em',
              marginTop: 4,
            }}>{tw.headlineAccent}</span>
          </h1>

          {/* Tagline */}
          <p style={{
            margin: 0,
            maxWidth: 480,
            fontFamily: "'Fredoka', sans-serif",
            fontWeight: 600,
            fontSize: 16,
            lineHeight: 1.5,
            letterSpacing: '0.08em',
            textTransform: 'uppercase',
            color: '#cdd5e0',
            textShadow: '0 2px 0 rgba(0,0,0,0.5)',
          }}>{tw.tagline}</p>

          {/* Big pre-register button */}
          <button onClick={() => tw.__openModal && tw.__openModal()} className="btn-3d btn-gold" style={{
            border: 0, cursor: 'pointer',
            alignSelf: 'flex-start',
            padding: '20px 36px',
            fontSize: 22,
            display: 'inline-flex',
            alignItems: 'center',
            gap: 14,
            marginTop: 4,
          }}>
            <PixelIcon kind="sword" size={28} />
            PRÉ-REGISTAR AGORA
          </button>

          {/* Note */}
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 12,
            fontFamily: "'Fredoka', sans-serif",
            fontSize: 13, letterSpacing: '0.12em',
            color: '#fff',
            textTransform: 'uppercase',
            textShadow: '0 2px 0 rgba(0,0,0,0.5)',
          }}>
            <PixelIcon kind="gift" size={28} />
            <span>Sê dos primeiros a jogar e<br />ganha <span style={{ color: '#f7c93b' }}>RECOMPENSAS EXCLUSIVAS!</span></span>
          </div>
        </div>

        {/* RIGHT — YouTube video frame */}
        <div className="hero-video" style={{
          position: 'relative',
          borderRadius: 16,
          padding: 4,
          background: 'linear-gradient(180deg, #f7c93b 0%, #c8941b 100%)',
          border: '4px solid #1a0e04',
          boxShadow:
            'inset 0 3px 0 rgba(255,255,255,0.2),' +
            ' 0 10px 0 #06091a,' +
            ' 0 22px 50px rgba(0,0,0,0.7),' +
            ' 0 0 80px rgba(247,201,59,0.3),' +
            ' 0 0 120px rgba(157,78,221,0.25)',
        }}>
          {/* Decorative corner notches */}
          <span aria-hidden="true" style={{ position: 'absolute', top: -4, left: -4, width: 16, height: 16, background: '#1a0e04', borderRadius: 2 }} />
          <span aria-hidden="true" style={{ position: 'absolute', top: -4, right: -4, width: 16, height: 16, background: '#1a0e04', borderRadius: 2 }} />
          <span aria-hidden="true" style={{ position: 'absolute', bottom: -4, left: -4, width: 16, height: 16, background: '#1a0e04', borderRadius: 2 }} />
          <span aria-hidden="true" style={{ position: 'absolute', bottom: -4, right: -4, width: 16, height: 16, background: '#1a0e04', borderRadius: 2 }} />

          <div style={{
            position: 'relative',
            aspectRatio: '16 / 9',
            borderRadius: 12,
            overflow: 'hidden',
            background: '#000',
            border: '2px solid #1a0e04',
          }}>
            <iframe
              src={`https://www.youtube-nocookie.com/embed/${tw.youtubeId}?rel=0&modestbranding=1`}
              title="Minilands — Teaser"
              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
              allowFullScreen
              referrerPolicy="strict-origin-when-cross-origin"
              style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', border: 0 }}
            />
          </div>
        </div>
      </div>
    </div>
  </section>
);

// ---------- Feature row ----------
const FeatureRow = () => {
  const items = [
    { icon: 'skull',   color: '#9d4edd', title: 'BOSSES ÉPICOS',   desc: 'Enfrenta inimigos lendários e coleta loot raro.' },
    { icon: 'portal',  color: '#c77dff', title: 'EXPLORA MUNDOS',  desc: 'Descobre biomes, dungeons e segredos escondidos.' },
    { icon: 'swords',  color: '#cdd5e0', title: 'JOGA EM EQUIPA',  desc: 'Junta-te a amigos e dominem o campo de batalha.' },
    { icon: 'chest',   color: '#f7c93b', title: 'GANHA RECOMPENSAS', desc: 'Pré-regista-te e leva recompensas exclusivas no lançamento.' },
  ];
  return (
    <section data-screen-label="features-row" style={{ position: 'relative', zIndex: 5, padding: '32px 0' }}>
      <div className="container">
        <div className="feature-row" style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(4, 1fr)',
          gap: 0,
          padding: '20px 14px',
          background: 'linear-gradient(180deg, rgba(13, 6, 31, 0.85) 0%, rgba(8, 3, 20, 0.85) 100%)',
          border: '3px solid #9d4edd',
          borderRadius: 14,
          boxShadow:
            'inset 0 2px 0 rgba(255,255,255,0.06),' +
            ' 0 8px 0 rgba(0,0,0,0.4),' +
            ' 0 0 40px rgba(157,78,221,0.25)',
        }}>
          {items.map((item, i) => (
            <div key={i} style={{
              display: 'flex', alignItems: 'flex-start', gap: 14,
              padding: '8px 14px',
              borderLeft: i === 0 ? 'none' : '1px solid rgba(157,78,221,0.3)',
            }}>
              <div style={{ flex: '0 0 auto' }}><PixelIcon kind={item.icon} size={56} /></div>
              <div>
                <div style={{
                  fontFamily: "'Luckiest Guy', cursive",
                  fontSize: 16, letterSpacing: '0.08em',
                  color: item.color,
                  textShadow: '0 2px 0 #000, 0 0 10px rgba(247,201,59,0.25)',
                  marginBottom: 4,
                }}>{item.title}</div>
                <div style={{
                  fontFamily: "'Fredoka', sans-serif",
                  fontSize: 12, lineHeight: 1.4,
                  color: '#cdd5e0',
                }}>{item.desc}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// ---------- Pre-register Modal ----------
const PreRegisterModal = ({ open, onClose }) => {
  const [email, setEmail] = React.useState('');
  const [agreed, setAgreed] = React.useState(true);
  const [sent, setSent] = React.useState(false);

  React.useEffect(() => {
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    if (open) window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [open, onClose]);

  if (!open) return null;

  const submit = (e) => {
    e.preventDefault();
    if (!email || !agreed) return;
    const subject = encodeURIComponent('Novo pré-registo Minilands');
    const body = encodeURIComponent(`Quero pré-registar-me em Minilands.\n\nEmail: ${email}\n`);
    window.location.href = `mailto:${SUPPORT_EMAIL}?subject=${subject}&body=${body}`;
    setSent(true);
  };

  return (
    <div onClick={onClose} style={{
      position: 'fixed', inset: 0, zIndex: 100,
      background: 'rgba(6, 2, 16, 0.85)',
      backdropFilter: 'blur(8px)',
      WebkitBackdropFilter: 'blur(8px)',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      padding: 20,
      animation: 'modal-fade 180ms ease-out',
    }}>
      <div onClick={(e) => e.stopPropagation()} style={{
        position: 'relative',
        width: 'min(520px, 100%)',
        padding: '32px 28px 26px',
        background: 'linear-gradient(180deg, rgba(20, 9, 46, 0.98) 0%, rgba(8, 3, 20, 0.98) 100%)',
        border: '4px solid #f7c93b',
        borderRadius: 16,
        boxShadow:
          'inset 0 3px 0 rgba(255,255,255,0.08),' +
          ' 0 12px 0 #06091a,' +
          ' 0 24px 60px rgba(0,0,0,0.7),' +
          ' 0 0 80px rgba(247,201,59,0.35),' +
          ' 0 0 140px rgba(157,78,221,0.3)',
        animation: 'modal-pop 240ms cubic-bezier(0.34, 1.56, 0.64, 1)',
      }}>
        {/* corner notches */}
        <span aria-hidden="true" style={{ position: 'absolute', top: -4, left: -4, width: 16, height: 16, background: '#1a0e04', borderRadius: 2 }}></span>
        <span aria-hidden="true" style={{ position: 'absolute', top: -4, right: -4, width: 16, height: 16, background: '#1a0e04', borderRadius: 2 }}></span>
        <span aria-hidden="true" style={{ position: 'absolute', bottom: -4, left: -4, width: 16, height: 16, background: '#1a0e04', borderRadius: 2 }}></span>
        <span aria-hidden="true" style={{ position: 'absolute', bottom: -4, right: -4, width: 16, height: 16, background: '#1a0e04', borderRadius: 2 }}></span>

        {/* close */}
        <button onClick={onClose} aria-label="Fechar" style={{
          position: 'absolute', top: 10, right: 10,
          width: 36, height: 36, borderRadius: 8,
          background: 'rgba(0,0,0,0.5)',
          border: '2px solid rgba(247,201,59,0.5)',
          color: '#fff', cursor: 'pointer',
          fontFamily: "'Luckiest Guy', cursive", fontSize: 18,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>✕</button>

        {!sent ? (
          <>
            <div style={{
              display: 'inline-flex', alignItems: 'center', gap: 12,
              fontFamily: "'Luckiest Guy', cursive",
              fontSize: 14, letterSpacing: '0.18em',
              color: '#9d4edd',
              textShadow: '0 2px 0 #000',
              marginBottom: 8,
            }}>
              <span style={{ color: '#f7c93b' }}>✦</span>
              PRÉ-REGISTO
              <span style={{ color: '#f7c93b' }}>✦</span>
            </div>

            <h2 className="bevel-text-gold" style={{
              margin: '4px 0 6px',
              fontSize: 38, lineHeight: 1,
              fontStyle: 'italic',
            }}>JUNTA-TE À LENDA.</h2>

            <p style={{
              margin: '0 0 22px',
              fontFamily: "'Fredoka', sans-serif", fontWeight: 600,
              fontSize: 13, letterSpacing: '0.1em',
              textTransform: 'uppercase',
              color: '#cdd5e0',
              textShadow: '0 2px 0 rgba(0,0,0,0.5)',
            }}>Sê dos primeiros a jogar e ganha <span style={{ color: '#f7c93b' }}>recompensas exclusivas</span>.</p>

            <form onSubmit={submit} style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              <input
                type="email"
                required
                placeholder="O teu endereço de email"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                autoFocus
                style={{
                  width: '100%',
                  padding: '14px 16px',
                  fontFamily: "'Fredoka', sans-serif",
                  fontSize: 15, fontWeight: 500,
                  color: '#fff',
                  background: 'rgba(0,0,0,0.5)',
                  border: '2px solid rgba(247,201,59,0.5)',
                  borderRadius: 8,
                  outline: 'none',
                  boxSizing: 'border-box',
                }}
              />

              <label style={{
                display: 'flex', alignItems: 'center', gap: 10,
                fontFamily: "'Fredoka', sans-serif",
                fontSize: 12, color: '#cdd5e0',
                cursor: 'pointer',
              }}>
                <input type="checkbox" checked={agreed} onChange={(e) => setAgreed(e.target.checked)} style={{ width: 14, height: 14 }} />
                <span>Aceito receber novidades e atualizações sobre Minilands.</span>
              </label>

              <button type="submit" className="btn-3d btn-gold" style={{
                marginTop: 4,
                padding: '16px 24px',
                fontSize: 18,
                border: 0, cursor: 'pointer',
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 12,
              }}>
                <PixelIcon kind="sword" size={24} />
                ENVIAR PRÉ-REGISTO
              </button>
            </form>
          </>
        ) : (
          <div style={{ textAlign: 'center', padding: '20px 8px' }}>
            <div style={{ display: 'inline-flex', marginBottom: 12 }}><PixelIcon kind="chest" size={88} /></div>
            <h2 className="bevel-text-gold" style={{ margin: '4px 0 8px', fontSize: 38, lineHeight: 1, fontStyle: 'italic' }}>OBRIGADO!</h2>
            <p style={{
              margin: '0 0 18px',
              fontFamily: "'Fredoka', sans-serif", fontWeight: 600,
              fontSize: 14, letterSpacing: '0.06em',
              color: '#cdd5e0',
            }}>Abrimos o teu cliente de email para enviares o pré-registo a <span style={{ color: '#f7c93b' }}>{SUPPORT_EMAIL}</span>. Carrega em ENVIAR para concluir.</p>
            <button onClick={onClose} className="btn-3d btn-gold" style={{ padding: '12px 28px', fontSize: 16, border: 0, cursor: 'pointer' }}>
              FECHAR
            </button>
          </div>
        )}
      </div>

      <style>{`
        @keyframes modal-fade { from { opacity: 0; } to { opacity: 1; } }
        @keyframes modal-pop { from { opacity: 0; transform: translateY(20px) scale(0.92); } to { opacity: 1; transform: translateY(0) scale(1); } }
      `}</style>
    </div>
  );
};

// ---------- Bottom row: stats + email + rewards ----------
const BottomRow = ({ tw }) => {
  const [email, setEmail] = React.useState('');
  const [agreed, setAgreed] = React.useState(true);
  const [submitted, setSubmitted] = React.useState(false);

  const onJoin = (e) => {
    e.preventDefault();
    if (!email || !agreed) return;
    const subject = encodeURIComponent('Novo pré-registo Minilands');
    const body = encodeURIComponent(`Quero pré-registar-me em Minilands.\n\nEmail: ${email}\n`);
    window.location.href = `mailto:${SUPPORT_EMAIL}?subject=${subject}&body=${body}`;
    setSubmitted(true);
  };

  const rewards = [
    { icon: 'gems',   title: '500',         sub: 'GEMAS' },
    { icon: 'chest',  title: 'BAÚ',         sub: 'EXCLUSIVO' },
    { icon: 'shirt',  title: 'SKIN',        sub: 'LENDÁRIA' },
  ];

  return (
    <section data-screen-label="bottom-cta" style={{ position: 'relative', zIndex: 5, padding: '20px 0 64px' }}>
      <div className="container">
        <div className="bottom-grid" style={{
          display: 'grid',
          gridTemplateColumns: 'minmax(0, 1.6fr) minmax(280px, 1fr)',
          gap: 18,
          alignItems: 'stretch',
        }}>
          {/* CENTER — email capture */}
          <div style={{
            padding: '20px 24px',
            background: 'linear-gradient(180deg, rgba(13, 6, 31, 0.9) 0%, rgba(8, 3, 20, 0.9) 100%)',
            border: '3px solid #f7c93b',
            borderRadius: 12,
            boxShadow:
              'inset 0 2px 0 rgba(255,255,255,0.06),' +
              ' 0 6px 0 rgba(0,0,0,0.4),' +
              ' 0 0 32px rgba(247,201,59,0.2)',
            display: 'flex', flexDirection: 'column', gap: 12,
          }}>
            <div style={{
              fontFamily: "'Luckiest Guy', cursive",
              fontSize: 18, letterSpacing: '0.08em',
              textAlign: 'center',
              color: '#fff',
              textShadow: '0 2px 0 #000',
            }}>
              PRÉ-REGISTA-TE E GANHA <span style={{ color: '#f7c93b' }}>RECOMPENSAS EXCLUSIVAS!</span>
            </div>

            <form onSubmit={onJoin} style={{ display: 'flex', gap: 10, alignItems: 'stretch', flexWrap: 'wrap' }}>
              <input
                type="email"
                placeholder="O teu endereço de email"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                disabled={submitted}
                style={{
                  flex: '1 1 220px',
                  padding: '12px 16px',
                  fontFamily: "'Fredoka', sans-serif",
                  fontSize: 15, fontWeight: 500,
                  color: '#fff',
                  background: 'rgba(0,0,0,0.4)',
                  border: '2px solid rgba(247,201,59,0.5)',
                  borderRadius: 8,
                  outline: 'none',
                }}
              />
              <button type="submit" className="btn-3d btn-gold" disabled={submitted} style={{
                padding: '12px 24px', fontSize: 16, border: 0, cursor: submitted ? 'default' : 'pointer',
                opacity: submitted ? 0.7 : 1,
                display: 'inline-flex', alignItems: 'center', gap: 8,
              }}>
                {submitted ? '✓ ENVIADO!' : 'ENTRAR'}
                {!submitted && <span style={{ fontSize: 14 }}>›</span>}
              </button>
            </form>

            <label style={{
              display: 'flex', alignItems: 'center', gap: 10,
              fontFamily: "'Fredoka', sans-serif",
              fontSize: 12, color: '#cdd5e0',
              cursor: 'pointer',
            }}>
              <input type="checkbox" checked={agreed} onChange={(e) => setAgreed(e.target.checked)} style={{ width: 14, height: 14 }} />
              <span>Aceito receber novidades e atualizações sobre Minilands.</span>
            </label>

            {/* Follow us */}
            <div style={{ display: 'flex', alignItems: 'center', gap: 14, justifyContent: 'center', marginTop: 4 }}>
              <span style={{
                fontFamily: "'Luckiest Guy', cursive",
                fontSize: 14, letterSpacing: '0.18em',
                color: '#9d4edd',
                textShadow: '0 2px 0 #000',
              }}>SEGUE-NOS</span>
              {[
                { href: tw.discordUrl,   label: 'Discord',   svg: <path d="M20.317 4.369A19.79 19.79 0 0 0 16.558 3a14.6 14.6 0 0 0-.643 1.32 18.27 18.27 0 0 0-5.487 0A12.5 12.5 0 0 0 9.785 3a19.74 19.74 0 0 0-3.76 1.369C2.475 9.74 1.515 14.97 1.995 20.13a19.94 19.94 0 0 0 6.075 3.075c.49-.66.927-1.36 1.305-2.1a13 13 0 0 1-2.055-.99c.172-.127.34-.26.504-.397a14.27 14.27 0 0 0 12.36 0c.165.137.333.27.504.397-.66.39-1.35.72-2.07.99.378.74.815 1.44 1.305 2.1a19.92 19.92 0 0 0 6.09-3.075c.6-6.045-.93-11.226-3.69-15.762zM8.52 17.085c-1.215 0-2.22-1.118-2.22-2.49 0-1.373.99-2.49 2.22-2.49 1.245 0 2.235 1.117 2.22 2.49 0 1.372-.99 2.49-2.22 2.49zm6.96 0c-1.215 0-2.22-1.118-2.22-2.49 0-1.373.99-2.49 2.22-2.49 1.245 0 2.235 1.117 2.22 2.49 0 1.372-.975 2.49-2.22 2.49z" /> },
                { href: tw.youtubeUrl,   label: 'YouTube',   svg: <path d="M23.5 6.2a3 3 0 0 0-2.1-2.1C19.5 3.5 12 3.5 12 3.5s-7.5 0-9.4.6A3 3 0 0 0 .5 6.2 31 31 0 0 0 0 12a31 31 0 0 0 .5 5.8 3 3 0 0 0 2.1 2.1c1.9.6 9.4.6 9.4.6s7.5 0 9.4-.6a3 3 0 0 0 2.1-2.1A31 31 0 0 0 24 12a31 31 0 0 0-.5-5.8zM9.6 15.6V8.4l6.3 3.6-6.3 3.6z" /> },
                { href: tw.instagramUrl, label: 'Instagram', svg: <g fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="3" width="18" height="18" rx="5" /><circle cx="12" cy="12" r="4" /><circle cx="17.5" cy="6.5" r="1.2" fill="currentColor" stroke="none" /></g> },
                { href: tw.redditUrl,    label: 'Reddit',    svg: <path d="M22 12.07c0-1.21-.99-2.2-2.2-2.2-.59 0-1.13.23-1.52.62a10.7 10.7 0 0 0-5.84-1.85l1-4.7 3.27.69a1.57 1.57 0 1 0 .16-.91l-3.65-.77a.46.46 0 0 0-.55.36l-1.11 5.23a10.7 10.7 0 0 0-5.92 1.85 2.2 2.2 0 1 0-2.42 3.6 4.4 4.4 0 0 0-.05.66c0 3.36 3.91 6.08 8.74 6.08s8.74-2.72 8.74-6.08c0-.22-.02-.44-.05-.66.69-.4 1.16-1.14 1.16-2.02zM7 13.7a1.55 1.55 0 1 1 3.1 0 1.55 1.55 0 0 1-3.1 0zm8.93 4.07c-1.07 1.07-3.12 1.16-3.93 1.16s-2.86-.09-3.93-1.16a.43.43 0 1 1 .61-.6c.68.68 2.13.92 3.32.92s2.64-.24 3.32-.92a.43.43 0 1 1 .61.6zM15.45 15.25a1.55 1.55 0 1 1 0-3.1 1.55 1.55 0 0 1 0 3.1z" /> },
              ].map((s) => (
                <a key={s.label} href={s.href} target="_blank" rel="noopener noreferrer"
                  aria-label={s.label}
                  style={{
                    color: '#cdd5e0', display: 'inline-flex', padding: 6,
                    borderRadius: 6, transition: 'all 120ms',
                  }}
                  onMouseEnter={(e) => { e.currentTarget.style.color = '#f7c93b'; e.currentTarget.style.transform = 'translateY(-2px)'; }}
                  onMouseLeave={(e) => { e.currentTarget.style.color = '#cdd5e0'; e.currentTarget.style.transform = 'translateY(0)'; }}
                >
                  <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                    {s.svg}
                  </svg>
                </a>
              ))}
            </div>
          </div>

          {/* RIGHT — rewards */}
          <div style={{
            padding: '14px 16px 16px',
            background: 'linear-gradient(180deg, rgba(13, 6, 31, 0.85) 0%, rgba(8, 3, 20, 0.85) 100%)',
            border: '3px solid #9d4edd',
            borderRadius: 12,
            boxShadow: 'inset 0 2px 0 rgba(255,255,255,0.06), 0 6px 0 rgba(0,0,0,0.4), 0 0 30px rgba(157,78,221,0.2)',
            display: 'flex', flexDirection: 'column', gap: 10,
          }}>
            <div style={{
              fontFamily: "'Luckiest Guy', cursive",
              fontSize: 13, letterSpacing: '0.18em',
              color: '#9d4edd',
              textShadow: '0 2px 0 #000',
              textAlign: 'center',
            }}>VAIS RECEBER</div>

            <div className="rewards-grid" style={{
              display: 'grid',
              gridTemplateColumns: 'repeat(3, 1fr)',
              gap: 8,
            }}>
              {rewards.map((r, i) => (
                <div key={i} style={{
                  display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4,
                  padding: '10px 4px',
                  background: 'rgba(0,0,0,0.4)',
                  border: '2px solid rgba(157,78,221,0.4)',
                  borderRadius: 8,
                  boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.05)',
                }}>
                  <PixelIcon kind={r.icon} size={48} />
                  <div style={{
                    fontFamily: "'Luckiest Guy', cursive",
                    fontSize: 14, letterSpacing: '0.06em',
                    color: '#f7c93b',
                    textShadow: '0 2px 0 #000',
                    marginTop: 2,
                  }}>{r.title}</div>
                  <div style={{
                    fontFamily: "'Fredoka', sans-serif", fontWeight: 700,
                    fontSize: 9, letterSpacing: '0.14em', textTransform: 'uppercase',
                    color: '#cdd5e0',
                  }}>{r.sub}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

// ---------- Main page ----------
const BrevementePage = () => {
  const t = window.useTweaks ? window.useTweaks(TWEAK_DEFAULTS) : [TWEAK_DEFAULTS, () => {}];
  const [tw, setTw] = t;
  const [modalOpen, setModalOpen] = React.useState(false);
  const twWithModal = { ...tw, __openModal: () => setModalOpen(true) };

  return (
    <div style={{
      minHeight: '100vh',
      position: 'relative',
      background:
        'radial-gradient(ellipse at 30% 20%, #2a1052 0%, #1a0840 30%, #0d0420 60%, #060210 100%)',
      overflow: 'hidden',
    }}>
      {/* Floating crystals */}
      {tw.showFloatingCrystals && <FloatingCrystals />}

      {/* Faint grid texture */}
      <div aria-hidden="true" style={{
        position: 'absolute', inset: 0, zIndex: 0, opacity: 0.18,
        backgroundImage: 'linear-gradient(rgba(157,78,221,0.15) 1px, transparent 1px), linear-gradient(90deg, rgba(157,78,221,0.15) 1px, transparent 1px)',
        backgroundSize: '60px 60px',
        maskImage: 'radial-gradient(ellipse at 50% 30%, black 30%, transparent 80%)',
        WebkitMaskImage: 'radial-gradient(ellipse at 50% 30%, black 30%, transparent 80%)',
      }} />

      <HeroSplit tw={twWithModal} />
      <FeatureRow />
      <BottomRow tw={tw} />

      <PreRegisterModal open={modalOpen} onClose={() => setModalOpen(false)} />

      {/* Footer micro-line */}
      <div style={{
        position: 'relative', zIndex: 5,
        textAlign: 'center', padding: '0 16px 32px',
        fontFamily: "'Fredoka', sans-serif", fontSize: 12, letterSpacing: '0.1em',
        color: 'rgba(255,255,255,0.4)',
      }}>
        <span>© 2026 Minilands Studios</span>
      </div>

      {/* Tweaks */}
      {window.TweaksPanel && (
        <window.TweaksPanel>
          <window.TweakSection title="Mensagem">
            <window.TweakText label="Eyebrow" value={tw.eyebrow} onChange={(v) => setTw('eyebrow', v)} />
            <window.TweakText label="Headline (linha 1)" value={tw.headline} onChange={(v) => setTw('headline', v)} />
            <window.TweakText label="Headline (linha 2)" value={tw.headlineAccent} onChange={(v) => setTw('headlineAccent', v)} />
            <window.TweakText label="Tagline" value={tw.tagline} onChange={(v) => setTw('tagline', v)} />
          </window.TweakSection>
          <window.TweakSection title="Conteúdo">
            <window.TweakText label="ID YouTube" value={tw.youtubeId} onChange={(v) => setTw('youtubeId', v)} />
          </window.TweakSection>
          <window.TweakSection title="Redes sociais">
            <window.TweakText label="Discord" value={tw.discordUrl} onChange={(v) => setTw('discordUrl', v)} />
            <window.TweakText label="YouTube" value={tw.youtubeUrl} onChange={(v) => setTw('youtubeUrl', v)} />
            <window.TweakText label="Instagram" value={tw.instagramUrl} onChange={(v) => setTw('instagramUrl', v)} />
            <window.TweakText label="Reddit" value={tw.redditUrl} onChange={(v) => setTw('redditUrl', v)} />
          </window.TweakSection>
          <window.TweakSection title="Decoração">
            <window.TweakToggle label="Cristais flutuantes" value={tw.showFloatingCrystals} onChange={(v) => setTw('showFloatingCrystals', v)} />
          </window.TweakSection>
        </window.TweaksPanel>
      )}
    </div>
  );
};

ReactDOM.createRoot(document.getElementById('root')).render(<BrevementePage />);
