const { useEffect, useMemo, useRef, useState } = React;

const PREVIEW_ITEMS = [
  { id: 'img-01', type: 'image', title: 'Chromatic Editorial', model: 'Seedream 5.0', ratio: '4:5', prompt: 'Editorial portrait of a creative director in a translucent cobalt raincoat, soft apricot light, reflective floor, restrained luxury campaign, crisp skin texture, 85mm lens.', src: '/showcase/assets/gpt2-typography.jpg', favorite: true, span: 'tall', age: '12 min ago' },
  { id: 'vid-01', type: 'video', title: 'Coastal Hypercar', model: 'Seedance 2.0', ratio: '16:9', prompt: 'A graphite hypercar launches along a coastal highway at blue hour, low rear-wheel tracking shot, clean city light trails, wet asphalt reflections, premium automotive film.', src: '/showcase/assets/posters/seedance20-tiger-demo.jpg', video: '/showcase/assets/seedance20-tiger-demo.mp4', favorite: false, span: 'wide', age: '28 min ago' },
  { id: 'img-02', type: 'image', title: 'Glass Garden', model: 'Nano Banana 2', ratio: '1:1', prompt: 'A botanical perfume bottle in a miniature glass garden, dewdrops, pale jade and cream palette, morning side light, high-end product macro photography.', src: '/showcase/assets/nb2-t2i.png', favorite: false, span: 'square', age: '46 min ago' },
  { id: 'aud-01', type: 'audio', title: 'Midnight Dispatch', model: 'Seedance Audio', ratio: '01:24', prompt: 'Warm, confident documentary narration with restrained pacing, subtle room tone and a clear Singaporean English cadence.', src: '/showcase/assets/posters/seedance20-dialogue-official.jpg', audio: '/showcase/assets/seedaudio-drama.mp3', favorite: true, span: 'audio', age: '1 hr ago' },
  { id: 'vid-02', type: 'video', title: 'One Shot Kitchen', model: 'Seedance 2.5', ratio: '16:9', prompt: 'One continuous camera move through a compact restaurant kitchen during service, confident choreography, natural steam, warm practical lights, energetic but readable.', src: '/showcase/assets/posters/seedance25-oneshot-1.jpg', video: '/showcase/assets/seedance25-oneshot-1.mp4', favorite: true, span: 'wide', age: '2 hr ago' },
  { id: 'img-03', type: 'image', title: 'Layered Storyboard', model: 'Seedream 5.0', ratio: '3:2', prompt: 'Six-frame cinematic storyboard for a quiet morning coffee campaign, consistent character and wardrobe, natural window light, understated warm palette.', src: '/showcase/assets/seedream5-storyboard.jpg', favorite: false, span: 'wide', age: 'Yesterday' },
  { id: 'vid-03', type: 'video', title: 'Waterfall Reveal', model: 'Veo 3.1', ratio: '16:9', prompt: 'Begin inches from moss and running water, crane backward through a rock opening to reveal a huge hidden valley of tiered waterfalls, golden mist, continuous smooth move.', src: '/showcase/assets/posters/veo31-t2v-demo.jpg', video: '/showcase/assets/veo31-t2v-demo.mp4', favorite: false, span: 'wide', age: 'Yesterday' },
  { id: 'aud-02', type: 'audio', title: 'Founder Voice', model: 'Voice Clone', ratio: '00:38', prompt: 'Clear and conversational founder voice, calm authority, short natural pauses, suitable for a product announcement.', src: '/showcase/assets/seedream5-editing-output.jpg', audio: '/showcase/assets/seedaudio-clone-priya.mp3', favorite: false, span: 'audio', age: '2 days ago' },
  { id: 'img-04', type: 'image', title: 'Arabic Launch Key Visual', model: 'Seedream 5.0', ratio: '4:5', prompt: 'Premium launch poster with precise Arabic typography, deep navy background, glowing amber object, generous negative space and refined editorial hierarchy.', src: '/showcase/assets/seedream5-lang-ar.jpg', favorite: true, span: 'tall', age: '3 days ago' },
];

