const { NavBar: SPNavBar, SectionHeading: SPHeading } = window.ZiggyPortfolioDesignSystem_957ce8;
/* Add progress entries per project in STAGE_PROJECTS (StageRoadmap.jsx):
   updates: [{ date: 'Oct 2026', title: '...', text: '...', images: ['path.jpg'], video: 'vimeoId' }]
   Also optional: about: '...' */
function StageProject({ onNavigate, projectId }) {
  const h = React.createElement;
  const [zoom, setZoom] = React.useState(null);
  React.useEffect(() => { if (!zoom) return; const o = document.createElement('div'); o.style.cssText = 'position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.85);display:flex;align-items:center;justify-content:center;padding:32px;cursor:zoom-out'; const im = document.createElement('img'); im.src = zoom; im.style.cssText = 'max-width:100%;max-height:100%;object-fit:contain;border-radius:8px'; o.appendChild(im); const close = () => setZoom(null); o.onclick = close; const k = e => e.key === 'Escape' && close(); window.addEventListener('keydown', k); document.body.appendChild(o); return () => { window.removeEventListener('keydown', k); o.remove(); }; }, [zoom]);
  const p = window.STAGE_PROJECTS.find(x => x.id === projectId) || window.STAGE_PROJECTS[0];
  const label = { fontFamily: 'var(--font-body)', fontSize: 'var(--text-label)', letterSpacing: 'var(--tracking-label)', textTransform: 'uppercase', fontWeight: 700 };
  const empty = t => h('div', { style: { border: '2px dashed var(--border-subtle)', borderRadius: 'var(--radius-md)', padding: 'var(--space-6)', textAlign: 'center', fontFamily: 'var(--font-body)', fontSize: 'var(--text-small)', color: 'var(--text-muted)' } }, t);
  const noteBox = (t, text, ph) => h('aside', { style: { background: 'var(--green-50, rgba(0,0,0,.03))', border: text ? '1px solid var(--border-subtle)' : '2px dashed var(--border-subtle)', borderRadius: 'var(--radius-md)', padding: 'var(--space-5)', fontFamily: 'var(--font-body)', fontSize: 'var(--text-small)' } }, h('div', { style: { ...label, color: 'var(--green-700)', marginBottom: 'var(--space-2)' } }, t), text ? h('p', { style: { margin: 0, fontSize: 'var(--text-body)' } }, text) : h('p', { style: { margin: 0, color: 'var(--text-muted)' } }, ph));
  const heroImg = p.cover ? [p.cover] : (p.updates.find(u => u.images && u.images[0]) || {}).images; 
  return h('div', { style: { position: 'relative', overflow: 'hidden', background: 'var(--surface-page)', minHeight: 640 } },
    h('div', { key: 'pb1', style: { position: 'absolute', top: '22%', left: '-6%', width: 360, height: 360, borderRadius: '50%', background: 'var(--green-500)', filter: 'blur(90px)', opacity: 0.4, zIndex: 0, pointerEvents: 'none' } }),
    h('div', { key: 'pb2', style: { position: 'absolute', top: '48%', right: '-4%', width: 420, height: 420, borderRadius: '50%', background: 'var(--green-700)', filter: 'blur(90px)', opacity: 0.3, zIndex: 0, pointerEvents: 'none' } }),
    h('div', { key: 'pb3', style: { position: 'absolute', top: '74%', left: '10%', width: 380, height: 380, borderRadius: '50%', background: 'var(--green-500)', filter: 'blur(90px)', opacity: 0.4, zIndex: 0, pointerEvents: 'none' } }),
    h('div', { style: { position: 'relative' } },
      h('div', { key: 'b1', style: { position: 'absolute', width: 340, height: 340, borderRadius: '50%', background: 'var(--green-500)', filter: 'blur(80px)', opacity: .55, top: -80, right: '6%', zIndex: 0, pointerEvents: 'none' } }),
      h('div', { key: 'b2', style: { position: 'absolute', width: 260, height: 260, borderRadius: '50%', background: 'var(--green-700)', filter: 'blur(80px)', opacity: .4, bottom: -60, right: '28%', zIndex: 0, pointerEvents: 'none' } }),
      h(SPNavBar, { dark: false, active: 'STAGE', onNavigate }),
      h('div', { style: { position: 'relative', zIndex: 1, paddingTop: 'calc(var(--page-margin) * 2 + 110px)', paddingLeft: 'var(--page-margin)', paddingRight: 'var(--page-margin)', paddingBottom: 'var(--space-9)', boxSizing: 'border-box' } },
        h('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 340px), 1fr))', gap: 'var(--space-8)', alignItems: 'center' } }, h('div', null, h('button', { onClick: () => onNavigate('STAGE ROADMAP'), style: { ...label, display: 'inline-flex', alignItems: 'center', gap: 'var(--space-2)', background: 'var(--green-700)', border: 0, borderRadius: 999, padding: '12px 20px', minHeight: 44, color: 'var(--white)', cursor: 'pointer', position: 'relative', zIndex: 3, marginBottom: 'var(--space-5)' } }, '\u2190 Back to roadmap'),
        h('div', { style: { ...label, color: 'var(--text-muted)', marginBottom: 'var(--space-3)' } }, 'King of Reach (B&S) \u00b7 ' + p.start + (p.status === 'now' ? ' \u00b7 In progress' : '')),
        h('h1', { style: { fontFamily: 'var(--font-display)', fontSize: 'var(--text-display-2)', lineHeight: 'var(--lh-tight)', margin: '0 0 var(--space-3) 0', color: 'var(--accent)' } }, p.title),
        p.summary && h('p', { style: { fontFamily: 'var(--font-body)', fontSize: 'var(--text-body-lg)', color: 'var(--text-primary)', margin: 0, maxWidth: 640 } }, p.summary)), h('div', { style: { aspectRatio: '4/3', borderRadius: 'var(--radius-lg, 16px)', overflow: 'hidden', background: 'rgba(0,0,0,.04)', boxShadow: '0 20px 50px rgba(0,0,0,.15)' } }, heroImg ? h('img', { src: heroImg[0], alt: '', style: { width: '100%', height: '100%', objectFit: 'cover', display: 'block' } }) : h('image-slot', { id: 'stage-' + p.id + '-hero', shape: 'rect', placeholder: 'Drop a cover photo' }))))),
    h('div', { style: { position: 'relative', zIndex: 1, padding: 'var(--space-10) var(--page-margin) var(--space-9)', boxSizing: 'border-box' } },
      h(SPHeading, { label: 'About', title: 'What this project is.' }),
      h('div', { style: { marginTop: 'var(--space-5)', maxWidth: 720 } }, p.about ? h('div', { style: { display: 'flex', flexDirection: 'column', gap: 'var(--space-4)' } }, [].concat(p.about).map((t, i) => h('p', { key: i, style: { fontFamily: 'var(--font-body)', fontSize: 'var(--text-body-lg)', margin: 0 } }, t))) : empty('Project description coming soon.')),
      h('div', { style: { marginTop: 'var(--space-10)' } },
        h(SPHeading, { label: 'Progress', title: 'Updates along the way.' }),
        h('div', { style: { marginTop: 'var(--space-6)', display: 'grid', gap: 'var(--space-8)' } },
          p.updates.length === 0 ? empty('Progress photos, videos and notes coming soon.') : h('div', { style: { position: 'relative', display: 'grid', gap: 'var(--space-8)', paddingLeft: 'var(--space-7, 40px)' } },
            h('div', { style: { position: 'absolute', left: 7, top: 8, bottom: 8, width: 2, background: 'var(--green-300, var(--border-subtle))' } }),
            p.updates.map((u, i) => h('div', { key: i }, u.group && h('div', { style: { ...label, position: 'relative', display: 'inline-block', margin: '0 0 var(--space-6) calc(-1 * var(--space-7, 40px))', padding: '8px 16px', borderRadius: 999, background: u.upcoming ? 'var(--surface-page)' : 'var(--green-700)', color: u.upcoming ? 'var(--green-700)' : 'var(--white)', border: '1.5px ' + (u.upcoming ? 'dashed' : 'solid') + ' var(--green-700)' } }, u.group), h('div', { style: { position: 'relative' } },
              h('div', { style: { position: 'absolute', left: 'calc(-1 * var(--space-7, 40px))', top: 2, width: 16, height: 16, borderRadius: '50%', background: u.upcoming ? 'var(--surface-page)' : (i === p.updates.length - 1 && p.status === 'now' ? 'var(--green-500)' : 'var(--green-700)'), border: u.upcoming ? '2px dashed var(--green-700)' : 0, boxSizing: 'border-box', boxShadow: '0 0 0 4px var(--surface-page)' } }),
              h('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 320px), 1fr))', gap: 'var(--space-6)', alignItems: 'start' } }, h('div', null,
              h('div', { style: { ...label, color: 'var(--green-700)', marginBottom: 'var(--space-2)' } }, u.date || 'Step ' + (i + 1)),
              h('h3', { style: { fontFamily: 'var(--font-display)', fontSize: 'var(--text-h3, 28px)', margin: '0 0 var(--space-3) 0' } }, u.title),
              u.text && h('p', { style: { fontFamily: 'var(--font-body)', fontSize: 'var(--text-body)', margin: '0 0 var(--space-4) 0', maxWidth: 680 } }, u.text),
              u.video && h('div', { style: { position: 'relative', aspectRatio: '16/9', borderRadius: 'var(--radius-md)', overflow: 'hidden', background: '#000', marginBottom: 'var(--space-4)', maxWidth: 720 } }, h('iframe', { src: 'https://player.vimeo.com/video/' + u.video + '?badge=0&autopause=0', title: u.title, allow: 'autoplay; fullscreen; picture-in-picture', allowFullScreen: true, style: { position: 'absolute', inset: 0, width: '100%', height: '100%', border: 0 } })),
              u.pdf ? h('div', { style: { display: 'grid', gap: 'var(--space-3)', maxWidth: 480 } }, h('div', { style: { aspectRatio: '16/9', borderRadius: 'var(--radius-md)', overflow: 'hidden', background: 'rgba(0,0,0,.04)' } }, h('image-slot', { id: 'stage-' + p.id + '-' + i, shape: 'rect', placeholder: 'Drop slide screenshot' })), h('a', { href: u.pdf, target: '_blank', rel: 'noopener', style: { fontFamily: 'var(--font-body)', fontSize: 'var(--text-small)', fontWeight: 700, color: 'var(--green-700)' } }, 'Open the old presentation (PDF) \u2192')) : u.images ? h('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(auto-fill,minmax(240px,1fr))', gap: 'var(--space-4)', maxWidth: 720 } }, u.images.map((src, j) => h('img', { key: j, src, alt: '', onClick: () => setZoom(src), style: { width: '100%', borderRadius: 'var(--radius-md)', display: 'block', cursor: 'zoom-in' } }))) : h('div', { style: { aspectRatio: '16/9', maxWidth: 480, borderRadius: 'var(--radius-md)', overflow: 'hidden', background: 'rgba(0,0,0,.04)' } }, h('image-slot', { id: 'stage-' + p.id + '-' + i, shape: 'rect', placeholder: 'Drop photo or screenshot' }))),
              h('div', { style: { display: 'grid', gap: 'var(--space-4)' } }, noteBox('Note', u.note, 'Space for a note: a new tool you found or how you fixed something.'), u.noProblem ? null : noteBox('Problem', u.problem, 'Space for a problem you ran into.'), (i === 0 && !u.fix) ? null : noteBox('Fix', u.fix, 'Space for how you fixed it.'))))))),
      h('div', { style: { marginTop: 'var(--space-9)' } }, h('button', { onClick: () => onNavigate('STAGE ROADMAP'), style: { ...label, display: 'inline-flex', background: 'var(--green-700)', color: 'var(--white)', border: 0, borderRadius: 999, padding: '12px 20px', minHeight: 44, cursor: 'pointer' } }, '\u2190 Back to roadmap'))))));
}
window.StageProject = StageProject;