"use client"

import {
  DashboardKpiGrid,
  DashboardSalesDailyKpiGrid,
} from "@/components/dashboard/kpi-grid"
import {
  LazyActivityFeedCard,
  LazyForecastCard,
  LazyLeaderboardCard,
  LazyPipelineCard,
  LazyRevenueChartCard,
} from "@/components/dashboard/dashboard-lazy-sections"

export function DashboardPage() {
  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">
        <LazyRevenueChartCard />
        <LazyPipelineCard />
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-[1.4fr_1fr_1fr] gap-4">
        <LazyLeaderboardCard />
        <LazyActivityFeedCard />
        <LazyForecastCard />
      </div>
    </div>
  )
}