const PAGE_COPY = {
  explore: { eyebrow: 'Creative feed', title: 'Explore what is possible', sub: 'A curated starting point for image, motion and sound. Open any work to study the prompt or use it as a starting point.' },
  image: { eyebrow: 'Image studio', title: 'Turn an idea into a visual system', sub: 'Keep the canvas dominant. The controls stay close to the prompt and out of the way.' },
  video: { eyebrow: 'Video studio', title: 'Direct motion with clarity', sub: 'Start with the story and camera. Expand advanced controls only when the shot needs them.' },
  audio: { eyebrow: 'Audio studio', title: 'Give the work a voice', sub: 'Create narration, dialogue and sound with a composer built around listening.' },
  library: { eyebrow: 'Your work', title: 'Everything you have created', sub: 'Return to a prompt, compare outputs and continue from any generation.' },
};

const CASE_GUIDES = {
  image: {
    purpose: 'Build campaign-ready key visuals, product scenes and visual directions from one controlled art direction.',
    bestFor: 'Concept development, social assets, storyboards, product photography and consistent campaign systems.',
    method: 'Define the subject first, then composition, light, material and the intended commercial use. Add references only when they improve consistency.',
  },
  video: {
    purpose: 'Turn a readable action into a directed shot with deliberate camera movement, timing and atmosphere.',
    bestFor: 'Advertising shots, product reveals, social motion, cinematic transitions and pre-visualisation.',
    method: 'Describe one action, one camera instruction and one final beat. Use a reference frame for continuity and media references for style or motion cues.',
  },
  audio: {
    purpose: 'Create narration, dialogue and sound direction that matches the pace and emotional character of the work.',
    bestFor: 'Voice-over, explainers, brand films, dialogue tests, product announcements and sound concepts.',
    method: 'Write for the ear: specify voice, pacing, accent, emotion and room tone before technical detail.',
  },
};

const ICONS = {
  explore: '<path d="M4 5.5h7v6H4zM13 5.5h7v10h-7zM4 13.5h7v5H4zM13 17.5h7v1h-7z"/>',
  image: '<rect x="3.5" y="4" width="17" height="16" rx="3"/><circle cx="9" cy="9" r="1.5"/><path d="m5.5 17 4.3-4.3 3.2 3.2 2.3-2.3 3.2 3.4"/>',
  video: '<rect x="3" y="5" width="14" height="14" rx="3"/><path d="m17 10 4-2v8l-4-2z"/>',
  audio: '<path d="M5 10v4M9 7v10M13 4v16M17 8v8M21 10v4"/>',
  library: '<path d="M4 5.5h16M4 11.5h16M4 17.5h16"/><circle cx="7" cy="5.5" r="1.5" fill="currentColor"/><circle cx="15" cy="11.5" r="1.5" fill="currentColor"/><circle cx="10" cy="17.5" r="1.5" fill="currentColor"/>',
};

function Icon({ name, size = 20 }) {
  return <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" dangerouslySetInnerHTML={{ __html: ICONS[name] || ICONS.explore }} />;
}

function Logo() {
  return <div className="pv-logo" aria-label="YEA"><span>Y</span><i></i></div>;
}

function PreviewNotice() {
  return <div className="pv-notice"><span className="pv-notice-dot"></span><strong>UI Preview</strong><span>Read-only demo · no live data</span></div>;
}

function Sidebar({ page, setPage }) {
  return <aside className="pv-sidebar">
    <div className="pv-sidebar-head"><Logo /></div>
    <nav className="pv-nav" aria-label="Primary">
      {['explore', 'image', 'video', 'audio', 'library'].map(name =>
        <button key={name} className={page === name ? 'active' : ''} onClick={() => setPage(name)} title={name[0].toUpperCase() + name.slice(1)}>
          <Icon name={name} /><span>{name[0].toUpperCase() + name.slice(1)}</span>
        </button>
      )}
    </nav>
    <div className="pv-sidebar-foot">
      <button title="Help"><span>?</span></button>
      <div className="pv-avatar">YX</div>
    </div>
  </aside>;
}

