songs2vid/app/page.tsx

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 { StepsSection } from "@/components/StepsSection";
import { Footer } from "@/components/Footer";
import { SupportSection } from "@/components/SupportSection";
import { DOCS_URL, WEBSITE_URL } from "@/lib/plans";

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 />

        <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 text-white sm:text-6xl lg:text-7xl">
            Songs2VID
          </h1>
          <p className="mx-auto mt-6 max-w-2xl text-base leading-relaxed text-gray-200 sm:text-lg md:text-xl">
            Self-hosted automation that turns your audio and cover art into YouTube videos —
            including art-track layouts, typography, and watermark studio. No quotas or paywalls.
          </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>
              </>
            )}
            <p className="mt-4 text-sm text-gray-400">
              <a
                href={`${DOCS_URL}/docs/intro`}
                target="_blank"
                rel="noopener noreferrer"
                className="text-accent hover:underline"
              >
                Documentation
              </a>
              {" · "}
              <a
                href={WEBSITE_URL}
                target="_blank"
                rel="noopener noreferrer"
                className="text-accent hover:underline"
              >
                Hosted product
              </a>
            </p>
          </div>
        </div>
      </section>

      <StepsSection />
      <BenefitsSection />
      <DownloadSection />
      <SupportSection />
      <Footer />
    </main>
  );
}