'use client'

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

export function StorageHero() {
  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 Storage visual"
          src="/images/computehero11.webp"
          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">
          <Eyebrow className="tracking-[0.35em] uppercase text-cyan-500">
            Mycelium Storage
          </Eyebrow>
          <SectionHeader as="h1" className="mt-4 text-gray-900">
            Quantum-safe, sovereign data plane for every workload.
          </SectionHeader>
          <P className="mt-6 text-gray-600">
            Mycelium Storage delivers quantum-resistant protection, autonomous
            recovery, and multi-protocol access across the ThreeFold Grid. Place
            data exactly where you need it while keeping ownership entirely in
            your hands.
          </P>
          <P className="mt-4 text-gray-500">
            Quantum-safe. Self-healing. Universally accessible.
          </P>
          <div className="mt-10 flex flex-wrap gap-4">
            <Button to="#storage-features" as="a" variant="solid" color="cyan">
              Explore Features
            </Button>
            <Button
              to="#storage-developer-experience"
              as="a"
              variant="outline"
              color="cyan"
            >
              View Developer Flow
            </Button>
          </div>
        </div>
      </div>
    </div>
  )
}