"use client"

import Link from "next/link"
import { Button } from "@/components/ui/button"
import { useAuth } from "@/contexts/auth-context"

export default function Home() {
  const { isAuthenticated, user } = useAuth()

  return (
    <div className="min-h-screen flex flex-col">
      {/* Navigation */}
      <header className="absolute top-0 right-0 p-6 z-10">
        <div className="flex items-center gap-4">
          {isAuthenticated ? (
            <>
              <span className="text-sm text-gray-600 dark:text-gray-300">
                Welcome, {user?.email}
              </span>
              <Button asChild>
                <Link href="/dashboard">Dashboard</Link>
              </Button>
            </>
          ) : (
            <>
              <Button variant="outline" asChild>
                <Link href="/login">Sign In</Link>
              </Button>
              <Button asChild>
                <Link href="/register">Get Started</Link>
              </Button>
            </>
          )}
        </div>
      </header>

      {/* Main Content */}
      <div className="flex-1 flex items-center justify-center bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-gray-900 dark:to-gray-800">
        <main className="text-center px-4">
          <h1 className="text-6xl font-bold text-gray-900 dark:text-white mb-4">
            分布式流星监测网络
          </h1>
          <p className="text-xl text-gray-600 dark:text-gray-300 mb-8">
            Distributed Meteor Monitoring Network
          </p>
          
          {!isAuthenticated && (
            <div className="flex items-center justify-center gap-4">
              <Button size="lg" asChild>
                <Link href="/register">Join the Network</Link>
              </Button>
              <Button variant="outline" size="lg" asChild>
                <Link href="/login">Sign In</Link>
              </Button>
            </div>
          )}
        </main>
      </div>
    </div>
  )
}