import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Logo } from "@/components/logo"
import Link from "next/link"
import { Users, LogIn, UserPlus } from "lucide-react"

export default function Home() {
  return (
    <div className="min-h-screen bg-gradient-to-b from-slate-50 to-slate-100 dark:from-slate-900 dark:to-slate-800">
      <div className="container mx-auto px-4 py-16">
        <div className="max-w-3xl mx-auto text-center mb-16">
          <div className="flex justify-center mb-8">
            <Logo href="/" className="w-64" />
          </div>
          <h1 className="text-4xl font-bold tracking-tight mb-4 text-slate-900 dark:text-white">
            PMC Clocking In System
          </h1>
          <p className="text-xl text-slate-600 dark:text-slate-300">
            Streamline attendance tracking and workforce management
          </p>
        </div>
        <div className="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto">
          <Card className="shadow-md hover:shadow-lg transition-shadow">
            <CardHeader className="text-center">
              <CardTitle className="text-2xl">Employee Portal</CardTitle>
              <CardDescription>Clock in/out and manage your attendance</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <Link href="/employee/login">
                <Button size="lg" className="w-full flex items-center gap-2">
                  <LogIn className="h-5 w-5" />
                  Employee Login
                </Button>
              </Link>
              <Link href="/employee/signup">
                <Button size="lg" variant="outline" className="w-full flex items-center gap-2">
                  <UserPlus className="h-5 w-5" />
                  Create Account
                </Button>
              </Link>
            </CardContent>
          </Card>

          <Card className="shadow-md hover:shadow-lg transition-shadow">
            <CardHeader className="text-center">
              <CardTitle className="text-2xl flex items-center justify-center gap-2">
                <Users className="h-6 w-6 text-primary" />
                Admin Portal
              </CardTitle>
              <CardDescription>Manage employees and view attendance reports</CardDescription>
            </CardHeader>
            <CardContent className="flex justify-center">
              <Link href="/admin/login">
                <Button size="lg" variant="outline" className="w-full">
                  Admin Login
                </Button>
              </Link>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  )
}