function Header({ page }) {
  return <header className="pv-topbar">
    <div className="pv-mobile-brand"><Logo /><b>YEA Create</b></div>
    <div className="pv-crumb">YEA Create <span>/</span> {page[0].toUpperCase() + page.slice(1)}</div>
    <PreviewNotice />
    <div className="pv-quota"><span>Monthly credits</span><b>8,420</b><i style={{ '--quota': '68%' }}></i></div>
    <button className="pv-icon-btn" aria-label="Notifications">○</button>
  </header>;
}

function PageIntro({ page, children }) {
  const copy = PAGE_COPY[page];
  return <div className="pv-intro"><div><span>{copy.eyebrow}</span><h1>{copy.title}</h1><p>{copy.sub}</p></div>{children}</div>;
}

function TypePill({ type }) {
  return <span className={'pv-type-pill ' + type}><Icon name={type === 'image' ? 'image' : type === 'video' ? 'video' : 'audio'} size={13} />{type}</span>;
}

function MediaCard({ item, onOpen, compact = false }) {
  const [playing, setPlaying] = useState(false);
  const mediaRef = useRef(null);
  function togglePlay(e) {
    e.stopPropagation();
    const node = mediaRef.current;
    if (!node) return;
    if (node.paused) { node.play(); setPlaying(true); } else { node.pause(); setPlaying(false); }
  }
  return <article className={'pv-media-card ' + item.span + (compact ? ' compact' : '')} onClick={() => onOpen(item)}>
    <div className="pv-media-frame">
      {item.type === 'video'
        ? <video ref={mediaRef} src={item.video} poster={item.src} muted loop playsInline onEnded={() => setPlaying(false)} />
        : <img src={item.src} alt="" />}
      <div className="pv-card-wash"></div>
      <div className="pv-card-top"><TypePill type={item.type} /><button aria-label="Favorite" onClick={e => e.stopPropagation()}>{item.favorite ? '♥' : '♡'}</button></div>
      {item.type === 'video' && <button className="pv-play" onClick={togglePlay}>{playing ? 'Ⅱ' : '▶'}</button>}
      {item.type === 'audio' && <AudioBars />}
      <div className="pv-card-info"><h3>{item.title}</h3><p>{item.model} · {item.ratio}</p></div>
    </div>
  </article>;
}

function AudioBars() {
  return <div className="pv-audio-bars" aria-hidden="true">{Array.from({ length: 34 }, (_, i) => <i key={i} style={{ height: (16 + ((i * 17) % 48)) + '%' }}></i>)}</div>;
}

function DetailDrawer({ item, onClose, onUse }) {
  const [copied, setCopied] = useState(false);
  if (!item) return null;
  const guide = CASE_GUIDES[item.type] || CASE_GUIDES.image;
  function copyPrompt() {
    navigator.clipboard?.writeText(item.prompt).catch(() => {});
    setCopied(true); setTimeout(() => setCopied(false), 1200);
  }
  return <div className="pv-drawer-backdrop" onMouseDown={e => e.target === e.currentTarget && onClose()}>
    <section className="pv-drawer" role="dialog" aria-modal="true" aria-label={item.title}>
      <div className="pv-drawer-media">
        {item.type === 'video' ? <video src={item.video} poster={item.src} controls autoPlay muted loop /> : item.type === 'audio' ? <div className="pv-audio-stage"><img src={item.src} alt="" /><AudioPlayer item={item} /></div> : <img src={item.src} alt="" />}
        <button className="pv-close" onClick={onClose}>×</button>
      </div>
      <aside className="pv-drawer-info">
        <TypePill type={item.type} />
        <h2>{item.title}</h2><p className="pv-muted">Created {item.age}</p>
        <div className="pv-meta-row"><span>Model<b>{item.model}</b></span><span>Format<b>{item.ratio}</b></span></div>
        <div className="pv-prompt-label"><span>Prompt</span><button onClick={copyPrompt}>{copied ? 'Copied' : 'Copy'}</button></div>
        <div className="pv-prompt-box">{item.prompt}</div>
        <div className="pv-case-guide">
          <div><span>What it does</span><p>{guide.purpose}</p></div>
          <div><span>Best used for</span><p>{guide.bestFor}</p></div>
          <div><span>How it works</span><p>{guide.method}</p></div>
        </div>
        <div className="pv-drawer-actions"><button className="secondary" onClick={onClose}>Close</button><button className="primary" onClick={() => onUse(item)}>Use prompt</button></div>
        <p className="pv-safe-note"><span>●</span> Preview actions never write to your account.</p>
      </aside>
    </section>
  </div>;
}

