"use client";

import { Button } from "@/components/Button";
import { Spotlight } from "@/components/ui/spotlight";
import { H4, H5 } from "@/components/Texts";
import { HomeHeadline } from "@/components/HomeHeadline";

export function HomeBlink({ onGetStartedClick }: { onGetStartedClick: () => void }) {
  return (
    <div className="px-4">
      <div className="relative mx-auto max-w-7xl border border-t-0 border-gray-100 bg-white overflow-hidden py-24 lg:py-32">

        {/* ✅ Cyan Radial Glow */}
        <svg
          viewBox="0 0 1024 1024"
          aria-hidden="true"
          className="absolute top-full left-1/2 w-7xl h-720 -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>

        {/* ✅ Cyan Spotlight */}
        <Spotlight className="-top-40 left-0 md:-top-20 md:left-60" />

        <div className="relative z-10 mx-auto w-full max-w-7xl py-4 md:pt-0">
          <HomeHeadline />
          <H4 className="text-center mt-8">The Living Network of the Next Internet</H4>

          <H5 className="mx-auto mt-6 max-w-4xl text-center font-normal text-neutral-500">
            A new internet is emerging — private, distributed, and self-sovereign.
            Mycelium is the living network that makes it possible.
            A peer-to-peer foundation where people, data, and intelligence connect
            directly — without intermediaries, without compromise.
          </H5>

          <div className="mt-8 flex justify-center gap-6">
            <Button variant="solid" color="cyan" onClick={onGetStartedClick}>
              Enter the Network
            </Button>
            <Button variant="outline" color="gray" onClick={onGetStartedClick}>
              Explore Docs
            </Button>
          </div>
        </div>
      </div>
    </div>
  );
}