/* global React */

const ROW_1 = [
  "LangGraph", "n8n", "Temporal", "Airflow", "OpenAI", "Anthropic", "Pinecone", "Weaviate",
  "Supabase", "Postgres", "Redis", "Vercel", "AWS Lambda", "Cloudflare Workers", "Snowflake",
];
const ROW_2 = [
  "Slack", "HubSpot", "Salesforce", "Linear", "Notion", "Stripe", "Twilio", "SendGrid",
  "Webhook", "Zapier", "Make", "Retell AI", "WhatsApp Business", "Gmail API", "Calendly",
];

function Integrations() {
  // Duplicate row contents so marquee loops seamlessly
  const r1 = [...ROW_1, ...ROW_1];
  const r2 = [...ROW_2, ...ROW_2];
  return (
    <section className="at-int">
      <div className="at-int-head">
        <div className="at-eyebrow">Stack</div>
        <p className="at-body" style={{ margin: 0 }}>
          We integrate with the tools you already run. Forty-two of them, last we counted.
        </p>
      </div>

      <div className="at-int-row">
        <div className="at-int-track">
          {r1.map((name, i) => (
            <span key={`r1-${i}`} className="at-int-chip" data-cursor-label={name.toLowerCase()}>
              <span className="at-int-chip-dot"></span>
              {name}
            </span>
          ))}
        </div>
      </div>
      <div className="at-int-row">
        <div className="at-int-track at-int-track--reverse">
          {r2.map((name, i) => (
            <span key={`r2-${i}`} className="at-int-chip" data-cursor-label={name.toLowerCase()}>
              <span className="at-int-chip-dot at-int-chip-dot--muted"></span>
              {name}
            </span>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Integrations = Integrations;