import { H2, P } from '@/components/Texts'
import { Button } from '@/components/Button'
import { LayoutTextFlip } from '@/components/ui/layout-text-flip' // make sure this import path is correct

export function HomeAgent() {
  return (
    <div className="relative isolate overflow-hidden bg-white">
      <div className="px-6 py-24 sm:py-32 lg:px-8">
        <div className="mx-auto max-w-4xl text-center">
          <H2>
            Deploy your own{" "}
            <span className="text-left text-black font-medium text-7xl italic  bg-clip-text bg-gradient-to-r from-blue-400 via-cyan-400 to-violet-400">
              <LayoutTextFlip
                text=""
                words={[
                  "GPT-5",
                  "Claude 3.5",
                  "Gemini 1.5",
                  "Mistral 7B",
                  "Llama 3.1",
                  
                  "AI Agents",
                ]}
              />
            </span>
          </H2>

          <P className="mx-auto mt-6 max-w-xl text-lg/8 text-pretty text-gray-600">
            Mycelium delivers enterprise-grade AI agents with unmatched customizability and the fastest time to production — all in the agent platform designed for real business use cases.
          </P>

          <div className="mt-10 flex items-center justify-center gap-x-6">
            <Button variant="solid" color="cyan" href="/signup">
              Get started
            </Button>
            <a href="/agents" className="text-sm/6 font-semibold text-gray-900 hover:text-gray-600">
              Learn more <span aria-hidden="true">→</span>
            </a>
          </div>
        </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="0.7"
        />
        <defs>
          <radialGradient id="8d958450-c69f-4251-94bc-4e091a323369" cx="50%" cy="50%" r="50%">
            <stop offset="0%" stopColor="#60A5FA" /> {/* blue-400 */}
            <stop offset="50%" stopColor="#06B6D4" /> {/* cyan-500 */}
            <stop offset="100%" stopColor="#A78BFA" /> {/* violet-400 */}
          </radialGradient>
        </defs>
      </svg>
    </div>
  )
}