// Pre-launch landing page for Minilands — converts web visitors to registered leads.
// Hero (key art + email/nickname/class form) → Trailer → Founder rewards → Final CTA + socials.

const CLASSES = [
  { id: 'warrior', name: 'GUERREIRO', color: '#e55a3a', icon: '⚔️', desc: 'Tank corpo-a-corpo' },
  { id: 'mage', name: 'MAGO', color: '#a566ff', icon: '🔮', desc: 'Magia devastadora' },
  { id: 'archer', name: 'ARQUEIRO', color: '#6abe30', icon: '🏹', desc: 'Precisão letal' },
  { id: 'healer', name: 'CURANDEIRO', color: '#5dabe8', icon: '✨', desc: 'Suporte e cura' },
];

// Wordmark SVG defined in wordmark.jsx (window.Wordmark) — alias here for convenience.
const Wordmark = window.Wordmark;

const Nav = () => {
  return (
    <nav style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 100,
      background: 'rgba(7, 16, 42, 0.78)',
      backdropFilter: 'blur(16px)',
      borderBottom: '2px solid rgba(247, 201, 59, 0.35)',
      boxShadow: '0 4px 20px rgba(0,0,0,0.5)',
    }}>
      <div className="container" style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        height: 72, gap: 20,
      }}>
        <a href="index.html" style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <BlockLogo size={44} />
          <Wordmark height={26} />
        </a>
        <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
          <a href="index.html" className="nav-back" style={{
            color: '#fff', fontFamily: 'Fredoka, sans-serif', fontWeight: 600,
            fontSize: 13, textTransform: 'uppercase', letterSpacing: '0.08em',
            textShadow: '0 2px 0 rgba(0,0,0,0.5)',
          }}>← Site Principal</a>
          <a href="#register" className="btn-3d btn-gold" style={{ padding: '9px 18px', fontSize: 13, textDecoration: 'none' }}>
            RESERVAR VAGA
          </a>
        </div>
      </div>
    </nav>
  );
};

// BlockLogo defined in block-logo.jsx (window.BlockLogo)
const BlockLogo = window.BlockLogo;

