function QuienesSomos() {
  const values = [
    { icon: 'shield',    title: 'Transparencia',   desc: 'Claridad en cada operación' },
    { icon: 'clock',     title: 'Cumplimiento',    desc: 'Entregas a tiempo, siempre' },
    { icon: 'headset',   title: 'Servicio',         desc: 'Atención personalizada' },
    { icon: 'bulb',      title: 'Innovación',       desc: 'Soluciones comerciales a medida' },
    { icon: 'users',     title: 'Cercanía',         desc: 'Relaciones de largo plazo' },
    { icon: 'leaf',      title: 'Responsabilidad',  desc: 'Compromisos que cumplimos' },
  ];

  return (
    <section id="quienes" data-screen-label="Quienes Somos" style={{
      padding: '120px 0 0',
      background: 'var(--bg)',
      position: 'relative',
      overflow: 'hidden',
    }}>
      <div className="container" style={{ position: 'relative', zIndex: 2 }}>

        {/* Giant "01" watermark */}
        <div style={{
          position: 'absolute',
          top: -20,
          right: 0,
          fontSize: 'clamp(220px, 24vw, 360px)',
          fontWeight: 800,
          lineHeight: 0.85,
          background: 'linear-gradient(135deg, rgba(30,58,138,0.08) 0%, rgba(6,182,212,0.06) 50%, rgba(16,185,129,0.04) 100%)',
          WebkitBackgroundClip: 'text',
          backgroundClip: 'text',
          WebkitTextFillColor: 'transparent',
          pointerEvents: 'none',
          userSelect: 'none',
          fontFamily: 'Montserrat, sans-serif',
          letterSpacing: '-0.04em',
        }}>
          01
        </div>

        <div className="qs-grid" style={{
          display: 'grid',
          gridTemplateColumns: '1fr 1fr',
          gap: 80,
          alignItems: 'start',
          position: 'relative',
        }}>

          {/* LEFT */}
          <div>
            <div className="eyebrow" style={{ marginBottom: 20 }}>Quiénes somos</div>

            <h2 className="section-title" style={{
              fontSize: 'clamp(32px, 4vw, 48px)',
              fontWeight: 800,
              marginBottom: 28,
            }}>
              Una empresa familiar<br/>con vocación industrial
            </h2>

            <p style={{
              fontSize: 16,
              lineHeight: 1.7,
              color: 'var(--ink-2)',
              marginBottom: 36,
              maxWidth: 540,
            }}>
              CMPI nació con un propósito claro: entregar a la industria colombiana soluciones confiables en papel, cartulinas y materias primas, con servicio cercano y una cultura basada en la palabra y el cumplimiento. Desde Bogotá hemos construido alianzas con <strong style={{ color: 'var(--navy)' }}>Klabin, Suzano, Sylvamo, Sun Paper, APP, Smurfit Kappa Cartón Colombia, Propal y Fedrigoni</strong>.
            </p>

            {/* Mision / Vision cards */}
            <div style={{ display: 'flex', flexDirection: 'column', gap: 16, maxWidth: 540 }}>
              <div style={{
                background: 'var(--bg-2)',
                borderRadius: 10,
                padding: '22px 24px',
                borderLeft: '4px solid #1E3A8A',
                position: 'relative',
              }}>
                <div style={{
                  fontSize: 11,
                  fontWeight: 700,
                  letterSpacing: '0.16em',
                  color: '#1E3A8A',
                  textTransform: 'uppercase',
                  marginBottom: 8,
                }}>Misión</div>
                <p style={{ fontSize: 14, lineHeight: 1.55, color: 'var(--ink-2)' }}>
                  Importar, distribuir y desarrollar soluciones en papel para la <strong style={{ color: '#1E3A8A', fontWeight: 600 }}>industria gráfica y de empaque en Colombia</strong>, garantizando calidad, cumplimiento y acompañamiento cercano.
                </p>
              </div>

              <div style={{
                background: 'var(--bg-2)',
                borderRadius: 10,
                padding: '22px 24px',
                borderLeft: '4px solid var(--green)',
              }}>
                <div style={{
                  fontSize: 11,
                  fontWeight: 700,
                  letterSpacing: '0.16em',
                  color: 'var(--green)',
                  textTransform: 'uppercase',
                  marginBottom: 8,
                }}>Visión</div>
                <p style={{ fontSize: 14, lineHeight: 1.55, color: 'var(--ink-2)' }}>
                  Ser la comercializadora líder e independiente de papel en Colombia, reconocida por <strong style={{ color: 'var(--green)', fontWeight: 600 }}>capacidad logística, portafolio integral y solidez de alianzas globales</strong>.
                </p>
              </div>
            </div>
          </div>

          {/* RIGHT: Values grid */}
          <div>
            <div style={{
              fontSize: 12,
              fontWeight: 700,
              letterSpacing: '0.22em',
              textTransform: 'uppercase',
              color: 'var(--navy)',
              textAlign: 'center',
              marginBottom: 36,
            }}>Nuestros valores</div>

            <div className="values-grid" style={{
              display: 'grid',
              gridTemplateColumns: 'repeat(2, 1fr)',
              gap: '32px 24px',
            }}>
              {values.map((v) => (
                <ValueCard key={v.title} {...v} />
              ))}
            </div>
          </div>

        </div>
      </div>

      {/* Wave divider */}
      <WaveDivider />

      <style>{`
        @media (max-width: 900px) {
          .qs-grid { grid-template-columns: 1fr !important; gap: 56px !important; }
        }
      `}</style>
    </section>
  );
}

