import Footer from "@/components/footer";
import Header from "@/components/header";
import { Compare } from "@/components/ui/compare";
import { ContainerScroll } from "@/components/ui/container-scroll-animation";
import { Cover } from "@/components/ui/cover";
import WelcomeSection from "@/components/welcome-section";
import Image from "next/image";

export default function Home() {
  return (
    <div className="flex min-h-screen w-full flex-col">
      <Header />
      <main className="flex min-h-[calc(100vh_-_theme(spacing.16))] flex-1 flex-col">
        <WelcomeSection />
        <section className="flex flex-col overflow-hidden bg-background dark:bg-black">
          <ContainerScroll
            titleComponent={
              <>
                <h1 className="p-2 text-4xl font-semibold bg-clip-text text-transparent text-center bg-gradient-to-b from-neutral-900 to-neutral-700 dark:from-neutral-600 dark:to-white">
                  Discover the power of <br />
                  <span className="text-4xl md:text-[6rem] font-bold mt-1 leading-none">
                    Microgravity
                  </span>
                </h1>
              </>
            }
          >
            <Image
              src={`/screenshot.jpg`}
              alt="hero"
              height={720}
              width={1400}
              className="mx-auto rounded-2xl object-cover h-full object-left-top"
              draggable={false}
            />
          </ContainerScroll>
        </section>
        <section className="flex flex-col overflow-hidden bg-background dark:bg-black h-[calc(100vh_-_theme(spacing.16))] items-center justify-center">
          <h1 className="text-4xl md:text-4xl lg:text-6xl font-semibold max-w-7xl mx-auto text-center mt-6 relative z-20 py-6 bg-clip-text text-transparent bg-gradient-to-b from-neutral-800 via-neutral-700 to-neutral-700 dark:from-neutral-800 dark:via-white dark:to-white">
            Get amazing insights <br /> at <Cover>warp speed</Cover>
          </h1>
          <div className="p-4 border rounded-3xl dark:bg-neutral-900 bg-neutral-100  border-neutral-200 dark:border-neutral-800 px-4">
            <Compare
              firstImage="/segment-before.jpg"
              secondImage="/segment-after.jpg"
              firstImageClassName="object-cover object-left-top"
              secondImageClassname="object-cover object-left-top"
              className="h-[250px] w-[200px] md:h-[500px] md:w-[500px]"
              slideMode="hover"
            />
          </div>
        </section>
      </main>
      <Footer />
    </div>
  );
}