import { Sidebar } from "@/components/sidebar"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Upload, Settings, BarChart3, FileText, ArrowRight } from "lucide-react"
import Link from "next/link"

export default function HomePage() {
  return (
    <div className="min-h-screen bg-background">
      <Sidebar />

      <main className="md:ml-64 p-6">
        {/* Hero Section */}
        <div className="max-w-4xl mx-auto">
          <div className="text-center mb-12 pt-8 md:pt-0">
            <h1 className="text-4xl md:text-5xl font-bold text-foreground mb-4 font-[var(--font-playfair)]">
              AI 智能評審系統
            </h1>
            <p className="text-xl text-muted-foreground mb-8 max-w-2xl mx-auto leading-relaxed">
              上傳您的 PPT、影片或網站連結，設定評分標準，獲得專業的 AI 評分結果
            </p>
            <div className="flex flex-col sm:flex-row gap-4 justify-center">
              <Button asChild size="lg" className="text-lg px-8">
                <Link href="/upload">
                  開始評審 <ArrowRight className="ml-2 h-5 w-5" />
                </Link>
              </Button>
              <Button asChild variant="outline" size="lg" className="text-lg px-8 bg-transparent">
                <Link href="/criteria">設定標準</Link>
              </Button>
            </div>
          </div>

          {/* Features Grid */}
          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
            <Card className="text-center hover:shadow-lg transition-shadow">
              <CardHeader>
                <div className="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mx-auto mb-4">
                  <Upload className="h-6 w-6 text-primary" />
                </div>
                <CardTitle className="text-lg">多格式上傳</CardTitle>
              </CardHeader>
              <CardContent>
                <CardDescription>支援 PPT、影片、網站連結等多種格式的內容上傳</CardDescription>
              </CardContent>
            </Card>

            <Card className="text-center hover:shadow-lg transition-shadow">
              <CardHeader>
                <div className="w-12 h-12 bg-secondary/10 rounded-lg flex items-center justify-center mx-auto mb-4">
                  <Settings className="h-6 w-6 text-secondary" />
                </div>
                <CardTitle className="text-lg">彈性評分標準</CardTitle>
              </CardHeader>
              <CardContent>
                <CardDescription>自定義評分項目和權重，建立符合需求的評審標準</CardDescription>
              </CardContent>
            </Card>

            <Card className="text-center hover:shadow-lg transition-shadow">
              <CardHeader>
                <div className="w-12 h-12 bg-accent/10 rounded-lg flex items-center justify-center mx-auto mb-4">
                  <BarChart3 className="h-6 w-6 text-accent" />
                </div>
                <CardTitle className="text-lg">智能評分</CardTitle>
              </CardHeader>
              <CardContent>
                <CardDescription>AI 分析內容並根據您的標準提供詳細的評分結果</CardDescription>
              </CardContent>
            </Card>

            <Card className="text-center hover:shadow-lg transition-shadow">
              <CardHeader>
                <div className="w-12 h-12 bg-chart-4/10 rounded-lg flex items-center justify-center mx-auto mb-4">
                  <FileText className="h-6 w-6 text-chart-4" />
                </div>
                <CardTitle className="text-lg">詳細報告</CardTitle>
              </CardHeader>
              <CardContent>
                <CardDescription>獲得完整的評分報告和改進建議，追蹤歷史記錄</CardDescription>
              </CardContent>
            </Card>
          </div>

          {/* How it works */}
          <Card className="mb-12">
            <CardHeader className="text-center">
              <CardTitle className="text-2xl font-[var(--font-playfair)]">使用流程</CardTitle>
              <CardDescription className="text-lg">簡單四步驟，完成專業評審</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="grid md:grid-cols-4 gap-8">
                <div className="text-center">
                  <div className="w-16 h-16 bg-primary rounded-full flex items-center justify-center mx-auto mb-4 text-primary-foreground font-bold text-xl">
                    1
                  </div>
                  <h3 className="font-semibold mb-2">設定評分標準</h3>
                  <p className="text-sm text-muted-foreground">定義評分項目和權重比例</p>
                </div>
                <div className="text-center">
                  <div className="w-16 h-16 bg-secondary rounded-full flex items-center justify-center mx-auto mb-4 text-secondary-foreground font-bold text-xl">
                    2
                  </div>
                  <h3 className="font-semibold mb-2">上傳內容</h3>
                  <p className="text-sm text-muted-foreground">上傳 PPT、影片或提供網站連結</p>
                </div>
                <div className="text-center">
                  <div className="w-16 h-16 bg-accent rounded-full flex items-center justify-center mx-auto mb-4 text-accent-foreground font-bold text-xl">
                    3
                  </div>
                  <h3 className="font-semibold mb-2">AI 分析</h3>
                  <p className="text-sm text-muted-foreground">系統自動分析內容並評分</p>
                </div>
                <div className="text-center">
                  <div className="w-16 h-16 bg-chart-4 rounded-full flex items-center justify-center mx-auto mb-4 text-white font-bold text-xl">
                    4
                  </div>
                  <h3 className="font-semibold mb-2">查看結果</h3>
                  <p className="text-sm text-muted-foreground">獲得詳細評分報告和建議</p>
                </div>
              </div>
            </CardContent>
          </Card>

          {/* Quick Stats */}
          <div className="grid md:grid-cols-3 gap-6">
            <Card className="text-center">
              <CardContent className="pt-6">
                <div className="text-3xl font-bold text-primary mb-2">10+</div>
                <p className="text-muted-foreground">評分維度</p>
              </CardContent>
            </Card>
            <Card className="text-center">
              <CardContent className="pt-6">
                <div className="text-3xl font-bold text-secondary mb-2">100%</div>
                <p className="text-muted-foreground">客製化標準</p>
              </CardContent>
            </Card>
            <Card className="text-center">
              <CardContent className="pt-6">
                <div className="text-3xl font-bold text-accent mb-2">24/7</div>
                <p className="text-muted-foreground">即時評審</p>
              </CardContent>
            </Card>
          </div>
        </div>
      </main>
    </div>
  )
}