function Marquee() {
  const tools = [
    "openai", "anthropic", "googlegemini", "mistralai", "ollama",
    "n8n", "make", "zapier", "slack", "notion",
    "shopify", "stripe", "xero", "quickbooks", "canva",
    "googledocs", "microsoft", "microsoftoffice", "meta", "cloudflare"
  ];
  const labels = {
    openai: "OpenAI", anthropic: "Claude", googlegemini: "Gemini",
    mistralai: "Mistral", ollama: "Ollama", n8n: "n8n",
    make: "Make", zapier: "Zapier", slack: "Slack", notion: "Notion",
    shopify: "Shopify", stripe: "Stripe", xero: "Xero",
    quickbooks: "QuickBooks", canva: "Canva", googledocs: "Google Docs",
    microsoft: "Microsoft", microsoftoffice: "MS 365", meta: "Llama",
    cloudflare: "Cloudflare"
  };

  // Duplicate for seamless loop
  const loop = [...tools, ...tools];

  return (
    <section className="marquee-section">
      <div className="marquee-label">We work with the tools you already pay for · and a few you'll wish you did</div>
      <div className="marquee">
        <div className="marquee-track">
          {loop.map((t, i) => (
            <div key={i} className="tool-pill">
              <span
                className="icon"
                style={{
                  WebkitMaskImage: `url(public/icons/${t}.svg)`,
                  maskImage: `url(public/icons/${t}.svg)`,
                }}
              />
              {labels[t]}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.Marquee = Marquee;