/* Integrations — real platform logos on a brand band */

function Integrations({ lang, t }) {
  const platforms = [
    { ar: 'سلة', en: 'Salla', logo: 'assets/platforms/salla.webp', scale: 1 },
    { ar: 'زد', en: 'Zid', logo: 'assets/platforms/zid.webp', scale: 1.12 },
    { ar: 'شوبيفاي', en: 'Shopify', logo: 'assets/platforms/shopify.png', scale: 1.08 },
    { ar: 'ووكومرس', en: 'WooCommerce', logo: 'assets/platforms/woocommerce.png', scale: 1.06 },
    { ar: 'ربط خاص', en: 'Custom API', logo: 'assets/platforms/api.png', scale: 0.94 },
  ];

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

        <div className="integrations-grid reveal-stagger">
          {platforms.map((p, i) => (
            <div key={i} className="integration-card" style={{ '--logo-scale': p.scale }}>
              <span className="integration-logo">
                <img src={p.logo} alt={lang === 'ar' ? p.ar : p.en} loading="lazy" />
              </span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Integrations = Integrations;