'use client'

import { Button } from '@/components/Button'
import { Eyebrow, H3 } from '@/components/Texts'

export function AgentHeroAlt() {
  return (
    <div className="">
      {/* Boxed container */}
      <div
        className="relative mx-auto max-w-7xl border border-t-0 border-b-0 border-gray-100 bg-white overflow-hidden bg-contain bg-right bg-no-repeat"
        style={{ backgroundImage: "url('/images/agents.webp')", backgroundSize: "contain" }}
      >
        {/* Inner padding */}
        <div className="px-6 py-16 lg:py-16">
          <div className="max-w-2xl lg:pl-6">
            <Eyebrow>MYCELIUM AGENTS - COMING IN 2026</Eyebrow>
            <H3 as="h1" className="mt-4">
              Private, Sovereign and Distributed AI You Control
            </H3>
            <p className="mt-6 text-lg">
              Mycelium Agents let you deploy and run intelligent systems on your own infrastructure.
Private, local, and autonomous by design, they give you everything you need to build, host, and connect AI agents without relying on centralized clouds.
            </p>
            
            <div className="mt-10 flex items-center gap-x-6">
              <Button href="#" variant="solid" color="cyan">
                Follow Development
              </Button>
              <Button href="#" variant="outline">
                Explore Docs <span aria-hidden="true">→</span>
              </Button>
            </div>
          </div>
        </div>
      </div>
      {/* ✅ Bottom horizontal line with spacing */}
      <div className="w-full border-b  border-gray-100" />
      <div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-100"></div>
    </div>
  )
}