www_projectmycelium_com/src/pages/gpu/GpuCapabilities.tsx

"use client";

import { useRef } from "react";
import { Eyebrow, CP, CT, H5 } from "@/components/Texts";
import { IoArrowBackOutline, IoArrowForwardOutline } from "react-icons/io5";

// ✅ Import animations

import KubernetesAcceleration from "./animations/KubernetesAcceleration";
import RenderingSimulation from "./animations/RenderingSimulation";
import RAGPipeline from "./animations/RAGPipeline";
import InterferenceAnimation from "./animations/InterferenceAnimation";

const gpuCapabilities = [
  {
    isIntro: true,
    eyebrow: "CAPABILITIES",
    title: "What You Can Run on Mycelium Cloud",
    description:
      "GPU acceleration for inference, training, rendering, and agent workload on sovereign hardware.",
  },
  {
    name: "AI / ML Inference & Training",
    description: "LLMs, embeddings, transformers, fine-tuning",
    animation: InterferenceAnimation,
  },
  {
    name: "Acceleration in Kubernetes Workloads",
    description: "GPU-backed deployments on Mycelium Cloud",
    animation: KubernetesAcceleration,
  },
  {
    name: "Rendering & Simulation",
    description: "Scientific visualization, VFX, real-time 3D",
    animation: RenderingSimulation,
  },
  {
    name: "Agent Compute & RAG Pipelines",
    description:
      "Vector memory + model execution on sovereign hardware",
    animation: RAGPipeline,
  },
];

export function GpuCapabilities() {
  const sliderRef = useRef<HTMLUListElement>(null);

  const scrollLeft = () =>
    sliderRef.current?.scrollBy({ left: -400, behavior: "smooth" });
  const scrollRight = () =>
    sliderRef.current?.scrollBy({ left: 400, behavior: "smooth" });

  return (
    <section className="bg-[#121212] w-full max-w-8xl mx-auto">
      <div className="max-w-7xl mx-auto py-6 border border-t-0 border-b-0 border-gray-800" />
      <div className="w-full border-t border-l border-r border-gray-800" />

      <div className="relative mx-auto max-w-7xl border border-t-0 border-b-0 border-gray-800 bg-[#111111] overflow-hidden">

        {/* ✅ Horizontal Slider */}
        <ul
          ref={sliderRef}
          className="flex overflow-x-auto snap-x snap-mandatory scroll-smooth no-scrollbar"
        >
          {gpuCapabilities.map((item, idx) => (
            <li
              key={idx}
              className={`snap-start shrink-0 w-[85%] sm:w-[50%] lg:w-[33%] border border-gray-800 relative flex flex-col ${
                item.isIntro ? "bg-[#1b1b1b] p-10" : "bg-[#111]/60"
              }`}
            >
              {item.isIntro ? (
                <div className="flex flex-col justify-between h-full">
                  <div>
                    <Eyebrow>{item.eyebrow}</Eyebrow>
                    <H5 className="text-white mt-4 lg:text-2xl text-xl">
                      {item.title}
                    </H5>
                    <p className="mt-4 text-gray-400 lg:text-lg text-sm leading-relaxed">
                      {item.description}
                    </p>
                  </div>

                  <div className="flex items-center gap-x-4 mt-3">
                    <a
                      href="#"
                      className="inline-flex items-center gap-1 text-cyan-400 hover:text-cyan-300 text-sm font-medium mr-auto"
                    >
                      Learn more →
                    </a>

                    <button
                      onClick={scrollLeft}
                      className="h-8 w-8 flex items-center justify-center border border-gray-800 rounded-md hover:border-cyan-500 transition-colors"
                    >
                      <IoArrowBackOutline className="text-gray-300" size={16} />
                    </button>

                    <button
                      onClick={scrollRight}
                      className="h-8 w-8 flex items-center justify-center border border-gray-800 rounded-md hover:border-cyan-500 transition-colors"
                    >
                      <IoArrowForwardOutline className="text-gray-300" size={16} />
                    </button>
                  </div>
                </div>
              ) : (
                <>
                  {/* ✅ STREAMING ANIMATION REPLACES ICON */}
                  <div className="w-full flex items-center justify-center">
                    {item.animation && <item.animation />}
                  </div>

                  <div className="p-6 text-center">
                    <CT className="text-lg font-semibold text-white mt-2">
                      {item.name}
                    </CT>
                    <CP className="mt-2 text-gray-400 leading-snug">
                      {item.description}
                    </CP>
                  </div>
                </>
              )}
            </li>
          ))}
        </ul>
      </div>

      <div className="w-full border-b border-gray-800" />
      <div className="max-w-7xl mx-auto py-6 border border-t-0 border-b-0 border-gray-800" />
    </section>
  );
}