import { Compare } from "@/components/ui/compare";
import { Cover } from "@/components/ui/cover";
import Footer from "@/components/footer";
import Header from "@/components/header";
import AboutSection from "@/components/sections/about-section";
import PricingSection from "@/components/sections/pricing-section";
import WelcomeSection from "@/components/sections/welcome-section";
import ClientsSection from "@/components/sections/clients-section";

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 />
        <AboutSection />
        <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>
        <ClientsSection />
        <PricingSection />
      </main>
      <Footer />
    </div>
  );
}