// About + Stats + Typing test + Chess widget

function AboutSection({ dark, accent, font }) {
  const fg = dark ? '#f0eef9' : '#0c0a14';
  const muted = dark ? 'rgba(240,238,249,0.65)' : 'rgba(20,18,30,0.65)';

  return (
    <section id="about" style={{
      position: 'relative', padding: '120px 60px 80px', zIndex: 2,
    }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 60, alignItems: 'start' }}>
        <div style={{ position: 'sticky', top: 120 }}>
          <window.SectionHeader dark={dark} accent={accent} font={font}
            eyebrow="About"
            title="Engineer, builder, perpetual student."
            subtitle={null} />
          <div style={{ fontSize: 16, lineHeight: 1.7, color: muted, marginTop: 28, maxWidth: 480 }}>
            <p style={{ margin: '0 0 16px' }}>
              I'm Siluveru — an AI/ML engineer who treats every project like a small,
              stubborn experiment. I'm happiest somewhere between a Jupyter notebook
              and a production deploy, where the math meets the messy real world.
            </p>
            <p style={{ margin: '0 0 16px' }}>
              I work mostly on neural networks — vision systems, agent simulations,
              the kind of stuff where you stare at a loss curve until it cooperates.
              I also like writing tools that other engineers actually want to use.
            </p>
            <p style={{ margin: '0 0 16px' }}>
              Currently in my third year of B.Tech (CS &amp; IT) at MVSR Engineering
              College, Osmania University — Hyderabad, India.
            </p>
            <p style={{ margin: 0 }}>
              Off-hours: chess (1640-ish, climbing), and a typing speed I'll tell anyone
              who'll listen about.
            </p>
          </div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 16 }}>
          <StatCard dark={dark} accent={accent} font={font} k="100" unit="wpm" label="Typing speed" sub="Verified — try the test below" />
          <StatCard dark={dark} accent={accent} font={font} k="1640" unit="elo" label="Chess rating" sub="chess.com · rapid" />
          <StatCard dark={dark} accent={accent} font={font} k="12+" unit="" label="Projects shipped" sub="Across web, ML, systems" />
          <StatCard dark={dark} accent={accent} font={font} k="5" unit="yr" label="Years coding" sub="Started young, kept going" />

          <div style={{ gridColumn: '1 / -1' }}>
            <SkillsCard dark={dark} accent={accent} font={font} />
          </div>
        </div>
      </div>
    </section>
  );
}

function StatCard({ k, unit, label, sub, dark, accent, font }) {
  const fg = dark ? '#f0eef9' : '#0c0a14';
  const muted = dark ? 'rgba(240,238,249,0.55)' : 'rgba(20,18,30,0.55)';
  return (
    <div style={{
      padding: 20,
      background: dark ? 'rgba(255,255,255,0.04)' : 'rgba(255,255,255,0.6)',
      border: `1px solid ${dark ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.05)'}`,
      borderRadius: 18,
      backdropFilter: 'blur(24px)',
    }}>
      <div style={{
        fontFamily: font.display, fontSize: 56, fontWeight: 700,
        letterSpacing: '-0.04em', lineHeight: 1, color: fg,
      }}>
        {k}
        {unit && <span style={{ fontSize: 16, color: accent, marginLeft: 4, letterSpacing: '0' }}>{unit}</span>}
      </div>
      <div style={{ fontSize: 13, fontWeight: 600, marginTop: 14, color: fg }}>{label}</div>
      <div style={{ fontSize: 12, color: muted, marginTop: 4 }}>{sub}</div>
    </div>
  );
}

function SkillsCard({ dark, accent, font }) {
  const fg = dark ? '#f0eef9' : '#0c0a14';
  const muted = dark ? 'rgba(240,238,249,0.55)' : 'rgba(20,18,30,0.55)';
  const groups = [
    { label: 'AI / ML', items: ['PyTorch', 'TensorFlow', 'OpenCV', 'CUDA', 'NEAT'] },
    { label: 'Languages', items: ['Python', 'TypeScript', 'Rust', 'C++', 'SQL'] },
    { label: 'Systems', items: ['Postgres', 'Redis', 'Docker', 'WebSockets', 'FastAPI'] },
  ];
  return (
    <div style={{
      padding: 20,
      background: dark ? 'rgba(255,255,255,0.04)' : 'rgba(255,255,255,0.6)',
      border: `1px solid ${dark ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.05)'}`,
      borderRadius: 18, backdropFilter: 'blur(24px)',
    }}>
      <div style={{
        fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase',
        color: accent, fontWeight: 600,
      }}>Toolkit</div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 14, marginTop: 14 }}>
        {groups.map(g => (
          <div key={g.label}>
            <div style={{ fontSize: 12, color: muted, marginBottom: 6, fontWeight: 500 }}>{g.label}</div>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
              {g.items.map(t => (
                <span key={t} style={{
                  fontSize: 11.5, padding: '5px 11px',
                  background: dark ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.04)',
                  border: `1px solid ${dark ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.06)'}`,
                  borderRadius: 999, color: fg, fontWeight: 500,
                  fontFamily: 'ui-monospace, monospace',
                }}>{t}</span>
              ))}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

window.AboutSection = AboutSection;