import { BookList } from "@/components/book-list"
import { MainNav } from "@/components/main-nav"
import { SearchBar } from "@/components/search-bar"
import { ThemeToggle } from "@/components/theme-toggle"
import { Button } from "@/components/ui/button"
import { ShoppingCart } from "@/components/shopping-cart"
import { UserNav } from "@/components/user-nav"
import { BookOpen } from "lucide-react"
import Link from "next/link"

export default function Home() {
  return (
    <div className="flex min-h-screen flex-col">
      <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
        <div className="container flex h-16 items-center justify-between">
          <MainNav />
          <div className="flex items-center gap-4">
            <SearchBar />
            <ShoppingCart />
            <ThemeToggle />
            <UserNav />
          </div>
        </div>
      </header>
      <main className="flex-1">
        <section className="w-full py-12 md:py-24 lg:py-32 bg-muted/50">
          <div className="container px-4 md:px-6">
            <div className="grid gap-6 lg:grid-cols-2 lg:gap-12 items-center">
              <div className="space-y-4">
                <h1 className="text-3xl font-bold tracking-tighter sm:text-5xl xl:text-6xl/none">探索知识的海洋</h1>
                <p className="max-w-[600px] text-muted-foreground md:text-xl">
                  欢迎来到我们的图书管理系统，这里有丰富的图书资源等待您的探索。
                </p>
                <div className="flex flex-col gap-2 min-[400px]:flex-row">
                  <Link href="/books">
                    <Button size="lg" className="gap-1.5">
                      <BookOpen className="h-5 w-5" />
                      浏览图书
                    </Button>
                  </Link>
                </div>
              </div>
              <div className="flex justify-center">
                <img
                  src="/placeholder.svg?height=550&width=450"
                  alt="图书馆"
                  className="aspect-[4/5] overflow-hidden rounded-xl object-cover"
                  width={450}
                  height={550}
                />
              </div>
            </div>
          </div>
        </section>
        <section className="container py-8 md:py-12">
          <div className="flex flex-col items-center justify-center space-y-4 text-center">
            <div className="space-y-2">
              <h2 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl">精选图书</h2>
              <p className="max-w-[900px] text-muted-foreground md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed">
                发现我们最新和最受欢迎的图书
              </p>
            </div>
          </div>
          <BookList />
        </section>
      </main>
      <footer className="border-t py-6 md:py-0">
        <div className="container flex flex-col items-center justify-between gap-4 md:h-24 md:flex-row">
          <p className="text-center text-sm leading-loose text-muted-foreground md:text-left">
            &copy; {new Date().getFullYear()} 图书管理系统. 保留所有权利.
          </p>
        </div>
      </footer>
    </div>
  )
}