import Link from "next/link";
import { getServerSession } from "next-auth";
import { authOptions } from "@/lib/auth";
import { BenefitsSection } from "@/components/BenefitsSection";
import { DownloadSection } from "@/components/DownloadSection";
import { LandingNavbar } from "@/components/LandingNavbar";
import { SignInButton } from "@/components/SignInButton";
import { PricingSection } from "@/components/PricingSection";
import { StepsSection } from "@/components/StepsSection";
import { Footer } from "@/components/Footer";
import { SupportSection } from "@/components/SupportSection";

export default async function HomePage() {
  const session = await getServerSession(authOptions);

  return (
    <main className="min-h-screen">
      <section className="relative min-h-dvh overflow-hidden">
        <video
          autoPlay
          muted
          loop
          playsInline
          className="absolute inset-0 h-full w-full object-cover"
          aria-hidden="true"
        >
          <source src="/bg-video.mp4" type="video/mp4" />
        </video>
        <div className="absolute inset-0 bg-black/55" aria-hidden="true" />
        <div
          className="absolute inset-0 bg-gradient-to-b from-black/70 via-black/40 to-black/80"
          aria-hidden="true"
        />

        <LandingNavbar />

        {/* Purpose + brand above the fold for Google OAuth verification */}
        <div className="relative z-10 mx-auto flex min-h-dvh max-w-3xl flex-col justify-center px-6 pb-16 pt-28 text-center">
          <h1 className="text-5xl font-bold tracking-tight sm:text-6xl lg:text-7xl">
            <span className="text-white">Songs</span>
            <span className="text-red-400">2VID</span>
          </h1>
          <p className="mx-auto mt-6 max-w-2xl text-base leading-relaxed text-gray-200 sm:text-lg md:text-xl">
            Convert MP3, WAV, and audio files into YouTube videos instantly — a fast, privacy-focused
            audio to video converter and TunesToTube alternative that uploads music, beats, and
            podcasts directly to your channel.
          </p>

          <div className="mt-10 flex flex-col items-center gap-3">
            {session ? (
              <Link
                href="/dashboard"
                className="inline-flex items-center gap-2 rounded bg-accent px-8 py-3.5 font-medium text-white transition-all duration-300 hover:scale-[1.02] hover:bg-accent-hover hover:shadow-lg hover:shadow-accent/20"
              >
                Go to Dashboard
              </Link>
            ) : (
              <>
                <SignInButton large />
                <p className="max-w-md text-xs leading-relaxed text-gray-400">
                  By clicking Continue with Google, you accept our{" "}
                  <Link
                    href="/terms"
                    className="text-gray-300 underline-offset-2 transition-colors hover:text-white hover:underline"
                  >
                    Terms of Service
                  </Link>{" "}
                  and{" "}
                  <Link
                    href="/privacy"
                    className="text-gray-300 underline-offset-2 transition-colors hover:text-white hover:underline"
                  >
                    Privacy Policy
                  </Link>
                  .
                </p>
              </>
            )}
          </div>
        </div>
      </section>

      <StepsSection />
      <BenefitsSection />

      <DownloadSection />

      <PricingSection />

      <SupportSection />
      <Footer />
    </main>
  );
}
