const { NavBar: SRNavBar, SectionHeading: SRHeading, GlassPanel: SRGlass } = window.ZiggyPortfolioDesignSystem_957ce8;
const STAGE_TOOLS = ['Figma', 'Claude', 'Clipchamp', 'Higgsfield', 'InDesign', 'Canva']; // tools used during the internship
const STAGE_ABOUT = ["Tijdens mijn stage bij King of Reach liep ik mee met mijn stagebegeleider en werkte ik samen met hem aan opdrachten. Het was een meeloopstage, waarbij ik veel in de praktijk leerde.", "Een groot deel van de stage was ik bezig met het maken van AI-agents die helpen bij het designen. Ik automatiseerde presentaties, e-mails, rapporten, video’s en social posts in de huisstijl van het bedrijf."]; // write the internship description here
const STAGE_MOMENTS = [{ src: '../../assets/moments/team.png' }, { src: '../../assets/moments/desk.png' }, { src: '../../assets/moments/video.mp4', video: true }];
function StageRoadmapPage({ onNavigate }) {
  const h = React.createElement;
  const [zi, setZi] = React.useState(null);
  const zoom = zi == null ? null : STAGE_MOMENTS[zi];
  const go = d => setZi(i => (i + d + STAGE_MOMENTS.length) % STAGE_MOMENTS.length);
  React.useEffect(() => { if (!zoom) return; const k = e => { if (e.key === 'Escape') setZi(null); else if (e.key === 'ArrowRight') go(1); else if (e.key === 'ArrowLeft') go(-1); }; window.addEventListener('keydown', k); return () => window.removeEventListener('keydown', k); }, [zi]);
  const label = { fontFamily: 'var(--font-body)', fontSize: 'var(--text-label)', letterSpacing: 'var(--tracking-label)', textTransform: 'uppercase', fontWeight: 700 };
  const pill = (t, active, on) => h('button', { onClick: on, style: { ...label, border: active ? 'none' : '2px dashed var(--border-subtle)', borderRadius: 999, padding: '10px 18px', cursor: on ? 'pointer' : 'default', background: active ? 'var(--green-700)' : 'transparent', color: active ? 'var(--white)' : 'var(--text-muted)' } }, t);
  const sec = (n, l, t, c, full) => h('section', { key: n, style: { display: 'flex', flexWrap: 'wrap', gap: 'var(--space-6)', marginTop: 'var(--space-9)', paddingTop: 'var(--space-7, 40px)', borderTop: '1px solid var(--border-subtle)' } },
    h('div', { style: { flex: full ? '1 1 100%' : '1 1 240px', maxWidth: full ? 'none' : 360, alignSelf: 'flex-start', position: full ? 'static' : 'sticky', top: 24 } }, h('div', { style: { ...label, color: 'var(--text-muted)', marginBottom: 'var(--space-3)' } }, n + ' \u2014 ' + l), h('h2', { style: { fontFamily: 'var(--font-display)', fontSize: 'var(--text-h2, 32px)', lineHeight: 'var(--lh-tight)', margin: 0, color: 'var(--text-primary)' } }, t)),
    h('div', { style: { flex: full ? '1 1 100%' : '2.4 1 340px', minWidth: 0 } }, c));
  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' } }),
    zoom && h('div', { onClick: () => setZi(null), style: { position: 'fixed', inset: 0, zIndex: 1000, background: 'rgba(14,18,16,.88)', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 40, boxSizing: 'border-box' } },
      zoom.video ? h('video', { key: zoom.src, src: zoom.src, controls: true, autoPlay: true, playsInline: true, onClick: e => e.stopPropagation(), style: { maxWidth: '100%', maxHeight: '100%', borderRadius: 'var(--radius-md)', background: '#000' } }) : h('img', { src: zoom.src, alt: '', style: { maxWidth: '100%', maxHeight: '100%', objectFit: 'contain', borderRadius: 'var(--radius-md)' } }),
      h('button', { onClick: e => { e.stopPropagation(); go(-1); }, 'aria-label': 'Vorige', style: { position: 'absolute', top: '50%', left: 20, transform: 'translateY(-50%)', width: 52, height: 52, borderRadius: '50%', border: 'none', cursor: 'pointer', fontSize: 26, background: '#fff', color: '#111' } }, '\u2039'),
      h('button', { onClick: e => { e.stopPropagation(); go(1); }, 'aria-label': 'Volgende', style: { position: 'absolute', top: '50%', right: 20, transform: 'translateY(-50%)', width: 52, height: 52, borderRadius: '50%', border: 'none', cursor: 'pointer', fontSize: 26, background: '#fff', color: '#111' } }, '\u203a'),
      h('button', { onClick: () => setZi(null), 'aria-label': 'Sluiten', style: { position: 'absolute', top: 20, right: 20, width: 44, height: 44, borderRadius: '50%', border: 'none', cursor: 'pointer', fontSize: 22, background: '#fff', color: '#111' } }, '\u00d7')),
    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(SRNavBar, { dark: false, active: 'STAGE', onNavigate }),
      h('div', { style: { position: 'relative', zIndex: 1, paddingTop: 160, paddingLeft: 'var(--page-margin)', paddingRight: 'var(--page-margin)', paddingBottom: 'var(--space-8)', boxSizing: 'border-box' } },
        h('button', { onClick: () => onNavigate('STAGE'), style: { ...label, background: 'none', border: 0, padding: 0, color: 'var(--text-muted)', cursor: 'pointer', marginBottom: 'var(--space-4)' } }, '\u2190 Stages'),
        h('div', { style: { ...label, color: 'var(--text-muted)', marginBottom: 'var(--space-3)' } }, 'Stage 1 \u00b7 Internship'),
        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)' } }, 'King of Reach (B&S)'),
        h('p', { style: { fontFamily: 'var(--font-body)', fontSize: 'var(--text-body-lg)', color: 'var(--text-primary)', margin: 0 } }, 'Dordrecht \u2014 september 2026 tot februari 2027'))),
    h('div', { style: { position: 'relative', zIndex: 1, padding: 'var(--space-7, 40px) var(--page-margin) var(--space-9)', boxSizing: 'border-box' } },
      h('div', { style: { display: 'flex', gap: 'var(--space-3)', flexWrap: 'wrap' } }, pill('Stage 1 \u00b7 King of Reach', true), pill('Stage 2 \u00b7 To be announced', false)),
      sec('01', 'About', 'What this internship was about.', h('div', { style: { display: 'flex', flexWrap: 'wrap', gap: 'var(--space-5)', alignItems: 'stretch' } }, h('div', { style: { flex: '2 1 340px' } }, h(SRGlass, { style: {} }, STAGE_ABOUT.length ? h('div', { style: { display: 'flex', flexDirection: 'column', gap: 'var(--space-4)' } }, STAGE_ABOUT.map((t, i) => h('p', { key: i, style: { fontFamily: 'var(--font-body)', fontSize: 'var(--text-body-lg)', margin: 0 } }, 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)' } }, 'Internship description coming soon.'))), h(SRGlass, { style: { flex: '1 1 220px' } }, h('div', { style: { display: 'flex', flexDirection: 'column', gap: 'var(--space-4)' } }, h('div', { key: 'Bedrijf', style: { display: 'flex', flexDirection: 'column', gap: 4, paddingBottom: 'var(--space-3)', borderBottom: '1px solid var(--border-subtle)' } }, h('span', { style: { ...label, color: 'var(--text-muted)' } }, 'Bedrijf'), h('span', { style: { fontFamily: 'var(--font-display)', fontSize: 'var(--text-h3)', color: 'var(--text-primary)' } }, 'King of Reach (B&S)')), h('div', { key: 'Locatie', style: { display: 'flex', flexDirection: 'column', gap: 4, paddingBottom: 'var(--space-3)', borderBottom: '1px solid var(--border-subtle)' } }, h('span', { style: { ...label, color: 'var(--text-muted)' } }, 'Locatie'), h('span', { style: { fontFamily: 'var(--font-display)', fontSize: 'var(--text-h3)', color: 'var(--text-primary)' } }, 'Dordrecht')), h('div', { key: 'Periode', style: { display: 'flex', flexDirection: 'column', gap: 4, paddingBottom: 'var(--space-3)', borderBottom: '1px solid var(--border-subtle)' } }, h('span', { style: { ...label, color: 'var(--text-muted)' } }, 'Periode'), h('span', { style: { fontFamily: 'var(--font-display)', fontSize: 'var(--text-h3)', color: 'var(--text-primary)' } }, 'sep 2026 \u2013 feb 2027')), h('div', { key: 'Tools', style: { display: 'flex', flexDirection: 'column', gap: 4, paddingBottom: 'var(--space-3)', borderBottom: '1px solid var(--border-subtle)' } }, h('span', { style: { ...label, color: 'var(--text-muted)' } }, 'Tools'), h('span', { style: { fontFamily: 'var(--font-display)', fontSize: 'var(--text-h3)', color: 'var(--text-primary)' } }, STAGE_TOOLS.join(', '))))))),
      sec('02', 'Roadmap', 'Projects along the way.', h(window.StageRoadmap, { onNavigate }), true),
      sec('03', 'Tools', 'What I worked with.', h('div', { style: { overflow: 'hidden', background: 'var(--green-500)', borderRadius: 'var(--radius-md)', padding: 'var(--space-4) 0' } },
        h('div', { className: 'skills-marquee-track', style: { display: 'flex', width: 'max-content', gap: 'var(--space-8)' } },
          [0, 1, 2, 3].map(rep => h(React.Fragment, { key: rep }, STAGE_TOOLS.map(t => h('div', { key: rep + t, style: { display: 'flex', alignItems: 'baseline', gap: 'var(--space-5)', whiteSpace: 'nowrap' } },
            h('span', { style: { fontFamily: 'var(--font-display)', fontSize: 'var(--text-h3)', color: '#fff' } }, t),
            h('span', { style: { color: 'rgba(255,255,255,.5)' } }, '\u2726')))))))),
      sec('04', 'Photos', 'Moments from the internship.', h('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(min(100%, 240px), 1fr))', gap: 'var(--space-4)' } }, h('button', { key: 'a', onClick: () => setZi(0), 'aria-label': 'Vergroot', style: { all: 'unset', cursor: 'zoom-in', position: 'relative', aspectRatio: '4 / 3', borderRadius: 'var(--radius-md)', overflow: 'hidden', background: '#000' } }, h('img', { src: '../../assets/moments/team.png', alt: '', style: { width: '100%', height: '100%', objectFit: 'cover', display: 'block' } })), h('button', { key: 'b', onClick: () => setZi(1), 'aria-label': 'Vergroot', style: { all: 'unset', cursor: 'zoom-in', position: 'relative', aspectRatio: '4 / 3', borderRadius: 'var(--radius-md)', overflow: 'hidden', background: '#000' } }, h('img', { src: '../../assets/moments/desk.png', alt: '', style: { width: '100%', height: '100%', objectFit: 'cover', display: 'block' } })), h('button', { key: 'c', onClick: () => setZi(2), 'aria-label': 'Vergroot', style: { all: 'unset', cursor: 'zoom-in', position: 'relative', aspectRatio: '4 / 3', borderRadius: 'var(--radius-md)', overflow: 'hidden', background: '#000' } }, h('video', { src: '../../assets/moments/video.mp4#t=0.5', muted: true, playsInline: true, preload: 'metadata', style: { width: '100%', height: '100%', objectFit: 'cover', display: 'block', pointerEvents: 'none' } }), h('span', { style: { position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 48, color: '#fff', textShadow: '0 2px 12px rgba(0,0,0,.5)' } }, '\u25b6')))))
  );
}
window.StageRoadmapPage = StageRoadmapPage;