"use client";

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

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

  return (
    <div className="w-full h-full py-20 bg-[#0b0b0b]">
      <div className="max-w-7xl mx-auto pl-4">
        <H3 className="text-left text-white">
          Discover the Mycelium Ecosystem
        </H3>
        <div className="mt-4 max-w-3xl">
          <P className="text-left text-neutral-400">
            From compute and networking to intelligent automation, these components work together to empower users, developers, and organizations to build freely, without intermediaries.
          </P>
        </div>
      </div>
      <Carousel items={cards} />
    </div>
  );
}

const DummyContent = () => {
  return (
    <div className="bg-neutral-800 p-8 md:p-14 rounded-3xl mb-4 max-w-3xl">
      <P className="text-neutral-400 text-base md:text-2xl font-sans  mx-auto">
        Mycelium is a decentralized compute network that allows you to run AI models and other software on a global network of devices. Mycelium is built on top of the Mycelium Network, a decentralized network of devices that are connected to each other and to the internet.
      </P>
      <img
        src="/images/gallery/1.webp"
        alt="Macbook mockup from Aceternity UI"
        height="500"
        width="500"
        className="md:w-1/2 md:h-1/2 h-full w-full mx-auto object-cover"
      />
    </div>
  );
};

import networkImage from "@/images/slider/network1.jpg";
import agentImage from "@/images/slider/agent1.jpg";
import cloudImage from "@/images/slider/cloud1.jpg";
import gpuImage from "@/images/slider/gpu1.jpg";
import computeImage from "@/images/slider/compute1.jpg";
import storageImage from "@/images/slider/storage1.jpg";

const data = [
  {
    category: "DePIN",
    title: "Mycelium Network",
    description: "A decentralized network for distributed computing.",
    src: "/images/gallery/9.webp",
    content: <DummyContent />,
    bg: networkImage,
    link: "/network",
  },
  {
    category: "AI Agent",
    title: "Mycelium Agent",
    description: "An intelligent agent for task automation.",
    src: "/images/gallery/2.webp",
    content: <DummyContent />,
    bg: agentImage,
    link: "/agent",
  },
  {
    category: "Cloud",
    title: "Mycelium Cloud",
    description: "Decentralized cloud storage and services.",
    src: "/images/gallery/3.webp",
    content: <DummyContent />,
    bg: cloudImage,
    link: "/cloud",
  },

  {
    category: "GPU",
    title: "Mycelium GPU",
    description: "Access to a global network of GPUs.",
    src: "/images/gallery/4.webp",
    content: <DummyContent />,
    bg: gpuImage,
    link: "/gpu",
  },
  {
    category: "Compute",
    title: "Mycelium Compute",
    description: "Run computations on a distributed network.",
    src: "/images/gallery/5.webp",
    content: <DummyContent />,
    bg: computeImage,
    link: "/compute",
  },
  {
    category: "Storage",
    title: "Mycelium Storage",
    description: "Secure and decentralized data storage.",
    src: "/images/gallery/6.webp",
    content: <DummyContent />,
    bg: storageImage,
    link: "/storage",
  },
];