import { H1, H5 } from "@/components/Texts"
import { Button } from "@/components/Button"


export function HomeAurora({ onGetStartedClick }: { onGetStartedClick: () => void }) {
  return (
    <div
      className="relative bg-cover sm:bg-contain bg-right bg-no-repeat"
      style={{ backgroundImage: "url('/images/hero11.webp')" }}
    >
      <div className="mx-auto max-w-7xl lg:px-4">
        <div className="px-6 pt-12 pb-24 sm:pb-32 lg:col-span-5 lg:px-0 lg:pt-40 lg:pb-48 xl:col-span-5">
          <div className="mx-auto max-w-2xl lg:mx-0">
            <div className="hidden sm:flex">
              <div className="relative rounded-full px-3 py-1 text-sm/6 text-gray-500 ring-1 ring-gray-900/10 hover:ring-gray-900/20">
                Deploying at scale?{' '}
                <a href="#" className="font-semibold whitespace-nowrap text-cyan-600">
                  <span aria-hidden="true" className="absolute inset-0" />
                  Book a call  <span>&rarr;</span>
                </a>
              </div>
            </div>
            <H1 className="mt-8">
              The Sovereign Agentic Cloud
            </H1>
            <H5 className="mt-8 text-lg text-gray-600">
              Host nodes, deploy workloads, or build private AI systems, 
all on infrastructure you own and control.
            </H5>
            <div className="mt-10 flex items-center gap-x-6">
              <Button
                variant="solid"
                className=""
                color="cyan"
                onClick={onGetStartedClick}
              >
                 Start Hosting 
              </Button>
              <Button to="#" variant="outline">
                Deploy in Cloud <span aria-hidden="true"> →</span>
              </Button>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}