// Reveal screen — animated discount unveil
function Reveal({ answers, onContinue }) {
  const [phase, setPhase] = React.useState(0); // 0: spinning, 1: revealed
  const [display, setDisplay] = React.useState(0);

  // Compute discount from answers: base 15% + per question 5% bonus, capped
  const score = React.useMemo(() => {
    let d = 15;
    answers.forEach((a) => { if (a.correct !== false) d += 5; });
    return Math.min(d, 35);
  }, [answers]);

  // Pick recommended kit from persona answer
  const recommended = React.useMemo(() => {
    const persona = answers.find((a) => a.kit);
    return persona?.kit || 'Campeão';
  }, [answers]);

  React.useEffect(() => {
    window.Sound?.playReveal();
    let raf;
    const start = Date.now();
    const tick = () => {
      const t = (Date.now() - start) / 1000;
      if (t < 2.2) {
        setDisplay(Math.floor(Math.random() * 35));
        raf = requestAnimationFrame(tick);
      } else {
        setDisplay(score);
        setPhase(1);
        window.Sound?.playGoal();
      }
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [score]);

  return (
    <div style={{
      background: `radial-gradient(circle at 50% 30%, ${C.green} 0%, ${C.greenDeep} 60%, ${C.greenInk} 100%)`,
      minHeight: '100vh', color: C.cream,
      display: 'flex', flexDirection: 'column', alignItems: 'center',
      padding: '40px 18px 30px', position: 'relative', overflow: 'hidden',
    }}>
      {/* confetti dots */}
      {phase === 1 && [...Array(40)].map((_, i) => (
        <div key={i} style={{
          position: 'absolute', width: 8, height: 12,
          background: [C.gold, C.red, C.cream][i % 3],
          left: `${(i * 37) % 100}%`, top: `-10px`,
          animation: `fall ${2 + (i % 4)}s linear ${i * 0.05}s infinite`,
          transform: `rotate(${i * 30}deg)`,
        }} />
      ))}

      <Logo size={18} light />

      <div style={{
        marginTop: 30,
        fontFamily: '"Bebas Neue", sans-serif',
        fontSize: 14, color: C.gold, letterSpacing: '0.18em',
      }}>O TEU PRÉMIO</div>

      <div style={{
        marginTop: 8, fontFamily: '"Bebas Neue", "Arial Black", sans-serif',
        fontSize: 30, textAlign: 'center', lineHeight: 1.0,
      }}>DESBLOQUEASTE</div>

      {/* Big number */}
      <div style={{
        marginTop: 18, padding: 10, position: 'relative',
      }}>
        <div style={{
          background: phase === 1 ? `linear-gradient(180deg, ${C.gold}, ${C.goldDeep})` : 'rgba(255,255,255,0.1)',
          borderRadius: 28, padding: '24px 40px',
          fontFamily: '"Bebas Neue", "Arial Black", sans-serif',
          fontSize: 120, color: phase === 1 ? C.greenInk : C.cream, lineHeight: 1,
          letterSpacing: '-0.02em', position: 'relative',
          boxShadow: phase === 1 ? '0 12px 40px rgba(255,200,60,0.5)' : 'none',
          transition: 'all 0.4s',
          transform: phase === 1 ? 'scale(1.05)' : 'scale(1)',
          border: '4px solid ' + (phase === 1 ? C.gold : 'rgba(255,255,255,0.15)'),
        }}>
          {display}<span style={{ fontSize: 60, verticalAlign: 'super' }}>%</span>
        </div>
        <div style={{
          position: 'absolute', bottom: -8, right: -8,
          background: C.red, color: '#fff', padding: '6px 12px',
          borderRadius: 999, fontFamily: '"Bebas Neue", sans-serif',
          fontSize: 16, transform: 'rotate(8deg)',
          boxShadow: '0 4px 12px rgba(0,0,0,0.3)',
        }}>OFF</div>
      </div>

      <div style={{
        marginTop: 16, fontFamily: '"Bebas Neue", sans-serif',
        fontSize: 24, textAlign: 'center', lineHeight: 1.0,
      }}>EM TODOS OS KITS</div>

      {phase === 1 && (
        <div style={{
          marginTop: 18, background: 'rgba(255,255,255,0.1)',
          border: '1.5px solid ' + C.gold,
          borderRadius: 16, padding: '12px 16px',
          textAlign: 'center', maxWidth: 320,
        }}>
          <div style={{ fontSize: 11, color: C.gold, letterSpacing: '0.1em', fontFamily: '"Bebas Neue", sans-serif' }}>
            RECOMENDADO PARA TI
          </div>
          <div style={{ fontFamily: '"Bebas Neue", sans-serif', fontSize: 26, marginTop: 4 }}>
            KIT {recommended.toUpperCase()}
          </div>
          <div style={{ fontSize: 12, color: 'rgba(253,247,232,0.7)', marginTop: 2 }}>
            Baseado nas tuas respostas
          </div>
        </div>
      )}

      <div style={{
        marginTop: 30, padding: '10px 14px',
        background: 'rgba(0,0,0,0.3)', borderRadius: 12,
        fontSize: 12, color: 'rgba(253,247,232,0.7)',
        textAlign: 'center', maxWidth: 320,
      }}>
        ⚠️ Desconto válido só nos próximos <strong style={{ color: C.gold }}>15 minutos</strong>
      </div>

      <div style={{ marginTop: 'auto', width: '100%', maxWidth: 360, paddingTop: 24 }}>
        <CTA color="gold" onClick={() => onContinue(score, recommended)}>
          Ver Kits & Resgatar →
        </CTA>
      </div>
    </div>
  );
}

Object.assign(window, { Reveal });