// =================== HERO + REGISTER FORM ===================
const Hero = () => {
  const [form, setForm] = React.useState({ email: '', nickname: '', classId: 'warrior' });
  const [submitted, setSubmitted] = React.useState(false);
  const [touched, setTouched] = React.useState(false);

  const emailValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email);
  const nickValid = form.nickname.length >= 3 && form.nickname.length <= 16 && /^[a-zA-Z0-9_]+$/.test(form.nickname);
  const canSubmit = emailValid && nickValid;

  const handleSubmit = (e) => {
    e.preventDefault();
    setTouched(true);
    if (canSubmit) setSubmitted(true);
  };

  const selectedClass = CLASSES.find(c => c.id === form.classId);

  return (
    <section style={{
      position: 'relative', paddingTop: 72, minHeight: '100vh',
      overflow: 'hidden',
    }}>
      {/* Background key art — full bleed, blurred + tinted */}
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: 'url(assets/hero-key-art.png)',
        backgroundSize: 'cover', backgroundPosition: 'center',
        filter: 'blur(2px) saturate(1.1)',
        opacity: 0.55,
      }} />
      <div style={{
        position: 'absolute', inset: 0,
        background: 'linear-gradient(180deg, rgba(7,16,42,0.4) 0%, rgba(7,16,42,0.7) 60%, rgba(7,16,42,0.95) 100%)',
      }} />

      {/* Coming soon ribbon at top */}
      <div style={{
        position: 'absolute', top: 92, left: '50%', transform: 'translateX(-50%)',
        zIndex: 3,
        display: 'inline-flex', alignItems: 'center', gap: 10,
        padding: '8px 22px',
        background: 'linear-gradient(180deg, #f7c93b 0%, #d99e1d 100%)',
        border: '3px solid #000', borderRadius: 100,
        fontFamily: 'Fredoka, sans-serif', fontWeight: 700,
        fontSize: 13, textTransform: 'uppercase', letterSpacing: '0.18em',
        color: '#3a1f00',
        boxShadow: '0 4px 0 #000, 0 8px 20px rgba(0,0,0,0.5)',
      }}>
        <span style={{ width: 8, height: 8, borderRadius: '50%', background: '#e55a3a', boxShadow: '0 0 8px #e55a3a' }} className="blink" />
        EM BREVE • PRÉ-REGISTRO ABERTO
      </div>

      <div className="container" style={{
        position: 'relative', zIndex: 5,
        display: 'grid',
        gridTemplateColumns: '1fr 1fr',
        gap: 56, alignItems: 'center',
        paddingTop: 140, paddingBottom: 80,
      }} data-pl-hero>
        {/* LEFT — copy */}
        <div>
          <h1 className="display" style={{
            fontFamily: 'Luckiest Guy, cursive',
            fontSize: 'clamp(48px, 6vw, 84px)',
            lineHeight: 0.9,
            margin: 0, marginBottom: 18,
            color: '#fff',
            textShadow: '0 4px 0 #000, 0 6px 0 #1c4a08, 0 10px 18px rgba(0,0,0,0.7), 0 0 30px rgba(247, 201, 59, 0.3)',
            letterSpacing: '0.01em',
          }}>
            CONSTRUA<br />
            <span style={{ color: '#f7c93b' }}>SUA LENDA</span><br />
            ANTES DE TODOS!
          </h1>
          <p style={{
            fontFamily: 'Fredoka, sans-serif', fontSize: 19, lineHeight: 1.5,
            color: '#dde8ff', margin: 0, marginBottom: 28,
            textShadow: '0 2px 4px rgba(0,0,0,0.6)',
            maxWidth: 520,
          }}>
            Reserve agora seu <strong style={{ color: '#f7c93b' }}>nickname exclusivo</strong>, ganhe <strong style={{ color: '#7cd23e' }}>acesso antecipado ao beta</strong> e desbloqueie itens de Fundador que ninguém mais terá!
          </p>

          {/* Perks chips */}
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10, marginBottom: 28 }}>
            {[
              { icon: '🎮', label: 'BETA EXCLUSIVO', color: '#7cd23e' },
              { icon: '👑', label: 'TÍTULO FUNDADOR', color: '#f7c93b' },
              { icon: '🏷️', label: 'NICKNAME GARANTIDO', color: '#5dabe8' },
              { icon: '🐉', label: 'PET ÚNICO', color: '#c266ff' },
            ].map(p => (
              <div key={p.label} style={{
                display: 'inline-flex', alignItems: 'center', gap: 7,
                padding: '7px 13px',
                background: 'rgba(0,0,0,0.55)',
                border: `2px solid ${p.color}`, borderRadius: 100,
                fontFamily: 'Fredoka, sans-serif', fontWeight: 700, fontSize: 11,
                textTransform: 'uppercase', letterSpacing: '0.08em', color: '#fff',
              }}>
                <span style={{ fontSize: 14 }}>{p.icon}</span>
                {p.label}
              </div>
            ))}
          </div>
        </div>

        {/* RIGHT — register form card */}
        <div id="register" style={{
          background: 'linear-gradient(180deg, #142861 0%, #0c1a44 100%)',
          border: '4px solid #000', borderRadius: 14,
          boxShadow: '0 6px 0 #000, 0 12px 30px rgba(0,0,0,0.6), inset 0 2px 0 rgba(255,255,255,0.12)',
          padding: 32,
          position: 'relative',
        }}>
          {/* Top tab */}
          <div style={{
            position: 'absolute', top: -22, left: 24,
            padding: '6px 16px',
            background: 'linear-gradient(180deg, #7cd23e 0%, #4ea417 100%)',
            border: '3px solid #000', borderRadius: 8,
            fontFamily: 'Luckiest Guy, cursive', fontSize: 16, color: '#fff',
            textShadow: '0 2px 0 #1c4a08',
            letterSpacing: '0.05em',
            boxShadow: '0 3px 0 #000',
          }}>
            🎉 GRÁTIS
          </div>

          {!submitted ? (
            <>
              <h2 style={{
                fontFamily: 'Luckiest Guy, cursive', fontSize: 30,
                margin: 0, marginBottom: 6, color: '#fff',
                textShadow: '0 2px 0 #000',
                letterSpacing: '0.02em',
              }}>RESERVE SEU LUGAR</h2>
              <p style={{ fontFamily: 'Fredoka, sans-serif', fontSize: 14, color: '#a8b8d4', margin: 0, marginBottom: 22 }}>
                Leva menos de 30 segundos. Sem compromisso.
              </p>

              <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
                <Field label="EMAIL" hint={touched && !emailValid ? 'Email inválido' : null}>
                  <input
                    type="email"
                    placeholder="seu@email.com"
                    value={form.email}
                    onChange={e => setForm({ ...form, email: e.target.value })}
                    style={inputStyle(touched && !emailValid)}
                  />
                </Field>

                <Field label="NICKNAME" hint={
                  touched && !nickValid ? '3-16 caracteres, letras/números/_' :
                  form.nickname && nickValid ? '✓ disponível!' : null
                } hintColor={form.nickname && nickValid ? '#7cd23e' : '#e55a3a'}>
                  <input
                    type="text"
                    placeholder="LendaDoReino"
                    maxLength={16}
                    value={form.nickname}
                    onChange={e => setForm({ ...form, nickname: e.target.value })}
                    style={inputStyle(touched && !nickValid)}
                  />
                </Field>

                <div>
                  <label style={labelStyle}>ESCOLHA SUA CLASSE</label>
                  <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 8 }} data-pl-classes>
                    {CLASSES.map(c => {
                      const active = form.classId === c.id;
                      return (
                        <button
                          type="button"
                          key={c.id}
                          onClick={() => setForm({ ...form, classId: c.id })}
                          style={{
                            display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4,
                            padding: '12px 6px',
                            background: active
                              ? `linear-gradient(180deg, ${c.color} 0%, ${shade(c.color, -25)} 100%)`
                              : 'rgba(0,0,0,0.4)',
                            border: active ? '3px solid #f7c93b' : '3px solid rgba(255,255,255,0.1)',
                            borderRadius: 10,
                            cursor: 'pointer',
                            transition: 'all 150ms',
                            transform: active ? 'translateY(-2px)' : 'none',
                            boxShadow: active ? `0 4px 0 ${shade(c.color, -45)}, 0 0 16px ${c.color}88` : '0 2px 0 rgba(0,0,0,0.4)',
                          }}
                        >
                          <span style={{ fontSize: 22 }}>{c.icon}</span>
                          <span style={{
                            fontFamily: 'Fredoka, sans-serif', fontWeight: 700,
                            fontSize: 10, letterSpacing: '0.06em',
                            color: active ? '#fff' : '#a8b8d4',
                            textShadow: active ? '0 1px 0 rgba(0,0,0,0.4)' : 'none',
                          }}>{c.name}</span>
                        </button>
                      );
                    })}
                  </div>
                  <p style={{ margin: '8px 0 0', fontFamily: 'Fredoka, sans-serif', fontSize: 12, color: '#a8b8d4' }}>
                    {selectedClass.icon} <strong style={{ color: selectedClass.color }}>{selectedClass.name}</strong> — {selectedClass.desc}
                  </p>
                </div>

                <button
                  type="submit"
                  className="btn-3d btn-gold"
                  style={{ marginTop: 6, padding: '16px 24px', fontSize: 18, width: '100%' }}
                >
                  GARANTIR MINHA VAGA →
                </button>

                <p style={{
                  margin: 0, fontFamily: 'Fredoka, sans-serif',
                  fontSize: 11, color: '#7a8aa8', textAlign: 'center',
                }}>
                  Ao se cadastrar, você concorda em receber novidades. Cancele quando quiser.
                </p>
              </form>
            </>
          ) : (
            <SuccessState form={form} selectedClass={selectedClass} />
          )}
        </div>
      </div>
    </section>
  );
};

