"use client";

import { motion } from "framer-motion";
import { H1, H2, H3, H4, H5 } from "@/components/Texts";
import { ScrollDownArrow } from '@/components/ScrollDownArrow';

export function HomeAurora() {
  return (
      <motion.div
        initial={{ opacity: 0.0, y: 40 }}
        whileInView={{ opacity: 1, y: 0 }}
        transition={{
          delay: 0.5,
          duration: 1,
          ease: "easeInOut",
        }}
        style={{
          backgroundImage: "url(/images/mchip2.webp)",
          backgroundSize: "cover",
          backgroundPosition: "center",
        }}
        className="relative mx-auto pb-24 pt-0 h-screen flex flex-col items-center justify-center gap-4 px-4 max-w-5xl"
      >
        <div className="text-center text-gray-800">
          <H1>Decentralized Autonomous <span className="text-bold lg:text-8xl">Agentic Cloud.</span></H1>
        </div>
        <div className="pt-8 text-center font-light text-gray-500 max-w-4xl">
          <H5>Mycelium Project is a decentralized platform for autonomous AI, powered by distributed compute, sovereign memory, encrypted networking, and stateless GPU orchestration.</H5>
        </div>
        <div className="pt-8">
          <ScrollDownArrow />
        </div>
      </motion.div>
  );
}