/* burp.agency — Social proof logo strip
   Uses Clearbit Logo API: logo.clearbit.com/{domain} returns a clean
   transparent PNG of the company mark. Fallback to text on error. */

const LOGOS = [
  { name: 'Memfault',    file: 'memfault.webp',     h: 22 },
  { name: 'CodeRabbit',  file: 'coderabbit.svg',    h: 22 },
  { name: 'Alibaba',     file: 'alibaba.png',       h: 28 },
  { name: 'Zenduty',     file: 'zenduty.png',       h: 24 },
  { name: 'MalCare',     file: 'malcare.png',       h: 22 },
  { name: 'Davis Index', file: 'davis-index.png',   h: 34 },
];

const Logo = ({ l, depth = 0 }) => {
  const [failed, setFailed] = React.useState(false);
  const src = `${'../'.repeat(depth)}assets/logos/${l.file}`;
  if (failed) {
    return (
      <span style={{
        fontFamily: 'Inter, sans-serif',
        fontSize: 13, fontWeight: 600,
        letterSpacing: '0.10em',
        textTransform: 'uppercase',
        color: 'var(--color-mid-gray)',
      }}>{l.name.toUpperCase()}</span>
    );
  }
  return (
    <img
      src={src}
      alt={l.name}
      onError={() => setFailed(true)}
      style={{
        height: l.h,
        width: 'auto',
        filter: 'grayscale(1) brightness(0.25) contrast(1.4)',
        opacity: 0.65,
        transition: 'opacity .15s ease, filter .15s ease',
      }}
      onMouseEnter={e => {
        e.currentTarget.style.opacity = '1';
        e.currentTarget.style.filter = 'none';
      }}
      onMouseLeave={e => {
        e.currentTarget.style.opacity = '0.65';
        e.currentTarget.style.filter = 'grayscale(1) brightness(0.25) contrast(1.4)';
      }}
    />
  );
};

const SocialProof = ({ depth = 0 }) => {
  return (
    <div>
      <Caption>TRUSTED BY</Caption>
      <div className="proof-row" style={{
        marginTop: 20,
        display: 'grid',
        gridTemplateColumns: 'repeat(6, 1fr)',
        alignItems: 'center',
        justifyItems: 'center',
        columnGap: 'clamp(20px, 3vw, 48px)',
        rowGap: 24,
        maxWidth: 920,
      }}>
        {LOGOS.map(l => (
          <Logo key={l.name} l={l} depth={depth} />
        ))}
      </div>
    </div>
  );
};

Object.assign(window, { LOGOS, Logo, SocialProof });