function CaseStudyHangplek({ onNavigate }) {
  const P = '../../assets/case-studies/hangplek/';
  return React.createElement(window.CaseStudyLayout, {
    onNavigate,
    category: 'Social Impact · Mobile',
    title: 'Hangplek 2.0',
    tagline: 'De ideale app voor jongeren met de eerste stap',
    heroImage: P + 'hero.png',
    heroPosition: 'center 45%',
    meta: [{ label: 'Role', value: 'UX Designer' }, { label: 'Team', value: '4Sight' }, { label: 'Client', value: 'Digital Child Rights' }],
    about: 'Hangplek 2.0 is een app voor jongeren die de stap naar de hangplek laagdrempeliger maakt. Jongeren checken in bij de hangplek, verdienen punten, praten met vrienden en begeleiders en plannen activiteiten in hun agenda.',
    problem: 'Hoe kunnen kwetsbare tieners op een positieve en laagdrempelige manier gestimuleerd worden om meer naar buiten te gaan en leeftijdsgenoten te ontmoeten, en welke rol kunnen maatschappelijke organisaties en Stichting Digital Child Rights hierin spelen?',
    solution: 'Een app die de eerste stap naar de hangplek makkelijker maakt. Door in te checken verdienen jongeren punten die ze kunnen inwisselen voor beloningen. Ze kunnen met vrienden en begeleiders praten en activiteiten inplannen.',
    features: [
      { title: 'Home', desc: 'Inchecken, uitleg over het puntensysteem en informatie over de hangplek en openingstijden.' },
      { title: 'Vrienden', desc: 'Praten met vrienden, vrienden toevoegen, praten met begeleiders en groepen maken voor activiteiten.' },
      { title: 'Agenda', desc: 'Datum en ingeplande afspraken, afspraken inplannen en annuleren.' },
      { title: 'Beloningen', desc: 'Punten inwisselen voor beloningen en kiezen uit verschillende soorten beloningen.' }
    ],
    fonts: [{ label: 'Primary font', value: 'Inter' }],
    colors: [
      { label: 'Primary', hex: '#B4D8E4' },
      { label: 'Background', hex: '#E8F4F6' },
      { label: 'Accent', hex: '#9333EA' },
      { label: 'Text', hex: '#303030' }
    ],
    research: {
      cards: [
        { title: 'Doelgroep', desc: 'Jongeren met autisme tussen de 12 en 16 jaar.' },
        { title: 'Onze keuze', desc: 'Het maken van een hangplek.' },
        { title: 'Methoden', desc: 'Onderzoeksfase: user research, interviews, desk research. Idee\u00ebnfase: brainstorming, co-creatie sessies, schetsen. Ontwerpfase: prototyping, wireframing, gebruikerstesten.' }
      ],
      quote: { text: 'Hoe kunnen kwetsbare tieners op een positieve en laagdrempelige manier gestimuleerd worden om meer naar buiten te gaan en leeftijdsgenoten te ontmoeten?', by: 'Onderzoeksvraag' },
      items: [
        { image: P + 'ontwerpproces.png', caption: 'Ontwerpproces: idee\u00ebn verzamelen, schetsen, concept, prototypes, testen' },
        { image: P + 'poster.png', caption: 'Expo poster' }
      ],
      tests: [
        { title: 'Iteratie 1: Navigatie', meta: 'Doelgerichte test \u00b7 digitaal prototype', photos: [P + 'test1-a.png', P + 'test1-b.png'], insights: ['Activiteiten en beloningen waren lastig te vinden.', 'Punten verdienen en claimen was niet intu\u00eftief.', 'Tekst was soms te klein en knoppen gaven geen reactie bij klikken.', 'De structuur van de app was het grootste pijnpunt: hi\u00ebrarchie en duidelijkheid moesten beter.', 'Beloningen motiveerden, en de meeste testers willen de app gebruiken.'] },
        { title: 'Iteratie 2: Structuur', meta: 'Gebruikerstest \u00b7 verbeterd prototype', photos: [P + 'test2-a.png', P + 'screen-center.png'], insights: ['De gebruiker vindt de app makkelijker te gebruiken.', 'Groepsapps met voorbeeldteksten om uit te kiezen leiden tot meer contact met anderen.', 'Sommige knoppen werken nog niet optimaal.', 'Verbeterd: agenda van de homepagina gehaald, menubalk verkleind, minder knoppen en vrienden/chat samengevoegd tot \u00e9\u00e9n scherm.'] },
        { title: 'Iteratie 3: Overzicht', meta: 'Gebruikerstest \u00b7 definitief prototype', photos: [P + 'home-final.png', P + 'gewenste-situatie.png'], insights: ['De app is overzichtelijker: testpersonen zoeken minder lang en raken niet meer verdwaald.', 'Alle klikfuncties werken met de navigatie.', 'Testpersonen zijn enthousiast over de beloningen en de activiteiten trekken ze aan.', 'De simpele opbouw wordt positief ontvangen en de kleuren zorgen voor kalmte.'] }
      ]
    },
    reflection: 'De doelgroep observeren helpt om uitkomsten te vinden die jongeren zelf soms niet durven te vertellen. Overbodige functies hebben we weggehaald en brainstormen in teamverband leverde oplossingen op. Als vervolgstap willen we de app verder ontwikkelen, mogelijk publiceren en voorstellen aan scholen en instellingen voor jongeren met autisme, en koppelen aan een fysieke hangplek zodat activiteiten echt bijgewoond en beloningen verzilverd kunnen worden.',
    prototype: [
      { label: 'Hangplek', mine: true, image: P + 'app-home.png', desc: 'Check in en lees hoe je punten verdient.' },
      { label: 'Vrienden', image: P + 'app-vrienden.png', desc: 'Groepen en chats met vrienden.' },
      { label: 'Agenda', image: P + 'app-agenda.png', desc: 'Kalender met activiteiten in de buurt.' },
      { label: 'Activiteit', image: P + 'app-activiteit.png', desc: 'Details, locatie en direct aanmelden.' },
      { label: 'Beloningen', image: P + 'app-beloningen.png', desc: 'Wissel punten in voor drinken en snacks.' }
    ],
    prototypeNote: 'Het Hangplek-scherm heb ik ontworpen. De andere schermen zijn gemaakt door mijn teamgenoten van 4Sight.',
    prototypeCols: 4,
    prototypeRatio: '9/19',
    prototypeLink: 'https://hangplekapp.framer.website/',
    prototypeLinkLabel: 'Bekijk de case study website'
  });
}
window.CaseStudyHangplek = CaseStudyHangplek;