/* Traffic sources — a spec grid of the networks we buy on. Distinct from the case artwork. */
const TS_ITEMS = [
  ['meta', 'Meta Ads', L('Paid social at volume','Social pago em volume')],
  ['google', 'Google Ads', L('Search, PMax, Display','Search, PMax, Display')],
  ['tiktok-ads', 'TikTok Ads', L('Short-form direct response','Resposta direta em vídeo')],
  ['taboola', 'Taboola', L('Native at scale','Native em escala')],
  ['mediago', 'MediaGo', L('Native · tier-1 supply','Native · inventário tier-1')],
  ['revcontent', 'Revcontent', L('Native · performance feeds','Native · feeds de performance')],
  ['telegram-ads', 'Telegram Ads', L('Restricted-category reach','Alcance em categoria restrita')],
  ['x', 'X Ads', L('Crypto & finance audiences','Audiências crypto e finanças')],
];

/* Each upload has different internal padding — scale per file so the marks read at the same optical weight. */
const TS_H = { meta:58, revcontent:60, 'telegram-ads':54, 'tiktok-ads':58, x:46, google:32, taboola:28, mediago:44 };

function TrafficSources({ compact }) {
  return (
    <section className="goat-container w-sect" style={{ padding:(compact ? '24px' : 'var(--section-y)') + ' 24px' }}>
      <div style={{ display:'flex', alignItems:'flex-end', justifyContent:'space-between', gap:24, flexWrap:'wrap', marginBottom:34 }}>
        <div>
          <div className="goat-eyebrow" style={{ color:'var(--text-accent)' }}>{L('Traffic sources','Fontes de tráfego')}</div>
          <h2 style={{ margin:'16px 0 0', fontSize:'var(--text-h2)', maxWidth:620 }}>
            {L('The networks we buy on, every day.','As redes em que compramos, todos os dias.')}
          </h2>
        </div>
        <p style={{ margin:0, maxWidth:420, fontSize:15, color:'var(--text-muted)' }}>
          {L('Certified accounts, compliant creative and deposit-level tracking on every platform below — including the channels most agencies avoid.',
             'Contas certificadas, criativo em compliance e tracking a nível de depósito em todas as plataformas abaixo — inclusive nos canais que a maioria das agências evita.')}
        </p>
      </div>
      <div className="w-srcgrid" style={{ display:'grid', gridTemplateColumns:'repeat(4,1fr)',
        border:'1px solid var(--border-hairline)', borderRadius:14, overflow:'hidden' }}>
        {TS_ITEMS.map(([file, name, note], i) => (
          <div key={name} className="w-srccell" style={{ padding:'30px 26px 26px',
            borderRight:'1px solid var(--border-hairline)', borderBottom:'1px solid var(--border-hairline)' }}>
            <div style={{ height:58, display:'flex', alignItems:'center' }}>
              <img src={'sources/' + file + '.png'} alt={name} style={{ maxHeight:TS_H[file] || 34, maxWidth:168,
                objectFit:'contain', objectPosition:'left center', opacity:.82 }} />
            </div>
            <div style={{ marginTop:20, fontSize:14, color:'var(--text-primary)' }}>{name}</div>
            <div style={{ marginTop:6, fontFamily:'var(--font-mono)', fontSize:10, letterSpacing:'.1em',
              textTransform:'uppercase', color:'var(--text-faint)' }}>{note}</div>
          </div>
        ))}
      </div>
    </section>
  );
}
Object.assign(window, { TrafficSources });