"use client";

import { cn } from "@/lib/utils";
import { Marquee } from "@/components/ui/marquee";

const supportedBy = [
    { name: "Microsoft", logo: "https://upload.wikimedia.org/wikipedia/commons/4/44/Microsoft_logo.svg" },
    { name: "NVIDIA", logo: "https://www.nvidia.com/content/dam/en-zz/Solutions/about-nvidia/logo-and-brand/02-nvidia-logo-color-grn-500x200-4c25-p@2x.png" },
    { name: "Google for Startups", logo: "https://media.licdn.com/dms/image/v2/C560BAQFlPW0-1gr2pQ/company-logo_200_200/company-logo_200_200/0/1630602785941/launchpad_program_logo?e=2147483647&v=beta&t=Ppi0tawv2zHK00xSgrnOG7jNpmf7vejp37sMZDYEb5U" },
];

const partners = [
    "https://hoonartek.com/wp-content/uploads/2025/01/Hoonartek-V25.svg",
    "https://rpatech.b-cdn.net/wp-content/uploads/2025/01/colored.png",
    "https://www.open-infotech.com/content/images/2024/08/Group-26082-1.svg",
    "https://thecompetenza.com/wp-content/uploads/2023/04/comppp111.png",
    "https://www.tftus.com/wp-content/uploads/2021/01/logo-1.png",
    "https://everydayseries.ai/wp-content/uploads/2024/03/GIF-From-Online-1-300x169.gif",
];

const customers = [
    "https://everydayseries.ai/wp-content/uploads/2024/03/trippyone-350x138.jpeg",
    "https://everydayseries.ai/wp-content/uploads/2024/03/inxtinct-350x230.png",
    "https://everydayseries.ai/wp-content/uploads/2024/03/qurious_tech_logo.jpeg",
    "https://everydayseries.ai/wp-content/uploads/2024/03/moodit-icon-350x102.png",
    "https://everydayseries.ai/wp-content/uploads/2024/03/CE-full-for-web.png",
    "https://everydayseries.ai/wp-content/uploads/2024/03/logo_transparent-e1710074057580-350x230.png",
];

export function Partners() {
    return (
        <div className="h-screen max-w-7xl sm:w-full mx-auto flex flex-col items-center justify-center space-y-10 ">

            // Supported By
            <div className="flex flex-col items-center space-y-6 mb-20">
                <h1 className="text-white text-4xl">Supported By</h1>
                <div className="flex space-x-10 items-center">
                    {supportedBy.map((support, index) => (
                        <div key={index} className="flex flex-col items-center">
                            <div className="overflow-hidden rounded-md" ><img src={support.logo} alt={support.name} className="h-32 w-32 object-cover"/></div>
                            <p className="text-gray-400 mt-2">{support.name}</p>
                        </div>
                    ))}
                </div>
            </div>

            // Partners
            <div className="flex flex-col items-center justify-center space-y-6">
                <h1 className="text-white text-4xl">Partners</h1>
                <p className="text-gray-400">Following are the partners for Advanced Nonlinear Technologies</p>
                <div className="relative flex h-[200px] w-full flex-col items-center justify-center overflow-hidden rounded-lg bg-transparent">
                    <Marquee pauseOnHover className="[--duration:20s]">
                        <div className="flex space-x-6">
                            {partners.map((img, index) => (
                                <img
                                    key={index}
                                    src={img}
                                    alt={`Avatar ${index + 1}`}
                                    className="h-32 w-32 rounded-md object-scale-down"
                                />
                            ))}
                        </div>
                    </Marquee>
                    <div className="pointer-events-none absolute inset-y-0 left-0 w-1/3 bg-gradient-to-l from-transparent to-[#080E12]"></div>
                    <div className="pointer-events-none absolute inset-y-0 right-0 w-1/3 bg-gradient-to-r from-transparent to-[#080E12]"></div>
                </div>
            </div>

            // Customers
            <div className="flex flex-col items-center justify-center space-y-6">
                <h1 className="text-white text-4xl">Customers</h1>
                <p className="text-gray-400">Our customers are our strengths and we provide AI solutions through our platform to them</p>
                <div className="relative flex h-[200px] w-full flex-col items-center justify-center overflow-hidden rounded-lg bg-transparent md:shadow-xl">
                    <Marquee reverse pauseOnHover className="[--duration:20s]">
                        <div className="flex space-x-6">
                            {customers.map((img, index) => (
                                <img
                                    key={index}
                                    src={img}
                                    alt={`Avatar ${index + 1}`}
                                    className="h-32 w-32 rounded-md object-scale-down"
                                />
                            ))}
                        </div>
                    </Marquee>
                    <div className="pointer-events-none absolute inset-y-0 left-0 w-1/3 bg-gradient-to-l from-transparent to-[#080E12]"></div>
                    <div className="pointer-events-none absolute inset-y-0 right-0 w-1/3 bg-gradient-to-r from-transparent to-[#080E12]"></div>
                </div>
            </div>
        </div>
    );
}