import { ShieldAlert } from 'lucide-react';
import { DISCLAIMER } from '@/lib/demoData';
import CaseOverview from '@/components/studio/CaseOverview';
import ViewportStudio from '@/components/studio/ViewportStudio';
import LayersPanel from '@/components/studio/LayersPanel';
import AIAnalysisPanel from '@/components/studio/AIAnalysisPanel';
import CostDonut from '@/components/studio/CostDonut';
import ScanThumbnails from '@/components/studio/ScanThumbnails';
import ProductsTable from '@/components/studio/ProductsTable';
import WorkflowTimeline from '@/components/studio/WorkflowTimeline';

const Dashboard = () => (
  <div className="flex flex-col gap-3 p-3 lg:p-4">
    <div className="flex flex-col gap-1.5 sm:flex-row sm:items-center sm:justify-between">
      <div>
        <h1 className="text-lg font-light tracking-tight text-white">SHiRE Dental Studio</h1>
        <p className="text-[10px] text-slate-500">Digital Dentistry, Design and Laboratory Workflow</p>
      </div>
      <div className="flex items-center gap-1.5 text-[9px] text-amber-200/50">
        <ShieldAlert className="h-3.5 w-3.5" />
        Professional planning · not for diagnosis or unsupervised manufacture
      </div>
    </div>

    <div className="grid gap-3 xl:grid-cols-[220px_minmax(0,1fr)_300px]">
      <CaseOverview />
      <ViewportStudio />
      <div className="flex flex-col gap-3">
        <AIAnalysisPanel />
        <CostDonut />
        <ScanThumbnails />
      </div>
    </div>

    <div className="grid gap-3 xl:grid-cols-[minmax(0,1fr)_300px]">
      <ProductsTable />
      <LayersPanel />
    </div>

    <WorkflowTimeline />

    <div className="rounded-md border border-white/[.05] bg-white/[.02] p-2.5 text-[8px] leading-snug text-slate-600">
      {DISCLAIMER}
    </div>
  </div>
);
export default Dashboard;