const { NavBar, SectionHeading, ProjectCard } = window.ZiggyPortfolioDesignSystem_957ce8;
const PROJECTS = [
  { title: 'Cat Feeder', category: 'Smart IoT · UI/UX', year: '2024', page: 'CASE STUDY CAT FEEDER', image: '../../assets/case-studies/cat-feeder/hero.png', imagePosition: 'center 60%' },
  { title: 'Personal Trainer', category: 'Hologram · AR', year: '2025', page: 'CASE STUDY PERSONAL TRAINER', image: '../../assets/case-studies/personal-trainer-hero.png', imagePosition: 'center 40%' },
  { title: 'ANWB-Autofit', category: 'Web Design', year: '2025', page: 'CASE STUDY AUTOFIT', image: '../../assets/case-studies/autofit/hero.png', imagePosition: 'center 55%' },
  { title: 'Hangplek 2.0', category: 'Social Impact · Mobile', year: '2026', page: 'CASE STUDY HANGPLEK', image: '../../assets/case-studies/hangplek/hero.png', imagePosition: 'center 45%' },
  { title: 'Natuurhistorisch Museum', category: 'Immersive Tech', year: '2026', page: 'CASE STUDY MUSEUM', image: '../../assets/case-studies/museum/hero.png', imagePosition: 'center 45%' }
];

function Projects({ onNavigate }) {
  return React.createElement('div', { style: { position: 'relative', minHeight: 640, background: 'var(--surface-page)' } },
    React.createElement(NavBar, { active: 'PROJECTS', onNavigate }),
    React.createElement('div', { style: { paddingTop: 160, paddingLeft: 'var(--page-margin)', paddingRight: 'var(--page-margin)', paddingBottom: 'var(--space-9)', boxSizing: 'border-box' } },
      React.createElement(SectionHeading, { label: 'Projects', title: 'Selected case studies.' }),
      React.createElement('div', { className: 'grid-2', style: { gap: 'var(--space-7)', marginTop: 'var(--space-8)' } },
        PROJECTS.map((p) => React.createElement(ProjectCard, { key: p.title, ...p, onClick: () => onNavigate && onNavigate(p.page) }))
      )
    )
  );
}
window.Projects = Projects;