// Helper components
const Field = ({ label, hint, hintColor = '#e55a3a', children }) => (
  <div>
    <label style={labelStyle}>{label}</label>
    {children}
    {hint && (
      <p style={{ margin: '6px 0 0', fontFamily: 'Fredoka, sans-serif', fontSize: 12, color: hintColor, fontWeight: 600 }}>
        {hint}
      </p>
    )}
  </div>
);

const labelStyle = {
  display: 'block', marginBottom: 6,
  fontFamily: 'Fredoka, sans-serif', fontWeight: 700, fontSize: 11,
  letterSpacing: '0.12em', textTransform: 'uppercase', color: '#a8b8d4',
};

const inputStyle = (error) => ({
  width: '100%', boxSizing: 'border-box',
  padding: '13px 14px',
  background: 'rgba(0,0,0,0.4)',
  border: error ? '2px solid #e55a3a' : '2px solid rgba(255,255,255,0.15)',
  borderRadius: 8,
  fontFamily: 'Fredoka, sans-serif', fontSize: 15, fontWeight: 500,
  color: '#fff',
  outline: 'none',
  transition: 'border-color 150ms',
});

// Tiny shade helper for class buttons
function shade(hex, amount) {
  const num = parseInt(hex.replace('#', ''), 16);
  const r = Math.max(0, Math.min(255, ((num >> 16) & 0xff) + amount));
  const g = Math.max(0, Math.min(255, ((num >> 8) & 0xff) + amount));
  const b = Math.max(0, Math.min(255, (num & 0xff) + amount));
  return '#' + ((r << 16) | (g << 8) | b).toString(16).padStart(6, '0');
}

