// About — Constanza intro. Portrait frame + credentials + quote.
function About() {
  const creds = [
    'Titulada en Danza Profesional',
    'Especialista en Ballroom: Latino y Estándar (10 ritmos)',
    'Coreógrafa e intérprete profesional',
    'Metodología para principiantes absolutos desde cero',
  ];
  return (
    <SectionShell id="about" bg="var(--white)">
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '5rem', alignItems: 'center' }} className="about-grid">
        <Reveal>
          <div style={{ position: 'relative' }}>
            <div style={{
              width: '100%', aspectRatio: '3/4', borderRadius: 'var(--radius-2xl)',
              overflow: 'hidden',
            }}>
              <img src="assets/image-1781986817645.webp?v=2" alt="Constanza Pozo — Fundadora de Lumera Studio"
                style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center top' }} />
            </div>
            <div style={{ position: 'absolute', bottom: '-1.2rem', right: '-1.2rem', width: '110px', height: '110px',
              borderRadius: '50%', background: 'var(--grad-gold)', display: 'flex', flexDirection: 'column',
              alignItems: 'center', justifyContent: 'center', color: 'var(--white)', textAlign: 'center',
              boxShadow: 'var(--shadow-badge)' }}>
              <strong style={{ fontSize: '1.8rem', fontFamily: 'var(--font-display)', fontWeight: 600, lineHeight: 1 }}>6</strong>
              <span style={{ fontFamily: 'var(--font-label)', fontSize: '0.55rem', letterSpacing: '0.12em',
                textTransform: 'uppercase', opacity: 0.85, marginTop: '0.2rem' }}>años de carrera</span>
            </div>
          </div>
        </Reveal>
        <Reveal delay={0.1}>
          <div>
            <Eyebrow>Sobre mí</Eyebrow>
            <SectionHeading>Hola, soy<br/><em style={{ fontStyle: 'italic', color: 'var(--gold-dark)' }}>Constanza Pozo</em></SectionHeading>
            <p style={{ fontSize: 'var(--text-base)', lineHeight: 'var(--lh-body)', color: 'var(--taupe)', maxWidth: '540px', margin: '1rem 0' }}>
              Bailarina profesional y fundadora de Lumera Studio. Creo que bailar no es un talento con el que naces — es una habilidad que se aprende, se siente y te transforma.
            </p>
            <div style={{ display: 'flex', flexDirection: 'column', gap: '0.6rem', margin: '1.8rem 0',
              padding: '1.4rem', background: 'var(--blush-pale)', borderRadius: 'var(--radius-md)',
              borderLeft: '3px solid var(--gold)' }}>
              {creds.map((c, i) => (
                <div key={i} style={{ display: 'flex', alignItems: 'center', gap: '0.6rem',
                  fontSize: 'var(--text-sm)', color: 'var(--brown)', lineHeight: 1.4 }}>
                  <span style={{ width: '5px', height: '5px', borderRadius: '50%', background: 'var(--gold)', flexShrink: 0 }} />{c}
                </div>
              ))}
            </div>
            <p style={{ fontFamily: 'var(--font-display)', fontSize: '1.3rem', fontWeight: 300, fontStyle: 'italic',
              color: 'var(--gold-dark)', lineHeight: 1.6, marginTop: '1.5rem', paddingTop: '1.5rem',
              borderTop: '1px solid var(--blush)' }}>
              "Mi misión es que cada persona que entre a Lumera salga sintiéndose más libre, más elegante y más ella misma."
            </p>
          </div>
        </Reveal>
      </div>
    </SectionShell>
  );
}
window.About = About;