"use client";

import { motion } from "framer-motion";
import { P, Eyebrow } from "@/components/Texts";
import { InfiniteMovingCards } from "@/components/magicui/infinite-moving-cards";



import Ai21 from '@/components/logos/Ai21';
import Claude from '@/components/logos/Claude';
import BaiduCloud from '@/components/logos/BaiduCloud';
import ByteDance from '@/components/logos/ByteDance';
import DeepSeek from '@/components/logos/DeepSeek';
import DeepMind from '@/components/logos/DeepMind';
import Minimax from '@/components/logos/Minimax';
import Mistral from '@/components/logos/Mistral';
import Moonshot from '@/components/logos/Moonshot';
import TencentCloud from '@/components/logos/TencentCloud';
import OpenAI from '@/components/logos/OpenAI';
import XAI from '@/components/logos/XAI';

const logos = [
  <Ai21 key="ai21" />,
  <Claude key="claude" />,
  <BaiduCloud key="baidu" />,
  <ByteDance key="bytedance" />,
  <DeepSeek key="deepseek" />,
  <DeepMind key="deepmind" />,
  <Minimax key="minimax" />,
  <Mistral key="mistral" />,
  <Moonshot key="moonshot" />,
  <TencentCloud key="tencent" />,
  <OpenAI key="openai" />,
  <XAI key="xai" />,
];

const row1 = logos.slice(0, 6);
const row2 = logos.slice(6);

export function Companies() {
  return (
    <div id="companies" className="relative bg-[#121212] flex flex-col items-center justify-center w-full overflow-hidden antialiased  py-4 mb-12">
      <div className="relative z-10 mx-auto w-full max-w-7xl p-4">
        {/* Logos grid */}
        <div className="flex flex-col items-center gap-y-6 text-white ">
          <InfiniteMovingCards
            items={row1}
            direction="right"
            speed="slow"
          />
          <InfiniteMovingCards
            className=""
            items={row2}
            direction="left"
            speed="slow"
          />
        </div>
      </div>
    </div>
  );
}
