"use client";

import { H2, H5 } from "@/components/Texts";
import { ScrollDownArrow } from '@/components/ScrollDownArrow';

export function AgentsHeroAlt() {
  return (
    <div
      style={{
        backgroundImage: "url(/images/agentshero.png)",
        backgroundSize: "cover",
        backgroundPosition: "center",
      }}
      className="relative mx-auto flex min-h-screen flex-col items-center gap-6 px-4 pb-24 pt-[20vh] text-gray-800 lg:pb-0"
    >
      <div className="text-center -mt-5">
        <H2>
          <span className="">
            Sovereign AI Agents, Coming Soon.
          </span>
        </H2>
      </div>
      <div className="max-w-4xl text-center font-light text-gray-500">
        <H5>
           Hero is the autonomous agent layer for the Mycelium platform—trusted, policy-aware AI that runs on infrastructure you control and remembers what matters.
        </H5>
      </div>
      <div className="pt-6">
        <ScrollDownArrow />
      </div>
    </div>
  );
}