const SuccessState = ({ form, selectedClass }) => (
  <div style={{ textAlign: 'center', padding: '20px 0' }}>
    <div style={{
      width: 72, height: 72, borderRadius: '50%',
      background: 'linear-gradient(180deg, #7cd23e 0%, #4ea417 100%)',
      border: '4px solid #000',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      fontSize: 38, margin: '0 auto 18px',
      boxShadow: '0 4px 0 #000, 0 0 20px #7cd23e88',
    }}>✓</div>
    <h2 style={{
      fontFamily: 'Luckiest Guy, cursive', fontSize: 30,
      margin: 0, marginBottom: 8, color: '#fff',
      textShadow: '0 2px 0 #000',
    }}>VOCÊ ESTÁ DENTRO!</h2>
    <p style={{
      fontFamily: 'Fredoka, sans-serif', fontSize: 15, color: '#dde8ff',
      margin: 0, marginBottom: 18, lineHeight: 1.5,
    }}>
      Bem-vindo, <strong style={{ color: '#f7c93b' }}>{form.nickname}</strong> o {selectedClass.icon}!<br />
      Enviamos a confirmação para <strong>{form.email}</strong>.
    </p>
    <div style={{
      padding: 16, background: 'rgba(0,0,0,0.3)',
      border: '2px dashed rgba(247, 201, 59, 0.4)', borderRadius: 10,
      marginBottom: 18,
    }}>
      <p style={{ margin: 0, fontFamily: 'Fredoka, sans-serif', fontSize: 12, color: '#a8b8d4', textTransform: 'uppercase', letterSpacing: '0.1em' }}>SEU CÓDIGO DE FUNDADOR</p>
      <p style={{ margin: '4px 0 0', fontFamily: 'JetBrains Mono, monospace', fontSize: 18, fontWeight: 700, color: '#f7c93b', letterSpacing: '0.15em' }}>
        ML-{form.nickname.toUpperCase().padEnd(8, 'X').slice(0, 8)}-{Math.floor(Math.random() * 9000 + 1000)}
      </p>
    </div>
    <p style={{ fontFamily: 'Fredoka, sans-serif', fontSize: 13, color: '#a8b8d4', margin: 0 }}>
      Compartilhe e ganhe <strong style={{ color: '#7cd23e' }}>+1 dia</strong> de beta para cada amigo inscrito!
    </p>
  </div>
);

