function About() {
  const { SwirlArc, CircleFrame, Reveal } = window;

  const paragraphs = [
    'Somos Agustín y Carolina. Llegamos de Argentina a Valencia a finales de 2022, sin conocer a nadie, y nos enamoramos de la calma de Picanya. Nos gustaba el café de especialidad, pero para tomar uno de verdad había que ir hasta Valencia — así que decidimos traerlo aquí.',
    'A finales de 2025 se unió Kike como socio, y todo empezó a encajar. Así nació Calmaeta: la primera cafetería de especialidad de Picanya, y un espacio para compartir un buen café y desconectar del ritmo de cada día.',
  ];

  return (
    <section id="nosotros" style={{ background: 'var(--color-perla)', padding: '120px 0', position: 'relative', overflow: 'hidden' }}>
      <div className="calmaeta-container" style={{ maxWidth: '1160px', margin: '0 auto' }}>
        <div className="calmaeta-about-grid" style={{ alignItems: 'flex-start' }}>

          {/* Text */}
          <div>
            <Reveal><div style={{
              fontFamily: 'var(--font-primary)', fontSize: '11px', fontWeight: 600,
              letterSpacing: '0.22em', textTransform: 'uppercase',
              color: 'var(--color-terracota)', marginBottom: '24px',
            }}>Nuestra historia</div></Reveal>

            {paragraphs.map((p, i) => (
              <Reveal key={i} delay={i * 60}>
                <p style={{
                  fontFamily: 'var(--font-primary)', fontSize: '19px', fontWeight: 300,
                  lineHeight: 1.7, letterSpacing: '-0.005em',
                  color: 'var(--color-negro)', margin: '0 0 26px 0',
                  maxWidth: '560px',
                }}>{p}</p>
              </Reveal>
            ))}

            <div style={{ height: '1px', background: 'var(--color-border)', margin: '36px 0', maxWidth: '560px' }} />

            <Reveal>
              <p style={{
                fontFamily: 'var(--font-primary)', fontSize: '22px', fontWeight: 500,
                lineHeight: 1.5, letterSpacing: '-0.01em',
                color: 'var(--color-terracota)', margin: 0, maxWidth: '520px',
              }}>
                Porque creemos que un buen café siempre sabe mejor cuando se disfruta con calma.
              </p>
            </Reveal>
          </div>

          {/* Founder portraits, overlapping circles with swirl accent.
              Below the tablet breakpoint this collage abandons absolute
              positioning entirely (see .calmaeta-about-portraits in
              responsive.css) and reflows as two normal-flow blocks — the
              hand-tuned pixel offsets below are desktop-only. */}
          <Reveal delay={100} y={40} className="calmaeta-about-portraits">
            <SwirlArc
              className="calmaeta-about-swirl"
              size={260} color="var(--color-azul)" strokeWidth={3} arc={0.8} rotate={-30}
              style={{ position: 'absolute', top: '30px', right: '-10px', zIndex: 0 }}
            />
            <div className="calmaeta-about-dot" style={{
              position: 'absolute', bottom: '82px', left: '30px', zIndex: 4,
              width: '120px', height: '120px', borderRadius: '50%',
              background: 'var(--color-terracota)',
            }} />
            <div className="calmaeta-about-portrait-block calmaeta-about-portrait-agustin">
              <CircleFrame
                src="assets/images/founder-agustin.webp"
                alt="Agustín, cofundador de Calmaeta"
                size={300} fluid
                className="calmaeta-about-portrait-img-lg"
                style={{ boxShadow: '0 20px 44px -18px rgba(35,31,32,0.4)' }}
              />
              <span style={{
                fontFamily: 'var(--font-primary)', fontSize: '11px', fontWeight: 600,
                letterSpacing: '0.1em', color: 'var(--color-negro)',
              }}>Agustín <span style={{ color: 'var(--color-text-muted)', fontWeight: 400 }}>· cofundador</span></span>
            </div>
            <div className="calmaeta-about-portrait-block calmaeta-about-portrait-carolina">
              <CircleFrame
                src="assets/images/founder-carolina.webp"
                alt="Carolina, cofundadora de Calmaeta"
                size={260} fluid
                className="calmaeta-about-portrait-img-sm"
                style={{ boxShadow: '0 20px 44px -18px rgba(35,31,32,0.4)' }}
              />
              <span style={{
                fontFamily: 'var(--font-primary)', fontSize: '11px', fontWeight: 600,
                letterSpacing: '0.1em', color: 'var(--color-negro)',
              }}>Carolina <span style={{ color: 'var(--color-text-muted)', fontWeight: 400 }}>· cofundadora</span></span>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { About });