import { H3, Eyebrow } from "@/components/Texts"
import { Button } from "@/components/Button"

export function ComputeHero({ onGetStartedClick = () => {} }: { onGetStartedClick?: () => void }) {
  return (
    <div className="">
      {/* Boxed container */}
      <div
        className="relative mx-auto max-w-7xl border border-t-0 border-b-0 border-gray-200 bg-white overflow-hidden bg-contain bg-right bg-no-repeat"
        style={{ backgroundImage: "url('/images/computehero.webp')", backgroundSize: "contain" }}
      >
        {/* Inner padding */}
        <div className="px-6 py-16 lg:py-16">
          <div className="max-w-xl lg:pl-6">
            <Eyebrow>
              Mycelium Compute
            </Eyebrow>
            <H3 className="mt-4">
              Deterministic Compute You Control
            </H3>
            <p className="mt-6 text-lg">
              Run workloads on sovereign, self-verifying infrastructure.
              Mycelium Compute delivers predictable execution, zero drift, and automatic healing, whether you’re running containers, VMs, agents, or full Kubernetes clusters.
            </p>
            <p className="mt-4 lg:text-base italic text-gray-600 text-sm">
              Works Alone. Works Together.
              Mycelium Compute can run on any network fabric, or pair with Mycelium Network
              for sovereign connectivity.
            </p>
            <div className="mt-10 flex items-center gap-x-6">
              <Button
                onClick={onGetStartedClick}
                variant="solid"
                color="cyan"
              >
                Get started
              </Button>
              <Button to="#" variant="outline">
                Documentation <span aria-hidden="true">→</span>
              </Button>
            </div>
          </div>
        </div>
        
      </div>
      {/* ✅ Bottom horizontal line with spacing */}
      <div className="w-full border-b  border-gray-200" />
      <div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-200"></div>
    </div>
  )
}