// =================== TRAILER ===================
const Trailer = () => (
  <section className="section" style={{ padding: '80px 0', background: 'linear-gradient(180deg, #07102a 0%, #0a1635 100%)' }}>
    <div className="container">
      <div style={{ textAlign: 'center', marginBottom: 36 }}>
        <span style={{
          display: 'inline-block', padding: '5px 14px',
          background: 'rgba(247, 201, 59, 0.15)', border: '2px solid #f7c93b',
          borderRadius: 100, fontFamily: 'Fredoka, sans-serif', fontWeight: 700,
          fontSize: 11, letterSpacing: '0.15em', color: '#f7c93b',
          marginBottom: 14,
        }}>🎬 TRAILER OFICIAL</span>
        <h2 className="display" style={{
          fontFamily: 'Luckiest Guy, cursive', fontSize: 'clamp(40px, 5vw, 64px)',
          margin: 0, color: '#fff',
          textShadow: '0 4px 0 #000, 0 6px 0 #1a3a78, 0 10px 18px rgba(0,0,0,0.7)',
          letterSpacing: '0.02em',
        }}>VEJA O QUE VEM POR AÍ</h2>
      </div>

      <div style={{
        position: 'relative',
        aspectRatio: '16 / 9',
        maxWidth: 980, margin: '0 auto',
        background: '#000',
        border: '4px solid #000', borderRadius: 14,
        boxShadow: '0 8px 0 #000, 0 16px 40px rgba(0,0,0,0.7), inset 0 2px 0 rgba(255,255,255,0.1)',
        overflow: 'hidden',
      }}>
        {/* Backdrop using key art */}
        <div style={{
          position: 'absolute', inset: 0,
          backgroundImage: 'url(assets/hero-key-art.png)',
          backgroundSize: 'cover', backgroundPosition: 'center',
          filter: 'brightness(0.55) saturate(1.1)',
        }} />
        <div style={{
          position: 'absolute', inset: 0,
          background: 'radial-gradient(ellipse at center, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.7) 100%)',
        }} />
        {/* Play button */}
        <button
          onClick={() => alert('Trailer em produção — em breve!')}
          style={{
            position: 'absolute', top: '50%', left: '50%',
            transform: 'translate(-50%, -50%)',
            width: 110, height: 110, borderRadius: '50%',
            background: 'linear-gradient(180deg, #f7c93b 0%, #d99e1d 100%)',
            border: '5px solid #000',
            cursor: 'pointer',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            boxShadow: '0 6px 0 #000, 0 0 40px rgba(247, 201, 59, 0.6)',
            transition: 'transform 150ms',
          }}
          onMouseEnter={e => e.currentTarget.style.transform = 'translate(-50%, -50%) scale(1.08)'}
          onMouseLeave={e => e.currentTarget.style.transform = 'translate(-50%, -50%) scale(1)'}
          aria-label="Reproduzir trailer"
        >
          <div style={{
            width: 0, height: 0,
            borderTop: '22px solid transparent',
            borderBottom: '22px solid transparent',
            borderLeft: '34px solid #2a1500',
            marginLeft: 8,
          }} />
        </button>
        {/* Bottom label */}
        <div style={{
          position: 'absolute', bottom: 18, left: 22,
          padding: '8px 14px',
          background: 'rgba(0,0,0,0.7)', borderRadius: 6,
          fontFamily: 'Fredoka, sans-serif', fontWeight: 600, fontSize: 13,
          color: '#fff', letterSpacing: '0.05em',
        }}>
          MINILANDS — Reveal Trailer • 2:14
        </div>
      </div>
    </div>
  </section>
);

