"use client";

import React from "react";
import { motion } from "framer-motion";
import { H2, P } from '@/components/Texts';



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 AlibabaCloud from '@/components/logos/AlibabaCloud';
import TencentCloud from '@/components/logos/TencentCloud';
import OpenAI from '@/components/logos/OpenAI';
import XAI from '@/components/logos/XAI';

const row1 = [Ai21, Claude, BaiduCloud, ByteDance];
const row2 = [DeepSeek, DeepMind, Minimax, Mistral];
const row3 = [Moonshot, AlibabaCloud];
const row4 = [TencentCloud, OpenAI, XAI];

export function Companies() {
  return (
    <div className="relative flex h-screen w-full overflow-hidden rounded-md bg-transparent antialiased md:items-center md:justify-center">
      <div className="relative z-10 mx-auto w-full max-w-6xl p-4 pt-16">

        {/* Heading */}
        <motion.div
          className="flex flex-col justify-center max-w-4xl items-center mb-6 mx-auto"
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 1 }}
        >
          <H2 className="text-center">
            Seamlessly Deploy the World’s Leading AI Models 
          </H2>
          <P className="mt-6 text-center">
            Deploy and scale AI from top global providers on a decentralized, privacy-first infrastructure. Mycelium Cloud lets you integrate state-of-the-art intelligence into your workflows with full control, sovereignty, and cost efficiency.
          </P>
        </motion.div>

        {/* Animated Line */}
        <motion.div
          className="h-[2px] bg-neutral-400 rounded-full mx-auto mb-12"
          initial={{ width: 0 }}
          animate={{ width: "100%" }}
          transition={{ duration: 2, delay: 1 }}
        />

        {/* Logos grid */}
        <div className="flex flex-col items-center gap-y-10">
          {[row1, row2, row3, row4].map((row, rowIndex) => (
            <motion.div
              key={rowIndex}
              className="flex flex-wrap justify-center items-center gap-x-8 sm:gap-x-10"
              initial="hidden"
              animate="visible"
              variants={{
                visible: {
                  transition: {
                    staggerChildren: 0.15,
                    delayChildren: 2.8 + rowIndex * 0.5, // Stagger rows
                  },
                },
              }}
            >
              {row.map((Logo, i) => (
                <motion.div
                  key={i}
                  className="flex justify-center"
                  variants={{
                    hidden: { opacity: 0, y: 30 },
                    visible: { opacity: 1, y: 0 },
                  }}
                  transition={{ duration: 0.6, ease: "easeOut" }}
                >
                  <div className="text-[#2F3178]"><Logo /></div>
                </motion.div>
              ))}
            </motion.div>
          ))}
        </div>
      </div>
    </div>
  );
}