"use client";

import { Button } from "@/components/Button";
import { Container } from "@/components/Container";
import { CheckCircleIcon } from "@heroicons/react/20/solid";

const benefits = [
  'Private chat and calls',
  'Calendar and file sync',
  'Secure team spaces',
  'Early AI Agent integration',
]



export function CallToAction() {
  return (
    <section className="relative overflow-hidden bg-[#121212] ">
      {/* ✅ Top horizontal line with spacing */}
      <div className="max-w-7xl bg-[#111111] mx-auto py-6 border border-t-0 border-b-0 border-gray-800"></div>
      <div className="w-full border-t border-l border-r border-gray-800" />

      {/* ✅ Main boxed area */}
      <div
        id="get-started"
        className="relative py-18 max-w-7xl mx-auto bg-[#111111] border border-t-0 border-b-0 border-gray-800"
      >
        {/* ✅ Cyan Radial Glow */}
        <svg
          viewBox="0 0 1024 1024"
          aria-hidden="true"
          className="absolute top-full left-1/2 w-7xl h-320 -translate-x-1/2 -translate-y-1/2 mask-image mask-[radial-gradient(circle,white,transparent)]"
        >
          <circle
            r={512}
            cx={512}
            cy={512}
            fill="url(#mycelium-cyan-glow)"
            fillOpacity="0.2"
          />
          <defs>
            <radialGradient id="mycelium-cyan-glow">
              <stop stopColor="#00e5ff" />
              <stop offset="1" stopColor="transparent" />
            </radialGradient>
          </defs>
        </svg>
        <Container className="relative">
          <div className="mx-auto max-w-3xl text-center">
            <h2 className="text-3xl lg:text-4xl font-medium tracking-tight text-white sm:text-4xl">
              Be Among The First

            </h2>

            <p className="mt-6 text-lg text-gray-300">
              The first Pods are launching soon.
              10,000 early Pods will be available for early adopters.
            </p>

            <div className="mt-10 flex items-center justify-center">
              <ul
                role="list"
                className="grid grid-cols-1 gap-x-8 gap-y-3 text-left text-base/7 text-gray-200 sm:grid-cols-2"
              >
                {benefits.map((benefit) => (
                  <li key={benefit} className="flex items-start gap-x-3">
                    <CheckCircleIcon
                      aria-hidden="true"
                      className="mt-1 h-7 w-5 flex-none text-gray-200"
                    />
                    <span>{benefit}</span>
                  </li>
                ))}
              </ul>
            </div>

            <p className="mt-6 text-lg text-gray-300">
              Next, Pods will support peer-to-peer AI Agents that live inside your environment.
              Your own AI, powered by your data without any data leaks. Be among the first to claim
              your private space on the Mycelium Network.
            </p>

            {/* ✅ Two cards, stacked center with spacing */}
            <div className="mt-10 flex flex-wrap justify-center gap-x-10 gap-y-8">
              <div className="flex flex-col items-center text-center max-w-xs">
                <Button to="#" variant="solid" color="cyan" className="mt-4">
                  Join the Waitlist
                </Button>
              </div>

              <div className="flex flex-col items-center text-center max-w-xs">
                <Button to="#" variant="outline" color="white" className="mt-4">
                  Learn More
                </Button>
              </div>
            </div>
          </div>
        </Container>
      </div>

      {/* ✅ Bottom horizontal line with spacing */}
      <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 bg-transparent" />
    </section>
  );
}