function AudioPlayer({ item }) {
  const ref = useRef(null); const [playing, setPlaying] = useState(false);
  return <div className="pv-audio-player"><button onClick={() => { const a = ref.current; if (a.paused) { a.play(); setPlaying(true); } else { a.pause(); setPlaying(false); } }}>{playing ? 'Ⅱ' : '▶'}</button><AudioBars /><span>{item.ratio}</span><audio ref={ref} src={item.audio} onEnded={() => setPlaying(false)} /></div>;
}

function Explore({ openItem, useItem }) {
  const [filter, setFilter] = useState('all');
  const items = filter === 'all' ? PREVIEW_ITEMS : PREVIEW_ITEMS.filter(i => i.type === filter);
  return <main className="pv-page pv-explore">
    <PageIntro page="explore"><button className="pv-primary" onClick={() => useItem(PREVIEW_ITEMS[0])}>Start creating <span>→</span></button></PageIntro>
    <div className="pv-filter-row"><div>{['all', 'image', 'video', 'audio'].map(f => <button key={f} onClick={() => setFilter(f)} className={filter === f ? 'active' : ''}>{f === 'all' ? 'All work' : f[0].toUpperCase() + f.slice(1)}</button>)}</div><span>{items.length} curated works</span></div>
    <div className="pv-bento">{items.map(item => <MediaCard key={item.id} item={item} onOpen={openItem} />)}</div>
    <section className="pv-explore-explainer">
      <div><span>Explore is more than a gallery</span><h2>Study the creative decision, not only the prompt.</h2><p>Every example keeps enough room to explain what the feature does, where it is useful and how the result was directed. Open any card to see the complete breakdown.</p></div>
      <div>{[['01','Understand','See the intended use and the creative problem this workflow solves.'],['02','Inspect','Read the prompt together with model and format—not as isolated text.'],['03','Continue','Take the direction into Image, Video or Audio and adapt it to your project.']].map(step => <article key={step[0]}><b>{step[0]}</b><h3>{step[1]}</h3><p>{step[2]}</p></article>)}</div>
    </section>
  </main>;
}

const VIDEO_PROMPT_LAYERS = [
  { label: 'Subject', color: '#F05A28', template: '[Subject]' },
  { label: 'Camera', color: '#4A7FD4', template: '[Camera]' },
  { label: 'Motion', color: '#7B5FC7', template: '[Motion]' },
  { label: 'Lighting', color: '#E89C24', template: '[Lighting]' },
];

function Composer({ type, prompt, setPrompt, onPreview, layers, children }) {
  function addLayer(layer) {
    setPrompt(previous => {
      const current = previous.trimEnd();
      return current + (current ? '\n' : '') + layer.template + ' ';
    });
  }
  return <div className={'pv-composer ' + type}>
    {type === 'video' && <div className="pv-composer-heading"><b>Prompt</b><span>Build in layers or write freely</span></div>}
    <textarea value={prompt} onChange={e => setPrompt(e.target.value)} placeholder={'Describe the ' + (type === 'audio' ? 'voice or sound' : 'scene you want to create') + '…'} />
    {layers && <div className="pv-prompt-layers"><span>Add prompt layer</span><div>{layers.map(layer => <button key={layer.label} onClick={() => addLayer(layer)} style={{ '--layer-color': layer.color }}><i></i>＋ {layer.label}</button>)}</div></div>}
    <div className="pv-composer-bottom"><div className="pv-composer-tools">{children}</div><button className="pv-generate" onClick={onPreview}><span>✦</span> Generate <small>Preview</small></button></div>
  </div>;
}

