import { ShieldAlert } from 'lucide-react';
import PageTitle from '@/components/studio/PageTitle';
import ViewportStudio from '@/components/studio/ViewportStudio';
import { DISCLAIMER } from '@/lib/demoData';

const tools = ['Complete Upper','Complete Lower','Upper & Lower Set','Partial Denture','Tooth Arrangement','Base Generation','Gingival Contour','Tooth Scaling','Rotation','Movement','Arch Alignment','Midline','Smile Line','Occlusal Plane','Bite Clearance','Base Thickness','Relief Zones','Border Extensions','Attachment (placeholder)','Support Generation','Print Orientation'];

const DesignStudio = () => (
  <div className="p-3 pb-10 lg:p-4">
    <PageTitle eyebrow="Design Studio" title="Denture Design" description="Plan complete and partial dentures with tooth arrangement and base generation." />
    <div className="grid gap-3 lg:grid-cols-[minmax(0,1fr)_240px]">
      <ViewportStudio />
      <div className="glass-panel p-3">
        <div className="mb-2 text-[10px] uppercase tracking-[.18em] text-cyan-400">Design Tools</div>
        <div className="grid grid-cols-2 gap-1.5">
          {tools.map(t => (
            <button key={t} className="rounded-md border border-white/[.06] bg-black/20 px-2 py-1.5 text-left text-[10px] text-slate-400 hover:border-cyan-400/30 hover:text-cyan-300">{t}</button>
          ))}
        </div>
      </div>
    </div>
    <div className="mt-3 flex gap-2 rounded-md border border-amber-400/15 bg-amber-400/[.04] p-3 text-[9px] leading-relaxed text-amber-200/70">
      <ShieldAlert className="h-4 w-4 shrink-0" />
      {DISCLAIMER}
    </div>
  </div>
);
export default DesignStudio;