/* Kennedy Grace — About me screen */

const { Card, Badge, Avatar } = window.KennedyGraceDesignSystem_5322af;

function AboutScreen() {
  const { SectionTitle } = window;
  const faves = [
    { e: '🐻‍❄️', t: 'Polar bears' },
    { e: '🐶', t: 'Cooper & Bentlee' },
    { e: '📸', t: 'Family time' },
    { e: '🎤', t: 'My friends' },
    { e: '🏖️', t: 'The beach' },
    { e: '🧋', t: 'Slime & squishies' },
  ];
  return (
    <div style={{ padding: '16px 16px 24px' }}>
      <SectionTitle accent="🎀">About me</SectionTitle>

      <Card tone="candy" pad="lg" floating style={{ textAlign: 'center', marginBottom: 16 }}>
        <Avatar emoji="✌️" size={84} ring={false} style={{ margin: '0 auto' }} badge="diamond" />
        <h2 style={{ margin: '12px 0 4px', font: 'var(--text-h2)', fontFamily: 'var(--font-display)', color: '#fff' }}>Hi, I'm Kennedy!</h2>
        <p style={{ margin: 0, color: '#fff', font: 'var(--text-body-md)', opacity: 0.95 }}>10 years old ☀️ · 4th grade grad 🎓 · pro vlogger in training 🎬</p>
      </Card>

      <SectionTitle>My favorite things</SectionTitle>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, marginBottom: 18 }}>
        {faves.map((f, i) => (
          <Card key={i} tone="paper" pad="sm" style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <span style={{ fontSize: '1.6rem' }} aria-hidden="true">{f.e}</span>
            <span style={{ font: 'var(--text-body-bold)', color: 'var(--text-strong)' }}>{f.t}</span>
          </Card>
        ))}
      </div>

      <SectionTitle>What I post</SectionTitle>
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
        <Badge tone="vlog">Vlogs</Badge>
        <Badge tone="haul">Hauls</Badge>
        <Badge tone="grwm">GRWM</Badge>
        <Badge tone="pink">Giveaways</Badge>
        <Badge tone="sky">Beach days</Badge>
        <Badge tone="grape">Sleepovers</Badge>
      </div>

      <p style={{ textAlign: 'center', marginTop: 22, font: 'var(--font-script)', fontSize: '1.6rem', color: 'var(--pink-500)' }}>thanks for being here! 🎀</p>
    </div>
  );
}

window.AboutScreen = AboutScreen;