function SelectChip({ label, value }) { return <button className="pv-select-chip"><span>{label}</span>{value}<b>⌄</b></button>; }

function ImageStudio({ seedPrompt, openItem }) {
  const [prompt, setPrompt] = useState(seedPrompt || 'A refined editorial portrait with sculptural lighting, soft mineral colours and precise art direction.');
  const [toast, setToast] = useState(false);
  useEffect(() => { if (seedPrompt) setPrompt(seedPrompt); }, [seedPrompt]);
  return <main className="pv-studio-page"><PageIntro page="image" />
    <div className="pv-canvas image-canvas">
      <div className="pv-canvas-toolbar"><span><i></i> Draft canvas</span><div><button>−</button><b>82%</b><button>＋</button></div></div>
      <div className="pv-image-result" onClick={() => openItem(PREVIEW_ITEMS[0])}><img src="/showcase/assets/gpt2-typography.jpg" alt="Preview generation" /><span>Open details</span></div>
      <div className="pv-floating-composer"><Composer type="image" prompt={prompt} setPrompt={setPrompt} onPreview={() => { setToast(true); setTimeout(() => setToast(false), 1800); }}><button className="pv-add">＋</button><SelectChip label="Model" value="Seedream 5.0" /><SelectChip label="Ratio" value="4:5" /><SelectChip label="Outputs" value="2" /></Composer></div>
      {toast && <div className="pv-toast">Preview only — no generation was submitted</div>}
    </div>
    <div className="pv-under-canvas"><h2>Recent images</h2><button>View all in Library →</button></div>
    <div className="pv-recent-strip">{PREVIEW_ITEMS.filter(i => i.type === 'image').map(i => <MediaCard compact key={i.id} item={i} onOpen={openItem} />)}</div>
  </main>;
}

function VideoStudio({ seedPrompt, openItem }) {
  const [prompt, setPrompt] = useState(seedPrompt || PREVIEW_ITEMS[1].prompt); const [advanced, setAdvanced] = useState(false); const [toast, setToast] = useState(false); const [section, setSection] = useState('history');
  useEffect(() => { if (seedPrompt) setPrompt(seedPrompt); }, [seedPrompt]);
  return <main className="pv-studio-page video-page"><PageIntro page="video" />
    <div className="pv-video-workspace">
      <aside className="pv-control-rail"><div className="pv-control-title"><span>Shot setup</span><b>01</b></div><label>Reference frame<div className="pv-dropzone"><span>＋</span><b>Add image</b><small>PNG, JPG or WebP</small></div></label><label>Model<SelectChip label="" value="Seedance 2.5" /></label><div className="pv-two-controls"><label>Ratio<SelectChip label="" value="16:9" /></label><label>Duration<SelectChip label="" value="5 sec" /></label></div><button className="pv-advanced" onClick={() => setAdvanced(!advanced)}>Advanced controls <span>{advanced ? '−' : '+'}</span></button>{advanced && <div className="pv-advanced-body"><label>Camera motion<SelectChip label="" value="Slow dolly" /></label><label>Creativity<input type="range" defaultValue="58" /></label></div>}<Composer type="video" prompt={prompt} setPrompt={setPrompt} layers={VIDEO_PROMPT_LAYERS} onPreview={() => { setToast(true); setTimeout(() => setToast(false), 1800); }}><button className="pv-reference-add" onClick={() => { setToast(true); setTimeout(() => setToast(false), 1800); }}>＋ Add reference</button><span className="pv-char-count">{prompt.length} / 2,000</span></Composer></aside>
      <section className="pv-video-content"><div className="pv-segment"><button className={section === 'history' ? 'active' : ''} onClick={() => setSection('history')}>History</button><button className={section === 'guide' ? 'active' : ''} onClick={() => setSection('guide')}>How it works</button></div>{section === 'history' ? <div className="pv-video-grid">{PREVIEW_ITEMS.filter(i => i.type === 'video').map(i => <MediaCard key={i.id} item={i} onOpen={openItem} />)}</div> : <HowItWorks />}</section>
      {toast && <div className="pv-toast">Preview only — no generation was submitted</div>}
    </div>
  </main>;
}

