/* Partners — two belts running in opposite directions */

function Partners({ lang, t }) {
  const beltA = useMarquee(50);
  const beltB = useMarquee(50);
  const partners = [
    { en: 'Aramex', ar: 'أرامكس' },
    { en: 'SMSA', ar: 'سمسا' },
    { en: 'JT Express', ar: 'جي تي إكسبرس' },
    { en: 'iMile', ar: 'آي مايل' },
    { en: 'Redbox', ar: 'رد بوكس' },
    { en: 'Aymakan', ar: 'اي مكان' },
    { en: 'Delivery Now', ar: 'دليفري ناو' },
    { en: 'Logistiq', ar: 'لوجستك' },
    { en: 'Mijet', ar: 'مايجت' },
    { en: 'Delex', ar: 'ديلكس' },
    { en: 'Shipa', ar: 'شيبا' },
    { en: 'ATAQ', ar: 'اطاق' },
    { en: 'Thabit', ar: 'ثابت' },
    { en: 'Wepik', ar: 'ويبيك' },
  ];
  const rowA = partners.slice(0, 7);
  const rowB = partners.slice(7);
  const chip = (p, i) => (
    <div key={i} className="partner-chip">
      <span className="partner-chip-dot"></span>
      <span className="name">{lang === 'ar' ? p.ar : p.en}</span>
      {lang === 'ar' && <span className="name-en">{p.en}</span>}
    </div>
  );

  return (
    <section className="partners section" id="partners">
      <div className="container">
        <div className="partners-head reveal">
          <div>
            <span className="eyebrow"><span className="dot"></span>{t.partners.eyebrow}</span>
            <h2 className="section-title" style={{ marginTop: 16 }}>
              {t.partners.title_1}<em>{t.partners.title_em}</em>
            </h2>
          </div>
          <p className="section-subtitle">{t.partners.sub}</p>
        </div>
      </div>

      <div className="logo-marquee">
        <div className="logo-marquee-track" ref={beltA}>
          {[...rowA, ...rowA, ...rowA].map(chip)}
        </div>
      </div>
      <div className="logo-marquee reverse">
        <div className="logo-marquee-track" ref={beltB}>
          {[...rowB, ...rowB, ...rowB].map(chip)}
        </div>
      </div>
    </section>
  );
}

window.Partners = Partners;