"use client";

import { Navbar } from "@/components/layout/navbar";
import { InstallBanner } from "@/components/layout/install-banner";
import { ParticleBg } from "@/components/layout/particle-bg";
import { GlobeView } from "@/components/globe/globe-view";
import { StatsPanel } from "@/components/dashboard/stats-panel";
import { ActivityTimeline } from "@/components/dashboard/activity-timeline";
import { ClawFeed } from "@/components/dashboard/claw-feed";
import { RegionRanking } from "@/components/dashboard/region-ranking";

export default function HomePage() {
  return (
    <div className="relative min-h-screen">
      <ParticleBg />
      <Navbar activeView="globe" />

      <main className="relative z-10 mx-auto max-w-[1800px] px-4 pt-20 pb-8">
        <div className="mb-4">
          <InstallBanner />
        </div>
        <div className="grid gap-4 lg:grid-cols-[280px_1fr_280px]">
          {/* Left Panel */}
          <div className="flex flex-col gap-4">
            <StatsPanel />
            <RegionRanking />
          </div>

          {/* Center - Globe + Timeline */}
          <div className="flex flex-col gap-4">
            <div className="h-[500px] lg:h-[600px]">
              <GlobeView />
            </div>
            <ActivityTimeline />
          </div>

          {/* Right Panel */}
          <div className="flex flex-col gap-4">
            <ClawFeed />
          </div>
        </div>
      </main>
    </div>
  );
}