/* global React, Eyebrow, GlassCard, Icon */

// Real client logos — each rendered grayscale/white via CSS filter so the
// wall reads as one cohesive group. Hover lifts to full white + slight scale.
const CLIENTS = [
{ name: 'Toyota', src: 'assets/logos/toyota.svg', invert: true, scale: 1.0 },
{ name: 'Bancor', src: 'assets/logos/bancor.png', invert: false, scale: 1.0 },
{ name: 'Farmacity', src: 'assets/logos/farmacity.svg', invert: true, scale: 0.95 },
{ name: 'Banco Hipotecario', src: 'assets/logos/banco-hipotecario.svg', invert: true, scale: 0.9 },
{ name: 'Arcos Dorados', src: 'assets/logos/arcos-dorados.png', invert: true, scale: 1.0 },
{ name: 'Whalemate', src: 'assets/logos/whalemate.svg', invert: true, scale: 0.9 },
{ name: 'Multipago', src: 'assets/logos/multipago.png', invert: true, scale: 1.0 },
{ name: 'Fidelitas', src: 'assets/logos/fidelitas.png', invert: true, scale: 1.0 },
{ name: 'X-28 Alarmas', src: 'assets/logos/x28-alarmas.webp', invert: false, scale: 0.85 },
{ name: 'Autopistas del Sol', src: 'assets/logos/autopistas-del-sol.png', invert: false, scale: 1.0 },
{ name: 'SRK', src: 'assets/logos/srk.webp', invert: true, scale: 1.0 }];




const TESTIMONIALS = [
{
  quote: 'El nivel de atención al detalle en sus reportes y trato fue excepcional. Sentimos que entendieron nuestras urgencias y necesidades, brindándonos la solución con mucha agilidad.',
  name: 'Mateo Bovio', role: 'CEO · Whalemate', initials: 'MB', color: '#EC008C'
},
{
  quote: 'Optamos por el Plan High y en solo unas semanas pudimos avanzar en un ordenamiento de procesos y herramientas en un tiempo mucho menor del que esperábamos.',
  name: 'José Bria', role: 'CTO · Aconcagua Energía', initials: 'JB', color: '#A335E7'
}];


