import Link from 'next/link';
import { getCurrentUser } from '@/lib/session';
import { redirect } from 'next/navigation';
import { THEMES } from '@/lib/themes';

export default async function HomePage() {
  const user = await getCurrentUser();
  if (user) redirect('/dashboard');

  return (
    <main className="mx-auto flex min-h-screen max-w-3xl flex-col items-center justify-center gap-8 px-6 py-16 text-center">
      <div>
        <h1 className="text-4xl font-bold tracking-tight text-gray-900">E-Invite</h1>
        <p className="mt-3 text-lg text-gray-600">
          Create beautiful themed online invitations, collect RSVPs, and share a single link
          with everyone you're inviting.
        </p>
      </div>

      <div className="flex gap-3">
        <Link
          href="/signup"
          className="rounded-md bg-indigo-600 px-5 py-2.5 font-medium text-white hover:bg-indigo-500"
        >
          Get started
        </Link>
        <Link
          href="/login"
          className="rounded-md border border-gray-300 px-5 py-2.5 font-medium text-gray-700 hover:bg-gray-50"
        >
          Log in
        </Link>
      </div>

      <div className="grid grid-cols-2 gap-3 sm:grid-cols-3">
        {THEMES.map((theme) => (
          <div
            key={theme.id}
            className="flex flex-col items-center gap-1 rounded-lg border px-4 py-3 text-sm"
            style={{
              backgroundColor: theme.colors.bg,
              backgroundImage: theme.pattern.backgroundImage,
              backgroundSize: theme.pattern.backgroundSize,
              color: theme.colors.text,
              borderColor: theme.colors.accent,
            }}
          >
            <span className="text-xl">{theme.emoji}</span>
            {theme.name}
          </div>
        ))}
      </div>
    </main>
  );
}