// SISTEMA — logo variants, 5-bar explanation, modular sign
function Sistema() {
  return (
    <section id="sistema" data-screen-label="03 Sistema" style={{
      position: 'relative', padding: '140px 48px 140px',
      background: 'var(--grey-paper)'
    }}>
      <PageNumber n={3} label="SISTEMA" />
      <SectionLabel idx={2} title="Sistema" kicker="Signo · Barras · Tarjeta · Sello" />

      {/* Row of three logo plates */}
      <div className="plate-row" style={{
        display: 'grid',
        gridTemplateColumns: 'repeat(3, 1fr)',
        gap: 20,
        marginBottom: 80
      }}>
        <style>{`
          @media (max-width: 900px){ .plate-row { grid-template-columns: 1fr !important; } }
        `}</style>

        <Plate bg="var(--grey-soft)" label="01 · Bloques" tag="Logotipo horizontal" plateNum="01">
          <NomenMark size={260} src="assets/logo/nomen-wordmark.png" />
        </Plate>

        <Plate bg="#0A0A0A" label="02 · Bloques" tag="Logotipo vertical" light plateNum="02">
          <NomenCross size={230} src="assets/logo/nomen-cross-new.png" />
        </Plate>

        <Plate bg="var(--red)" label="03 · Bloques" tag="Mínima expresión" light plateNum="03">
          <div style={{
            display: 'grid', gridTemplateColumns: 'repeat(5, 44px)', gap: 10
          }}>
            {[0,1,2,3,4].map(i => (
              <div key={i} style={{
                width: 44, height: 100, background: '#fff',
                animation: `pulse 2.6s ease-in-out ${i*0.12}s infinite`
              }}/>
            ))}
          </div>
          <style>{`
            @keyframes pulse {
              0%,100% { transform: scaleY(1); }
              50%     { transform: scaleY(.92); }
            }
          `}</style>
        </Plate>
      </div>

      {/* Concept explainer */}
      <div className="explain-grid" style={{
        display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 60, alignItems: 'start'
      }}>
        <style>{`
          @media (max-width: 900px){ .explain-grid { grid-template-columns: 1fr !important; } }
        `}</style>

        <div>
          <h3 className="display" style={{
            fontSize: 'clamp(36px, 5vw, 72px)', margin: 0, marginBottom: 20,
            lineHeight: 0.92, fontWeight: 400, letterSpacing: '-0.03em'
          }}>
            Nombrar<br/>
            <span style={{ color: 'var(--red)' }}>es</span> un acto<br/>
            visual.
          </h3>
          <p style={{ fontSize: 16, lineHeight: 1.6, maxWidth: 520, marginBottom: 18 }}>
            NOMEN nace de la necesidad de <b>identificar a cada ser o cosa existente
            en el planeta</b> a partir del diseño. Nombre en latín — el modo de identificar
            seres, cosas o conceptos abstractos.
          </p>
          <p style={{ fontSize: 16, lineHeight: 1.6, maxWidth: 520 }}>
            Mi sistema se compone de <span className="red"><b>cinco bloques</b></span> que actúan
            como individuos separados, al encontrar su grado de simplificación máximo, las cinco
            barras permiten seleccionar un fragmento de realidad y nombrarlo.
          </p>
        </div>

        {/* Applications — phone, laptop, cups */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 14 }}>
          <MediaCard src="assets/imagery/iphone-modular.png" tag="04 · En pantalla" height={320}/>
          <MediaCard src="assets/imagery/cups.png" tag="05 · Objeto" height={200}/>
          <MediaCard src="assets/imagery/laptop-green.png" tag="04 · En pantalla" height={240} span={2}/>
        </div>
      </div>
    </section>
  );
}

function Plate({ bg, label, tag, children, light }) {
  return (
    <div style={{
      background: bg, aspectRatio: '4/3',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      position: 'relative', padding: 30,
      color: light ? '#fff' : 'var(--ink)'
    }}>
      <div style={{ position: 'absolute', top: 14, left: 14, display: 'flex', flexDirection: 'column' }}>
        <span className="eyebrow" style={{ opacity: .75, fontSize: 10 }}>{label}</span>
      </div>
      <div style={{ position: 'absolute', bottom: 14, right: 14 }}>
        <span className="eyebrow" style={{ opacity: .55, fontSize: 10 }}>{tag}</span>
      </div>
      {children}
    </div>
  );
}

function MediaCard({ src, tag, height, span }) {
  return (
    <figure style={{
      margin: 0, position: 'relative',
      height, overflow: 'hidden',
      gridColumn: span === 2 ? 'span 2' : 'auto'
    }}>
      <img src={src} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }}/>
      <figcaption style={{
        position: 'absolute', top: 10, left: 10,
        background: 'rgba(255,255,255,.92)', padding: '4px 8px',
        fontSize: 10, letterSpacing: '0.2em', textTransform: 'uppercase', fontWeight: 600
      }}>{tag}</figcaption>
    </figure>
  );
}

Object.assign(window, { Sistema });