// TrustStrip — slim numeric statement strip (replaces LogoMarquee)
// 3 numbers, no fake logos, no marquee. Calm, authoritative.
function TrustStrip() {
  const { isMobile } = useBreakpoint();


  const stats = [
    { num: 100,  suffix: '+', label: 'kreativ měsíčně',    sub: 'napříč klienty' },
    { num: 10, suffix: '×', label: 'rychleji než produkční studio', sub: 'bez castingu, focení a čekání' },
    { num: 14,   suffix: '',  label: 'let v marketingu',   sub: 'pracujeme pod agenturou' },
  ];

  return (
    <section data-screen-label="02 Trust strip" style={{
      borderTop: '1px solid var(--border-subtle)',
      background: 'var(--bg-base)',
      padding: isMobile ? '40px 0' : '56px 0',
    }}>
      <div style={{
        maxWidth: '1280px',
        margin: '0 auto',
        padding: isMobile ? '0 24px' : '0 32px',
        display: 'grid',
        gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)',
        gap: isMobile ? '0' : '24px',
      }}>
        {stats.map((s, i) => (
          <Reveal key={i} delay={i * 100} y={20}>
            <div style={{
              display: 'flex',
              flexDirection: 'column',
              gap: '8px',
              alignItems: 'center',
              textAlign: 'center',
              borderLeft: !isMobile && i > 0 ? '1px solid var(--border-subtle)' : 'none',
              borderTop: isMobile && i > 0 ? '1px solid var(--border-subtle)' : 'none',
              paddingLeft: !isMobile && i > 0 ? '24px' : '0',
              padding: isMobile ? '16px 0' : undefined,
            }}>
              <span style={{
                fontFamily: 'var(--font-display)',
                fontWeight: 700,
                fontSize: isMobile ? '40px' : 'clamp(48px, 5vw, 72px)',
                lineHeight: 1,
                letterSpacing: '-0.03em',
                color: 'var(--text-primary)',
                whiteSpace: 'nowrap',
              }}>
                <CountUp to={s.num} duration={1600} prefix={s.prefix || ''} suffix={s.suffix} thousands={s.thousands || false} />
              </span>
              <span style={{
                fontFamily: 'var(--font-body)',
                fontSize: isMobile ? '13px' : '15px',
                color: 'var(--text-primary)',
                fontWeight: 500,
              }}>{s.label}</span>
              <span style={{
                fontFamily: 'var(--font-mono)',
                fontSize: isMobile ? '10px' : '11px',
                color: 'var(--text-tertiary)',
                letterSpacing: '0.12em',
                textTransform: 'uppercase',
              }}>{s.sub}</span>
            </div>
          </Reveal>
        ))}
      </div>
    </section>
  );
}

window.TrustStrip = TrustStrip;