const { NavBar, SectionHeading, Button } = window.ZiggyPortfolioDesignSystem_957ce8;
function ComingSoon({ label }) {
  return React.createElement('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)' } }, `${label} coming soon.`);
}
function Divider() {
  return React.createElement('div', { style: { height: 2, background: 'var(--accent-tint)', marginBottom: 'var(--space-8)' } });
}
function IconBadge({ name, size = 22 }) {
  return React.createElement('div', { style: { width: 40, height: 40, borderRadius: '50%', background: 'var(--accent-tint)', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 'var(--space-3)' } },
    React.createElement('span', { className: `ziggy-icon ziggy-icon--${name}`, style: { '--icon-size': `${size}px`, color: 'var(--accent)' } })
  );
}
const FEATURE_ICONS = ['orbit', 'sparkle-duo', 'butterfly', 'heart', 'comet', 'burst'];
function CaseStudyLayout(props) {
  const { onNavigate, heroBg = 'var(--surface-page)', heroFg = 'var(--text-primary)', category, title, tagline, meta, about, problem, solution, features, fonts, colors, research, prototype, heroImage, prototypeLink, backTo = 'PROJECTS' } = props;
  const capStyle = { fontFamily: 'var(--font-body)', fontSize: 'var(--text-small)', fontWeight: 600, color: 'var(--text-primary)', marginTop: 'var(--space-3)' };
  const [zoom, setZoom] = React.useState(null);
  React.useEffect(() => { if (!zoom) return; const k = (e) => e.key === 'Escape' && setZoom(null); window.addEventListener('keydown', k); return () => window.removeEventListener('keydown', k); }, [zoom]);
  const imgBox = (src, alt, ratio = '4/3', fill) => React.createElement('button', { onClick: () => setZoom({ src, alt }), 'aria-label': 'Vergroot ' + alt, style: { all: 'unset', cursor: 'zoom-in', width: '100%', aspectRatio: ratio, borderRadius: 'var(--radius-md)', background: 'var(--accent-tint)', overflow: 'hidden', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: fill ? 0 : 'var(--space-4)', boxSizing: 'border-box' } }, React.createElement('img', { src, alt, style: fill ? { width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'top', display: 'block' } : { maxWidth: '100%', maxHeight: '100%', objectFit: 'contain', display: 'block', borderRadius: 'var(--radius-sm)' } }));
  return React.createElement('div', { style: { position: 'relative', minHeight: 640, background: 'var(--surface-page)' } },
    zoom && React.createElement('div', { onClick: () => setZoom(null), style: { position: 'fixed', inset: 0, zIndex: 1000, background: 'rgba(14,18,16,.88)', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 'var(--space-6)', boxSizing: 'border-box', cursor: 'zoom-out' } },
      React.createElement('img', { src: zoom.src, alt: zoom.alt, style: { maxWidth: '100%', maxHeight: '100%', objectFit: 'contain', borderRadius: 'var(--radius-md)', background: '#fff' } }),
      React.createElement('button', { onClick: () => setZoom(null), 'aria-label': 'Sluiten', style: { position: 'absolute', top: 20, right: 20, width: 44, height: 44, borderRadius: '50%', border: 'none', background: '#fff', color: 'var(--text-primary)', fontSize: 22, cursor: 'pointer' } }, '\u00d7')
    ),
    React.createElement('div', { style: { background: heroBg, paddingTop: 'var(--space-2)' } },
      React.createElement(NavBar, { active: 'PROJECTS', dark: false, onNavigate }),
      React.createElement('div', { style: { paddingTop: 'calc(var(--page-margin) * 2 + 110px)', paddingLeft: 'var(--page-margin)', paddingRight: 'var(--page-margin)', paddingBottom: 'var(--space-9)', boxSizing: 'border-box' } },
        React.createElement('div', { className: 'grid-2', style: { alignItems: 'center' } },
          React.createElement('div', null,
            React.createElement('div', { style: { fontFamily: 'var(--font-body)', fontSize: 'var(--text-label)', letterSpacing: 'var(--tracking-label)', textTransform: 'uppercase', fontWeight: 700, color: 'var(--accent)', marginBottom: 'var(--space-3)' } }, category),
            React.createElement('h1', { style: { fontFamily: 'var(--font-display)', fontSize: 'var(--text-display-2)', lineHeight: 'var(--lh-tight)', margin: '0 0 var(--space-3) 0', color: heroFg } }, title),
            React.createElement('p', { style: { fontFamily: 'var(--font-body)', fontSize: 'var(--text-body-lg)', color: 'var(--text-secondary)', margin: '0 0 var(--space-6) 0' } }, tagline),
            meta && React.createElement('div', { style: { display: 'flex', gap: 'var(--space-6)' } },
              meta.map((m) => React.createElement('div', { key: m.label },
                React.createElement('div', { style: { fontFamily: 'var(--font-body)', fontSize: 'var(--text-label)', textTransform: 'uppercase', letterSpacing: 'var(--tracking-label)', color: 'var(--text-muted)', marginBottom: 4 } }, m.label),
                React.createElement('div', { style: { fontFamily: 'var(--font-body)', fontSize: 'var(--text-body)', color: 'var(--text-primary)', fontWeight: 600 } }, m.value)
              ))
            )
          ),
          heroImage
            ? React.createElement('img', { src: heroImage, alt: title, style: { width: '100%', aspectRatio: '4/3', objectFit: 'cover', objectPosition: props.heroPosition || 'center', filter: props.heroFilter || 'none', borderRadius: 'var(--radius-lg)', display: 'block' } })
            : React.createElement('div', { style: { aspectRatio: '4/3', borderRadius: 'var(--radius-lg)', background: 'var(--accent-tint)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--font-body)', fontSize: 12, color: 'var(--text-muted)' } }, 'Project imagery placeholder')
        )
      )
    ),
    React.createElement('div', { style: { paddingLeft: 'var(--page-margin)', paddingRight: 'var(--page-margin)', paddingTop: 'var(--space-10)', paddingBottom: 'var(--space-9)', boxSizing: 'border-box' } },
      React.createElement('div', null,
        React.createElement(SectionHeading, { label: 'About project', title: 'What it does.' }),
        about
          ? React.createElement('p', { style: { fontFamily: 'var(--font-body)', fontSize: 'var(--text-body-lg)', lineHeight: 'var(--lh-normal)', color: 'var(--text-secondary)', marginTop: 'var(--space-5)', maxWidth: 720 } }, about)
          : React.createElement('div', { style: { marginTop: 'var(--space-5)' } }, React.createElement(ComingSoon, { label: 'About project' })),
        (problem || solution)
          ? React.createElement('div', { className: 'grid-2', style: { gap: 'var(--space-5)', marginTop: 'var(--space-6)' } },
              React.createElement('div', { style: { borderRadius: 'var(--radius-md)', border: '1px solid var(--border-subtle)', padding: 'var(--space-5)' } },
                React.createElement(IconBadge, { name: 'comet' }),
                React.createElement('h3', { style: { fontFamily: 'var(--font-display)', fontSize: 'var(--text-h3)', margin: '0 0 var(--space-2) 0', color: 'var(--text-primary)' } }, 'Problem'),
                React.createElement('p', { style: { fontFamily: 'var(--font-body)', fontSize: 'var(--text-body)', lineHeight: 'var(--lh-normal)', color: 'var(--text-secondary)', margin: 0 } }, problem || 'Content coming soon.')
              ),
              React.createElement('div', { style: { borderRadius: 'var(--radius-md)', border: '1px solid var(--border-subtle)', padding: 'var(--space-5)' } },
                React.createElement(IconBadge, { name: 'burst' }),
                React.createElement('h3', { style: { fontFamily: 'var(--font-display)', fontSize: 'var(--text-h3)', margin: '0 0 var(--space-2) 0', color: 'var(--text-primary)' } }, 'Solution'),
                React.createElement('p', { style: { fontFamily: 'var(--font-body)', fontSize: 'var(--text-body)', lineHeight: 'var(--lh-normal)', color: 'var(--text-secondary)', margin: 0 } }, solution || 'Content coming soon.')
              )
            )
          : null
      ),
      React.createElement('div', { style: { marginTop: 'var(--space-10)' } },
        React.createElement(SectionHeading, { label: 'Key features', title: 'How it helps.' }),
        features && features.length
          ? React.createElement('div', { className: 'grid-3', style: { marginTop: 'var(--space-6)' } },
              features.map((f, i) => React.createElement('div', { key: f.title, style: { borderRadius: 'var(--radius-md)', background: 'var(--accent-tint)', padding: 'var(--space-5)' } },
                React.createElement(IconBadge, { name: FEATURE_ICONS[i % FEATURE_ICONS.length] }),
                React.createElement('h3', { style: { fontFamily: 'var(--font-display)', fontSize: 'var(--text-h3)', margin: '0 0 var(--space-2) 0', color: 'var(--text-primary)' } }, f.title),
                React.createElement('p', { style: { fontFamily: 'var(--font-body)', fontSize: 'var(--text-small)', color: 'var(--text-secondary)', margin: 0 } }, f.desc)
              ))
            )
          : React.createElement('div', { style: { marginTop: 'var(--space-6)' } }, React.createElement(ComingSoon, { label: 'Key features' }))
      ),
      React.createElement('div', { style: { marginTop: 'var(--space-10)' } },
        React.createElement(Divider),
        React.createElement(SectionHeading, { label: 'Design system', title: 'Fonts & colors.' }),
        (fonts && colors)
          ? React.createElement('div', { className: 'grid-2', style: { gap: 'var(--space-6)', marginTop: 'var(--space-6)' } },
              React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: 'var(--space-5)' } },
                fonts.map((f) => React.createElement('div', { key: f.label },
                  React.createElement('div', { style: { fontFamily: 'var(--font-body)', fontSize: 'var(--text-label)', textTransform: 'uppercase', letterSpacing: 'var(--tracking-label)', color: 'var(--text-muted)', marginBottom: 4 } }, f.label),
                  React.createElement('div', { style: { fontFamily: 'var(--font-display)', fontSize: 'var(--text-h2)', color: 'var(--text-primary)' } }, f.value)
                ))
              ),
              React.createElement('div', { style: { display: 'flex', gap: 'var(--space-4)' } },
                colors.map((c) => React.createElement('div', { key: c.label, style: { flex: 1 } },
                  React.createElement('div', { style: { aspectRatio: '1/1', borderRadius: 'var(--radius-md)', background: c.hex, border: '1px solid var(--border-subtle)' } }),
                  React.createElement('div', { style: { fontFamily: 'var(--font-body)', fontSize: 'var(--text-small)', fontWeight: 600, color: 'var(--text-primary)', marginTop: 'var(--space-3)' } }, c.label),
                  React.createElement('div', { style: { fontFamily: 'var(--font-body)', fontSize: 'var(--text-small)', color: 'var(--text-muted)' } }, c.hex)
                ))
              )
            )
          : React.createElement('div', { style: { marginTop: 'var(--space-6)' } }, React.createElement(ComingSoon, { label: 'Fonts & colors' }))
      ),
      React.createElement('div', { style: { marginTop: 'var(--space-10)' } },
        React.createElement(Divider),
        React.createElement(SectionHeading, { label: 'Research', title: 'Understanding the user.' }),
        React.createElement('div', { style: { marginTop: 'var(--space-6)' } },
          !research
            ? React.createElement(ComingSoon, { label: 'Research' })
            : (typeof research === 'object' && !research.image)
              ? React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: 'var(--space-6)' } },
                  research.intro && React.createElement('div', { className: 'grid-2', style: { gap: 'var(--space-5)' } },
                    research.intro.map((it) => React.createElement('div', { key: it.caption }, imgBox(it.image, it.caption, '16/10'), React.createElement('div', { style: capStyle }, it.caption)))
                  ),
                  research.cards && React.createElement('div', { className: 'grid-3', style: { gap: 'var(--space-5)' } },
                    research.cards.map((f, i) => React.createElement('div', { key: f.title, style: { borderRadius: 'var(--radius-md)', border: '1px solid var(--border-subtle)', padding: 'var(--space-5)' } },
                      React.createElement(IconBadge, { name: FEATURE_ICONS[(i + 2) % FEATURE_ICONS.length] }),
                      React.createElement('h3', { style: { fontFamily: 'var(--font-display)', fontSize: 'var(--text-h3)', margin: '0 0 var(--space-2) 0', color: 'var(--text-primary)' } }, f.title),
                      React.createElement('p', { style: { fontFamily: 'var(--font-body)', fontSize: 'var(--text-small)', lineHeight: 'var(--lh-normal)', color: 'var(--text-secondary)', margin: 0 } }, f.desc)
                    ))
                  ),
                  research.quote && React.createElement('blockquote', { style: { margin: 0, padding: 'var(--space-6) 0', borderTop: '2px solid var(--accent-tint)', borderBottom: '2px solid var(--accent-tint)' } },
                    React.createElement('p', { style: { fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 'var(--text-h2)', lineHeight: 'var(--lh-tight)', color: 'var(--text-primary)', margin: 0, maxWidth: 820 } }, '\u201c' + research.quote.text + '\u201d'),
                    React.createElement('div', { style: { fontFamily: 'var(--font-body)', fontSize: 'var(--text-small)', color: 'var(--text-muted)', marginTop: 'var(--space-3)' } }, research.quote.by)
                  ),
                  research.itemsTitle && React.createElement('h3', { style: { fontFamily: 'var(--font-display)', fontSize: 'var(--text-h2)', margin: 'var(--space-4) 0 0 0', color: 'var(--text-primary)' } }, research.itemsTitle),
                  research.team && React.createElement('div', { style: { overflow: 'hidden', background: 'var(--green-500)', borderRadius: 'var(--radius-md)', padding: 'var(--space-4) 0' } },
                    React.createElement('div', { className: 'skills-marquee-track', style: { display: 'flex', width: 'max-content', gap: 'var(--space-8)' } },
                      [0, 1].map((rep) => React.createElement(React.Fragment, { key: rep },
                        research.team.map((m) => React.createElement('div', { key: rep + '-' + m.title, style: { display: 'flex', alignItems: 'baseline', gap: 'var(--space-3)', whiteSpace: 'nowrap' } },
                          React.createElement('span', { style: { fontFamily: 'var(--font-display)', fontSize: 'var(--text-h3)', color: '#fff' } }, m.title),
                          React.createElement('span', { style: { fontFamily: 'var(--font-body)', fontSize: 'var(--text-small)', color: 'rgba(255,255,255,.85)' } }, m.who),
                          React.createElement('span', { style: { color: 'rgba(255,255,255,.5)', marginLeft: 'var(--space-5)' } }, '\u2726')
                        ))
                      ))
                    )
                  ),
                  research.items && React.createElement('div', { className: 'grid-3', style: { gap: 'var(--space-5)' } },
                    research.items.map((it) => React.createElement('div', { key: it.caption }, imgBox(it.image, it.caption), React.createElement('div', { style: capStyle }, it.caption)))
                  ),
                  research.findings && React.createElement('h3', { style: { fontFamily: 'var(--font-display)', fontSize: 'var(--text-h2)', margin: 'var(--space-4) 0 0 0', color: 'var(--text-primary)' } }, research.findingsTitle || 'Testresultaten'),
                  research.findings && (research.findingsStyle === 'numbered'
                    ? React.createElement('div', { style: { display: 'flex', flexDirection: 'column' } },
                        research.findings.map((f, i) => React.createElement('div', { key: f.title, style: { display: 'grid', gridTemplateColumns: 'minmax(80px, 160px) minmax(0, 1fr)', gap: 'var(--space-5)', alignItems: 'start', padding: 'var(--space-6) 0', borderTop: '2px solid var(--accent-tint)' } },
                          React.createElement('div', { style: { fontFamily: 'var(--font-display)', fontSize: 'var(--text-display-2)', lineHeight: 1, color: 'var(--accent)' } }, String(i + 1).padStart(2, '0')),
                          React.createElement('div', null,
                            React.createElement('div', { style: { fontFamily: 'var(--font-body)', fontSize: 'var(--text-label)', letterSpacing: 'var(--tracking-label)', textTransform: 'uppercase', fontWeight: 700, color: 'var(--accent)', marginBottom: 'var(--space-2)' } }, f.title),
                            React.createElement('p', { style: { fontFamily: 'var(--font-display)', fontSize: 'var(--text-h2)', lineHeight: 'var(--lh-snug)', color: 'var(--text-primary)', margin: 0, maxWidth: 820, textWrap: 'pretty' } }, f.desc),
                            f.src && React.createElement('div', { style: { display: 'flex', flexWrap: 'wrap', gap: 'var(--space-2)', marginTop: 'var(--space-3)' } }, f.src.map((x) => React.createElement('span', { key: x, style: { fontFamily: 'var(--font-body)', fontSize: 'var(--text-label)', padding: '4px 12px', borderRadius: 999, background: 'var(--accent-tint)', color: 'var(--text-secondary)' } }, x)))
                          )
                        ))
                      )
                    : React.createElement('div', { className: 'grid-3', style: { gap: 'var(--space-5)' } },
                    research.findings.map((f, i) => React.createElement('div', { key: f.title, style: { borderRadius: 'var(--radius-md)', border: '1px solid var(--border-subtle)', padding: 'var(--space-5)' } },
                      React.createElement(IconBadge, { name: FEATURE_ICONS[(i + 2) % FEATURE_ICONS.length] }),
                      React.createElement('h3', { style: { fontFamily: 'var(--font-display)', fontSize: 'var(--text-h3)', margin: '0 0 var(--space-2) 0', color: 'var(--text-primary)' } }, f.title),
                      React.createElement('p', { style: { fontFamily: 'var(--font-body)', fontSize: 'var(--text-small)', lineHeight: 'var(--lh-normal)', color: 'var(--text-secondary)', margin: 0 } }, f.desc)
                    ))
                  )),
                  research.guidelines && React.createElement('h3', { style: { fontFamily: 'var(--font-display)', fontSize: 'var(--text-h2)', margin: 'var(--space-4) 0 0 0', color: 'var(--text-primary)' } }, research.guidelinesTitle || 'Richtlijnen'),
                  research.guidelines && (research.guidelinesStyle === 'rows'
                    ? React.createElement('div', { className: 'grid-2', style: { gap: 'var(--space-4)' } },
                        research.guidelines.map((g, i) => React.createElement('div', { key: g.title, style: { display: 'flex', gap: 'var(--space-4)', alignItems: 'flex-start', padding: 'var(--space-5)', borderRadius: 'var(--radius-md)', background: i % 3 === 0 ? 'var(--accent)' : 'var(--accent-tint)', color: i % 3 === 0 ? '#fff' : 'var(--text-primary)' } },
                          React.createElement('div', { style: { flex: 'none', width: 44, height: 44, borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center', background: i % 3 === 0 ? 'rgba(255,255,255,.18)' : '#fff' } },
                            React.createElement('span', { className: 'ziggy-icon ziggy-icon--' + FEATURE_ICONS[i % FEATURE_ICONS.length], style: { '--icon-size': '22px', color: i % 3 === 0 ? '#fff' : 'var(--accent)' } })
                          ),
                          React.createElement('div', null,
                            React.createElement('h4', { style: { fontFamily: 'var(--font-display)', fontSize: 'var(--text-h3)', margin: '0 0 var(--space-2) 0' } }, g.title),
                            React.createElement('p', { style: { fontFamily: 'var(--font-body)', fontSize: 'var(--text-small)', lineHeight: 'var(--lh-normal)', margin: 0, opacity: .9 } }, g.desc),
                            g.from && React.createElement('div', { style: { fontFamily: 'var(--font-body)', fontSize: 'var(--text-label)', letterSpacing: 'var(--tracking-label)', textTransform: 'uppercase', fontWeight: 700, marginTop: 'var(--space-3)', opacity: .75 } }, '\u2192 ' + g.from)
                          )
                        ))
                      )
                    : React.createElement('div', { className: 'grid-3', style: { gap: 'var(--space-5)' } },
                    research.guidelines.map((f, i) => React.createElement('div', { key: f.title, style: { borderRadius: 'var(--radius-md)', border: '1px solid var(--border-subtle)', padding: 'var(--space-5)' } },
                      React.createElement(IconBadge, { name: FEATURE_ICONS[(i + 2) % FEATURE_ICONS.length] }),
                      React.createElement('h3', { style: { fontFamily: 'var(--font-display)', fontSize: 'var(--text-h3)', margin: '0 0 var(--space-2) 0', color: 'var(--text-primary)' } }, f.title),
                      React.createElement('p', { style: { fontFamily: 'var(--font-body)', fontSize: 'var(--text-small)', lineHeight: 'var(--lh-normal)', color: 'var(--text-secondary)', margin: 0 } }, f.desc)
                    ))
                  )),
                  research.tests && React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: 'var(--space-5)', marginTop: 'var(--space-4)' } },
                    React.createElement('h3', { style: { fontFamily: 'var(--font-display)', fontSize: 'var(--text-h2)', margin: 0, color: 'var(--text-primary)' } }, research.testsTitle || 'Gebruikerstests'),
                    research.tests.map((t, i) => React.createElement('div', { key: t.title, className: 'grid-2', style: { gap: 'var(--space-5)', alignItems: 'start', borderRadius: 'var(--radius-md)', border: '1px solid var(--border-subtle)', padding: 'var(--space-5)' } },
                      React.createElement('div', { style: { display: 'grid', gridTemplateColumns: `repeat(${t.photos.length}, minmax(0,1fr))`, gap: 'var(--space-3)' } },
                        t.photos.map((p, j) => React.createElement('div', { key: p }, imgBox(p, `${t.title}, testfoto ${j + 1}`, '3/4', true)))
                      ),
                      React.createElement('div', null,
                        React.createElement(IconBadge, { name: FEATURE_ICONS[(i + 2) % FEATURE_ICONS.length] }),
                        React.createElement('h4', { style: { fontFamily: 'var(--font-display)', fontSize: 'var(--text-h3)', margin: '0 0 var(--space-1) 0', color: 'var(--text-primary)' } }, t.title),
                        React.createElement('div', { style: { fontFamily: 'var(--font-body)', fontSize: 'var(--text-label)', textTransform: 'uppercase', letterSpacing: 'var(--tracking-label)', color: 'var(--text-muted)', marginBottom: 'var(--space-4)' } }, t.meta),
                        React.createElement('ul', { style: { margin: 0, paddingLeft: '1.1em', display: 'flex', flexDirection: 'column', gap: 'var(--space-2)', fontFamily: 'var(--font-body)', fontSize: 'var(--text-body)', lineHeight: 'var(--lh-normal)', color: 'var(--text-secondary)' } },
                          t.insights.map((s) => React.createElement('li', { key: s }, s))
                        )
                      )
                    ))
                  )
                )
            : (typeof research === 'object')
              ? React.createElement('img', { src: research.image, alt: research.alt || 'Research sketch', style: { width: '100%', borderRadius: 'var(--radius-md)', display: 'block' } })
              : React.createElement('div', { style: { aspectRatio: '16/10', borderRadius: 'var(--radius-md)', background: 'var(--accent-tint)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--font-body)', fontSize: 12, color: 'var(--text-muted)' } }, `${research} imagery placeholder`)
        )
      ),
      React.createElement('div', { style: { marginTop: 'var(--space-10)' } },
        React.createElement(Divider),
        React.createElement(SectionHeading, { label: 'Prototype', title: 'The final product.' }),
        props.prototypeNote && React.createElement('p', { style: { fontFamily: 'var(--font-body)', fontSize: 'var(--text-body)', lineHeight: 'var(--lh-normal)', color: 'var(--text-secondary)', margin: 'var(--space-5) 0 0 0', maxWidth: 720 } }, props.prototypeNote),
        React.createElement('div', { style: { marginTop: 'var(--space-6)' } },
          !prototype
            ? React.createElement(ComingSoon, { label: 'Prototype' })
            : Array.isArray(prototype)
              ? React.createElement('div', { className: props.prototypeCols ? undefined : (prototype.length % 3 === 0 ? 'grid-3' : 'grid-2'), style: props.prototypeCols ? { display: 'grid', gap: 'var(--space-5)', gridTemplateColumns: 'repeat(auto-fill, minmax(min(100%, 200px), 1fr))' } : { gap: 'var(--space-5)' } },
                  prototype.map((s) => React.createElement('div', { key: s.label },
                    s.image ? imgBox(s.image, s.label, props.prototypeRatio) : React.createElement('div', { style: { aspectRatio: '4/3', borderRadius: 'var(--radius-md)', background: 'var(--accent-tint)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--font-body)', fontSize: 12, color: 'var(--text-muted)' } }, `${s.label} imagery placeholder`),
                    React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 'var(--space-2)', flexWrap: 'wrap', marginTop: 'var(--space-3)' } },
                      React.createElement('span', { style: { fontFamily: 'var(--font-body)', fontSize: 'var(--text-small)', fontWeight: 600, color: 'var(--text-primary)' } }, s.label),
                      props.prototypeNote && React.createElement('span', { style: { fontFamily: 'var(--font-body)', fontSize: 'var(--text-label)', fontWeight: 600, letterSpacing: 'var(--tracking-label)', textTransform: 'uppercase', padding: '3px 10px', borderRadius: 999, background: s.mine ? 'var(--accent)' : 'var(--accent-tint)', color: s.mine ? '#fff' : 'var(--text-secondary)' } }, s.mine ? 'Door mij' : 'Teamlid')
                    ),
                    s.desc && React.createElement('p', { style: { fontFamily: 'var(--font-body)', fontSize: 'var(--text-small)', lineHeight: 'var(--lh-normal)', color: 'var(--text-secondary)', margin: '4px 0 0 0' } }, s.desc)
                  ))
                )
              : (typeof prototype === 'object' && prototype.vimeo)
                ? React.createElement('div', { style: { position: 'relative', aspectRatio: prototype.ratio || '16/9', borderRadius: 'var(--radius-md)', overflow: 'hidden', background: '#000' } },
                    React.createElement('iframe', { src: 'https://player.vimeo.com/video/' + prototype.vimeo + '?badge=0&autopause=0&player_id=0&app_id=58479', title: 'Prototype video', allow: 'autoplay; fullscreen; picture-in-picture; clipboard-write; encrypted-media; web-share', referrerPolicy: 'strict-origin-when-cross-origin', allowFullScreen: true, style: { position: 'absolute', inset: 0, width: '100%', height: '100%', border: 0 } }))
              : (typeof prototype === 'object')
                ? React.createElement('video', { src: prototype.video, controls: true, playsInline: true, style: { width: '100%', maxHeight: 640, borderRadius: 'var(--radius-md)', display: 'block', margin: '0 auto', background: '#000', objectFit: 'contain' } })
                : React.createElement('div', { style: { aspectRatio: '16/10', borderRadius: 'var(--radius-md)', background: 'var(--accent-tint)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--font-body)', fontSize: 12, color: 'var(--text-muted)' } }, `${prototype} placeholder`)
        )
      ),
      props.reflection && React.createElement('div', { style: { marginTop: 'var(--space-10)' } },
        React.createElement(Divider),
        React.createElement(SectionHeading, { label: 'Reflectie', title: 'Next steps.' }),
        React.createElement('p', { style: { fontFamily: 'var(--font-body)', fontSize: 'var(--text-body-lg)', lineHeight: 'var(--lh-normal)', color: 'var(--text-secondary)', marginTop: 'var(--space-5)', maxWidth: 720 } }, props.reflection)
      ),
      prototypeLink && React.createElement('div', { style: { marginTop: 'var(--space-6)' } },
        React.createElement(Button, { variant: 'secondary', onClick: () => window.open(prototypeLink, '_blank') }, props.prototypeLinkLabel || 'Bekijk de prototype video')
      ),
      React.createElement('div', { style: { marginTop: 'var(--space-9)' } },
        React.createElement(Button, { variant: 'primary', onClick: () => onNavigate && onNavigate(backTo) }, 'Back to projects')
      )
    )
  );
}
window.CaseStudyLayout = CaseStudyLayout;