// Success screen + Root App router

function Success({ order, onRestart }) {
  React.useEffect(() => { window.Sound?.playGoal(); }, []);
  const ref = 'C26-' + Math.floor(Math.random() * 90000 + 10000);
  return (
    <div style={{
      background: `radial-gradient(circle at 50% 0%, ${C.green} 0%, ${C.greenDeep} 60%, ${C.greenInk} 100%)`,
      minHeight: '100vh', color: C.cream,
      padding: '40px 20px 30px', position: 'relative', overflow: 'hidden',
    }}>
      {[...Array(30)].map((_, i) => (
        <div key={i} style={{
          position: 'absolute', width: 8, height: 12,
          background: [C.gold, C.red, C.cream][i % 3],
          left: `${(i * 41) % 100}%`, top: `-12px`,
          animation: `fall ${2.5 + (i % 4)}s linear ${i * 0.07}s infinite`,
          transform: `rotate(${i * 30}deg)`,
        }} />
      ))}

      <div style={{ textAlign: 'center', marginTop: 10 }}>
        <div style={{
          width: 90, height: 90, borderRadius: '50%',
          background: `linear-gradient(180deg, ${C.gold}, ${C.goldDeep})`,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontSize: 50, margin: '0 auto 16px',
          boxShadow: '0 12px 32px rgba(255,200,60,0.4)',
          animation: 'pop 0.6s ease',
        }}>⚽</div>
        <div style={{
          fontFamily: '"Bebas Neue", sans-serif', fontSize: 14,
          color: C.gold, letterSpacing: '0.18em',
        }}>GOLO! ENCOMENDA CONFIRMADA</div>
        <div style={{
          fontFamily: '"Bebas Neue", "Arial Black", sans-serif',
          fontSize: 40, lineHeight: 1, marginTop: 8,
        }}>OS TEUS CROMOS<br /><span style={{ color: C.gold }}>VÃO A CAMINHO</span></div>

        <div style={{
          marginTop: 22, background: 'rgba(255,255,255,0.08)',
          border: '1.5px solid rgba(255,255,255,0.18)',
          borderRadius: 16, padding: 16, textAlign: 'left',
        }}>
          <div style={{ fontSize: 11, color: 'rgba(253,247,232,0.6)', letterSpacing: '0.08em' }}>
            REFERÊNCIA
          </div>
          <div style={{ fontFamily: '"Bebas Neue", sans-serif', fontSize: 26, color: C.cream }}>{ref}</div>
          <div style={{ height: 1, background: 'rgba(255,255,255,0.12)', margin: '10px 0' }} />
          <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 13 }}>
            <span style={{ color: 'rgba(253,247,232,0.7)' }}>Total pago</span>
            <span style={{ color: C.gold, fontWeight: 700 }}>{order?.total?.toFixed(2)}€</span>
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 13, marginTop: 6 }}>
            <span style={{ color: 'rgba(253,247,232,0.7)' }}>Entrega prevista</span>
            <span>2-3 dias úteis</span>
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 13, marginTop: 6 }}>
            <span style={{ color: 'rgba(253,247,232,0.7)' }}>Transportadora</span>
            <span>CTT Expresso</span>
          </div>
        </div>

        <div style={{
          marginTop: 14, padding: 14, background: 'rgba(255,200,60,0.12)',
          border: `1.5px solid ${C.gold}`, borderRadius: 16,
        }}>
          <div style={{ fontSize: 28, marginBottom: 4 }}>🎁</div>
          <div style={{ fontFamily: '"Bebas Neue", sans-serif', fontSize: 18, color: C.gold }}>
            BÓNUS DE BOAS-VINDAS
          </div>
          <div style={{ fontSize: 12, color: 'rgba(253,247,232,0.8)', marginTop: 4 }}>
            3 cromos raros holográficos vão no envio · Surpresa do Capitão
          </div>
        </div>

        <div style={{ marginTop: 22 }}>
          <CTA color="gold" onClick={onRestart}>Voltar ao início</CTA>
        </div>

        <div style={{
          marginTop: 16, fontSize: 11, color: 'rgba(253,247,232,0.6)',
        }}>
          Vais receber um e-mail com a confirmação<br />Dúvidas? <strong style={{ color: C.gold }}>apoio@craques26.pt</strong>
        </div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────
// Root App
// ─────────────────────────────────────────────
function App() {
  const [route, setRoute] = React.useState('landing');
  const [answers, setAnswers] = React.useState([]);
  const [discount, setDiscount] = React.useState(15);
  const [recommended, setRecommended] = React.useState('Campeão');
  const [kit, setKit] = React.useState(null);
  const [order, setOrder] = React.useState(null);

  const go = (r) => { setRoute(r); };

  // Scroll to top on route change
  React.useEffect(() => {
    window.scrollTo(0, 0);
  }, [route]);

  let screen;
  if (route === 'landing') screen = <Landing onStart={() => go('quiz')} />;
  else if (route === 'quiz') screen = <Quiz onComplete={(a) => { setAnswers(a); go('reveal'); }} />;
  else if (route === 'reveal') screen = <Reveal answers={answers} onContinue={(d, r) => { setDiscount(d); setRecommended(r); go('offers'); }} />;
  else if (route === 'offers') screen = <Offers discount={discount} recommended={recommended} onPick={(k) => { setKit(k); go('checkout'); }} />;
  else if (route === 'checkout') screen = <Checkout kit={kit} discount={discount} onComplete={(o) => { setOrder(o); go('success'); }} onBack={() => go('offers')} />;
  else if (route === 'success') screen = <Success order={order} onRestart={() => { setRoute('landing'); setAnswers([]); setDiscount(15); setKit(null); }} />;

  return (
    <div data-screen-label={route} style={{
      minHeight: '100vh', width: '100%',
      maxWidth: 480, margin: '0 auto',
      background: C.cream, overflow: 'hidden',
      boxShadow: '0 0 0 1px rgba(0,0,0,0.04)',
      position: 'relative',
    }}>
      {screen}
    </div>
  );
}

window.App = App;