const aboutStyles = {
  section: {
    position: 'relative',
    padding: '160px 48px 180px',
    background: '#070707',
    borderTop: '1px solid #141414',
    borderBottom: '1px solid #141414',
  },
  inner: {
    maxWidth: 1240,
    margin: '0 auto',
    display: 'grid',
    gridTemplateColumns: '1fr 2fr',
    gap: 100,
    alignItems: 'start',
  },
  labelCol: {
    position: 'sticky',
    top: 120,
  },
  sectionLabel: {
    fontFamily: "'Inter', sans-serif",
    fontSize: 11,
    letterSpacing: '0.4em',
    textTransform: 'uppercase',
    color: 'rgba(255,255,255,0.4)',
    marginBottom: 20,
  },
  sectionTitle: {
    fontFamily: "'Oswald', sans-serif",
    fontSize: 'clamp(56px, 8vw, 112px)',
    fontWeight: 600,
    letterSpacing: '0.04em',
    textTransform: 'uppercase',
    lineHeight: 0.95,
  },
  body: {
    fontFamily: "'Inter', sans-serif",
    fontWeight: 300,
    fontSize: 22,
    lineHeight: 1.55,
    color: 'rgba(255,255,255,0.88)',
    letterSpacing: '0.005em',
    textWrap: 'pretty',
  },
  bodyMuted: {
    color: 'rgba(255,255,255,0.55)',
    marginTop: 28,
    fontSize: 18,
    lineHeight: 1.6,
  },
  metaRow: {
    marginTop: 64,
    display: 'flex',
    gap: 48,
    paddingTop: 28,
    borderTop: '1px solid #171717',
    fontFamily: "'Inter', sans-serif",
    fontSize: 11,
    letterSpacing: '0.3em',
    textTransform: 'uppercase',
    color: 'rgba(255,255,255,0.45)',
    flexWrap: 'wrap',
  },
  metaItem: {
    display: 'flex',
    flexDirection: 'column',
    gap: 8,
  },
  metaLabel: {
    color: 'rgba(255,255,255,0.3)',
  },
  metaValue: {
    color: 'rgba(255,255,255,0.85)',
    fontFamily: "'Oswald', sans-serif",
    fontSize: 16,
    letterSpacing: '0.15em',
  },
};

function About() {
  return (
    <section id="about" style={aboutStyles.section}>
      <div className="about-inner" style={aboutStyles.inner}>
        <div className="about-label-col" style={aboutStyles.labelCol}>
          <div style={aboutStyles.sectionLabel}>— 02</div>
          <h2 style={aboutStyles.sectionTitle}>About</h2>
        </div>
        <div>
          <p style={aboutStyles.body}>
            Music has been part of Eshwar's life since childhood — from playing
            instruments to chasing the feeling of creating something from nothing.
            Based in Trinidad &amp; Tobago, he steps into the artist space with one
            clear intention: to make music that belongs to everyone.
          </p>
          <p style={{ ...aboutStyles.body, ...aboutStyles.bodyMuted }}>
            No single genre, no single audience. Just honest sound built for people
            across cultures, ages, and moods.
          </p>

          <div style={aboutStyles.metaRow}>
            <div style={aboutStyles.metaItem}>
              <span style={aboutStyles.metaLabel}>Based</span>
              <span style={aboutStyles.metaValue}>Trinidad &amp; Tobago</span>
            </div>
            <div style={aboutStyles.metaItem}>
              <span style={aboutStyles.metaLabel}>Active</span>
              <span style={aboutStyles.metaValue}>2026 — Present</span>
            </div>
            <div style={aboutStyles.metaItem}>
              <span style={aboutStyles.metaLabel}>Label</span>
              <span style={aboutStyles.metaValue}>Independent</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.About = About;