const SocialProof = () =>
<section id="clientes" data-screen-label="07 Social Proof" style={{ padding: '120px 5vw', position: 'relative' }}>
    <div style={{ maxWidth: 1280, margin: '0 auto' }}>
      <div style={{ textAlign: 'center', marginBottom: 56 }}>
        <Eyebrow>Empresas que confían en nosotros</Eyebrow>
      </div>

      {/* Logo wall */}
      <div style={{
      display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 1,
      background: 'rgba(255,255,255,.06)', border: '1px solid rgba(255,255,255,.06)',
      borderRadius: 20, overflow: 'hidden', marginBottom: 80
    }}>
        {CLIENTS.map((c, i) => {
        // Each logo gets a filter chain that flattens it to a grayscale/white silhouette.
        // For dark-on-white logos (most), invert + grayscale maps the marks to white-ish.
        // For light-on-transparent logos (Bancor, X-28, Autopistas), just desaturate.
        const baseFilter = c.invert ?
        'grayscale(1) brightness(0) invert(1) opacity(.55)' :
        'grayscale(1) brightness(1.4) opacity(.6)';
        const hoverFilter = c.invert ?
        'grayscale(1) brightness(0) invert(1) opacity(1)' :
        'grayscale(1) brightness(1.6) opacity(1)';
        return (
          <div key={c.name} title={c.name} style={{
            background: 'var(--brotek-black)', padding: '24px 18px',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            height: 110, transition: 'transform .25s ease'
          }}
          onMouseEnter={(e) => {
            e.currentTarget.style.transform = 'scale(1.04)';
            const img = e.currentTarget.querySelector('img');
            if (img) img.style.filter = hoverFilter;
          }}
          onMouseLeave={(e) => {
            e.currentTarget.style.transform = 'none';
            const img = e.currentTarget.querySelector('img');
            if (img) img.style.filter = baseFilter;
          }}>
              <img
              src={c.src}
              alt={c.name}
              loading="lazy"
              style={{
                maxHeight: `${56 * c.scale}px`,
                maxWidth: `${85 * c.scale}%`,
                width: 'auto', height: 'auto',
                objectFit: 'contain',
                filter: baseFilter,
                transition: 'filter .25s ease'
              }} />
            
            </div>);

      })}
        {/* Trailing tile — bold counter, magenta accent, signals depth of the roster */}
        <div style={{
        position: 'relative',


        display: 'flex', flexDirection: 'column',
        alignItems: 'center', justifyContent: 'center',
        gap: 4, overflow: 'hidden',
        background: 'linear-gradient(135deg, rgba(236, 0, 140, 0.16) 0%, rgba(163, 53, 231, 0.1) 60%, rgba(23, 23, 23, 0) 100%)',
        height: '100%', minHeight: 110
      }}>
          {/* Subtle dot grid texture */}
          <div aria-hidden style={{
          position: 'absolute', inset: 0,
          backgroundImage: 'radial-gradient(rgba(255,255,255,0.10) 1px, transparent 1px)',
          backgroundSize: '12px 12px', opacity: 0.5, pointerEvents: 'none'
        }} />
          <div style={{
          fontFamily: 'var(--font-display)', fontWeight: 600,
          fontSize: 32, lineHeight: 1, letterSpacing: '-0.025em',
          color: 'var(--fg)', position: 'relative', zIndex: 1,
          display: 'flex', alignItems: 'baseline', gap: 2
        }}>
            <span style={{ color: '#EC008C', fontSize: 22, marginRight: 2 }}>+</span>50
          </div>
          <div style={{
          fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '.18em',
          textTransform: 'uppercase', color: 'var(--fg-muted)',
          position: 'relative', zIndex: 1
        }}>
            empresas más
          </div>
        </div>
      </div>

      {/* Stats strip */}
      <div style={{
      display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 1,
      background: 'rgba(255,255,255,.06)', border: '1px solid rgba(255,255,255,.06)',
      borderRadius: 24, overflow: 'hidden', marginBottom: 80
    }}>
        {[
      { n: '12K+', l: 'Horas de asesoramiento' },
      { n: '98%', l: 'Satisfacción de clientes' },
      { n: '14', l: 'Países donde operamos' },
      { n: '8K+', l: 'Horas hackeando' }].
      map((s) =>
      <div key={s.l} style={{
        background: 'var(--brotek-black)', padding: '32px 24px',
        display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'flex-start'
      }}>
            <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 44,
          color: 'var(--fg)', letterSpacing: '-0.04em', lineHeight: 1,
          background: 'linear-gradient(120deg, #fff 0%, #BFB9BC 100%)',
          WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent'
        }}>{s.n}</div>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, marginTop: 10,
          letterSpacing: '.10em', textTransform: 'uppercase', color: 'var(--fg-subtle)' }}>{s.l}</div>
          </div>
      )}
      </div>

      {/* Testimonials */}
      <div style={{ marginBottom: 36, textAlign: 'center' }}>
        <Eyebrow>Qué dicen nuestros clientes</Eyebrow>
        <h2 style={{
        fontFamily: 'var(--font-display)', fontWeight: 600,
        fontSize: 'clamp(28px, 3vw, 44px)', color: 'var(--fg)',
        marginTop: 14, letterSpacing: '-0.025em'
      }}>Trato 1:1 — y resultados que se notan<span style={{ color: 'var(--brotek-magenta)' }}>.</span></h2>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 24 }}>
        {TESTIMONIALS.map((t, i) =>
      <GlassCard key={i} radius={28} style={{ padding: 36, position: 'relative' }}>
            {/* Big quote mark */}
            <div style={{
          position: 'absolute', top: 18, right: 28, fontFamily: 'var(--font-display)',
          fontSize: 100, lineHeight: 1, color: t.color, opacity: .25, fontWeight: 700, textAlign: "left"
        }}>"</div>
            <p style={{
          fontFamily: 'var(--font-display)', fontSize: 19, lineHeight: 1.5,
          color: 'var(--fg)', marginBottom: 32, fontWeight: 400, letterSpacing: '-0.005em',
          position: 'relative', zIndex: 1
        }}>"{t.quote}"</p>
            <div style={{ display: 'flex', alignItems: 'center', gap: 14, paddingTop: 24, borderTop: '1px solid rgba(255,255,255,.08)' }}>
              <div style={{
            width: 44, height: 44, borderRadius: '50%',
            background: `linear-gradient(135deg, ${t.color}, ${t.color}66)`,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontFamily: 'var(--font-display)', fontWeight: 600, color: '#fff', fontSize: 14,
            border: '1px solid rgba(255,255,255,.15)'
          }}>{t.initials}</div>
              <div>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600,
              fontSize: 14, color: 'var(--fg)' }}>{t.name}</div>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11,
              color: 'var(--fg-subtle)', letterSpacing: '.06em', textTransform: 'uppercase' }}>{t.role}</div>
              </div>
            </div>
          </GlassCard>
      )}
      </div>
    </div>
  </section>;


window.SocialProof = SocialProof;