function HowItWorks() { return <div className="pv-how"><span>Three decisions make a strong shot</span><div>{[['01','Subject','Define one readable action.'],['02','Camera','Describe position and movement.'],['03','Timing','Set the rhythm and final beat.']].map(x => <article key={x[0]}><b>{x[0]}</b><h3>{x[1]}</h3><p>{x[2]}</p></article>)}</div><blockquote>“A controlled prompt leaves room for the model to create, while keeping the shot easy to direct.”</blockquote></div>; }

function AudioStudio({ seedPrompt, openItem }) {
  const [prompt, setPrompt] = useState(seedPrompt || PREVIEW_ITEMS[3].prompt); const [toast, setToast] = useState(false);
  useEffect(() => { if (seedPrompt) setPrompt(seedPrompt); }, [seedPrompt]);
  const audios = PREVIEW_ITEMS.filter(i => i.type === 'audio');
  return <main className="pv-studio-page audio-page"><PageIntro page="audio" />
    <div className="pv-audio-layout"><section className="pv-audio-list"><div className="pv-section-head"><div><h2>Recent audio</h2><p>Listen, compare and reuse a voice direction.</p></div><button>View library</button></div>{audios.map((item, index) => <article className="pv-audio-row" key={item.id} onClick={() => openItem(item)}><div className="pv-cover"><img src={item.src} alt="" /><span>{index + 1}</span></div><div className="pv-audio-copy"><h3>{item.title}</h3><p>{item.model} · {item.age}</p></div><AudioPlayer item={item} /><button className="pv-more">···</button></article>)}</section><aside className="pv-audio-guide"><span>Sound direction</span><h2>Write for the ear.</h2><p>Describe pace, emotion, accent and the room before adding technical detail.</p><div><b>Voice</b><span>Warm · assured · natural</span></div><div><b>Pacing</b><span>Measured with short pauses</span></div><div><b>Environment</b><span>Dry studio, subtle room tone</span></div></aside></div>
    <div className="pv-audio-composer-wrap"><Composer type="audio" prompt={prompt} setPrompt={setPrompt} onPreview={() => { setToast(true); setTimeout(() => setToast(false), 1800); }}><SelectChip label="Mode" value="Text to speech" /><SelectChip label="Voice" value="YEA Warm" /><SelectChip label="Length" value="Auto" /></Composer></div>{toast && <div className="pv-toast">Preview only — no generation was submitted</div>}
  </main>;
}

function Library({ openItem }) {
  const [filter, setFilter] = useState('all'); const [query, setQuery] = useState('');
  const items = PREVIEW_ITEMS.filter(i => (filter === 'all' || filter === 'recent' || (filter === 'favorites' ? i.favorite : i.type === filter)) && (!query || (i.title + i.prompt + i.model).toLowerCase().includes(query.toLowerCase())));
  return <main className="pv-page pv-library"><PageIntro page="library"><button className="pv-primary">＋ New collection</button></PageIntro><div className="pv-library-tools"><div className="pv-search"><span>⌕</span><input value={query} onChange={e => setQuery(e.target.value)} placeholder="Search prompts, models and titles" /></div><button>Sort: Newest ⌄</button></div><div className="pv-library-shell"><aside><span>Library</span>{[['all','My generations'],['favorites','Favorites'],['recent','Recent'],['image','Images'],['video','Videos'],['audio','Audio']].map(x => <button key={x[0]} className={filter === x[0] ? 'active' : ''} onClick={() => setFilter(x[0])}><Icon name={x[0] === 'all' || x[0] === 'recent' || x[0] === 'favorites' ? 'library' : x[0]} size={16} />{x[1]}<b>{x[0] === 'favorites' ? PREVIEW_ITEMS.filter(i => i.favorite).length : x[0] === 'all' || x[0] === 'recent' ? PREVIEW_ITEMS.length : PREVIEW_ITEMS.filter(i => i.type === x[0]).length}</b></button>)}<span className="collections">Collections</span><button><i className="pv-folder"></i>Campaign concepts<b>6</b></button><button><i className="pv-folder"></i>Social experiments<b>3</b></button><p>Collections are a UI preview. No Project records are created.</p></aside><section><div className="pv-library-heading"><h2>{filter === 'all' ? 'My generations' : filter[0].toUpperCase() + filter.slice(1)}</h2><span>{items.length} items</span></div>{items.length ? <div className="pv-library-grid">{items.map(i => <MediaCard compact key={i.id} item={i} onOpen={openItem} />)}</div> : <div className="pv-empty"><span>⌕</span><h3>No work found</h3><p>Try another title, prompt or model.</p></div>}</section></div></main>;
}

