// Diferenciadores.jsx — "Lo que nos distingue" highlight section

const PDDiferenciadores = () => {
  return (
    <section id="diferenciadores" style={{ background: '#fff', padding: '100px 5%', borderTop: '1px solid #eef1f6' }}>
      <div className="container">
        <div style={{ maxWidth: 720, marginBottom: 56 }}>
          <div className="eyebrow reveal" style={{ marginBottom: 16 }}><span className="dot"></span>LO QUE NOS DISTINGUE</div>
          <h2 className="display reveal" style={{ fontSize: 'clamp(34px, 4.5vw, 56px)', fontWeight: 700, color: '#0d1b3e', marginBottom: 18, lineHeight: 1.05 }}>
            Dos detalles pequeños que <span style={{ color: 'var(--accent-dark)' }}>cambian toda la experiencia.</span>
          </h2>
          <p className="reveal" style={{ fontSize: 17, color: '#44506a', maxWidth: 560, lineHeight: 1.65 }}>
            Detrás de cada foto hay decisiones operativas que marcan la diferencia entre "otra sesión más" y un servicio que realmente le sirve a la escuela.
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(400px, 1fr))', gap: 24 }}>
          {/* Card 1 — Single shoot, double output */}
          <div className="reveal" style={{
            position: 'relative', padding: 36, borderRadius: 20,
            background: 'linear-gradient(145deg, #0d1b3e 0%, #0a0e1f 100%)',
            color: '#fff', overflow: 'hidden',
          }}>
            <div style={{ position: 'absolute', top: -40, right: -40, width: 200, height: 200, borderRadius: '50%', background: 'radial-gradient(circle, rgba(46,203,177,0.18) 0%, transparent 70%)', pointerEvents: 'none' }} />

            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 24, position: 'relative' }}>
              <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, padding: '4px 10px', borderRadius: 4, background: 'rgba(46,203,177,0.15)', color: 'var(--accent)', letterSpacing: '0.12em', fontWeight: 700 }}>01 · OPERATIVO</div>
            </div>

            {/* Visual: photo → splits into portrait + credential */}
            <div style={{ position: 'relative', marginBottom: 28, height: 140 }}>
              {/* Source photo */}
              <div style={{ position: 'absolute', left: 0, top: 20, width: 100, height: 100, borderRadius: 10, background: 'linear-gradient(135deg, #2ecbb1, #8b5cf6)', display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: '0 10px 30px rgba(46,203,177,0.3)' }}>
                <svg width="42" height="42" viewBox="0 0 24 24" fill="none" stroke="#0d1b3e" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
                  <circle cx="12" cy="7" r="4"/>
                </svg>
              </div>
              {/* Arrow */}
              <svg width="60" height="60" viewBox="0 0 60 60" style={{ position: 'absolute', left: 108, top: 40 }}>
                <path d="M 5 30 L 50 30 M 42 22 L 50 30 L 42 38" stroke="rgba(46,203,177,0.6)" strokeWidth="1.5" fill="none" strokeLinecap="round" strokeDasharray="3 3"/>
              </svg>
              {/* Output 1 — Portrait print */}
              <div style={{ position: 'absolute', right: 90, top: 0, width: 72, height: 90, borderRadius: 6, background: '#fff', padding: 5, transform: 'rotate(-4deg)', boxShadow: '0 8px 20px rgba(0,0,0,0.3)' }}>
                <div style={{ width: '100%', height: '78%', background: 'linear-gradient(180deg, #b8d4ff, #f0e8d8)', borderRadius: 3 }}></div>
                <div style={{ fontSize: 7, textAlign: 'center', color: '#0d1b3e', fontWeight: 600, marginTop: 3, letterSpacing: '0.05em' }}>RETRATO</div>
              </div>
              {/* Output 2 — ID card */}
              <div style={{ position: 'absolute', right: 0, top: 30, width: 85, height: 55, borderRadius: 6, background: '#fff', padding: 5, transform: 'rotate(6deg)', display: 'flex', gap: 4, boxShadow: '0 8px 20px rgba(0,0,0,0.3)' }}>
                <div style={{ width: 32, height: '100%', background: 'linear-gradient(180deg, #b8d4ff, #f0e8d8)', borderRadius: 2 }}></div>
                <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'space-between', padding: '2px 0' }}>
                  <div style={{ height: 3, background: '#2ecbb1', width: '70%', borderRadius: 2 }}></div>
                  <div style={{ height: 2, background: '#ccc', borderRadius: 1 }}></div>
                  <div style={{ height: 2, background: '#ccc', width: '80%', borderRadius: 1 }}></div>
                  <div style={{ fontSize: 5, color: '#0d1b3e', fontWeight: 700, letterSpacing: '0.1em' }}>ID · 2026</div>
                </div>
              </div>
            </div>

            <h3 className="display" style={{ fontSize: 24, fontWeight: 700, marginBottom: 14, lineHeight: 1.15 }}>
              Una sola sesión.<br/>
              <span style={{ color: 'var(--accent)' }}>Retrato + credencial profesional.</span>
            </h3>
            <p style={{ fontSize: 15, color: 'rgba(255,255,255,0.7)', lineHeight: 1.65, marginBottom: 20 }}>
              La fotografía que tomamos para el retrato escolar se usa también en la credencial del alumno. Todos los estudiantes tienen una imagen de calidad profesional en su ID, sin tener que agendar una segunda cita ni pagar una toma adicional.
            </p>
            <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
              <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, padding: '6px 12px', borderRadius: 9999, background: 'rgba(46,203,177,0.12)', color: 'var(--accent)', fontWeight: 600 }}>✓ Sin dobles citas</div>
              <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, padding: '6px 12px', borderRadius: 9999, background: 'rgba(46,203,177,0.12)', color: 'var(--accent)', fontWeight: 600 }}>✓ Sin costo extra</div>
              <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, padding: '6px 12px', borderRadius: 9999, background: 'rgba(46,203,177,0.12)', color: 'var(--accent)', fontWeight: 600 }}>✓ 100% alumnos cubiertos</div>
            </div>
          </div>

          {/* Card 2 — 1:1 Digital archive for school */}
          <div className="reveal" style={{
            position: 'relative', padding: 36, borderRadius: 20,
            background: '#f7f9fc', border: '1px solid #eef1f6',
            color: '#0d1b3e', overflow: 'hidden',
          }}>
            <div style={{ position: 'absolute', top: -60, right: -60, width: 220, height: 220, borderRadius: '50%', background: 'radial-gradient(circle, rgba(139,92,246,0.1) 0%, transparent 70%)', pointerEvents: 'none' }} />

            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 24, position: 'relative' }}>
              <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, padding: '4px 10px', borderRadius: 4, background: '#e8faf7', color: 'var(--accent-dark)', letterSpacing: '0.12em', fontWeight: 700 }}>02 · ENTREGA</div>
            </div>

            {/* Visual: folder tree / file grid */}
            <div style={{ position: 'relative', marginBottom: 28, height: 140, background: '#fff', borderRadius: 12, padding: 16, border: '1px solid #eef1f6', overflow: 'hidden' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 10, paddingBottom: 8, borderBottom: '1px solid #eef1f6' }}>
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#8b5cf6" strokeWidth="2"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>
                <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, color: '#0d1b3e', fontWeight: 600 }}>ColegioVerdad_2026/</div>
                <div style={{ marginLeft: 'auto', fontFamily: "'JetBrains Mono', monospace", fontSize: 9, color: '#8d98b3' }}>1,247 archivos</div>
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 4 }}>
                {Array.from({ length: 18 }).map((_, i) => (
                  <div key={i} style={{
                    aspectRatio: '3/4',
                    background: `linear-gradient(${(i * 23) % 360}deg, hsl(${(i * 37) % 360}, 40%, 80%), hsl(${(i * 61) % 360}, 50%, 65%))`,
                    borderRadius: 3,
                    position: 'relative',
                  }}>
                    {i === 3 && <div style={{ position: 'absolute', inset: 0, background: 'rgba(46,203,177,0.3)', borderRadius: 3, border: '1.5px solid var(--accent)' }} />}
                  </div>
                ))}
              </div>
            </div>

            <h3 className="display" style={{ fontSize: 24, fontWeight: 700, marginBottom: 14, lineHeight: 1.15 }}>
              Archivo digital 1:1<br/>
              <span style={{ color: 'var(--accent-dark)' }}>siempre en manos de la escuela.</span>
            </h3>
            <p style={{ fontSize: 15, color: '#44506a', lineHeight: 1.65, marginBottom: 20 }}>
              Entregamos a la dirección todas las fotos, organizadas por grupo y alumno. Listas para documentos oficiales, archivo institucional, diplomas, premiaciones o cualquier necesidad futura. Tu escuela nunca depende de nosotros para volver a usar una foto.
            </p>
            <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
              <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, padding: '6px 12px', borderRadius: 9999, background: '#e8faf7', color: 'var(--accent-dark)', fontWeight: 600 }}>✓ Entrega completa</div>
              <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, padding: '6px 12px', borderRadius: 9999, background: '#e8faf7', color: 'var(--accent-dark)', fontWeight: 600 }}>✓ Organizado por grupo</div>
              <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, padding: '6px 12px', borderRadius: 9999, background: '#e8faf7', color: 'var(--accent-dark)', fontWeight: 600 }}>✓ Uso institucional libre</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { PDDiferenciadores });