function ValueCard({ icon, title, desc }) {
  return (
    <div style={{ display: 'flex', gap: 14, alignItems: 'flex-start' }}>
      <div style={{
        flexShrink: 0,
        width: 38, height: 38,
        borderRadius: 10,
        background: 'linear-gradient(135deg, rgba(30,58,138,0.10), rgba(6,182,212,0.10) 50%, rgba(16,185,129,0.10))',
        display: 'grid',
        placeItems: 'center',
        color: 'var(--teal)',
      }}>
        <ValueIcon name={icon} />
      </div>
      <div>
        <div className="serif" style={{
          fontSize: 17,
          fontWeight: 700,
          color: 'var(--navy)',
          marginBottom: 4,
          letterSpacing: '-0.005em',
        }}>{title}</div>
        <div style={{ fontSize: 13, lineHeight: 1.45, color: 'var(--ink-2)' }}>{desc}</div>
      </div>
    </div>
  );
}

function ValueIcon({ name }) {
  const props = {
    width: 18, height: 18, viewBox: '0 0 24 24', fill: 'none',
    stroke: 'currentColor', strokeWidth: 2, strokeLinecap: 'round', strokeLinejoin: 'round',
  };
  switch (name) {
    case 'shield':  return <svg {...props}><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>;
    case 'clock':   return <svg {...props}><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>;
    case 'headset': return <svg {...props}><path d="M3 18v-6a9 9 0 0 1 18 0v6"/><path d="M21 19a2 2 0 0 1-2 2h-1v-7h3zM3 19a2 2 0 0 0 2 2h1v-7H3z"/></svg>;
    case 'bulb':    return <svg {...props}><path d="M9 18h6"/><path d="M10 22h4"/><path d="M12 2a7 7 0 0 0-4 12.7c.6.6 1 1.4 1 2.3h6c0-.9.4-1.7 1-2.3A7 7 0 0 0 12 2z"/></svg>;
    case 'users':   return <svg {...props}><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>;
    case 'leaf':    return <svg {...props}><path d="M6 3 2 11c0 7 5 10 10 10s10-3 10-10c0-3-1-5-2-6L6 3z"/><path d="M2 11c8 0 14 5 14 10"/></svg>;
    default: return null;
  }
}

function WaveDivider() {
  return (
    <div style={{ width: '100%', marginTop: 80, lineHeight: 0 }}>
      <svg viewBox="0 0 1440 200" preserveAspectRatio="none" style={{ width: '100%', height: 160, display: 'block' }}>
        <defs>
          <linearGradient id="wave-g1" x1="0" x2="1" y1="0" y2="0">
            <stop offset="0" stopColor="#1E3A8A" stopOpacity="0.18"/>
            <stop offset="0.5" stopColor="#06B6D4" stopOpacity="0.22"/>
            <stop offset="1" stopColor="#10B981" stopOpacity="0.22"/>
          </linearGradient>
          <linearGradient id="wave-g2" x1="0" x2="1" y1="0" y2="0">
            <stop offset="0" stopColor="#06B6D4" stopOpacity="0.32"/>
            <stop offset="1" stopColor="#10B981" stopOpacity="0.32"/>
          </linearGradient>
          <linearGradient id="wave-g3" x1="0" x2="1" y1="0" y2="0">
            <stop offset="0" stopColor="#10B981" stopOpacity="0.55"/>
            <stop offset="1" stopColor="#06B6D4" stopOpacity="0.55"/>
          </linearGradient>
        </defs>
        <path d="M0,120 C240,180 480,40 720,100 C960,160 1200,60 1440,120 L1440,200 L0,200 Z" fill="url(#wave-g1)"/>
        <path d="M0,150 C240,100 480,200 720,140 C960,80 1200,180 1440,140 L1440,200 L0,200 Z" fill="url(#wave-g2)"/>
        <path d="M0,180 C240,150 480,200 720,170 C960,140 1200,190 1440,170 L1440,200 L0,200 Z" fill="url(#wave-g3)"/>
      </svg>
    </div>
  );
}

window.QuienesSomos = QuienesSomos;