'use client'

import { H1, P } from '@/components/Texts'
import { FadeIn } from '@/components/FadeIn'
import { Button } from '@/components/Button'

export function HomeHero() {
  return (
    <div
      className="relative isolate overflow-hidden bg-white"
      style={{
        backgroundImage: 'url(/images/cloud.png)',
        backgroundSize: 'cover',
        backgroundPosition: 'center',
      }}
    >
      <div className="mx-auto max-w-7xl px-6  py-24 lg:py-32 lg:flex lg:px-8">
        <div className="mx-auto max-w-2xl shrink-0 lg:mx-0 lg:pt-8">
          <H1 color="primary" className="mt-10 text-5xl font-semibold tracking-tight text-pretty sm:text-7xl">
            Decentralized Autonomous Agentic Cloud.
          </H1>
          <P color="secondary" className="mt-8 text-lg font-medium text-pretty sm:text-xl/8">
            Mycelium's advancements in Agentic infrastructure supports private, secure and autonomous Agents that connect, learn and grow with you.
          </P>
          <div className="mt-10 flex items-center gap-x-6">
            <Button variant="solid" color="cyan" href="#">
              Get started
            </Button>
            <a href="#" className="text-sm/6 font-semibold text-gray-50">
              Learn more <span aria-hidden="true">→</span>
            </a>
          </div>
        </div>
      </div>
    </div>
  )
}