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

export function HomeAurora() {
  return (
    <div className="px-4">
      {/* Boxed container */}
      <div
        className="relative mx-auto max-w-7xl border border-t-0 border-gray-100 bg-white overflow-hidden bg-size-[65%] bg-right bg-no-repeat bg-none md:bg-[url('/images/hero11.webp')]"
      >
        {/* Inner padding */}
        <div className="px-6 pb-12 pt-8  lg:py-32 ">
          {/* Mobile-only hero image */}
          <img
            src="/images/mobile/homepage.jpg"
            alt="Mycelium homepage visual"
            className="mb-8 w-full object-cover md:hidden"
          />

          <div className="max-w-2xl lg:pl-6">
            <Eyebrow> Project MYCELIUM</Eyebrow> 
            <H3 className="mt-4">
              Secure, Distributed Infrastructure Built
             <br /> 
              for Digital Sovereignty
            </H3>

            <H5 className="mt-4 text-lg text-gray-600 max-w-xl">
              Run your apps, data, and intelligence on infrastructure that belongs to you
            </H5>

            <div className="mt-8 flex items-center gap-x-6">
              <Button
                to="/nodes"
                variant="solid"
                color="cyan"
              >
                Start Hosting
              </Button>
              <Button
                as="a"
                to="https://myceliumcloud.tf"
                variant="outline"
                target="_blank"
                rel="noopener noreferrer"
              >
                Deploy in Cloud
              </Button>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}