"use client";

import { Carousel, Card } from "@/components/ui/apple-cards-carousel";
import { H3, P , Eyebrow} from "@/components/Texts";

export function HomeSlider() {
  const cards = data.map((card) => (
    <Card key={card.src} card={card} />
  ));

  return (
    <div className="w-full h-full py-20 bg-[#111111]">
      <div className="max-w-7xl mx-auto pl-4">
        <Eyebrow className="text-left">
          Ecosystem
        </Eyebrow>
        <H3 className="text-left text-white">
        Mycelium Components
        </H3>
        <div className="mt-4 max-w-3xl">
          <P className="text-left text-neutral-400">
           Each component can be used on its own or combined into a fully sovereign cloud.
          </P>
        </div>
      </div>
      <Carousel items={cards} />
    </div>
  );
}


import networkImage from "/images/pages/network.webp";
import agentImage from "/images/pages/agent.webp";
import cloudImage from "/images/pages/cloud.webp";
import computeImage from "/images/pages/compute.webp";

const data = [
  {
    category: "Cloud",
    title: "Mycelium Cloud",
    description: "Deploy Kubernetes clusters on sovereign infrastructure.",
    src: "/images/pages/cloud.png",
    bg: cloudImage,
    link: "/cloud",
  },
  {
    category: "DePIN",
    title: "Mycelium Network",
    description: "Encrypted peer-to-peer mesh networking across the globe.",
    src: "/images/pages/network.png",
    bg: networkImage,
    link: "/network",
  },
  {
    category: "AI Agent",
    title: "Mycelium Agents",
    description: "Private, programmable AI systems that run on your hardware.",
    src: "/images/pages/agent.png",
    bg: agentImage,
    link: "/agent",
  },
  {
    category: "Resources",
    title: "Compute / Storage / GPU",
    description: "The resource layers powering the stack.",
    src: "/images/pages/compute.png",
    bg: computeImage,
    link: "/compute",
  },
];