import { useState } from 'react';
import PageHeader from '@/components/workshop/PageHeader';
import { settingsService } from '@/services/settingsService';
export default function Settings() { const [s,setS]=useState(settingsService.get()); const update=(k,v)=>{const n={...s,[k]:v};setS(n);settingsService.save(n)}; const toggles=[['contrast','High-contrast mode'],['reducedMotion','Reduced-motion mode'],['largeTouch','Large-touch-control mode']]; return <><PageHeader eyebrow="Workshop preferences" title="Settings" description="Preferences are stored on this authorised workshop device."/><div className="panel max-w-2xl p-6"><label className="flex items-center justify-between gap-4 border-b border-white/10 py-4"><span className="text-slate-200">Appearance</span><select className="workshop-input mt-0 w-40" value={s.theme} onChange={e=>update('theme',e.target.value)}><option value="dark">Dark</option><option value="light">Light</option></select></label>{toggles.map(([k,l])=><label key={k} className="flex min-h-16 items-center justify-between gap-4 border-b border-white/10 py-4"><span className="text-slate-200">{l}</span><input className="h-6 w-6 accent-violet-400" type="checkbox" checked={s[k]} onChange={e=>update(k,e.target.checked)}/></label>)}<p className="mt-5 text-sm leading-6 text-slate-500">Keyboard focus indicators and screen-reader labels are always enabled.</p></div></> }