"use client";

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

export function HomeAurora() {
  return (
    <div
      style={{
        backgroundImage: "url(/images/homehero1.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">
        <H1>
          <span className="text-bold lg:text-8xl">
            Full Sovereignty for<br />Cloud, Network & AI.
          </span>
        </H1>
      </div>
      <div className="max-w-4xl text-center font-light text-gray-500">
        <H5>
          Build and run mission-critical workloads on distributed compute,
          encrypted networking, and sovereign AI orchestration — all under your
          control, without centralized gatekeepers.
        </H5>
      </div>
      <div className="pt-6">
        <ScrollDownArrow />
      </div>
    </div>
  );
}