import { useState } from 'react';
import { ArrowRight, ShieldCheck, X } from 'lucide-react';
const Onboarding = () => {
  const [open, setOpen] = useState(() => !localStorage.getItem('shire-onboarded'));
  const done = () => { localStorage.setItem('shire-onboarded','1'); setOpen(false); };
  if (!open) return null;
  return <div className="fixed inset-0 z-[100] grid place-items-center bg-black/80 p-4 backdrop-blur-md">
    <div className="w-full max-w-lg rounded-2xl border border-cyan-400/20 bg-[#09101b] p-7 shadow-2xl">
      <button onClick={done} className="float-right text-slate-600"><X /></button>
      <div className="grid h-12 w-12 place-items-center rounded-xl bg-cyan-400/10 text-cyan-300"><ShieldCheck /></div>
      <div className="mt-6 text-[10px] uppercase tracking-[.24em] text-cyan-400">Welcome to SHiRE</div>
      <h2 className="mt-2 text-2xl font-light text-white">Professional digital dentistry workspace</h2>
      <p className="mt-3 text-sm leading-relaxed text-slate-400">Import supported scans, inspect models, manage cases and document qualified review. AI findings are advisory and never approve treatment.</p>
      <button onClick={done} className="primary-button mt-7 w-full justify-center">Enter studio <ArrowRight /></button>
    </div>
  </div>;
};
export default Onboarding;