'use client'

import {
  DashboardKpiGrid,
  DashboardSalesDailyKpiGrid,
} from "@/components/dashboard/kpi-grid"
import { RevenueChartCard } from "@/components/dashboard/revenue-chart-card"
import { PipelineCard } from "@/components/dashboard/pipeline-card"
import { LeaderboardCard } from "@/components/dashboard/leaderboard-card"
import { ActivityFeedCard } from "@/components/dashboard/activity-feed-card"
import { ForecastCard } from "@/components/dashboard/forecast-card"

export default function Home() {
  return (
    <div className="flex flex-col gap-6 p-1 sm:p-2 md:p-4 overflow-y-auto scrollbar-themed">
      <div className="flex flex-col gap-4 border-b border-border/40 pb-5">
        <div className="flex flex-col">
          <h1 className="text-[25px] font-extrabold text-text font-['Lexend'] tracking-tight leading-none">
            Sales Reports
          </h1>
          <p className="text-[12px] text-gray-500 mt-2 font-['Lexend_Deca']">
            All-time performance overview - <span className="font-bold text-text">Jumppace Agency</span>
          </p>
        </div>
      </div>

      <DashboardKpiGrid />

      <section aria-label="Daily sales benchmarks">
        <DashboardSalesDailyKpiGrid />
      </section>

      <div className="grid grid-cols-1 xl:grid-cols-2 gap-4">
        <RevenueChartCard />
        <PipelineCard />
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-[1.4fr_1fr_1fr] gap-4">
        <LeaderboardCard />
        <ActivityFeedCard />
        <ForecastCard />
      </div>
    </div>
  )
}