/* LogoStrip.jsx — Korean media outlets as trust signal
   Change from DS reference: replaced 'Amazon/Google/Shopify' (customer logos)
   with KR media outlets where the founder has been featured.
   Rationale: spec §2.2 — for a B2C education site, "where you've been seen"
   is a stronger signal than "who your customers are". */

const LogoStrip = () => {
  const t = window.useT();
  const { lang } = React.useContext(window.LangContext);
  /* Names rendered as styled text — substitute for real logo SVGs that the
     business should drop into /assets/logos/ when available. */
  const outlets = lang === 'ko'
    ? ['매일경제',        '한국경제', 'YTN', 'EBS', 'KB금융']
    : ['Maekyung',        'Hankyung', 'YTN', 'EBS', 'KB Financial'];

  return (
    <section className="section-tight" style={{
      paddingTop: 56, paddingBottom: 24,
      background: 'linear-gradient(180deg, #ffffff 0%, #F8FAFC 100%)',
      borderBottom: '1px solid #EEF2F7',
    }}>
      <div className="section-inner" style={{ textAlign: 'center' }}>
        <div style={{
          fontFamily: 'var(--font-ko)',
          fontSize: 12, fontWeight: 600,
          color: '#94A3B8',
          letterSpacing: '0.04em',
          marginBottom: 22,
        }}>
          {t('logos.kicker')}
        </div>
        <div style={{
          display: 'flex', justifyContent: 'center',
          alignItems: 'center', gap: 0, flexWrap: 'wrap',
        }}>
          {outlets.map((n, i) => (
            <React.Fragment key={n}>
              <div style={{
                fontFamily: 'var(--font-ko)',
                fontSize: 18, fontWeight: 700,
                color: '#475569',
                letterSpacing: '-0.2px',
                padding: '0 28px',
                filter: 'grayscale(1)',
                opacity: 0.75,
                transition: 'all 200ms ease',
              }}
              onMouseEnter={e => { e.currentTarget.style.opacity = '1'; e.currentTarget.style.color = '#0B1727'; }}
              onMouseLeave={e => { e.currentTarget.style.opacity = '0.75'; e.currentTarget.style.color = '#475569'; }}
              >{n}</div>
              {i < outlets.length - 1 && (
                <span aria-hidden="true" style={{
                  width: 1, height: 14,
                  background: '#E2E8F0',
                }} />
              )}
            </React.Fragment>
          ))}
        </div>
      </div>
    </section>
  );
};

window.LogoStrip = LogoStrip;