import { useNavigate } from 'react-router-dom';
import { Activity, BriefcaseMedical, Clock3, Cloud, ScanLine, Orbit, AlignCenter, Smile, Component, Workflow, Factory, ShieldCheck } from 'lucide-react';
import MetricCard from '@/components/studio/MetricCard'; import ModuleCard from '@/components/studio/ModuleCard'; import ViewportPanel from '@/components/studio/ViewportPanel'; import AIAssistant from '@/components/studio/AIAssistant';
const modules=[['Digital Impression','Inspect imported surface geometry',ScanLine],['Jaw Alignment','Align arches and anatomical planes',AlignCenter],['Arch & Occlusion','Upper/lower arches and contact simulation',Orbit],['Restoration Preview','Crowns, bridges and denture previews',Smile],['CBCT & Implant','Future expansion module',Component,'COMING SOON'],['Lab Workflow','Track stages from intake to delivery',Workflow],['Manufacturing','Print preparation and production',Factory],['Quality Control','Review tolerances and sign-off',ShieldCheck]];
const Home = () => { const nav=useNavigate(); return <div className="p-4 pb-24 lg:p-6">
  <div className="mb-6"><div className="text-[9px] uppercase tracking-[.25em] text-cyan-400">Clinical workspace / Overview</div><h1 className="mt-2 text-2xl font-light text-white">Good morning, Studio Team</h1><p className="mt-1 text-xs text-slate-500">Planning, education and laboratory workflow command center</p></div>
  <div className="mb-5 grid grid-cols-2 gap-3 lg:grid-cols-4"><MetricCard label="Active cases" value="24" detail="7 require review" icon={BriefcaseMedical}/><MetricCard label="Scans today" value="08" detail="96.8% integrity" icon={ScanLine}/><MetricCard label="In production" value="13" detail="3 due today" icon={Clock3}/><MetricCard label="System status" value="Online" detail="Cloud sync ready" icon={Cloud}/></div>
  <div className="grid gap-4 xl:grid-cols-3"><ViewportPanel/><AIAssistant/></div>
  <div className="mt-5 grid gap-3 sm:grid-cols-2 lg:grid-cols-4">{modules.map(([a,b,I,badge])=><ModuleCard key={a} title={a} description={b} icon={I} badge={badge} onClick={()=>a==='Manufacturing'?nav('/manufacturing'):a==='Quality Control'?nav('/quality'):null}/>)}</div>
  <div className="mt-5 flex items-center gap-2 text-[10px] text-slate-600"><Activity className="h-3.5 w-3.5 text-cyan-500"/>Professional planning software — not for diagnosis, prescribing, or unsupervised manufacture.</div>
</div> };
export default Home;