/* ============================================================
   Integration marquee strip + Shopify partner badge
   ============================================================ */

const STRIP_APPS = [
  ["Google Calendar", "assets/integrations/google-calendar.svg"],
  ["Gmail", "assets/integrations/gmail.svg"],
  ["Outlook", "assets/integrations/outlook.svg"],
  ["Shopify", "assets/integrations/shopify.svg"],
  ["Zendesk", "assets/integrations/zendesk.svg"],
  ["Slack", "assets/integrations/slack.svg"],
];

function Strip() {
  const { L } = useT();
  const row = STRIP_APPS.concat(STRIP_APPS, STRIP_APPS);
  return (
    <section id="integrations" aria-label={L.nav.integrations} style={{ padding: "8px 0 64px" }}>
      <div style={{ position: "relative", overflow: "hidden", maxWidth: 1240, margin: "0 auto",
        WebkitMaskImage: "linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent)",
        maskImage: "linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent)" }}>
        <div className="strip-track" style={{ display: "flex", gap: 14, width: "max-content", padding: "4px 0" }}>
          {row.map(([name, logo], i) => (
            <span key={i} className="shot" style={{ display: "inline-flex", alignItems: "center", gap: 9, padding: "11px 18px", borderRadius: 12, whiteSpace: "nowrap" }}>
              <img src={logo} alt="" aria-hidden="true" style={{ height: 18, width: "auto", flex: "none", display: "block" }} />
              <span style={{ fontSize: 13.5, fontWeight: 600, color: "var(--ink)" }}>{name}</span>
            </span>
          ))}
        </div>
      </div>
      {/* partner badge */}
      <div style={{ display: "flex", justifyContent: "center", marginTop: 36 }}>
        <div className="shot" style={{ display: "inline-flex", alignItems: "center", gap: 20, padding: "14px 26px", borderRadius: 16 }}>
          <img src="assets/shopify-partners.png" alt="Shopify Partners" style={{ height: 28, width: "auto" }} />
          <span style={{ width: 1, alignSelf: "stretch", background: "var(--line)" }}></span>
          <span>
            <span style={{ display: "block", fontSize: 13.5, fontWeight: 700, color: "var(--ink)" }}>{L.integrations.partnerTitle}</span>
            <span style={{ display: "block", fontSize: 12, color: "var(--ink-3)" }}>{L.integrations.partnerSub}</span>
          </span>
        </div>
      </div>
      <style>{`
        .strip-track { animation: stripMove 36s linear infinite; }
        @keyframes stripMove { from { transform: translateX(0); } to { transform: translateX(-33.333%); } }
        @media (prefers-reduced-motion: reduce){ .strip-track{ animation: none; } }
      `}</style>
    </section>
  );
}

Object.assign(window, { Strip });