"use client";

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

export function AgentsHeroAlt() {
  return (
    <div
      style={{
        backgroundImage: "url(/images/agentshero2.png)",
        backgroundSize: "cover",
        backgroundPosition: "center",
      }}
      className="relative mx-auto flex min-h-screen flex-col items-center justify-center px-4 text-white"
    >
      <div className="absolute inset-0 bg-white/30" />
      <div className="relative flex flex-col items-center gap-6">
        <div className="text-center drop-shadow-lg">
          <H2>
            <span className="">
              Sovereign AI Agents, Coming Soon.
            </span>
          </H2>
        </div>
        <div className="max-w-4xl text-center font-normal drop-shadow-lg">
          <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>
      <div className="absolute bottom-10">
        <ScrollDownArrow />
      </div>
    </div>
  );
}