'use client'

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

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=""
          src="/images/gpuhero.png"
          className="size-full object-cover"
        />
       
      </div>
      <div className="relative mx-auto max-w-7xl py-24 sm:py-32 lg:px-8 lg:py-40">
        <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 xl:pr-32">
          <h2 className="text-base/7 font-semibold text-cyan-500">GPU</h2>
          <p className="mt-2 text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl">The energy behind intelligence.</p>
          <p className="mt-6 text-base/7 text-gray-600">
            Mycelium GPU unifies distributed acceleration into a single sovereign fabric — turning fragmented hardware into one adaptive intelligence layer.
            Run AI, ML, and rendering workloads anywhere, from edge to core, with deterministic performance and transparent cost.
            No silos. No intermediaries. Just raw, verifiable power — orchestrated through code, not control.
          </p>
          <div className="mt-8">
            <Button
              href="#"
              className="inline-flex rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
            >
              {' '}
              Unify Your GPU Power{' '}
            </Button>
          </div>
        </div>
      </div>
    </div>
  )
}