/* TrustedBy — refined logo ticker, handhold-quiet */
function TrustedBy() {
  const BRANDS = [
    'Condé Nast Traveler', 'Travel + Leisure', 'AFAR',
    'The Telegraph', 'Monocle', 'New York Times',
    'Robb Report', 'Departures', 'Wallpaper*', 'Bloomberg Pursuits'
  ];
  const doubled = [...BRANDS, ...BRANDS];

  return (
    <section id="trusted-by" className="overflow-hidden"
      style={{
        background: 'var(--cream-soft)',
        borderTop: '1px solid var(--hairline)',
        borderBottom: '1px solid var(--hairline)',
        padding: '56px 0',
      }}
    >
      <div className="container px-6 lg:px-10 mb-9 flex flex-col md:flex-row items-center justify-between gap-3 text-center md:text-left">
        <p className="section-label eyebrow-dot">As seen in</p>
        <p className="text-[13px] text-[var(--body)]">
          <span className="serif-it text-[15px] text-[var(--ink)]">Twelve years</span> of trusted recommendations
        </p>
      </div>

      <div className="logo-mask overflow-hidden">
        <div className="logo-track">
          {doubled.map((name, i) => (
            <div key={`${name}-${i}`} className="flex items-center justify-center px-10 select-none">
              <span className="serif text-[20px] tracking-[-0.01em] whitespace-nowrap"
                style={{ color: 'var(--ink)', opacity: 0.55 }}>
                {name}
              </span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.TrustedBy = TrustedBy;