import { ActivityFeed } from "@/components/feed/activity-feed"
import { Button } from "@/components/ui/button"
import Link from "next/link"
import { Trophy, Music, MapPin, Users } from "lucide-react"

export default function Home() {
  return (
    <div className="flex flex-col gap-8">
      {/* Hero Section */}
      <section className="flex flex-col items-center gap-4 py-12 text-center md:py-20 bg-gradient-to-b from-background to-accent/20 rounded-3xl border">
        <h1 className="text-4xl font-bold tracking-tighter sm:text-5xl md:text-6xl">
          Elmeg Demo
        </h1>
        <p className="max-w-[600px] text-lg text-muted-foreground">
          Explore the "vibey" data we just generated.
          <br />
          36 Personas. Wiki-linked Reviews. Interconnected Data.
        </p>
        <div className="flex gap-4">
          <Link href="/leaderboards">
            <Button size="lg" className="gap-2">
              <Trophy className="h-4 w-4" />
              View Leaderboards
            </Button>
          </Link>
          <Link href="/shows">
            <Button variant="outline" size="lg">
              Browse Shows
            </Button>
          </Link>
        </div>
      </section>

      <div className="grid gap-8 md:grid-cols-2">
        {/* Activity Feed */}
        <section className="space-y-4">
          <div className="flex items-center justify-between">
            <h2 className="text-2xl font-bold">Recent Activity</h2>
            <Link href="/leaderboards" className="text-sm text-muted-foreground hover:underline">
              View all activity
            </Link>
          </div>
          <ActivityFeed />
        </section>

        {/* Quick Stats / Leaderboard Preview */}
        <section className="space-y-4">
          <h2 className="text-2xl font-bold">Explore</h2>
          <div className="grid gap-4 sm:grid-cols-2">
            <Link href="/shows" className="block p-6 border rounded-xl hover:bg-accent transition-colors">
              <Music className="h-8 w-8 mb-2 text-blue-500" />
              <h3 className="font-bold">Shows</h3>
              <p className="text-sm text-muted-foreground">Browse the archive</p>
            </Link>
            <Link href="/venues" className="block p-6 border rounded-xl hover:bg-accent transition-colors">
              <MapPin className="h-8 w-8 mb-2 text-green-500" />
              <h3 className="font-bold">Venues</h3>
              <p className="text-sm text-muted-foreground">Find your favorite spots</p>
            </Link>
            <Link href="/leaderboards" className="block p-6 border rounded-xl hover:bg-accent transition-colors">
              <Users className="h-8 w-8 mb-2 text-purple-500" />
              <h3 className="font-bold">Community</h3>
              <p className="text-sm text-muted-foreground">Meet the 36 personas</p>
            </Link>
            <Link href="/leaderboards" className="block p-6 border rounded-xl hover:bg-accent transition-colors">
              <Trophy className="h-8 w-8 mb-2 text-yellow-500" />
              <h3 className="font-bold">Leaderboards</h3>
              <p className="text-sm text-muted-foreground">Top rated everything</p>
            </Link>
          </div>
        </section>
      </div>
    </div>
  )
}