"use client";

import { H2, P, CP } from "@/components/Texts";
import { Button } from "@/components/ui/Button";

export  function GetStarted() {
  const items = [
    {
      title: "Mycelium Docs",
      description:
        "Learn how Mycelium works and get a high-level understanding of its architecture, deployment, and API references.",
      href: "/docs",
    },
    {
      title: "Mycelium Repository",
      description:
        "Explore the official code repositories, contribute, and stay up-to-date with the latest changes.",
      href: "https://github.com/your-repo", // replace with actual repo
    },
    {
      title: "Mycelium Support",
      description:
        "Need help? Reach out to our support team or join the community to get your questions answered quickly.",
      href: "/support",
    },
  ];

  return (
    <section
      className="bg-cover bg-center text-white py-32 px-6 relative"
      style={{
        backgroundImage: `url('/images/getstarted.webp')`,
      }}
    >
      <div className="max-w-8xl mx-auto px-4 text-left mb-12">
        <H2>Get Started</H2>
        <P>Explore the documentation, code, and support channels to start building with Mycelium Cloud.</P>
      </div>

      <div className="grid gap-4 md:grid-cols-3 max-w-8xl mx-auto px-4">
        {items.map((item, idx) => (
          <div
            key={idx}
            className="flex flex-col justify-between border border-white/10 rounded-2xl p-6 hover:border-white/20 transition bg-black/20"
          >
            {/* Title + Button Row */}
            <div className="flex items-center justify-between">
              <h3 className="text-xl font-semibold">{item.title}</h3>
              <Button variant="outline" href={item.href}>
                View All
              </Button>
            </div>

            {/* Divider + Description */}
            <div className="mt-4 border-t border-white/10"></div>

            <CP className="mt-4">{item.description}</CP>
          </div>
        ))}
      </div>
    </section>
  );
}