import { H2, P } from '@/components/Texts'

export function CallTo() {
  return (
    <div className="relative isolate overflow-hidden max-w-5xl mx-auto py-24">
      <div className="relative isolate overflow-hidden bg-gray-50/10 px-6 py-24 text-center shadow-md shadow-gray-900/5 sm:rounded-3xl sm:px-16 border border-gray-200">
        <div className="mx-auto max-w-4xl text-center">
          <H2 color="primary">
            Say hello to Decentralized AI Agents that are Truly Yours
          </H2>
          <P color="custom" className="mt-8 max-w-3xl">
            Why hand out your intelligence to centralized giants when you can build your own?
          </P>
          <div className="mt-10 flex items-center justify-center gap-x-6">
            <a
              href="#"
              className="rounded-md bg-[#2F3178] px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-[#2F3178]/80 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#2F3178]"
            >
              Book a Meeting
            </a>
            <a href="#" className="text-sm/6 font-semibold text-[#2F3178] hover:text-[#2F3178]/80">
              Join the Waitlist <span aria-hidden="true">→</span>
            </a>
          </div>
        </div>
        <svg
          viewBox="0 0 1024 1024"
          aria-hidden="true"
          className="absolute top-1/2 left-1/2 -z-10 size-256 -translate-x-1/2 mask-[radial-gradient(closest-side,white,transparent)]"
        >
          <circle r={512} cx={512} cy={512} fill="url(#8d958450-c69f-4251-94bc-4e091a323369)" fillOpacity="1" />
          <defs>
            <radialGradient id="8d958450-c69f-4251-94bc-4e091a323369">
              <stop stopColor="#B5A8EF" />
              <stop offset={1} stopColor="#8479D9" />
            </radialGradient>
          </defs>
        </svg>
      </div>
      
    </div>
  )
}