import { TieredBandList } from "@/components/home/tiered-band-list"

interface Vertical {
  id: number
  name: string
  slug: string
  description: string | null
}

async function getVerticals(): Promise<Vertical[]> {
  try {
    const res = await fetch(`${getApiUrl()}/verticals`, { next: { revalidate: 60 } })
    if (!res.ok) return []
    return res.json()
  } catch {
    return []
  }
}


export default async function HomePage() {
  const verticals = await getVerticals()

  return (
    <div className="space-y-20 pb-16">
      {/* Hero Section */}
      <section className="text-center pt-20 pb-10 space-y-8 animate-in fade-in zoom-in duration-700">
        <div className="space-y-4">
          <h1 className="text-6xl font-extrabold tracking-tighter bg-clip-text text-transparent bg-gradient-to-r from-primary to-primary/60">
            Fediversion
          </h1>
          <p className="text-2xl text-muted-foreground max-w-2xl mx-auto font-light leading-relaxed">
            The unified platform for the jam scene.
            <br />
            <span className="text-foreground font-medium">One account. All your bands.</span>
          </p>
        </div>

        <div className="flex justify-center gap-4 pt-4">
          <Button asChild size="xl" className="h-14 px-8 text-lg rounded-full">
            <Link href="/register">Join the Community</Link>
          </Button>
          <Button asChild variant="outline" size="xl" className="h-14 px-8 text-lg rounded-full">
            <Link href="/shows">Find a Show</Link>
          </Button>
        </div>
      </section>

      {/* Tiered Band List - The "Meat" */}
      <TieredBandList initialVerticals={verticals} />

      {/* Community / Stats - Reimagined */}
      <section className="max-w-4xl mx-auto px-4">
        <div className="bg-muted/50 rounded-3xl p-12 text-center space-y-8 border backdrop-blur-sm">
          <div className="space-y-2">
            <h2 className="text-3xl font-bold tracking-tight">Community Powered</h2>
            <p className="text-lg text-muted-foreground">
              Built by fans, for fans. Track your history, rate jams, and find your flock.
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-8 pt-4">
            <StatItem
              value={verticals.length > 0 ? verticals.length.toString() : "25+"}
              label="Bands Covered"
            />
            <StatItem
              value="∞"
              label="Jams Indexed"
            />
            <StatItem
              value="1"
              label="Universal Account"
            />
          </div>
        </div>
      </section>
    </div>
  )
}

function StatItem({ value, label }: { value: string, label: string }) {
  return (
    <div className="space-y-1">
      <div className="text-4xl font-black text-primary tracking-tight">{value}</div>
      <div className="text-sm font-medium text-muted-foreground uppercase tracking-wider">{label}</div>
    </div>
  )
}