/**
 * File: page.tsx
 * Created by: AI Assistant
 * Date: 2025-11-29
 * Purpose: Landing page for kreatiVortex platform
 * Part of: kreatiVortex - Platform Pembelajaran Tari Online
 */

import { Button } from "@/components/ui/button";
import { Link } from "@/i18n/routing";
import { getTranslations } from 'next-intl/server';

export default async function Home() {
  const t = await getTranslations('HomePage');

  return (
    <div className="min-h-screen text-white">
      <div className="floating-background"></div>
      <div className="container mx-auto fixed z-10 top-0 left-0 right-0 flex justify-between items-center py-6">
        <div className="flex items-center">
          <Link href="/" locale="en" className="hover:text-gray-300 transition-colors">
            EN
          </Link>
          <span className="mx-2">|</span>
          <Link href="/" locale="id" className="hover:text-gray-300 transition-colors">
            ID
          </Link>
        </div>
        <div className="flex items-center gap-4">
          <Link href="/auth/signin">
            <Button variant="ghost" size="lg" className="uppercase">
              {t('login')}
            </Button>
          </Link>
          <Link href="/auth/signup">
            <Button variant="outline" size="lg" className="uppercase">
              {t('registration')}
            </Button>
          </Link>
        </div>
      </div>

      {/* Main content */}
      <div className="relative flex min-h-screen flex-col items-start justify-center px-4">
        <div className="w-3/4 text-center">
          {/* Logo/Title */}
          <div className="mb-12">
            <h1 className="text-5xl md:text-8xl text-gray-300 mb-4">
              {t('title')}
            </h1>
            <p className="uppercase text-xl md:text-2xl text-gray-300">
              {t('subtitle')}
            </p>
          </div>

          {/* Action Buttons */}
          <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
            <Link
              href="/auth/signup">
              <Button variant="glass" size="xl" className="uppercase">
                {t('startNow')}
              </Button>
            </Link>
            <div className="flex flex-col sm:flex-row gap-2 justify-center items-center mt-4">
              <Link
                href="/auth/signin">
                <Button variant="outline" size="lg" className="uppercase text-sm">
                  Login
                </Button>
              </Link>
              <span className="text-gray-400 text-sm">atau</span>
              <Link
                href="/auth/signup">
                <Button variant="outline" size="lg" className="uppercase text-sm">
                  Daftar sebagai Pendidik
                </Button>
              </Link>
              <Link
                href="/auth/signup">
                <Button variant="outline" size="lg" className="uppercase text-sm">
                  Daftar sebagai Calon Pendidik
                </Button>
              </Link>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}