// MANIFIESTO — p1 body text expanded with water imagery
function Manifesto() {
  return (
    <section id="manifiesto" data-screen-label="02 Manifiesto" style={{
      position: 'relative', padding: '140px 48px 140px',
      background: 'var(--paper)', color: 'var(--ink)',
      overflow: 'hidden'
    }}>
      <PageNumber n={2} label="AGUA" />
      <SectionLabel idx={1} title="Manifiesto" kicker="Intensa, profunda, calma e inquieta a la vez." />

      <div style={{
        display: 'grid',
        gridTemplateColumns: 'minmax(0, 1.2fr) minmax(0, 1fr)',
        gap: 64,
        alignItems: 'stretch'
      }} className="manifesto-grid">
        <style>{`
          @media (max-width: 900px) {
            .manifesto-grid { grid-template-columns: 1fr !important; }
            .manifesto-quote { font-size: 48px !important; }
          }
        `}</style>

        <div>
          <h2 className="manifesto-quote display" style={{
            fontSize: 'clamp(48px, 7vw, 108px)',
            margin: 0, marginBottom: 28,
            letterSpacing: '-0.035em', lineHeight: 0.88,
            fontWeight: 400
          }}>
            Tal como<br />
            <span style={{ color: 'var(--red)' }}>el agua</span>.
          </h2>

          <div style={{
            borderLeft: '2px solid var(--red)',
            paddingLeft: 20, marginBottom: 36,
            maxWidth: 560
          }}>
            <p style={{ fontSize: 19, lineHeight: 1.5, margin: 0 }}>
              Soy Joaquina y esa forma de ser es también mi forma de diseñar.
              Licenciada en Diseño y Gestión de Estéticas para la Moda,
              veo el diseño como un sistema de comunicación — esencial para la vida
              social, en constante cambio y corrección.
            </p>
          </div>

          <p style={{ fontSize: 16, lineHeight: 1.65, maxWidth: 560, marginBottom: 24 }}>
            Sumergida en el diseño de estéticas, traduzco todas las aristas cotidianas
            que en otros ámbitos no se imaginan conviviendo. Al momento de trabajar
            soy una persona <b>MUY MUY</b> y <b>TAN TAN</b> — diseño para hacer sentir,
            para comunicar y para recordar.
          </p>

          <p style={{ fontSize: 16, lineHeight: 1.65, maxWidth: 560 }}>
            Mi práctica personal busca eso: <em>traducir lo invisible en forma</em>.
          </p>

          {/* Five-word value tags — from page 4 */}
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginTop: 40 }}>
            {['Curiosidad', 'Pasión', 'Curiosidad', 'Sensibilidad', 'Practicidad'].map((w, i) =>
            <span key={i} style={{
              border: '1px solid var(--ink)',
              padding: '8px 14px',
              fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase',
              fontWeight: 600
            }}>{w}</span>
            )}
          </div>
        </div>

        {/* Water image column — echoes p7 of PDF */}
        <figure style={{
          margin: 0, position: 'relative', minHeight: 520,
          overflow: 'hidden'
        }}>
          <video
            src="assets/imagery/manifesto-loop.mp4"
            autoPlay
            loop
            muted
            playsInline
            preload="auto"
            aria-label="Loop de agua — referencia de página 7"
            style={{
              position: 'absolute', inset: 0, width: '100%', height: '100%',
              objectFit: 'cover',
              background: 'var(--grey-soft)'
            }} />
          
          {/* Floating caption like a museum plate */}
          <figcaption style={{
            position: 'absolute', bottom: 18, left: 18, right: 18,
            background: 'rgba(255,255,255,.92)',
            padding: '14px 16px',
            fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase',
            display: 'flex', justifyContent: 'space-between', gap: 18
          }}>
            <span>PL. 02 — TAL COMO EL AGUA</span>
            <span style={{ color: 'var(--red)' }}>PATAGONIA ARGENTINA</span>
          </figcaption>

          {/* Five-bar sello */}
          <div style={{ position: 'absolute', top: 18, right: 18 }}>
            <FiveBars width={72} color="var(--red)" />
          </div>
        </figure>
      </div>
    </section>);

}

Object.assign(window, { Manifesto });