import React from 'react'; import { Ruler } from 'lucide-react';
const tools=['Point-to-point distance','Height','Width','Depth','Circumference path','Angle','Bounding-box dimensions','Cross-section measurement','Diameter','Clearance offset'];
export default function Measurements(){return <div className="mx-auto max-w-6xl"><p className="text-xs uppercase tracking-[.28em] text-purple-300">Scale-aware review</p><h2 className="mt-2 text-3xl font-semibold">Measurements</h2><div className="mt-5 grid gap-4 lg:grid-cols-[280px_1fr]"><aside className="rounded-2xl border border-white/10 bg-[#111114] p-3">{tools.map(t=><button key={t} className="w-full rounded-xl px-3 py-2.5 text-left text-sm text-zinc-400 hover:bg-white/5 hover:text-white">{t}</button>)}</aside><div className="flex min-h-[60vh] items-center justify-center rounded-2xl border border-white/10 bg-[#0c0c0f]"><div className="text-center"><Ruler className="mx-auto text-zinc-700" size={52}/><p className="mt-4 text-zinc-500">Load a calibrated mesh to measure</p><span className="mt-3 inline-block rounded-full border border-red-500/30 bg-red-500/10 px-3 py-1 text-xs text-red-300">UNSCALED</span><p className="mx-auto mt-4 max-w-md text-xs leading-5 text-zinc-600">Approximate Kinect measurements are not certified or exact. Manually verify all critical dimensions.</p></div></div></div></div>}