import { useId } from 'react'

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

function BackgroundIllustration(props: React.ComponentPropsWithoutRef<'div'>) {
  const id = useId()

  return (
    <div {...props}>
      <svg
        viewBox="0 0 1026 1026"
        fill="none"
        aria-hidden="true"
        className="absolute inset-0 h-full w-full animate-spin-slow"
      >
        <path
          d="M1025 513c0 282.77-229.23 512-512 512S1 795.77 1 513 230.23 1 513 1s512 229.23 512 512Z"
          stroke="#D4D4D4"
          strokeOpacity="0.7"
        />
        <path
          d="M513 1025C230.23 1025 1 795.77 1 513"
          stroke={`url(#${id}-gradient-1)`}
          strokeLinecap="round"
        />
        <defs>
          <linearGradient
            id={`${id}-gradient-1`}
            x1="1"
            y1="513"
            x2="1"
            y2="1025"
            gradientUnits="userSpaceOnUse"
          >
            <stop stopColor="#06b6d4" />
            <stop offset="1" stopColor="#06b6d4" stopOpacity="0" />
          </linearGradient>
        </defs>
      </svg>
      <svg
        viewBox="0 0 1026 1026"
        fill="none"
        aria-hidden="true"
        className="absolute inset-0 h-full w-full animate-spin-reverse-slower"
      >
        <path
          d="M913 513c0 220.914-179.086 400-400 400S113 733.914 113 513s179.086-400 400-400 400 179.086 400 400Z"
          stroke="#D4D4D4"
          strokeOpacity="0.7"
        />
        <path
          d="M913 513c0 220.914-179.086 400-400 400"
          stroke={`url(#${id}-gradient-2)`}
          strokeLinecap="round"
        />
        <defs>
          <linearGradient
            id={`${id}-gradient-2`}
            x1="913"
            y1="513"
            x2="913"
            y2="913"
            gradientUnits="userSpaceOnUse"
          >
            <stop stopColor="#06b6d4" />
            <stop offset="1" stopColor="#06b6d4" stopOpacity="0" />
          </linearGradient>
        </defs>
      </svg>
    </div>
  )
}

export function CloudHero() {
  return (
    <div className="overflow-hidden pb-24 lg:py-32 lg:pb-0">
      <Container>
        <div className="flex flex-col-reverse gap-y-16 lg:grid lg:grid-cols-12 lg:gap-x-8 lg:gap-y-20">
          <div className="relative z-10 mx-auto max-w-2xl lg:col-span-7 lg:max-w-none lg:pt-6 xl:col-span-6">
            <Eyebrow className="tracking-[0.35em] uppercase text-cyan-500">
              Mycelium Cloud
            </Eyebrow>
            <SectionHeader as="h1" className="mt-6 text-gray-900">
              Deploy sovereign Kubernetes clusters on decentralized
              infrastructure.
            </SectionHeader>
            <P className="mt-6 text-gray-600">
              Mycelium Cloud turns the ThreeFold Grid into a programmable
              substrate for K3s. Launch verifiable clusters with nature-inspired
              networking, quantum-safe storage, and zero-image delivery that
              keeps every workload deterministic.
            </P>
            <P className="mt-6 italic text-gray-500">
              Developer guide to decentralized cloud computing.
            </P>
            <div className="mt-10 flex flex-wrap gap-4">
              <Button
                to="https://myceliumcloud.tf"
                as="a"
                variant="solid"
                color="cyan"
                target="_blank"
                rel="noreferrer"
              >
                Launch a Cluster
              </Button>
              <Button to="#getting-started" as="a" variant="outline" color="cyan">
                View Getting Started
              </Button>
            </div>
          </div>
          <div className="relative mt-0 lg:mt-10 lg:col-span-5 lg:row-span-2 xl:col-span-6">
            <BackgroundIllustration className="absolute left-1/2 top-4 h-[1026px] w-[1026px] -translate-x-1/2 stroke-gray-300/70 sm:top-16 lg:-top-12 lg:ml-12" />
            <div className="mx-auto h-[420px] max-w-[640px] mask-[linear-gradient(to_bottom,white_60%,transparent)] lg:absolute lg:-inset-x-10 lg:-top-24 lg:h-auto lg:pt-10 xl:-bottom-36">
              <img
                src="/src/images/desktop.png"
                alt="Mycelium Cloud dashboard preview"
                className="mx-auto w-full max-w-[640px]"
                width={1366}
                height={768}
              />
            </div>
          </div>
        </div>
      </Container>
    </div>
  )
}