/* Reward / lesson-complete screen */
const { Card, Btn, Icon } = window.GG;

const RewardScreen = ({ onContinue = () => {} }) => (
  <div className="gg-screen" style={{ background: '#fff' }}>
    <div className="gg-body" style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center', justifyContent: 'center', paddingTop: 80 }}>
      <img src="../../assets/mascot-loading.gif" alt="" style={{ width: 160, height: 160, borderRadius: 24, background: '#eef4ff', marginBottom: 16 }} />
      <h1 style={{ font: '600 36px var(--font-display)', color: '#222', margin: 0, lineHeight: 1.1 }}>Fantastic!</h1>
      <p style={{ font: '400 16px var(--font-ui)', color: '#45515e', margin: '8px 0 24px' }}>You did it.</p>

      <Card style={{ width: '100%', display: 'flex', gap: 10, justifyContent: 'space-around' }}>
        <Stat n="+40" label="XP"       color="#1456f0" bg="#e8efff" />
        <Stat n="+40" label="Coins"    color="#b45309" bg="#fff7d6" />
        <Stat n="71%" label="Accuracy" color="#047857" bg="#e8ffea" />
      </Card>

      <div style={{ marginTop: 24, width: '100%' }}>
        <Btn variant="brand" pill block onClick={onContinue}>
          Continue learning <Icon name="arrow-right" size={16} color="#fff" stroke={2.25} />
        </Btn>
      </div>
    </div>
  </div>
);

const Stat = ({ n, label, color, bg }) => (
  <div style={{ flex: 1, padding: 14, borderRadius: 13, background: bg, textAlign: 'center' }}>
    <div className="data" style={{ font: '600 22px var(--font-data)', color }}>{n}</div>
    <div style={{ font: '500 11px var(--font-ui)', color, opacity: 0.8, textTransform: 'uppercase', letterSpacing: '0.05em', marginTop: 2 }}>{label}</div>
  </div>
);

window.RewardScreen = RewardScreen;