function MobileNav({ page, setPage }) { return <nav className="pv-mobile-nav">{['explore','image','video','audio','library'].map(name => <button key={name} onClick={() => setPage(name)} className={page === name ? 'active' : ''}><Icon name={name} size={18}/><span>{name}</span></button>)}</nav>; }

function YEAPreviewApp() {
  const [page, setPage] = useState('explore'); const [detail, setDetail] = useState(null); const [seed, setSeed] = useState({ type: '', prompt: '' });
  function useItem(item) { setDetail(null); setSeed({ type: item.type, prompt: item.prompt }); setPage(item.type); window.scrollTo({ top: 0, behavior: 'smooth' }); }
  useEffect(() => { document.body.classList.add('pv-body'); return () => document.body.classList.remove('pv-body'); }, []);
  return <div className="pv-app"><Sidebar page={page} setPage={setPage} /><div className="pv-main"><Header page={page} />{page === 'explore' && <Explore openItem={setDetail} useItem={useItem} />}{page === 'image' && <ImageStudio seedPrompt={seed.type === 'image' ? seed.prompt : ''} openItem={setDetail} />}{page === 'video' && <VideoStudio seedPrompt={seed.type === 'video' ? seed.prompt : ''} openItem={setDetail} />}{page === 'audio' && <AudioStudio seedPrompt={seed.type === 'audio' ? seed.prompt : ''} openItem={setDetail} />}{page === 'library' && <Library openItem={setDetail} />}</div><MobileNav page={page} setPage={setPage} /><DetailDrawer item={detail} onClose={() => setDetail(null)} onUse={useItem} /></div>;
}

function YEAProductionShell() {
  const [page, setPage] = useState('video');
  const [detail, setDetail] = useState(null);
  const [seed, setSeed] = useState(null);
  function choosePage(next) { setPage(next); window.scrollTo({ top: 0, behavior: 'smooth' }); }
  function useItem(item) {
    setDetail(null);
    setSeed({ type: item.type, prompt: item.prompt, key: Date.now() });
    choosePage(item.type);
  }
  function syncStudioTab(next) { setPage(next === 'showcase' ? 'explore' : next); }
  return <div className="pv-app pv-live-app">
    <Sidebar page={page} setPage={choosePage} />
    <div className="pv-main">
      {page === 'explore' && <React.Fragment>
        <div className="pv-topbar pv-live-explore-bar"><div className="pv-crumb">YEA Create <span>/</span> Explore</div><div className="pv-live-badge">Curated inspiration</div></div>
        <Explore openItem={setDetail} useItem={useItem} />
      </React.Fragment>}
      <div className="pv-live-studio-mount" style={{ display: page === 'explore' ? 'none' : 'contents' }}>
        <window.AIStudioPanel onClose={() => {}} shellMode={true} externalTab={page === 'explore' ? 'video' : page} externalSeed={seed} onExternalTabChange={syncStudioTab} />
      </div>
    </div>
    <MobileNav page={page} setPage={choosePage} />
    <DetailDrawer item={detail} onClose={() => setDetail(null)} onUse={useItem} />
  </div>;
}

window.YEAPreviewApp = YEAPreviewApp;
window.YEAProductionShell = YEAProductionShell;