'use client'

import { Eyebrow, H3, P } 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 md:bg-[url('/images/agents.webp')] md:bg-contain md:bg-right md:bg-no-repeat"
      >
        {/* Inner padding */}
        <div className="px-6 pt-4 pb-12 lg:py-24">
          {/* Mobile-only hero image */}
          <img
            src="/images/mobile/agents.jpg"
            alt="Mycelium Agents visual"
            className="mb-8 w-full object-cover md:hidden"
          />

          <div className="max-w-xl 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-gray-600">
              Mycelium Agents let you deploy and run intelligent systems on your own infrastructure.
            </P>
            <P className="mt-4 text-gray-600">
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">
              {/* TODO: Hero CTAs (Follow Development / Explore Docs) to be added when links are ready.
                  Previously two Buttons here with href="#". */}
            </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>
  )
}