"use client";

import { H2, P, CP } from "@/components/Texts";
import { Button } from "@/components/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",
      buttonText: "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
      buttonText: "Explore",
    },
    {
      title: "Mycelium Support",
      description:
        "Need help? Reach out to our support team or join the community to get your questions answered quickly.",
      href: "/support",
      buttonText: "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="relative flex flex-col justify-between overflow-hidden rounded-2xl border border-white/10 bg-black/40 p-6 shadow-md shadow-gray-900/5 transition-all duration-300 ease-out hover:scale-105 hover:border-white/40 hover:bg-black/60"
            style={{
              filter: 'brightness(1)',
            }}
            onMouseEnter={(e) => {
              e.currentTarget.style.filter = 'brightness(0.8)';
            }}
            onMouseLeave={(e) => {
              e.currentTarget.style.filter = 'brightness(1)';
            }}
          >
            {/* 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} color="white">
                {item.buttonText}
              </Button>
            </div>

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

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