"use client";

import React from "react";
import { motion } from "framer-motion";
import { H2, P } 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-black flex flex-col items-center justify-center w-full overflow-hidden antialiased py-12 -top-20">
      <div className="relative z-10 mx-auto w-full max-w-6xl p-4">

        {/* Heading */}
        <motion.div
          className="flex flex-col justify-center max-w-4xl items-center mb-8 mx-auto"
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 1 }}
        >
          <P className="text-gray-100 text-center mb-6">
            Mycelium Cloud allows you to deploy and scale AI agents from top global providers on a decentralized, privacy-first infrastructure.
          </P>
        </motion.div>

        {/* 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>
  );
}