const { NavBar } = window.ZiggyPortfolioDesignSystem_957ce8;
function Stage({ onNavigate }) {
  const h = React.createElement;
  const [hov, setHov] = React.useState(null);
  const xb = hov === 'A' ? 32 : hov === 'B' ? 0 : 16;
  const label = { fontFamily: 'var(--font-body)', fontSize: 'var(--text-label)', letterSpacing: 'var(--tracking-label)', textTransform: 'uppercase', fontWeight: 700 };
  const layer = { position: 'absolute', inset: 0, transition: 'clip-path .5s cubic-bezier(.2,.8,.2,1)' };
  return h('div', { style: { position: 'relative', height: '100vh', minHeight: 680, overflow: 'hidden', background: 'var(--surface-page)' } },
    h('div', { onClick: () => onNavigate('STAGE ROADMAP'), onMouseEnter: () => setHov('A'), onMouseLeave: () => setHov(null), style: { ...layer, cursor: 'pointer', background: 'linear-gradient(160deg, var(--green-700), var(--green-900))', clipPath: `polygon(0 0, 118% 0, ${xb}% 100%, 0 100%)` } },
      h('div', { style: { position: 'absolute', inset: 0 } }, h('img', { src: '../../assets/moments/agents-collage.png', alt: '', style: { width: '100%', height: '100%', objectFit: 'cover', display: 'block' } })),
      h('div', { style: { position: 'absolute', inset: 0, pointerEvents: 'none', background: 'linear-gradient(160deg, color-mix(in srgb, var(--green-700) 88%, transparent), color-mix(in srgb, var(--green-900) 88%, transparent))' } }),
      h('div', { style: { position: 'absolute', left: 'var(--page-margin)', top: '34%', maxWidth: '38%', color: 'var(--white)', pointerEvents: 'none' } },
        h('div', { style: { ...label, opacity: .8, marginBottom: 'var(--space-4)', display: 'flex', alignItems: 'center', gap: 'var(--space-3)' } }, h('img', { src: '../../assets/star-white.png', alt: '', style: { width: 28, height: 28, objectFit: 'contain' } }), 'Stage 1'),
        h('div', { style: { fontFamily: 'var(--font-display)', fontSize: 'var(--text-display-2)', lineHeight: 'var(--lh-tight)', marginBottom: 'var(--space-3)' } }, 'King of Reach (B&S)'),
        h('div', { style: { fontFamily: 'var(--font-body)', fontSize: 'var(--text-body-lg)', opacity: .85 } }, 'Dordrecht \u00b7 september 2026 tot februari 2027  \u2192'))),
    h('div', { onMouseEnter: () => setHov('B'), onMouseLeave: () => setHov(null), style: { ...layer, background: 'var(--surface-page)', clipPath: `polygon(118% 0, 100% 0, 100% 100%, ${xb}% 100%)` } },
      h('div', { style: { position: 'absolute', inset: 0 } }, h('image-slot', { id: 'stage2-banner', shape: 'rect', placeholder: 'Drop Stage 2 collage' })),
      h('div', { style: { position: 'absolute', right: 'var(--page-margin)', bottom: '12%', maxWidth: '38%', textAlign: 'right', color: 'var(--text-muted)', pointerEvents: 'none' } },
        h('div', { style: { ...label, marginBottom: 'var(--space-4)', display: 'flex', alignItems: 'center', gap: 'var(--space-3)', justifyContent: 'flex-end' } }, 'Stage 2', h('img', { src: '../../assets/star-green.png', alt: '', style: { width: 28, height: 28, objectFit: 'contain', opacity: .4 } })),
        h('div', { style: { fontFamily: 'var(--font-display)', fontSize: 'var(--text-display-2)', lineHeight: 'var(--lh-tight)', marginBottom: 'var(--space-3)' } }, 'To be announced'),
        h('div', { style: { fontFamily: 'var(--font-body)', fontSize: 'var(--text-body-lg)' } }, 'Coming later'))),
    h('div', { style: { position: 'absolute', top: 0, left: 0, right: 0, zIndex: 5 } }, h(NavBar, { dark: true, active: 'STAGE', onNavigate })));
}
window.Stage = Stage;