'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">
            Unify distributed GPU power into a sovereign acceleration fabric.
          </SectionHeader>
          <P className="mt-6 text-gray-600">
            Mycelium GPU transforms fragmented hardware across the ThreeFold
            Grid into one adaptive intelligence layer. Run AI, ML, rendering,
            and high-performance workloads anywhere—from edge devices to
            planetary clusters—with deterministic performance and transparent
            cost.
          </P>
          <P className="mt-4 text-gray-500">
            The energy behind intelligence, orchestrated entirely through code.
          </P>
          <div className="mt-10 flex flex-wrap gap-4">
            <Button to="#gpu-getting-started" as="a" variant="solid" color="cyan">
              Start with GPU Access
            </Button>
            <Button to="#gpu-architecture" as="a" variant="outline" color="cyan">
              Explore the Mesh
            </Button>
          </div>
        </div>
      </div>
    </div>
  )
}