// =================== FOUNDER REWARDS ===================
const Rewards = () => {
  const rewards = [
    {
      icon: '🎮',
      title: 'ACESSO ANTECIPADO',
      desc: 'Entre no beta fechado semanas antes do público geral. Sua opinião molda o jogo final.',
      color: '#7cd23e',
    },
    {
      icon: '👑',
      title: 'TÍTULO DE FUNDADOR',
      desc: 'Distintivo dourado permanente no perfil. Todos vão saber que você esteve aqui no começo.',
      color: '#f7c93b',
    },
    {
      icon: '🏷️',
      title: 'NICKNAME RESERVADO',
      desc: 'Seu nome único é reservado e protegido. Nenhum outro jogador pode pegar.',
      color: '#5dabe8',
    },
    {
      icon: '🐲',
      title: 'PET LENDÁRIO',
      desc: 'Companheiro voador exclusivo de Fundador. Nunca será vendido na loja, garantido.',
      color: '#c266ff',
    },
  ];

  return (
    <section className="section" style={{
      padding: '90px 0',
      background: 'linear-gradient(180deg, #0a1635 0%, #0d1d44 100%)',
      position: 'relative',
    }}>
      <div className="container">
        <div style={{ textAlign: 'center', marginBottom: 50 }}>
          <span style={{
            display: 'inline-block', padding: '5px 14px',
            background: 'rgba(124, 210, 62, 0.15)', border: '2px solid #7cd23e',
            borderRadius: 100, fontFamily: 'Fredoka, sans-serif', fontWeight: 700,
            fontSize: 11, letterSpacing: '0.15em', color: '#7cd23e',
            marginBottom: 14,
          }}>🎁 RECOMPENSAS DE FUNDADOR</span>
          <h2 className="display" style={{
            fontFamily: 'Luckiest Guy, cursive', fontSize: 'clamp(40px, 5vw, 64px)',
            margin: 0, marginBottom: 10, color: '#fff',
            textShadow: '0 4px 0 #000, 0 6px 0 #1c4a08, 0 10px 18px rgba(0,0,0,0.7)',
            letterSpacing: '0.02em',
          }}>SÓ PRA QUEM CHEGOU PRIMEIRO</h2>
          <p style={{
            fontFamily: 'Fredoka, sans-serif', fontSize: 17, color: '#a8b8d4',
            margin: 0, maxWidth: 620, marginInline: 'auto',
          }}>
            Tudo isso GRÁTIS. Não vai voltar nunca mais. Quem entrou, entrou.
          </p>
        </div>

        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(4, 1fr)',
          gap: 18,
        }} data-pl-rewards>
          {rewards.map((r, i) => (
            <div key={r.title} style={{
              background: 'linear-gradient(180deg, #142861 0%, #0c1a44 100%)',
              border: '4px solid #000', borderRadius: 14,
              padding: 26, paddingTop: 30,
              position: 'relative',
              boxShadow: '0 6px 0 #000, 0 10px 24px rgba(0,0,0,0.5), inset 0 2px 0 rgba(255,255,255,0.1)',
              transition: 'transform 200ms',
            }}
              onMouseEnter={e => e.currentTarget.style.transform = 'translateY(-4px)'}
              onMouseLeave={e => e.currentTarget.style.transform = 'translateY(0)'}
            >
              {/* Number badge */}
              <div style={{
                position: 'absolute', top: -16, left: 20,
                width: 36, height: 36, borderRadius: 8,
                background: `linear-gradient(180deg, ${r.color} 0%, ${shade(r.color, -30)} 100%)`,
                border: '3px solid #000',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontFamily: 'Luckiest Guy, cursive', fontSize: 18, color: '#fff',
                textShadow: '0 1px 0 rgba(0,0,0,0.5)',
                boxShadow: '0 3px 0 #000',
              }}>{i + 1}</div>

              <div style={{
                width: 64, height: 64, borderRadius: 12,
                background: `linear-gradient(180deg, ${r.color}33 0%, ${r.color}11 100%)`,
                border: `2px solid ${r.color}77`,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontSize: 34, marginBottom: 14,
              }}>{r.icon}</div>

              <h3 style={{
                fontFamily: 'Luckiest Guy, cursive', fontSize: 19,
                margin: 0, marginBottom: 8, color: '#fff',
                textShadow: '0 2px 0 #000',
                letterSpacing: '0.02em',
              }}>{r.title}</h3>
              <p style={{
                margin: 0, fontFamily: 'Fredoka, sans-serif', fontSize: 13.5, lineHeight: 1.5,
                color: '#c8d4ec',
              }}>{r.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// =================== FINAL CTA + SOCIALS ===================
const FinalCTA = () => (
  <section style={{
    position: 'relative',
    padding: '110px 0',
    overflow: 'hidden',
    background: 'linear-gradient(180deg, #0d1d44 0%, #1a3a78 50%, #0d1d44 100%)',
  }}>
    {/* Floating gems decoration */}
    <div style={{
      position: 'absolute', inset: 0,
      backgroundImage: `
        radial-gradient(circle at 10% 20%, rgba(247, 201, 59, 0.15) 0%, transparent 25%),
        radial-gradient(circle at 90% 80%, rgba(124, 210, 62, 0.12) 0%, transparent 25%),
        radial-gradient(circle at 60% 30%, rgba(194, 102, 255, 0.1) 0%, transparent 20%)
      `,
    }} />

    <div className="container" style={{ position: 'relative', textAlign: 'center' }}>
      <BlockLogo size={88} />
      <h2 className="display" style={{
        fontFamily: 'Luckiest Guy, cursive',
        fontSize: 'clamp(46px, 6vw, 88px)',
        margin: '20px 0 14px', color: '#fff', lineHeight: 0.95,
        textShadow: '0 5px 0 #000, 0 7px 0 #1c4a08, 0 12px 24px rgba(0,0,0,0.7), 0 0 40px rgba(247, 201, 59, 0.35)',
        letterSpacing: '0.02em',
      }}>
        NÃO FIQUE<br />DE FORA!
      </h2>
      <p style={{
        fontFamily: 'Fredoka, sans-serif', fontSize: 19, color: '#dde8ff',
        margin: '0 auto 36px', maxWidth: 600, lineHeight: 1.5,
        textShadow: '0 2px 4px rgba(0,0,0,0.6)',
      }}>
        Cada dia que passa, mais gente reserva os melhores nicknames. Garante o seu agora — leva menos de 30 segundos.
      </p>

      <a href="#register" className="btn-3d btn-gold" style={{
        display: 'inline-block', padding: '20px 44px', fontSize: 22,
        textDecoration: 'none', marginBottom: 40,
      }}>
        🎮 RESERVAR MINHA VAGA
      </a>

      {/* Socials */}
      <div style={{ marginTop: 16 }}>
        <p style={{
          fontFamily: 'Fredoka, sans-serif', fontSize: 12, fontWeight: 700,
          letterSpacing: '0.15em', textTransform: 'uppercase', color: '#a8b8d4',
          margin: 0, marginBottom: 14,
        }}>SIGA E FIQUE POR DENTRO</p>
        <div style={{ display: 'flex', justifyContent: 'center', gap: 12, flexWrap: 'wrap' }}>
          {[
            { name: 'Discord', icon: '💬', color: '#5865F2', handle: '/minilands' },
            { name: 'YouTube', icon: '▶', color: '#ff0033', handle: '@minilands' },
            { name: 'TikTok', icon: '♪', color: '#fe2c55', handle: '@minilands' },
            { name: 'Instagram', icon: '◉', color: '#e4405f', handle: '@minilands' },
            { name: 'X / Twitter', icon: '𝕏', color: '#1d9bf0', handle: '@minilands' },
          ].map(s => (
            <a key={s.name} href="#" style={{
              display: 'inline-flex', alignItems: 'center', gap: 8,
              padding: '10px 16px',
              background: 'rgba(0,0,0,0.55)',
              border: `2px solid ${s.color}`, borderRadius: 100,
              fontFamily: 'Fredoka, sans-serif', fontWeight: 700, fontSize: 13,
              color: '#fff', textDecoration: 'none',
              transition: 'transform 150ms',
            }}
              onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.background = s.color + '33'; }}
              onMouseLeave={e => { e.currentTarget.style.transform = 'none'; e.currentTarget.style.background = 'rgba(0,0,0,0.55)'; }}
            >
              <span style={{
                width: 24, height: 24, borderRadius: 6,
                background: s.color,
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                fontSize: 13, fontWeight: 800,
              }}>{s.icon}</span>
              {s.handle}
            </a>
          ))}
        </div>
      </div>
    </div>
  </section>
);

// =================== FOOTER ===================
const Footer = () => (
  <footer style={{
    background: '#040818', borderTop: '3px solid #f7c93b',
    padding: '32px 0',
  }}>
    <div className="container" style={{
      display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 16,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
        <BlockLogo size={36} />
        <Wordmark height={22} />
      </div>
      <p style={{
        margin: 0, fontFamily: 'Fredoka, sans-serif', fontSize: 12, color: '#7a8aa8',
      }}>
        © 2025 Minilands Studios • Todos os direitos reservados
      </p>
    </div>
  </footer>
);

// =================== MAIN ===================
const PreRegisterApp = () => (
  <>
    <Nav />
    <Hero />
    <Trailer />
    <Rewards />
    <FinalCTA />
    <Footer />
  </>
);

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