import { Button } from '@/components/Button'

export function HomeHero() {
  return (
    <section className="mt-12 bg-transparent border border-gray-200 border-b-0 mx-4 lg:mx-auto max-w-5xl shadow-[0_0_40px_-20px_rgba(0,0,0,0.06)]">
      <div className="px-6 py-12 lg:px-8 lg:py-24">
        <div className="max-w-2xl mx-auto text-center">
          <h1 className="text-3xl font-semibold tracking-tight text-gray-900 lg:text-5xl">
            The Sovereign Agentic Cloud
          </h1>

          <p className="mt-6 text-lg text-gray-500 sm:text-xl max-w-prose mx-auto tracking-normal leading-tight lg:leading-relaxed">
            Host nodes, deploy workloads, or build private AI systems —
            all on infrastructure you own and control.
          </p>

          <div className="mt-10 flex flex-col sm:flex-row sm:items-center sm:justify-center gap-4">
            <Button variant="solid" color="cyan" href="#">
              Start Hosting
            </Button>

            <Button href="#" variant="outline" color="gray">
              Deploy in Cloud <span aria-hidden="true">→</span>
            </Button>
          </div>
        </div>
      </div>
    </section>
  )
}