function FinalProjectWorkspace({isMobile}){
  const {state,dispatch}=useStore();const project=activeProject(state);
  const [step,setStep]=React.useState('design'),[busy,setBusy]=React.useState(false),[error,setError]=React.useState('');
  React.useEffect(()=>{dispatch({type:'set-tool',tool:null});},[project.id]);
  const index=Math.max(0,project.canvases.findIndex(c=>c.id===project.activeCanvasId));
  const canvas=project.canvases[index];
  const crowded=project.canvases.flatMap((c,i)=>c.elements.some(e=>e.type==='text'&&!e.hidden&&(e.y+textLayout(e).height>c.h||e.x+e.w>c.w||e.x<0||e.y<0||e.fontSize<24))?[i+1]:[]);
  const go=i=>dispatch({type:'set-active-canvas',id:project.canvases[Math.max(0,Math.min(project.canvases.length-1,i))].id});
  const touch=React.useRef(null);
  const download=async()=>{setBusy(true);setError('');try{await exportCanvases(project.canvases,'png',project.name.replace(/[^\w-]/g,'_'));}catch(e){setError(e.message||'Download failed');}finally{setBusy(false);}};
  const nav=<nav className="simple-nav final-progress" aria-label="Carousel workflow"><button onClick={()=>{dispatch({type:'close-project'});dispatch({type:'set-view',view:'home'});}}>← Home</button><button aria-current={step==='design'} onClick={()=>setStep('design')}>Design</button><button aria-current={step==='preview'} onClick={()=>setStep('preview')}>Preview & Download</button></nav>;
  return <div className="simple-workspace"><SimpleStudioStyles/><style>{`.final-progress{justify-content:flex-start!important;padding:6px!important;gap:2px!important}.final-progress button{padding:10px 8px!important;font-size:13px!important}.final-review{display:flex;flex-direction:column;align-items:center;gap:16px}.final-review button{min-height:44px}.final-review .preview-buttons{display:flex;align-items:center;gap:20px}.final-review .preview-image{max-width:100%;overflow:hidden}`}</style>
    {crowded.length>0&&<div role="status" style={{padding:'6px 12px',background:'#fff3d6',fontSize:12}}>Check slides {crowded.join(', ')}: some text is very small or extends outside the page. Resize it or use Fit text.</div>}
    {step==='design'?<div className="simple-design">{isMobile?<MobileEditor progressNav={nav}/>:<EditorScreen progressNav={nav}/>}</div>:<>{nav}<main className="simple-content"><div className="final-review"><h2 style={{margin:0}}>Preview your carousel</h2><p className="simple-muted" style={{margin:0}}>{canvas.w} × {canvas.h} · saved automatically in this browser</p><div className="preview-image" onTouchStart={e=>{touch.current=e.touches[0].clientX;}} onTouchEnd={e=>{if(touch.current==null)return;const dx=e.changedTouches[0].clientX-touch.current;if(Math.abs(dx)>40)go(index+(dx<0?1:-1));touch.current=null;}}><MiniPreview canvas={canvas} maxW={Math.min(440,window.innerWidth-48)} maxH={Math.min(540,window.innerHeight*.56)}/></div><div className="preview-buttons"><button aria-label="Previous preview slide" disabled={index===0} onClick={()=>go(index-1)}>←</button><span>Slide {index+1} of {project.canvases.length}</span><button aria-label="Next preview slide" disabled={index===project.canvases.length-1} onClick={()=>go(index+1)}>→</button></div><button className="simple-action" onClick={()=>setStep('design')}>Edit this slide</button><button className="simple-action" disabled={busy} onClick={download}>{busy?'Preparing images…':'Download carousel PNGs'}</button><button className="sc-link" onClick={()=>exportProjectFile(project)}>Save editable backup</button><p className="simple-muted">Download the images, then select them in order when making your Instagram post.</p>{error&&<p role="alert">{error}</p>}</div></main></>}
  </div>;
}
Object.assign(window,{FinalProjectWorkspace});