/* Profile / parent dashboard */
const { TopBar, TabBar, Card, Icon, Row, Btn, Progress } = window.GG;

const Profile = () => (
  <div className="gg-screen">
    <TopBar stats={{ streak: 5, coins: 40, hearts: 3 }} />
    <div className="gg-body">
      <Card featured style={{ marginBottom: 16, display: 'flex', gap: 14, alignItems: 'center' }}>
        <div style={{ width: 64, height: 64, borderRadius: 9999, background: 'linear-gradient(135deg,#1456f0,#3daeff)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', color: '#fff', font: '600 24px var(--font-display)' }}>A</div>
        <div style={{ flex: 1 }}>
          <div style={{ font: '600 18px var(--font-display)', color: '#222' }}>Aanya</div>
          <div style={{ font: '400 12px var(--font-ui)', color: '#8e8e93' }}>Learner since Apr 2026 · Premium</div>
          <div style={{ marginTop: 8, display: 'flex', gap: 14 }}>
            <Mini n="345" l="XP" />
            <Mini n="5"   l="Streak" />
            <Mini n="14"  l="Achievements" />
          </div>
        </div>
      </Card>

      <h3 className="gg-section-h" style={{ fontSize: 16 }}>This week</h3>
      <Card style={{ marginBottom: 16 }}>
        <div style={{ display: 'flex', alignItems: 'flex-end', gap: 8, height: 80 }}>
          {[10, 22, 18, 30, 14, 26, 8].map((h, i) => (
            <div key={i} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6 }}>
              <div style={{ width: '100%', height: h * 2, background: '#1456f0', borderRadius: 6, opacity: i === 6 ? 0.4 : 1 }} />
              <div style={{ font: '500 10px var(--font-ui)', color: '#8e8e93' }}>{['M','T','W','T','F','S','S'][i]}</div>
            </div>
          ))}
        </div>
      </Card>

      <h3 className="gg-section-h" style={{ fontSize: 16 }}>Recent achievements</h3>
      <Row left={<span style={{ width: 36, height: 36, borderRadius: 9999, background: '#fff7d6', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}><Icon name="trophy" size={18} color="#b45309" stroke={2} /></span>}
           title="First lesson done" sub="Earned 2 days ago" right={<Icon name="chevron-right" size={18} color="#8e8e93" />} />
      <Row left={<span style={{ width: 36, height: 36, borderRadius: 9999, background: '#fff5e6', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}><Icon name="flame" size={18} color="#f59e0b" stroke={2} /></span>}
           title="5-day streak" sub="Keep it going!" right={<Icon name="chevron-right" size={18} color="#8e8e93" />} />

      <h3 className="gg-section-h" style={{ fontSize: 16, marginTop: 16 }}>Parent</h3>
      <Row left={<Icon name="bar-chart-3" size={20} color="#222" />} title="Weekly report" sub="Sent every Sunday" right={<Icon name="chevron-right" size={18} color="#8e8e93" />} />
      <Row left={<Icon name="settings" size={20} color="#222" />} title="Settings" sub="Notifications, language, daily goal" right={<Icon name="chevron-right" size={18} color="#8e8e93" />} />
    </div>
    <TabBar active="profile" />
  </div>
);

const Mini = ({ n, l }) => (
  <div>
    <div className="data" style={{ font: '600 16px var(--font-data)', color: '#222' }}>{n}</div>
    <div style={{ font: '500 10px var(--font-ui)', color: '#8e8e93', textTransform: 'uppercase', letterSpacing: '0.05em' }}>{l}</div>
  </div>
);

window.Profile = Profile;