function LogoCell({ src, alt, i }) {
  const [status, setStatus] = useState('loading'); // loading | ok | err

  if (status === 'err') return null;

  return (
    <Reveal delay={i * 40} className={`logo-cell ${status === 'ok' ? 'logo-loaded' : 'logo-loading'}`}
      style={{ position: 'relative', minHeight: status === 'ok' ? 140 : 0, overflow: 'hidden' }}>

      {/* Corner brackets — only on loaded cells, only on desktop */}
      {status === 'ok' && [['tl',0,0],['tr',null,0],['bl',0,null],['br',null,null]].map(([k,l,t]) => (
        <span key={k} aria-hidden className="logo-bracket" style={{
          position: 'absolute', zIndex: 2,
          left: l != null ? 0 : 'auto', right: l == null ? 0 : 'auto',
          top: t != null ? 0 : 'auto', bottom: t == null ? 0 : 'auto',
          width: 18, height: 18,
          borderTop: t != null ? '1px solid var(--line)' : 'none',
          borderBottom: t == null ? '1px solid var(--line)' : 'none',
          borderLeft: l != null ? '1px solid var(--line)' : 'none',
          borderRight: l == null ? '1px solid var(--line)' : 'none',
          transition: 'border-color .4s', pointerEvents: 'none',
        }} />
      ))}

      <div style={{
        width: '100%', minHeight: status === 'ok' ? 140 : 0,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        padding: status === 'ok' ? '28px 20px' : 0,
        transition: 'min-height .3s',
      }}>
        <img
          src={src}
          alt={alt}
          onLoad={(e) => {
            // naturalWidth === 0 means the response wasn't a valid image
            if (e.target.naturalWidth > 0) setStatus('ok');
            else setStatus('err');
          }}
          onError={() => setStatus('err')}
          style={{
            maxWidth: '100%', maxHeight: 104, objectFit: 'contain',
            opacity: status === 'ok' ? 1 : 0,
            transition: 'opacity .4s',
            // help white logos show on light background
            filter: 'drop-shadow(0 0 0 rgba(0,0,0,0))',
          }}
        />
      </div>
    </Reveal>
  );
}

function Logos() {
  const logos = Array.from({ length: 16 }, (_, i) => {
    const n = String(i + 1).padStart(2, '0');
    return { src: `images/logos/logo-${n}.webp`, alt: `Cliente ${n}` };
  });

  return (
    <Section id="logos" pad="md" style={{ borderTop: '1px solid var(--line-soft)' }}>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 3fr', gap: 60, marginBottom: 60 }} className="logos-head">
          <Label n="01">Prova</Label>
          <MaskLines
            tag="h2"
            className="serif"
            style={{ fontSize: 'clamp(28px, 3.5vw, 44px)', lineHeight: 1.1, letterSpacing: '-0.02em', maxWidth: 800 }}
            lines={[
              <>Marcas que pararam de <em className="italic">chutar</em>.</>,
              <>E passaram a <em className="italic">decidir.</em></>,
            ]}
          />
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0 }} className="logos-grid">
          {logos.map((logo, i) => (
            <LogoCell key={i} src={logo.src} alt={logo.alt} i={i} />
          ))}
        </div>
      </div>
      <style>{`
        .logo-cell:hover .logo-bracket { border-color: var(--accent) !important; }
        .logo-loading { display: none !important; }
        @media (max-width: 820px) {
          .logos-head { grid-template-columns: 1fr !important; gap: 20px !important; }
          .logos-grid { grid-template-columns: repeat(2, 1fr) !important; }
          .logo-bracket { display: none !important; }
        }
      `}</style>
    </Section>
  );
}

window.Logos = Logos;