import Link from "next/link";
import { getServerSession } from "next-auth";
import { authOptions } from "@/lib/auth";
import { SignInButton } from "@/components/SignInButton";

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

  return (
    <main className="min-h-screen">
      <header className="border-b border-gray-800 bg-surface">
        <div className="mx-auto flex max-w-5xl items-center justify-between px-6 py-4">
          <span className="text-xl font-bold text-white">s2yt</span>
          {session ? (
            <Link
              href="/dashboard"
              className="rounded bg-accent px-4 py-2 text-sm font-medium text-white hover:bg-accent-hover"
            >
              Dashboard
            </Link>
          ) : (
            <SignInButton />
          )}
        </div>
      </header>

      <section className="mx-auto max-w-3xl px-6 py-20 text-center">
        <h1 className="mb-4 text-4xl font-bold text-white">
          Turn images and audio into YouTube videos
        </h1>
        <p className="mb-8 text-lg text-gray-400">
          Upload one image and one or more audio files. Each audio becomes its own video
          with individual metadata, then uploads directly to your YouTube channel.
        </p>

        <div className="mb-12 grid gap-4 text-left sm:grid-cols-3">
          <Feature title="Batch creation" desc="One image, many audios — each becomes a separate video." />
          <Feature title="Per-video settings" desc="Title, tags, privacy, and category for every upload." />
          <Feature title="Direct upload" desc="Connect YouTube once and publish automatically." />
        </div>

        {session ? (
          <Link
            href="/dashboard"
            className="inline-block rounded bg-accent px-8 py-3 font-medium text-white hover:bg-accent-hover"
          >
            Go to Dashboard
          </Link>
        ) : (
          <SignInButton large />
        )}

        <p className="mt-8 text-sm text-gray-500">
          Free plan: up to 14 videos/month, 720p max, 30 MB per file
        </p>
      </section>
    </main>
  );
}

function Feature({ title, desc }: { title: string; desc: string }) {
  return (
    <div className="rounded-lg border border-gray-700 bg-surface p-4">
      <h3 className="mb-1 font-medium text-white">{title}</h3>
      <p className="text-sm text-gray-400">{desc}</p>
    </div>
  );
}