/* Trusted by logos */

function Logos() {
  // Real client brands — screenshot thumbnails + name
  const clients = [
    { name: 'Bloom Bodysuits',  img: 'images/bloombodysuit.jpg',  vertical: 'Activewear' },
    { name: 'Lilliput World',   img: 'images/lilliput.jpg',       vertical: 'Kidswear'   },
    { name: 'Mahina',           img: 'images/mahina.jpg',         vertical: 'Wellness'   },
    { name: 'UNTAMD',           img: 'images/untamd.jpg',         vertical: 'Jewelry'    },
    { name: 'Matrix Forex',     img: 'images/matrixforex.jpg',    vertical: 'Fintech'    },
  ];

  // Text-only brands
  const textBrands = [
    { name: 'MATRIX',            style: { fontFamily: 'var(--font-sans)', fontWeight: 700, letterSpacing: '0.18em', fontSize: 14 } },
    { name: 'eTravelSim',        style: { fontFamily: 'var(--font-mono)', fontWeight: 500, fontSize: 15 } },
    { name: 'Bloom Bodysuits',   style: { fontFamily: 'Georgia, serif', fontWeight: 400, fontStyle: 'italic', fontSize: 18 } },
    { name: 'NICOBAR',           style: { fontFamily: 'var(--font-sans)', fontWeight: 600, letterSpacing: '0.14em', fontSize: 14 } },
    { name: 'LoanOnTrust',       style: { fontFamily: 'var(--font-sans)', fontWeight: 600, letterSpacing: '0.02em', fontSize: 15 } },
    { name: 'AirFill Solutions', style: { fontFamily: 'var(--font-mono)', fontWeight: 500, fontSize: 13, letterSpacing: '0.04em' } },
  ];

  const stream = [...clients, ...clients];
  const textStream = [...textBrands, ...textBrands];

  return (
    <section
      data-screen-label="03 Trusted by"
      className="tight"
      style={{ paddingTop: 48, paddingBottom: 48, overflow: 'hidden' }}
    >
      <div className="container">
        <div style={{ textAlign: 'center', marginBottom: 32 }}>
          <span className="mono-label">Trusted by top brands across 14 countries</span>
        </div>

        {/* Row 1 — real client screenshot cards */}
        <div style={{
          overflow: 'hidden',
          maskImage: 'linear-gradient(to right, transparent, black 5%, black 95%, transparent)',
          WebkitMaskImage: 'linear-gradient(to right, transparent, black 5%, black 95%, transparent)',
          marginBottom: 16,
        }}>
          <div className="marquee" style={{ gap: 16, animationDuration: '32s' }}>
            {stream.map((c, i) => (
              <div key={i} style={{
                flexShrink: 0,
                width: 220, height: 120,
                borderRadius: 12, overflow: 'hidden',
                position: 'relative',
                border: '1px solid var(--hairline-2)',
                boxShadow: '0 4px 16px -8px rgba(10,15,12,.1)',
              }}>
                <img
                  src={c.img}
                  alt={c.name}
                  style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'top', display: 'block', filter: 'grayscale(20%)' }}
                />
                <div style={{
                  position: 'absolute', bottom: 0, left: 0, right: 0,
                  padding: '20px 10px 8px',
                  background: 'linear-gradient(to top, rgba(10,15,12,.7) 0%, transparent 100%)',
                  display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between',
                }}>
                  <span style={{ color: 'white', fontWeight: 600, fontSize: 12, letterSpacing: '-0.01em' }}>{c.name}</span>
                  <span style={{ fontFamily: 'var(--font-mono)', fontSize: 9, color: 'rgba(255,255,255,.7)', letterSpacing: '0.06em', textTransform: 'uppercase' }}>{c.vertical}</span>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Row 2 — text logos (reversed) */}
        <div style={{
          overflow: 'hidden',
          maskImage: 'linear-gradient(to right, transparent, black 6%, black 94%, transparent)',
          WebkitMaskImage: 'linear-gradient(to right, transparent, black 6%, black 94%, transparent)',
        }}>
          <div className="marquee marquee--slow marquee--reverse" style={{ gap: 72 }}>
            {textStream.map((l, i) => (
              <div key={i} style={{
                display: 'inline-flex', alignItems: 'center',
                color: 'var(--ink-soft)', opacity: 0.55,
                whiteSpace: 'nowrap',
                ...l.style,
              }}>
                {l.name}
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

window.Logos = Logos;