'use client'

import { Button } from '../../components/Button'
import { Eyebrow, SectionHeader, P } from '../../components/Texts'

export function GpuHero() {
  return (
    <div className="relative bg-white">
      <div className="relative h-80 overflow-hidden bg-transparent md:absolute md:right-0 md:h-full md:w-1/3 lg:w-1/2">
        <img
          alt="Mycelium GPU nebula illustration"
          src="/images/gpuhero2.png"
          className="size-full object-contain"
        />
      </div>
      <div className="relative mx-auto max-w-7xl py-24 lg:py-32 lg:px-8">
        <div className="pr-6 pl-6 md:mr-auto md:w-2/3 md:pr-16 lg:w-1/2 lg:pl-0 lg:pr-24 ">
          <Eyebrow className="tracking-[0.35em] uppercase text-cyan-500">
            Mycelium GPU
          </Eyebrow>
          <SectionHeader as="h1" className="mt-4 text-gray-900">
            Sovereign GPU Acceleration for AI and High-Performance Compute
          </SectionHeader>
          <P className="mt-6 text-gray-600">
            Access GPUs across the Mycelium mesh without waitlists, 
inflated pricing, or centralized control.
Run inference, training, and compute workloads where they make sense: 
cloud, edge, or on your own hardware. 
          </P>
          <div className="mt-10 flex flex-wrap gap-4">
            <Button to="#gpu-getting-started" as="a" variant="solid" color="cyan">
              How it works
            </Button>
            <Button to="#gpu-architecture" as="a" variant="outline" color="cyan">
              Explore Docs
            </Button>
          </div>
        </div>
      </div>
    </div>
  )
}
