// tgp-projects.jsx v5 — Folder tiles with role tab on right + vertical progress timeline

const CommunityTab = ({ name, img, color, side = 'left', active = true, textColor }) => {
  const isLeft = side === 'left';
  return (
    <div style={{
      position:'absolute', top:0,
      [isLeft ? 'left' : 'right']: 12,
      maxWidth:'48%',
      background:color, borderRadius:'14px 14px 0 0',
      padding:'7px 12px 16px 8px',
      zIndex:3,
      display:'flex', alignItems:'center', gap:7, minWidth:0,
      boxShadow: active ? '0 -2px 6px rgba(0,0,0,0.06)' : 'none',
    }}>
      {img && <img src={img} alt="" style={{ width:20, height:20, borderRadius:'50%', objectFit:'cover', flexShrink:0, border:'1.5px solid rgba(255,255,255,0.55)' }} />}
      <span style={{
        fontSize:11, fontWeight:600,
        color: textColor || '#020100',
        fontFamily:'Inter,system-ui,sans-serif',
        whiteSpace:'nowrap', letterSpacing:'-0.1px',
        overflow:'hidden', textOverflow:'ellipsis', minWidth:0,
      }}>{name}</span>
    </div>
  );
};

const AvatarStack = ({ members, max = 4 }) => {
  const shown = members.slice(0, max);
  const overflow = members.length - max;
  return (
    <div style={{ display:'flex', alignItems:'center' }}>
      {shown.map((m, i) => (
        <img key={i} src={m} alt="" style={{
          width:24, height:24, borderRadius:'50%', objectFit:'cover',
          border:'2px solid #FFFFFF', marginLeft: i===0 ? 0 : -8,
          boxShadow:'0 1px 2px rgba(0,0,0,0.1)',
        }} />
      ))}
      {overflow > 0 && (
        <div style={{
          width:24, height:24, borderRadius:'50%',
          background:'rgba(116,116,128,0.15)', marginLeft:-8,
          border:'2px solid #FFFFFF', display:'flex', alignItems:'center', justifyContent:'center',
          fontSize:10, fontWeight:700, color:'#8E8E93',
          fontFamily:'Inter,system-ui,sans-serif',
        }}>+{overflow}</div>
      )}
    </div>
  );
};

// Vertical timeline of project phases — dots on a rail, filled up to current step
const ProjectTimeline = ({ steps, current }) => (
  <div style={{
    display:'flex', flexDirection:'column', alignItems:'center',
    gap:0, position:'relative', minWidth:16, paddingTop:2,
  }}>
    {steps.map((s, i) => {
      const done = i < current;
      const active = i === current;
      const last = i === steps.length - 1;
      return (
        <div key={i} style={{ display:'flex', flexDirection:'column', alignItems:'center', flex: last ? '0 0 auto' : 1 }}>
          <div title={s} style={{
            width: active ? 10 : 8, height: active ? 10 : 8,
            borderRadius:'50%',
            background: done ? '#020100' : active ? '#FF4D1A' : 'rgba(0,0,0,0.12)',
            border: active ? '2px solid rgba(255,77,26,0.25)' : 'none',
            boxSizing:'content-box',
            flexShrink:0,
          }} />
          {!last && (
            <div style={{
              width:2, flex:1, minHeight:14,
              background: done ? '#020100' : 'rgba(0,0,0,0.12)',
            }} />
          )}
        </div>
      );
    })}
  </div>
);

const ProjectCard = ({
  name, subtitle, community, communityImg, communityColor,
  role, roleColor = '#E6F4DE',
  members, myTasks, deadline,
  steps, currentStep, onClick,
}) => (
  <div onClick={onClick} style={{ position:'relative', paddingTop:32, marginTop:4, cursor: onClick ? 'pointer' : 'default' }}>
    <CommunityTab name={community} img={communityImg} color={communityColor} side="left" />
    <CommunityTab name={role} color={roleColor} side="right" textColor="#1F3D1F" />

    {/* Folder body */}
    <div style={{
      position:'relative', background:'#FFFFFF', borderRadius:18,
      padding:'16px 18px 14px 16px', zIndex:4,
      boxShadow:'0 4px 16px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.05)',
      display:'flex', gap:12,
    }}>
      {/* Main column */}
      <div style={{ flex:1, minWidth:0 }}>
        {/* Three-dot menu */}
        <button style={{
          position:'absolute', top:14, right:14, border:'none', background:'transparent',
          cursor:'pointer', padding:4, display:'flex', gap:2,
        }}>
          <span style={{ width:3, height:3, borderRadius:'50%', background:'rgba(0,0,0,0.35)' }} />
          <span style={{ width:3, height:3, borderRadius:'50%', background:'rgba(0,0,0,0.35)' }} />
          <span style={{ width:3, height:3, borderRadius:'50%', background:'rgba(0,0,0,0.35)' }} />
        </button>

        {/* Title + subtitle */}
        <div style={{ marginBottom:14, paddingRight:22 }}>
          <div style={{
            fontFamily:'"Instrument Serif",Georgia,serif', fontWeight:400,
            fontSize:24, color:'#020100', letterSpacing:'-0.4px', lineHeight:1.1,
            marginBottom:3,
          }}>{name}</div>
          <div style={{
            fontSize:12, color:'#8E8E93', fontFamily:'Inter,system-ui,sans-serif',
          }}>{subtitle}</div>
        </div>

        {/* Meta row */}
        <div style={{ display:'flex', alignItems:'center', gap:10 }}>
          <AvatarStack members={members} />
          <span style={{ fontSize:12, color:'#8E8E93', fontFamily:'Inter,system-ui,sans-serif', whiteSpace:'nowrap' }}>
            {members.length} leden
          </span>
        </div>

        {/* Task + deadline chips */}
        <div style={{ display:'flex', gap:6, flexWrap:'wrap', marginTop:12 }}>
          <div style={{
            display:'inline-flex', alignItems:'center', gap:5, whiteSpace:'nowrap',
            padding:'5px 9px', borderRadius:999, background:'rgba(116,116,128,0.1)',
            fontSize:11, color:'#8E8E93', fontWeight:500, fontFamily:'Inter,system-ui,sans-serif',
          }}>
            <Ico.CheckSq size={11} color="#FF4D1A" />
            <b style={{ color:'#020100', fontWeight:700 }}>{myTasks}</b> taken voor jou
          </div>
          <div style={{
            display:'inline-flex', alignItems:'center', gap:5, whiteSpace:'nowrap',
            padding:'5px 9px', borderRadius:999, background:'rgba(116,116,128,0.1)',
            fontSize:11, color:'#8E8E93', fontWeight:500, fontFamily:'Inter,system-ui,sans-serif',
          }}>
            <Ico.Cal size={11} color="#007AFF" />
            {deadline}
          </div>
        </div>
      </div>

      {/* Right column — vertical progress timeline */}
      <div style={{ display:'flex', flexDirection:'column', alignItems:'center', paddingTop:6, paddingBottom:2 }}>
        <ProjectTimeline steps={steps} current={currentStep} />
        <div style={{
          fontSize:9, color:'#8E8E93', fontFamily:'Inter,system-ui,sans-serif',
          marginTop:6, textAlign:'center', lineHeight:1.2, maxWidth:56,
          textTransform:'uppercase', letterSpacing:'0.4px', fontWeight:600,
        }}>{steps[currentStep]}</div>
      </div>
    </div>
  </div>
);

const ProjectsPage = ({ onDetail }) => {
  const [filter, setFilter] = React.useState('Alle');

  const PHASES = ['Idee','Plan','Bouwen','Testen','Klaar'];

  const projects = [
    {
      name:'Bosgym Bouwen',
      subtitle:'Hebt — Materialenlijst afmaken',
      community:'Eigen Gym Bouwen', communityImg:IMG.cGym, communityColor:'#E6F4DE',
      role:'Bouwer', roleColor:'#E6F4DE',
      members:[IMG.lisa, IMG.mark, IMG.sara, IMG.nina, IMG.tom],
      myTasks:3, deadline:'Vóór 18 apr',
      steps: PHASES, currentStep: 2,
    },
    {
      name:'Eerste Keer Out of Body',
      subtitle:'Hebt — Audio-cue opnemen',
      community:'OBE Nederland', communityImg:IMG.cOBE, communityColor:'#EADFFF',
      role:'Deelnemer', roleColor:'#EADFFF',
      members:[IMG.mark, IMG.eva, IMG.joep, IMG.anna],
      myTasks:2, deadline:'Vóór 22 apr',
      steps: PHASES, currentStep: 3,
    },
    {
      name:'Wat is Holacracy?',
      subtitle:'Hebt — Introductie-deck Q2',
      community:'Holacracy Ondernemen', communityImg:IMG.cHolacracy, communityColor:'#D0E8FF',
      role:'Coördinator', roleColor:'#D0E8FF',
      members:[IMG.sara, IMG.tom, IMG.joep, IMG.lisa, IMG.nina, IMG.mark],
      myTasks:5, deadline:'Vóór 30 apr',
      steps: PHASES, currentStep: 1,
    },
    {
      name:'Les Module 1',
      subtitle:'Hebt — Werkboek pagina 8-12',
      community:'Homeschooling NL', communityImg:IMG.cHomeschool, communityColor:'#FFE8D0',
      role:'Schrijver', roleColor:'#FFE8D0',
      members:[IMG.tom, IMG.anna, IMG.eva],
      myTasks:1, deadline:'Vóór 10 mei',
      steps: PHASES, currentStep: 0,
    },
    {
      name:'Tinyhouse Ontwerpen',
      subtitle:'Hebt — Plattegrond v2',
      community:'Tinyhouse Nederland', communityImg:IMG.cTinyhouse, communityColor:'#FFE4E1',
      role:'Ontwerper', roleColor:'#FFE4E1',
      members:[IMG.eva, IMG.joep, IMG.lisa, IMG.sara],
      myTasks:2, deadline:'Vóór 5 mei',
      steps: PHASES, currentStep: 4,
    },
  ];

  return (
    <div>
      <div style={{ padding:'0 16px 16px', background:'#F2F2F7' }}>
        <div style={{ display:'flex', gap:12, marginBottom:16 }}>
          {[['5','Projecten'],['13','Taken'],['24','Klaar']].map(([n,l])=>(
            <div key={l} style={{ flex:1, background:'#fff', borderRadius:16, padding:'14px 10px', textAlign:'center', boxShadow:'0 1px 3px rgba(0,0,0,0.07)' }}>
              <div style={{ fontFamily:'"Instrument Serif",Georgia,serif', fontWeight:400, fontSize:30, color:'#020100', letterSpacing:'-0.6px', lineHeight:1 }}>{n}</div>
              <MetaLabel style={{ marginTop:3, display:'block' }}>{l}</MetaLabel>
            </div>
          ))}
        </div>
        <PillRow pills={[
          { label:'Alle',       Icon: Ico.Grid    },
          { label:'Mijn taken', Icon: Ico.CheckSq },
          { label:'Aankomend',  Icon: Ico.Clock   },
          { label:'Actief',     Icon: Ico.Zap     },
        ]} active={filter} onChange={setFilter} />
      </div>
      <div style={{ padding:'8px 16px 120px', display:'flex', flexDirection:'column', gap:18 }}>
        {projects.map(p=><ProjectCard key={p.name} {...p} onClick={onDetail ? ()=>onDetail(p) : undefined} />)}
        <button style={{ width:'100%', padding:'14px 0', borderRadius:16, border:'1.5px dashed rgba(116,116,128,0.3)', background:'transparent', color:'#8E8E93', fontSize:14, fontWeight:500, cursor:'pointer', fontFamily:'Inter,system-ui,sans-serif', display:'flex', alignItems:'center', justifyContent:'center', gap:6 }}>
          <Ico.Plus size={16} /> Nieuw project
        </button>
      </div>
    </div>
  );
};

// ─── Project detail sub-tabs ───────────────────────────────────────────────
const nameFor = (src) => ({
  [IMG.lisa]:'Kees Jan', [IMG.mark]:'Jelle', [IMG.sara]:'Sara Ahmed',
  [IMG.nina]:'Melissa', [IMG.tom]:'Joep',   [IMG.eva]:'Eva Smit',
  [IMG.anna]:'Anna de Groot', [IMG.joep]:'Kevin Cucks',
})[src] || 'Teamlid';

// ─── Chat: system event (task done, practical added, etc.) ───────────────
const PDSystemEvent = ({ kind, who, text, time }) => {
  const colors = {
    task:'#34C759', practical:'#FF9500', milestone:'#FF4D1A',
    role:'#007AFF', event:'#AF52DE', join:'#8E8E93',
  };
  const col = colors[kind] || '#8E8E93';
  const Icon =
    kind==='task'      ? Ico.CheckSq :
    kind==='practical' ? Ico.Bulb    :
    kind==='milestone' ? Ico.Zap     :
    kind==='role'      ? Ico.Users   :
    kind==='event'     ? Ico.Cal     :
    Ico.Info;
  return (
    <div style={{ display:'flex', justifyContent:'center', margin:'10px 0' }}>
      <div style={{
        display:'inline-flex', alignItems:'center', gap:8,
        padding:'6px 12px', borderRadius:999,
        background:'rgba(255,255,255,0.7)', backdropFilter:'blur(8px)',
        border:`1px solid ${col}22`,
        fontSize:11.5, color:'#020100', fontFamily:'Inter,system-ui,sans-serif',
        maxWidth:'85%',
      }}>
        <Icon size={12} color={col} />
        <span style={{ flex:1, minWidth:0, overflow:'hidden', textOverflow:'ellipsis' }}>
          <b style={{ fontWeight:700 }}>{who}</b> <span style={{ color:'#6B6B70' }}>{text}</span>
        </span>
        <span style={{ fontSize:10, color:'#C7C7CC', fontWeight:500, flexShrink:0 }}>{time}</span>
      </div>
    </div>
  );
};

// ─── Chat: message bubble ──────────────────────────────────────────────────
const PDBubble = ({ msg, showAvatar, showName }) => {
  const isMe = msg.from === 'me';
  return (
    <div style={{ display:'flex', flexDirection: isMe ? 'row-reverse' : 'row', gap:8, alignItems:'flex-end', marginBottom:2 }}>
      {!isMe && (
        showAvatar ? (
          <img src={msg.avatar} alt="" style={{ width:28, height:28, borderRadius:'50%', objectFit:'cover', flexShrink:0 }} />
        ) : (
          <div style={{ width:28, flexShrink:0 }} />
        )
      )}
      <div style={{ maxWidth:'72%', display:'flex', flexDirection:'column', alignItems: isMe?'flex-end':'flex-start' }}>
        {showName && !isMe && (
          <div style={{ fontSize:10.5, color:'#8E8E93', fontWeight:600, fontFamily:'Inter,system-ui,sans-serif', marginBottom:3, marginLeft:4 }}>{msg.name}</div>
        )}
        <div style={{
          padding:'9px 13px',
          borderRadius: isMe ? '18px 18px 4px 18px' : '18px 18px 18px 4px',
          background: isMe ? '#020100' : '#fff',
          color: isMe ? '#fff' : '#020100',
          fontSize:14, fontFamily:'Inter,system-ui,sans-serif', lineHeight:1.45,
          boxShadow:'0 1px 3px rgba(0,0,0,0.06)',
          wordBreak:'break-word',
        }}>{msg.text}</div>

        {msg.attach && (
          <div style={{
            marginTop:6, padding:'8px 11px', borderRadius:12,
            background: isMe ? 'rgba(2,1,0,0.08)' : '#fff',
            border: isMe ? 'none' : '1px solid rgba(0,0,0,0.05)',
            display:'flex', alignItems:'center', gap:9,
            boxShadow:'0 1px 3px rgba(0,0,0,0.05)',
            maxWidth:'100%',
          }}>
            {msg.attach.img ? (
              <img src={msg.attach.img} alt="" style={{ width:34, height:34, borderRadius:8, objectFit:'cover', flexShrink:0 }} />
            ) : (
              <div style={{ width:34, height:34, borderRadius:8, background:`${msg.attach.col || '#8E8E93'}18`, display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0 }}>
                {msg.attach.Icon && <msg.attach.Icon size={16} color={msg.attach.col || '#8E8E93'} />}
              </div>
            )}
            <div style={{ flex:1, minWidth:0 }}>
              <div style={{ fontSize:12.5, fontWeight:700, color:'#020100', fontFamily:'Inter,system-ui,sans-serif', overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap' }}>{msg.attach.title}</div>
              {msg.attach.sub && <div style={{ fontSize:11, color:'#8E8E93', fontFamily:'Inter,system-ui,sans-serif' }}>{msg.attach.sub}</div>}
            </div>
          </div>
        )}

        {msg.reactions && msg.reactions.length > 0 && (
          <div style={{ display:'flex', gap:4, marginTop:4, flexWrap:'wrap', justifyContent: isMe ? 'flex-end' : 'flex-start' }}>
            {msg.reactions.map((r,i)=>(
              <span key={i} style={{
                display:'inline-flex', alignItems:'center', gap:3, padding:'2px 7px', borderRadius:999,
                background:'#fff', border:'1px solid rgba(0,0,0,0.06)',
                fontSize:11, color:'#020100', fontFamily:'Inter,system-ui,sans-serif',
                boxShadow:'0 1px 2px rgba(0,0,0,0.04)',
              }}>
                <span>{r.emoji}</span>
                <span style={{ fontWeight:600, color:'#6B6B70' }}>{r.count}</span>
              </span>
            ))}
          </div>
        )}

        <div style={{ fontSize:10, color:'#B9B9BE', marginTop:3, paddingLeft:4, paddingRight:4, fontFamily:'Inter,system-ui,sans-serif' }}>
          {msg.time}{isMe ? ' · Jij' : ''}
        </div>
      </div>
    </div>
  );
};

// ─── Chat: date separator ──────────────────────────────────────────────────
const PDDateSep = ({ label }) => (
  <div style={{ display:'flex', alignItems:'center', gap:10, margin:'12px 0 8px' }}>
    <div style={{ flex:1, height:1, background:'rgba(0,0,0,0.06)' }} />
    <span style={{ fontSize:11, fontWeight:600, color:'#8E8E93', fontFamily:'Inter,system-ui,sans-serif', textTransform:'uppercase', letterSpacing:'0.06em' }}>{label}</span>
    <div style={{ flex:1, height:1, background:'rgba(0,0,0,0.06)' }} />
  </div>
);

// ─── Chat: typing indicator ────────────────────────────────────────────────
const PDTyping = ({ name, avatar }) => (
  <div style={{ display:'flex', gap:8, alignItems:'flex-end', marginBottom:6 }}>
    <img src={avatar} alt="" style={{ width:28, height:28, borderRadius:'50%', objectFit:'cover', flexShrink:0 }} />
    <div style={{
      padding:'10px 14px', borderRadius:'18px 18px 18px 4px', background:'#fff',
      boxShadow:'0 1px 3px rgba(0,0,0,0.06)', display:'flex', gap:4, alignItems:'center',
    }}>
      {[0,150,300].map(d=>(
        <span key={d} style={{
          width:6, height:6, borderRadius:'50%', background:'#C7C7CC',
          animation:'pd-typing 1s ease-in-out infinite', animationDelay:`${d}ms`,
        }} />
      ))}
    </div>
    <span style={{ fontSize:10.5, color:'#8E8E93', fontFamily:'Inter,system-ui,sans-serif', marginLeft:4, marginBottom:4 }}>{name} is aan het typen…</span>
  </div>
);

const PDChat = ({ project }) => {
  const m = project.members;
  const n0 = nameFor(m[0]),        n1 = nameFor(m[1]||m[0]),
        n2 = nameFor(m[2]||m[0]),  n3 = nameFor(m[3]||m[0]);

  // Mix of system events and chat messages, threaded naturally
  const timeline = [
    { type:'date', label:'Gisteren' },
    { type:'sys',  kind:'milestone', who:n0,        text:`bereikte mijlpaal 'Fase ${project.steps[Math.max(0,project.currentStep-1)]}' afgerond`, time:'18:02' },
    { type:'msg',  from:m[0], name:n0.split(' ')[0], avatar:m[0], text:'Mooi zo team — fase 2 zit erop 🎉 Wie wil morgen even door de planning voor fase 3?', time:'18:10' },
    { type:'msg',  from:m[1]||m[0], name:n1.split(' ')[0], avatar:m[1]||m[0], text:'Ik kan om 10:00, heb half uurtje.', time:'18:14', reactions:[{emoji:'👍',count:2}] },
    { type:'msg',  from:'me', text:'Sluit ik bij aan!', time:'18:15' },
    { type:'sys',  kind:'task',     who:n2,        text:'voltooide taak \'Ontwerp user registration\'', time:'19:40' },
    { type:'msg',  from:m[2]||m[0], name:n2.split(' ')[0], avatar:m[2]||m[0], text:'Ontwerp staat in de map, link hieronder 👇', time:'19:42' },
    { type:'msg',  from:m[2]||m[0], name:n2.split(' ')[0], avatar:m[2]||m[0], text:'Feedback mag in comments.', time:'19:42',
      attach:{ Icon: Ico.Doc, col:'#007AFF', title:'Ontwerp v2 — user registration', sub:'PDF · 2,4 MB' },
      reactions:[{emoji:'🙌',count:3},{emoji:'✅',count:1}],
    },

    { type:'date', label:'Vandaag' },
    { type:'sys',  kind:'practical', who:n1,       text:'voegde practical \'Kick-off draaiboek\' toe', time:'08:12' },
    { type:'msg',  from:m[1]||m[0], name:n1.split(' ')[0], avatar:m[1]||m[0], text:'Heb het draaiboek ingevuld van onze laatste kick-off, kan hergebruikt worden 📘', time:'08:15',
      attach:{ img:IMG.meetup, title:'Kick-off draaiboek', sub:'5 stappen · door ' + n1.split(' ')[0] },
    },
    { type:'msg',  from:'me', text:'Top! Ik ga \'m dit weekend checken.', time:'08:18' },
    { type:'sys',  kind:'event',     who:n1,       text:'plande event \'Werksessie Ontwerp\' op 26 apr', time:'08:20' },
    { type:'msg',  from:m[3]||m[0], name:n3.split(' ')[0], avatar:m[3]||m[0], text:'Kleine vraag over de testsetup — @' + n2.split(' ')[0] + ' heb jij al een idee van de locatie?', time:'09:05' },
    { type:'msg',  from:m[2]||m[0], name:n2.split(' ')[0], avatar:m[2]||m[0], text:'Ik denk dat De Cirkel ideaal is. Ruimte, koffie, goede vibe.', time:'09:07', reactions:[{emoji:'☕',count:2},{emoji:'👌',count:1}] },
    { type:'msg',  from:m[2]||m[0], name:n2.split(' ')[0], avatar:m[2]||m[0], text:'Zal ik ze vandaag bellen?', time:'09:07' },
    { type:'msg',  from:m[3]||m[0], name:n3.split(' ')[0], avatar:m[3]||m[0], text:'Top, graag!', time:'09:09' },
    { type:'sys',  kind:'role',     who:n3,         text:'nam de rol Tester op zich', time:'09:10' },
    { type:'msg',  from:'me', text:'🎯', time:'09:11' },
    { type:'msg',  from:m[0], name:n0.split(' ')[0], avatar:m[0], text:'Kort voor iedereen: morgen 10:00 online — ik stuur de agenda vanavond. Fijne dag verder allemaal ✌️', time:'10:22' },
  ];

  const [input, setInput] = React.useState('');
  const [messages, setMessages] = React.useState(timeline);
  const bottomRef = React.useRef(null);

  React.useEffect(() => {
    if (bottomRef.current) bottomRef.current.scrollTop = bottomRef.current.scrollHeight;
  }, [messages]);

  const send = () => {
    if (!input.trim()) return;
    setMessages(ms => [...ms, { type:'msg', from:'me', text: input, time: 'Nu' }]);
    setInput('');
  };

  return (
    <div style={{ display:'flex', flexDirection:'column', flex:1, minHeight:0, background:'#F2F2F7' }}>
      {/* Inline keyframes for typing dots */}
      <style>{`@keyframes pd-typing { 0%,80%,100% { opacity:0.3; transform:translateY(0); } 40% { opacity:1; transform:translateY(-2px); } }`}</style>

      {/* Group header — compact project chat bar */}
      <div style={{
        display:'flex', alignItems:'center', gap:10,
        padding:'10px 14px', background:'#fff', borderBottom:'1px solid rgba(0,0,0,0.06)',
        flexShrink:0,
      }}>
        <div style={{ display:'flex' }}>
          {project.members.slice(0,3).map((src,i)=>(
            <img key={i} src={src} alt="" style={{ width:22, height:22, borderRadius:'50%', objectFit:'cover', border:'2px solid #fff', marginLeft: i===0?0:-7 }} />
          ))}
        </div>
        <div style={{ flex:1, minWidth:0 }}>
          <div style={{ fontSize:12.5, fontWeight:700, color:'#020100', fontFamily:'Inter,system-ui,sans-serif' }}>{project.name} · groepschat</div>
          <div style={{ fontSize:11, color:'#8E8E93', fontFamily:'Inter,system-ui,sans-serif' }}>
            <span style={{ color:'#34C759', fontWeight:600 }}>●</span> {Math.max(2, project.members.length - 2)} online · {project.members.length} leden
          </div>
        </div>
        <button style={{ width:30, height:30, borderRadius:'50%', border:'none', background:'rgba(116,116,128,0.1)', display:'flex', alignItems:'center', justifyContent:'center', cursor:'pointer' }}>
          <Ico.Search size={13} color="#8E8E93" />
        </button>
      </div>

      {/* Messages */}
      <div ref={bottomRef} style={{
        flex:1, overflowY:'auto', scrollbarWidth:'none',
        padding:'4px 14px 14px', display:'flex', flexDirection:'column', gap:2,
      }}>
        {messages.map((it, i) => {
          if (it.type==='date') return <PDDateSep key={i} label={it.label} />;
          if (it.type==='sys')  return <PDSystemEvent key={i} kind={it.kind} who={it.who} text={it.text} time={it.time} />;
          // grouping: hide avatar/name if previous was same sender within a short window
          const prev = messages[i-1];
          const sameSender = prev && prev.type==='msg' && prev.from===it.from;
          const showAvatar = !sameSender;
          const showName   = !sameSender && it.from !== 'me';
          return <PDBubble key={i} msg={it} showAvatar={showAvatar} showName={showName} />;
        })}
        <PDTyping name={nameFor(m[1]||m[0]).split(' ')[0]} avatar={m[1]||m[0]} />
      </div>

      {/* Input bar */}
      <div style={{
        padding:'10px 12px 14px', background:'#fff',
        borderTop:'1px solid rgba(0,0,0,0.06)',
        display:'flex', gap:8, alignItems:'flex-end', flexShrink:0,
      }}>
        <button style={{ width:38, height:38, borderRadius:'50%', border:'none', background:'rgba(116,116,128,0.1)', display:'flex', alignItems:'center', justifyContent:'center', cursor:'pointer', flexShrink:0 }}>
          <Ico.Plus size={18} color="#8E8E93" />
        </button>
        <div style={{ flex:1, background:'#F1F1EF', borderRadius:20, padding:'9px 14px', display:'flex', alignItems:'center', gap:10, border:'1px solid #E5E5E2' }}>
          <input
            value={input}
            onChange={e => setInput(e.target.value)}
            onKeyDown={e => e.key === 'Enter' && send()}
            placeholder={`Bericht aan ${project.name}…`}
            style={{ flex:1, border:'none', background:'transparent', outline:'none', fontSize:14, fontFamily:'Inter,system-ui,sans-serif', color:'#020100' }}
          />
          <button style={{ border:'none', background:'none', cursor:'pointer', color:'#9B9B9B', padding:0, display:'flex', alignItems:'center' }}>
            <Ico.Img size={17} />
          </button>
        </div>
        <button onClick={send} style={{
          width:38, height:38, borderRadius:'50%', border:'none',
          background: input.trim() ? '#020100' : '#ECECEC',
          display:'flex', alignItems:'center', justifyContent:'center',
          cursor: input.trim() ? 'pointer' : 'default', transition:'background 0.15s', flexShrink:0,
        }}>
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke={input.trim() ? '#fff' : '#9B9B9B'} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/>
          </svg>
        </button>
      </div>
    </div>
  );
};

const PDDoel = ({ project }) => {
  const m = project.members;
  const doelSteps = [
    {
      title:'Onderzoek & context', status:'done', deadline:'Afgerond · 4 apr',
      short:'Stakeholder-interviews en bestaand werk in kaart brengen.',
      long:'We hebben 12 interviews gedaan met bewoners en partners, en de huidige situatie in kaart gebracht. Belangrijkste inzicht: betrokkenheid is groot, maar de drempel om mee te doen is hoog. Hier bouwen we op door.',
      assignees:[m[0], m[1]||m[0]],
      subtasks:[
        { text:'12 stakeholder-interviews', done:true },
        { text:'Bestaand onderzoek verzamelen', done:true },
        { text:'Inzichten-document opleveren', done:true },
      ],
    },
    {
      title:'Concept & richting', status:'done', deadline:'Afgerond · 12 apr',
      short:'Gezamenlijk concept kiezen en richting bepalen.',
      long:'In een werksessie met het team en 5 leden uit de community hebben we drie richtingen tegen elkaar afgewogen. Gekozen concept: modulaire buurtaanpak, gestart met één pilot-wijk.',
      assignees:[m[0]],
      subtasks:[
        { text:'Werksessie met team', done:true },
        { text:'Richting voorleggen aan community', done:true },
      ],
    },
    {
      title:'Prototype bouwen', status:'active', deadline:'Vóór 26 apr',
      short:'Werkend prototype opleveren voor testronde.',
      long:'We werken aan een eerste tastbare versie waarmee we kunnen testen. Focus ligt op het onboarding-traject en de eerste interactie. Design reviews elke dinsdag, techniek-sync op donderdag.',
      assignees:[m[2]||m[0], m[0]],
      subtasks:[
        { text:'Onboarding-flow ontwerpen', done:true },
        { text:'Kern-interactie bouwen', done:false },
        { text:'Interne demo-versie', done:false },
      ],
    },
    {
      title:'Testen met doelgroep', status:'todo', deadline:'Start 1 mei',
      short:'Feedback verzamelen, itereren waar nodig.',
      long:'Testronde met 15–20 mensen uit de doelgroep, zowel fysiek als digitaal. Daarna een iteratieronde van ~2 weken op basis van de feedback.',
      assignees:[m[1]||m[0]],
      subtasks:[
        { text:'Testprotocol vaststellen', done:false },
        { text:'Testers werven', done:false },
        { text:'Sessies plannen', done:false },
      ],
    },
    {
      title:'Lancering & delen', status:'todo', deadline:'Streven 20 mei',
      short:'Opleveren, documenteren en delen met de community.',
      long:'Publieke lancering via de community, met een kort event en deelbare materialen. We maken de aanpak open beschikbaar zodat andere groepen ermee verder kunnen.',
      assignees:[m[0], m[3]||m[0]],
      subtasks:[
        { text:'Lanceer-event plannen', done:false },
        { text:'Documentatie publiek maken', done:false },
      ],
    },
  ];

  const [open, setOpen] = React.useState(() => doelSteps.findIndex(s=>s.status==='active'));

  const statusInfo = {
    done:   { col:'#34C759', bg:'rgba(52,199,89,0.12)',  label:'Klaar'  },
    active: { col:'#FF4D1A', bg:'rgba(255,77,26,0.12)',  label:'Actief' },
    todo:   { col:'#8E8E93', bg:'rgba(116,116,128,0.12)',label:'Open'   },
  };

  return (
    <div style={{ display:'flex', flexDirection:'column', gap:16, paddingTop:14 }}>
      {/* Doel header — 'Doel' in serif, description in Inter */}
      <div>
        <h2 style={{
          fontFamily:'"Instrument Serif",Georgia,serif', fontWeight:400,
          fontSize:34, color:'#020100', margin:'0 0 8px',
          letterSpacing:'-0.8px', lineHeight:1,
        }}>Doel</h2>
        <p style={{
          fontSize:14, color:'rgba(2,1,0,0.72)', margin:0, lineHeight:1.5,
          fontFamily:'Inter,system-ui,sans-serif',
        }}>
          Samen een werkend, gedragen resultaat neerzetten voor {project.name} — in samenwerking met {project.community}. We bouwen stap voor stap, testen vroeg en delen wat we leren.
        </p>
      </div>

      {/* Progress summary */}
      <div style={{
        display:'flex', alignItems:'center', gap:12, padding:'12px 14px',
        background:'#fff', borderRadius:14, boxShadow:'0 1px 3px rgba(0,0,0,0.05)',
      }}>
        <div style={{ flex:1 }}>
          <MetaLabel style={{ textTransform:'uppercase', letterSpacing:'0.06em', display:'block', marginBottom:3 }}>Voortgang</MetaLabel>
          <div style={{ fontSize:13, fontWeight:700, color:'#020100', fontFamily:'Inter,system-ui,sans-serif' }}>
            {doelSteps.filter(s=>s.status==='done').length} van {doelSteps.length} stappen afgerond
          </div>
        </div>
        <div style={{ width:80 }}>
          <ProgressBar pct={(doelSteps.filter(s=>s.status==='done').length/doelSteps.length)*100} />
        </div>
      </div>

      {/* Timeline — top → bottom */}
      <div style={{ position:'relative', paddingLeft:4 }}>
        {doelSteps.map((s,i)=>{
          const info = statusInfo[s.status];
          const isOpen = open === i;
          const last = i === doelSteps.length - 1;
          return (
            <div key={i} style={{ display:'flex', gap:14, position:'relative' }}>
              {/* Rail */}
              <div style={{ display:'flex', flexDirection:'column', alignItems:'center', flexShrink:0, width:22 }}>
                <div style={{
                  width:22, height:22, borderRadius:'50%', flexShrink:0,
                  background: s.status==='done' ? '#020100' : (s.status==='active' ? '#FF4D1A' : '#fff'),
                  border: s.status==='todo' ? '1.5px solid rgba(116,116,128,0.3)' : 'none',
                  color:'#fff', display:'flex', alignItems:'center', justifyContent:'center',
                  fontSize:11, fontWeight:700, fontFamily:'Inter,system-ui,sans-serif',
                  boxShadow: s.status==='active' ? '0 0 0 4px rgba(255,77,26,0.15)' : 'none',
                  marginTop:10,
                }}>
                  {s.status==='done' ? <Ico.Check size={11} color="#fff" /> : (s.status==='active' ? '•' : <span style={{ color:'#8E8E93' }}>{i+1}</span>)}
                </div>
                {!last && (
                  <div style={{
                    width:2, flex:1, marginTop:4, marginBottom:4, minHeight:20,
                    background: s.status==='done' ? '#020100' : 'rgba(116,116,128,0.18)',
                  }} />
                )}
              </div>

              {/* Step card */}
              <div style={{ flex:1, minWidth:0, paddingBottom: last ? 0 : 14 }}>
                <div
                  onClick={()=>setOpen(isOpen ? -1 : i)}
                  style={{
                    background:'#fff', borderRadius:14, padding:'13px 14px',
                    boxShadow: isOpen ? '0 4px 18px rgba(0,0,0,0.08)' : '0 1px 3px rgba(0,0,0,0.05)',
                    cursor:'pointer', transition:'box-shadow 0.2s',
                  }}>
                  <div style={{ display:'flex', alignItems:'center', gap:8 }}>
                    <span style={{ fontSize:14, fontWeight:700, color:'#020100', fontFamily:'Inter,system-ui,sans-serif', letterSpacing:'-0.1px', flex:1, minWidth:0 }}>{s.title}</span>
                    <span style={{ fontSize:10, padding:'2px 7px', borderRadius:999, background:info.bg, color:info.col, fontFamily:'Inter,system-ui,sans-serif', fontWeight:600, flexShrink:0 }}>{info.label}</span>
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#8E8E93" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"
                      style={{ transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)', transition:'transform 0.2s', flexShrink:0 }}>
                      <polyline points="6 9 12 15 18 9"/>
                    </svg>
                  </div>
                  <MetaLabel style={{ display:'block', marginTop:4, lineHeight:1.4 }}>{s.short}</MetaLabel>
                  <div style={{ display:'flex', alignItems:'center', gap:8, marginTop:10 }}>
                    <AvatarStack members={s.assignees} max={3} />
                    <span style={{ fontSize:11, color:'#8E8E93', fontFamily:'Inter,system-ui,sans-serif' }}>{s.deadline}</span>
                  </div>

                  {isOpen && (
                    <div style={{ marginTop:12, paddingTop:12, borderTop:'1px solid rgba(116,116,128,0.15)' }}>
                      <p style={{ fontSize:13, color:'rgba(2,1,0,0.78)', lineHeight:1.55, margin:'0 0 12px', fontFamily:'Inter,system-ui,sans-serif' }}>{s.long}</p>

                      <MetaLabel style={{ textTransform:'uppercase', letterSpacing:'0.06em', display:'block', marginBottom:6 }}>Sub-taken</MetaLabel>
                      <div style={{ display:'flex', flexDirection:'column', gap:6, marginBottom:12 }}>
                        {s.subtasks.map((st,j)=>(
                          <div key={j} style={{ display:'flex', alignItems:'center', gap:9 }}>
                            <div style={{
                              width:16, height:16, borderRadius:'50%',
                              background: st.done ? '#020100' : 'transparent',
                              border: st.done ? 'none' : '1.5px solid rgba(116,116,128,0.4)',
                              display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0,
                            }}>
                              {st.done && <Ico.Check size={9} color="#fff" />}
                            </div>
                            <span style={{
                              fontSize:12.5, color: st.done ? '#8E8E93' : '#020100',
                              textDecoration: st.done ? 'line-through' : 'none',
                              fontFamily:'Inter,system-ui,sans-serif',
                            }}>{st.text}</span>
                          </div>
                        ))}
                      </div>

                      <MetaLabel style={{ textTransform:'uppercase', letterSpacing:'0.06em', display:'block', marginBottom:6 }}>Wie doet dit</MetaLabel>
                      <div style={{ display:'flex', flexWrap:'wrap', gap:6 }}>
                        {s.assignees.map((a,j)=>(
                          <span key={j} style={{
                            display:'inline-flex', alignItems:'center', gap:6,
                            padding:'4px 9px 4px 4px', borderRadius:999,
                            background:'rgba(116,116,128,0.1)',
                          }}>
                            <img src={a} alt="" style={{ width:18, height:18, borderRadius:'50%', objectFit:'cover' }} />
                            <span style={{ fontSize:11.5, fontWeight:600, color:'#020100', fontFamily:'Inter,system-ui,sans-serif' }}>{nameFor(a)}</span>
                          </span>
                        ))}
                      </div>
                    </div>
                  )}
                </div>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
};

const PDRollen = ({ project }) => {
  const m = project.members;
  const rollen = [
    {
      role: project.role, person: m[0], accent:'#34C759',
      short:'Leidt dit deel van het project en is eindverantwoordelijk.',
      purpose:'Zorgt dat het project vooruit blijft gaan en bewaakt de kwaliteit van het resultaat.',
      responsibilities:['Prioriteiten stellen met het team','Wekelijks voortgang bewaken','Knopen doorhakken bij twijfel','Schakelen met de community'],
      commitment:'4–6 uur per week', reachable:'Chat · donderdag-sync',
    },
    {
      role:'Facilitator', person: m[1]||m[0], accent:'#007AFF',
      short:'Begeleidt proces, werksessies en besluitvorming.',
      purpose:'Maakt dat iedereen gehoord wordt en dat besluiten goed landen in het team.',
      responsibilities:['Werksessies voorbereiden en leiden','Check-ins en retrospectives','Conflicten ontwikkelen i.p.v. oplossen','Ritme bewaken'],
      commitment:'3–4 uur per week', reachable:'Chat · dinsdag-sync',
    },
    {
      role:'Content', person: m[2]||m[0], accent:'#FF9500',
      short:'Verantwoordelijk voor inhoudelijke output en tone of voice.',
      purpose:'Zorgt dat wat we maken klopt, helder is en past bij de doelgroep.',
      responsibilities:['Inhoudelijke teksten schrijven','Feedback verwerken','Visuele richting mee bepalen','Kennis vastleggen'],
      commitment:'5–7 uur per week', reachable:'Chat · open voor DM',
    },
    {
      role:'Techniek', person: m[3]||m[0], accent:'#AF52DE',
      short:'Implementatie en technische keuzes.',
      purpose:'Bouwt het prototype en bewaakt de technische haalbaarheid van ideeën.',
      responsibilities:['Prototype ontwikkelen','Technische keuzes onderbouwen','Opzet voor test-setup','Documentatie bijhouden'],
      commitment:'6–8 uur per week', reachable:'Chat · donderdag-sync',
    },
    {
      role:'Community', person: m[(m.length-1)] || m[0], accent:'#FF4D1A',
      short:'Schakel met de bredere community van {project.community}.',
      purpose:'Houdt verbinding warm met de community, haalt signalen op en deelt wat we leren.',
      responsibilities:['Community-updates schrijven','Feedback ophalen uit de community','Nieuwe leden onboarden','Events aankondigen'],
      commitment:'2–3 uur per week', reachable:'Chat · open voor DM',
    },
  ];
  const [open, setOpen] = React.useState(-1);
  return (
    <div style={{ display:'flex', flexDirection:'column', gap:10, paddingTop:14 }}>
      <div style={{ display:'flex', alignItems:'baseline', justifyContent:'space-between', marginBottom:-2 }}>
        <h2 style={{ fontFamily:'"Instrument Serif",Georgia,serif', fontWeight:400, fontSize:22, color:'#020100', margin:0, letterSpacing:'-0.3px', lineHeight:1 }}>Rollen</h2>
        <MetaLabel>{rollen.length} rollen</MetaLabel>
      </div>
      {rollen.map((r,i)=>{
        const isOpen = open === i;
        return (
          <div key={i}
            onClick={()=>setOpen(isOpen ? -1 : i)}
            style={{
              background:'#fff', borderRadius:16,
              boxShadow: isOpen ? '0 4px 18px rgba(0,0,0,0.08)' : '0 1px 3px rgba(0,0,0,0.05)',
              cursor:'pointer', transition:'box-shadow 0.2s',
              borderLeft: `3px solid ${r.accent}`,
              overflow:'hidden',
            }}>
            <div style={{ display:'flex', alignItems:'center', gap:12, padding:'13px 14px' }}>
              <img src={r.person} alt="" style={{ width:44, height:44, borderRadius:'50%', objectFit:'cover', flexShrink:0 }} />
              <div style={{ flex:1, minWidth:0 }}>
                <div style={{ display:'flex', alignItems:'center', gap:8, marginBottom:3 }}>
                  <span style={{ fontSize:14, fontWeight:700, color:'#020100', fontFamily:'Inter,system-ui,sans-serif', letterSpacing:'-0.1px' }}>{nameFor(r.person)}</span>
                  <span style={{ fontSize:10, padding:'2px 8px', borderRadius:999, background:`${r.accent}18`, color:r.accent, fontFamily:'Inter,system-ui,sans-serif', fontWeight:700, letterSpacing:'0.02em' }}>{r.role}</span>
                </div>
                <MetaLabel style={{ display:'block', lineHeight:1.4 }}>{r.short.replace('{project.community}', project.community)}</MetaLabel>
              </div>
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#8E8E93" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"
                style={{ transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)', transition:'transform 0.2s', flexShrink:0 }}>
                <polyline points="6 9 12 15 18 9"/>
              </svg>
            </div>

            {isOpen && (
              <div style={{ padding:'4px 14px 16px', borderTop:'1px solid rgba(116,116,128,0.12)' }}>
                <div style={{ marginTop:12 }}>
                  <MetaLabel style={{ textTransform:'uppercase', letterSpacing:'0.06em', display:'block', marginBottom:4 }}>Waarom deze rol</MetaLabel>
                  <p style={{ fontSize:13, color:'rgba(2,1,0,0.78)', lineHeight:1.5, margin:0, fontFamily:'Inter,system-ui,sans-serif' }}>{r.purpose}</p>
                </div>

                <div style={{ marginTop:12 }}>
                  <MetaLabel style={{ textTransform:'uppercase', letterSpacing:'0.06em', display:'block', marginBottom:6 }}>Verantwoordelijkheden</MetaLabel>
                  <ul style={{ margin:0, padding:0, listStyle:'none', display:'flex', flexDirection:'column', gap:5 }}>
                    {r.responsibilities.map((rs,j)=>(
                      <li key={j} style={{ display:'flex', alignItems:'flex-start', gap:8, fontSize:12.5, color:'rgba(2,1,0,0.82)', fontFamily:'Inter,system-ui,sans-serif', lineHeight:1.45 }}>
                        <span style={{ width:4, height:4, borderRadius:'50%', background:r.accent, marginTop:7, flexShrink:0 }} />
                        {rs}
                      </li>
                    ))}
                  </ul>
                </div>

                <div style={{ display:'flex', gap:8, marginTop:12, flexWrap:'wrap' }}>
                  <span style={{ fontSize:11, padding:'4px 10px', borderRadius:999, background:'rgba(116,116,128,0.1)', color:'#8E8E93', fontFamily:'Inter,system-ui,sans-serif', fontWeight:600, display:'inline-flex', alignItems:'center', gap:5 }}>
                    <Ico.Clock size={11} color="#8E8E93" />
                    {r.commitment}
                  </span>
                  <span style={{ fontSize:11, padding:'4px 10px', borderRadius:999, background:'rgba(116,116,128,0.1)', color:'#8E8E93', fontFamily:'Inter,system-ui,sans-serif', fontWeight:600, display:'inline-flex', alignItems:'center', gap:5 }}>
                    <Ico.Chat size={11} color="#8E8E93" />
                    {r.reachable}
                  </span>
                </div>

                <button onClick={(e)=>e.stopPropagation()} style={{
                  marginTop:12, width:'100%', padding:'9px 0', borderRadius:10,
                  border:'none', background:'#020100', color:'#fff',
                  fontSize:12.5, fontWeight:600, cursor:'pointer',
                  fontFamily:'Inter,system-ui,sans-serif',
                }}>Bericht sturen</button>
              </div>
            )}
          </div>
        );
      })}
      <button style={{ width:'100%', padding:'12px 0', borderRadius:14, border:'1.5px dashed rgba(116,116,128,0.3)', background:'transparent', color:'#8E8E93', fontSize:13, fontWeight:500, cursor:'pointer', fontFamily:'Inter,system-ui,sans-serif', display:'flex', alignItems:'center', justifyContent:'center', gap:6 }}>
        <Ico.Plus size={14} /> Rol toevoegen
      </button>
    </div>
  );
};

const PDPracticals = ({ project }) => {
  const [typeF, setTypeF] = React.useState('Alle');
  const m = project.members;
  const items = [
    {
      id:1, title:'Kick-off meeting',
      manifest:'Gezamenlijke start, verwachtingen helder, ritme vastleggen.',
      count:5, type:'Knowledge', status:'done',
      creator:nameFor(m[0]).split(' ')[0], creatorImg:m[0],
      papers:[
        { left:'8%',  top:'3%',  rotate:-8, badge:'check', kind:'todos', todos:[
          { text:'Agenda opstellen', done:true },
          { text:'Iedereen uitnodigen', done:true },
          { text:'Check-in ronde', done:true },
        ]},
        { left:'30%', top:'1%',  rotate:4,  badge:'check', kind:'media', media:['Agenda','Notities','Foto meeting'] },
      ],
    },
    {
      id:2, title:'Onboarding nieuwe leden',
      manifest:'Warm welkom, snel aan boord, niemand valt weg.',
      count:4, type:'Knowledge', status:'new',
      creator:nameFor(m[1]||m[0]).split(' ')[0], creatorImg:m[1]||m[0],
      papers:[
        { left:'10%', top:'2%',  rotate:-6, badge:'check', kind:'todos', todos:[
          { text:'Welkom-doc schrijven', done:true },
          { text:'Buddy-koppel maken', done:false },
          { text:'Eerste-week check', done:false },
        ]},
        { left:'34%', top:'4%',  rotate:3, badge:null, kind:'media', media:['Welkom-doc','Lidmaat-gids'] },
      ],
    },
    {
      id:3, title:'Werksessie voorbereiden',
      manifest:'Duidelijke doelen, materialen klaar, alles in goede banen.',
      count:6, type:'Building', status:'warn',
      creator:nameFor(m[2]||m[0]).split(' ')[0], creatorImg:m[2]||m[0],
      papers:[
        { left:'6%',  top:'1%',  rotate:-10, badge:'warn', kind:'todos', todos:[
          { text:'Locatie regelen', done:true },
          { text:'Materialen inpakken', done:false },
          { text:'Deelnemers briefen', done:false },
        ]},
        { left:'32%', top:'3%', rotate:6, badge:null, kind:'media', media:['Draaiboek','Materialen-lijst','Routebeschrijving'] },
      ],
    },
    {
      id:4, title:'Demo-dag draaiboek',
      manifest:'Alles tip-top, het team schittert, publiek geboeid.',
      count:7, type:'Building', status:'new',
      creator:nameFor(m[0]).split(' ')[0], creatorImg:m[0],
      papers:[
        { left:'8%',  top:'4%', rotate:-5, badge:'check', kind:'todos', todos:[
          { text:'Script demo', done:true },
          { text:'Techniek-check', done:true },
          { text:'Oefenen', done:false },
        ]},
        { left:'34%', top:'2%', rotate:3, badge:null, kind:'media', media:['Demo-script','Slides','Vraag-lijst'] },
      ],
    },
    {
      id:5, title:'Retrospective ritueel',
      manifest:'Eerlijk terugkijken, groeien als team, patronen herkennen.',
      count:3, type:'Knowledge', status:'new',
      creator:nameFor(m[1]||m[0]).split(' ')[0], creatorImg:m[1]||m[0],
      papers:[
        { left:'10%', top:'2%', rotate:-7, badge:'check', kind:'todos', todos:[
          { text:'Format kiezen', done:true },
          { text:'Uitnodigen', done:false },
          { text:'Actiepunten volgen', done:false },
        ]},
      ],
    },
    {
      id:6, title:'Gebruikers-interview protocol',
      manifest:'Goede vragen, luisteren zonder oordeel, inzicht ophalen.',
      count:5, type:'Knowledge', status:'done',
      creator:nameFor(m[2]||m[0]).split(' ')[0], creatorImg:m[2]||m[0],
      papers:[
        { left:'8%',  top:'3%', rotate:-6, badge:'check', kind:'todos', todos:[
          { text:'Vragenlijst', done:true },
          { text:'Testers werven', done:true },
          { text:'Sessies plannen', done:true },
        ]},
        { left:'32%', top:'1%', rotate:4, badge:'check', kind:'media', media:['Vragen','Consent-form','Inzichten-doc'] },
      ],
    },
  ];

  const filtered = typeF==='Alle' ? items : items.filter(i=>i.type===typeF);

  return (
    <div style={{ display:'flex', flexDirection:'column', gap:20, paddingTop:14 }}>
      <div style={{ display:'flex', gap:8 }}>
        {['Alle','Knowledge','Building'].map(t=><Pill key={t} active={typeF===t} onClick={()=>setTypeF(t)}>{t}</Pill>)}
      </div>

      <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:22, rowGap:36 }}>
        {filtered.map(p => <PracticalFolder key={p.id} {...p} />)}
      </div>
    </div>
  );
};

const PDEvents = ({ project }) => {
  const m = project.members;
  const [activeEvent, setActiveEvent] = React.useState(null);
  const hostPerson = { name: nameFor(m[0]), role: `${project.role} · ${project.name}`, src: m[0] };
  const events = [
    {
      month:'Apr', date:'22', day:'Di', title:`${project.name} Standup`,
      time:'19:00–19:30', loc:'Online — Google Meet', type:'Digitaal', typeColor:'#007AFF',
      img:IMG.meeting, attending:[m[0], m[1]||m[0], m[2]||m[0]], count:8,
      description:'Wekelijkse 30-min sync. Kort en scherp — wat doen we deze week, waar lopen we tegenaan, wie helpt wie.',
      takeaways:[
        'Weet wat iedereen deze week oppakt.',
        'Blockers boven water, hulp georganiseerd.',
        'Actiepunten helder en verdeeld.',
      ],
      host:hostPerson,
      meetLink:`https://meet.google.com/${project.name.toLowerCase().replace(/\s/g,'-')}-standup`,
      meetPlatform:'Google Meet',
      techCheck:['Camera aan bij check-in','Werkende mic','Rustige plek'],
      agenda:[
        { time:'19:00', item:'Check-in (1 zin per persoon)' },
        { time:'19:05', item:'Rondje: wat doe ik deze week' },
        { time:'19:20', item:'Blockers en hulp vragen' },
        { time:'19:25', item:'Acties afspreken' },
        { time:'19:30', item:'Afsluiting' },
      ],
      prepare:['Bedenk 1 woord voor check-in','Weet wat je deze week wil oppakken'],
      questions:[{ text:'Kunnen we de tijd 15 min later? 19:00 is soms krap.', by:'Sara' }],
    },
    {
      month:'Apr', date:'26', day:'Za', title:'Werksessie Ontwerp',
      time:'14:00–17:00', loc:'Buurthuis De Cirkel', type:'Fysiek', typeColor:'#020100',
      img:IMG.team, attending:[m[0], m[2]||m[0], m[3]||m[0]], count:6,
      description:'Lange werksessie om de volgende ontwerp-iteratie af te ronden. Hands-on, laptops open, concrete output aan het eind.',
      takeaways:[
        'Concept v2 klaar voor review.',
        'Feedback uit vorige ronde verwerkt.',
        'Volgende stap voor het team helder.',
      ],
      host:hostPerson,
      address:'Buurthuis De Cirkel — Stationsplein 15, Utrecht',
      transport:'Station Utrecht CS — 2 min lopen. Fietsparkeer Catharijnesingel.',
      bring:['Laptop','Schets-materiaal (stift + papier)','Lunchpakket (soep wordt voorzien)'],
      agenda:[
        { time:'14:00', item:'Check-in + sprint-intentie' },
        { time:'14:15', item:'Parallel werken (solo)' },
        { time:'15:30', item:'Check + korte pauze' },
        { time:'15:45', item:'Iteratie in duo' },
        { time:'16:30', item:'Review met het team' },
        { time:'17:00', item:'Sluiting + acties' },
      ],
      prepare:['Neem je ontwerp v1 mee','Denk na over je grootste open vraag'],
      questions:[{ text:'Kunnen we ook hybride aansluiten online?', by:'Anna' }],
    },
    {
      month:'Apr', date:'30', day:'Wo', title:'Review met Stakeholders',
      time:'18:30–20:00', loc:'Impact Hub, Utrecht', type:'Fysiek', typeColor:'#020100',
      img:IMG.meetup, attending:[m[0], m[1]||m[0]], count:11,
      description:'Formele review met onze externe partners en stakeholders. Kans om voortgang te delen en feedback op te halen voor de volgende fase.',
      takeaways:[
        'Stakeholders op één lijn over voortgang.',
        'Directe feedback op prototype en richting.',
        'Eventuele zorgen boven water.',
        'Go/no-go signaal voor volgende fase.',
      ],
      host:hostPerson,
      address:'Impact Hub Utrecht — Neude 5, 3512 AD Utrecht',
      transport:'Station Utrecht CS — 5 min lopen.',
      bring:['Laptop met presentatie','Visuele demo / prototype','Notulist-telefoon','Business-casual'],
      agenda:[
        { time:'18:30', item:'Inloop + drinks' },
        { time:'18:45', item:'Voortgang presentatie' },
        { time:'19:15', item:'Demo van prototype' },
        { time:'19:30', item:'Q&A en feedback' },
        { time:'20:00', item:'Afsluiting + volgende stap' },
      ],
      prepare:['Slides voor 18:00 klaar','Demo-script 1x geoefend','Notulen-sjabloon open'],
      questions:[
        { text:'Hoeveel stakeholders komen er?',        by:'Joep'   },
        { text:'Is er ruimte voor 1-op-1 nagesprek?',   by:'Melissa'},
      ],
    },
    {
      month:'Mei', date:'06', day:'Di', title:'Retrospective Sprint 2',
      time:'20:00–21:00', loc:'Online — Jitsi', type:'Digitaal', typeColor:'#007AFF',
      img:IMG.books, attending:[m[0], m[1]||m[0], m[2]||m[0], m[3]||m[0]], count:7,
      description:'Reflectie op sprint 2. Wat werkte, wat niet, wat gaan we anders doen. Eerlijk en zachtaardig tegelijkertijd.',
      takeaways:[
        'Inzicht in sterke en zwakke punten van sprint 2.',
        'Concrete verbeteringen voor sprint 3.',
        'Team-afstemming hersteld waar nodig.',
      ],
      host:hostPerson,
      meetLink:'https://meet.jit.si/retro-sprint-2-tgp',
      meetPlatform:'Jitsi',
      techCheck:['Rustige plek','Camera aan','Sticky-note app of Miro open'],
      agenda:[
        { time:'20:00', item:'Check-in (1 gevoel)' },
        { time:'20:05', item:'Stille brainstorm: wat werkte / wat niet' },
        { time:'20:20', item:'Clustering en bespreking' },
        { time:'20:40', item:'Acties voor sprint 3' },
        { time:'21:00', item:'Afsluiting' },
      ],
      prepare:['Denk vooraf 10 min over de sprint','Kies 1 sterk en 1 zwak punt'],
      questions:[{ text:'Mogen we ook non-werk observaties delen?', by:'Kees Jan' }],
    },
    {
      month:'Mei', date:'14', day:'Wo', title:'Testronde met Doelgroep',
      time:'10:00–16:00', loc:'Buurthuis De Cirkel', type:'Fysiek', typeColor:'#020100',
      img:IMG.meetup, attending:[m[0], m[1]||m[0], m[2]||m[0]], count:18,
      description:'Hele dag testsessies met 8 deelnemers uit de doelgroep. We observeren, noteren en vragen door. Aan het einde: scherpe lijst verbeterpunten.',
      takeaways:[
        'Directe feedback van 8 echte gebruikers.',
        'Observaties over kern-interacties.',
        'Scherpe lijst verbeter-prioriteiten voor volgende sprint.',
      ],
      host:hostPerson,
      address:'Buurthuis De Cirkel — Stationsplein 15, Utrecht',
      transport:'Station Utrecht CS — 2 min lopen.',
      bring:['Testprotocol','Opname-apparatuur','Feedback-formulieren','Lunchbonnen voor deelnemers'],
      agenda:[
        { time:'10:00', item:'Sessie 1 (60 min)' },
        { time:'11:00', item:'Sessie 2 (60 min)' },
        { time:'12:00', item:'Lunch + tussenstand team' },
        { time:'13:00', item:'Sessie 3 (60 min)' },
        { time:'14:00', item:'Sessie 4 (60 min)' },
        { time:'15:00', item:'Debrief team (60 min)' },
        { time:'16:00', item:'Afsluiting' },
      ],
      prepare:['Testprotocol dubbelchecken','Bevestiging deelnemers 2 dagen vooraf','Apparaten opgeladen'],
      questions:[{ text:'Kunnen we tussentijds een notulist-shift doen?', by:'Melissa' }],
    },
  ];

  return (
    <div style={{ display:'flex', flexDirection:'column', gap:14, paddingTop:14 }}>
      {/* Hero: next event — tactile dark card */}
      <div onClick={()=>setActiveEvent(events[0])} style={{
        background:'linear-gradient(145deg, #1a1a1a 0%, #020100 100%)',
        borderRadius:22, overflow:'hidden', position:'relative', cursor:'pointer',
        boxShadow:'0 2px 4px rgba(0,0,0,0.12), 0 8px 16px rgba(0,0,0,0.18), 0 24px 48px rgba(0,0,0,0.24), inset 0 1px 0 rgba(255,255,255,0.12)',
        border:'1px solid rgba(255,255,255,0.06)',
      }}>
        <div style={{ position:'relative', height:120 }}>
          <img src={events[0].img} alt="" style={{ width:'100%', height:'100%', objectFit:'cover', opacity:0.55 }} />
          <div style={{ position:'absolute', inset:0, background:'linear-gradient(to bottom, transparent 0%, #020100 100%)' }} />
          <div style={{
            position:'absolute', top:14, left:14,
            display:'flex', alignItems:'center', gap:6,
            padding:'5px 11px', borderRadius:999,
            background:'rgba(255,255,255,0.15)',
            backdropFilter:'blur(20px)', WebkitBackdropFilter:'blur(20px)',
            border:'1px solid rgba(255,255,255,0.25)',
            boxShadow:'0 2px 8px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.3)',
          }}>
            <span style={{ width:6, height:6, borderRadius:'50%', background:'#34C759', boxShadow:'0 0 6px rgba(52,199,89,0.6)' }} />
            <span style={{ fontSize:11, fontWeight:600, color:'#fff', fontFamily:'Inter,system-ui,sans-serif' }}>Eerstvolgend</span>
          </div>
        </div>
        <div style={{ padding:'0 20px 20px', marginTop:-10, position:'relative' }}>
          <div style={{ fontSize:11, color:'rgba(255,255,255,0.5)', textTransform:'uppercase', letterSpacing:'0.08em', fontWeight:600, fontFamily:'Inter,system-ui,sans-serif', marginBottom:6 }}>
            {events[0].day} {events[0].date} {events[0].month} · {events[0].time}
          </div>
          <h3 style={{
            fontFamily:'"Instrument Serif",Georgia,serif', fontWeight:400,
            fontSize:26, color:'#fff', letterSpacing:'-0.4px',
            lineHeight:1.1, margin:'0 0 10px',
          }}>{events[0].title}</h3>
          <div style={{ display:'flex', alignItems:'center', gap:10 }}>
            <div style={{ display:'flex' }}>
              {events[0].attending.slice(0,4).map((src,i)=>(
                <img key={i} src={src} alt="" style={{
                  width:22, height:22, borderRadius:'50%', objectFit:'cover',
                  border:'2px solid #020100', marginLeft: i===0?0:-7,
                }} />
              ))}
            </div>
            <span style={{ fontSize:12, color:'rgba(255,255,255,0.6)', fontFamily:'Inter,system-ui,sans-serif' }}>
              <b style={{ color:'#fff', fontWeight:700 }}>{events[0].count}</b> gaan erheen
            </span>
            <button onClick={(e)=>{ e.stopPropagation(); setActiveEvent(events[0]); }} style={{
              marginLeft:'auto', padding:'9px 18px', borderRadius:999,
              border:'1px solid rgba(255,255,255,0.5)',
              background:'linear-gradient(145deg, #ffffff, #ececec)',
              color:'#020100',
              fontSize:12, fontWeight:700, cursor:'pointer',
              fontFamily:'Inter,system-ui,sans-serif',
              boxShadow:'0 2px 4px rgba(0,0,0,0.12), 0 6px 14px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.9)',
            }}>Aanmelden</button>
          </div>
        </div>
      </div>

      {/* Date rail list */}
      <div style={{
        fontSize:11, fontWeight:700, color:'#8E8E93',
        textTransform:'uppercase', letterSpacing:'0.08em',
        fontFamily:'Inter,system-ui,sans-serif', marginTop:6, paddingLeft:4,
      }}>Komende events · {events.length - 1}</div>

      <div style={{ display:'flex', flexDirection:'column', gap:20 }}>
        {events.slice(1).map((ev, idx) => {
          const tearX = 100;
          const notchR = 13;
          const stubWidth = 100;
          const ticketMaskImages = [
            `radial-gradient(circle ${notchR}px at ${tearX}px 0, transparent ${notchR - 0.5}px, #000 ${notchR + 0.5}px)`,
            `radial-gradient(circle ${notchR}px at ${tearX}px 100%, transparent ${notchR - 0.5}px, #000 ${notchR + 0.5}px)`,
          ].join(', ');
          const maskProps = {
            WebkitMaskImage: ticketMaskImages,
            maskImage: ticketMaskImages,
            WebkitMaskSize: '100% 50%, 100% 50%',
            maskSize: '100% 50%, 100% 50%',
            WebkitMaskPosition: 'top, bottom',
            maskPosition: 'top, bottom',
            WebkitMaskRepeat: 'no-repeat, no-repeat',
            maskRepeat: 'no-repeat, no-repeat',
          };
          return (
          <div key={ev.title} onClick={()=>setActiveEvent(ev)} style={{
            filter:'drop-shadow(0 2px 3px rgba(0,0,0,0.05)) drop-shadow(0 10px 20px rgba(0,0,0,0.08)) drop-shadow(0 24px 44px rgba(0,0,0,0.1))',
            cursor:'pointer',
          }}>
          <div style={{
            display:'flex', alignItems:'stretch',
            background:'linear-gradient(145deg, #FEFEFB 0%, #F8F7F1 100%)',
            borderRadius:16,
            position:'relative',
            minHeight:108,
            ...maskProps,
          }}>
            {/* Inner frame */}
            <div aria-hidden="true" style={{
              position:'absolute', top:8, bottom:8, left:8, right:8,
              border:'1px dashed rgba(0,0,0,0.18)', borderRadius:10,
              pointerEvents:'none',
            }} />

            {/* Perforated tear line */}
            <div aria-hidden="true" style={{
              position:'absolute', left: tearX - 1.5,
              top: notchR + 8, bottom: notchR + 8, width:3,
              backgroundImage:'radial-gradient(circle, rgba(0,0,0,0.42) 1.1px, transparent 1.4px)',
              backgroundSize:'3px 6px', backgroundRepeat:'repeat-y',
              pointerEvents:'none',
            }} />

            {/* Left stub */}
            <div style={{
              width:stubWidth, flexShrink:0, display:'flex', flexDirection:'column',
              alignItems:'center', justifyContent:'center', padding:'14px 10px',
            }}>
              <div style={{ fontSize:10, color:'#8E8E93', fontFamily:'Inter,system-ui,sans-serif', textTransform:'uppercase', fontWeight:700, letterSpacing:'0.1em' }}>{ev.month}</div>
              <div style={{ fontFamily:'"Instrument Serif",Georgia,serif', fontWeight:400, fontSize:36, color:'#020100', letterSpacing:'-1.1px', lineHeight:1, textShadow:'0 1px 0 rgba(255,255,255,0.9)' }}>{ev.date}</div>
              <div style={{ fontSize:10, color:'#8E8E93', fontFamily:'Inter,system-ui,sans-serif', fontWeight:500, marginTop:2 }}>{ev.day}</div>
            </div>

            {/* Body */}
            <div style={{ flex:1, minWidth:0, display:'flex', gap:12, alignItems:'center', padding:'14px 18px 14px 24px' }}>
              <div style={{ flex:1, minWidth:0, display:'flex', flexDirection:'column', justifyContent:'center', gap:4 }}>
                <div style={{ fontFamily:'"Instrument Serif",Georgia,serif', fontWeight:400, fontSize:19, color:'#020100', letterSpacing:'-0.3px', lineHeight:1.1, overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap' }}>{ev.title}</div>
                <div style={{ fontSize:11, color:'#6B6B70', fontFamily:'Inter,system-ui,sans-serif', overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap' }}>{ev.time} · {ev.loc}</div>
                <div style={{ display:'flex', alignItems:'center', gap:8, marginTop:2 }}>
                  <span style={{ fontSize:9, padding:'3px 9px', borderRadius:999, background:`linear-gradient(145deg, ${ev.typeColor}1f, ${ev.typeColor}10)`, color:ev.typeColor, fontFamily:'Inter,system-ui,sans-serif', fontWeight:700, border:`1px solid ${ev.typeColor}28`, letterSpacing:'0.06em', textTransform:'uppercase' }}>{ev.type}</span>
                  <div style={{ display:'flex' }}>
                    {ev.attending.slice(0,3).map((src,i)=>(
                      <img key={i} src={src} alt="" style={{ width:18, height:18, borderRadius:'50%', objectFit:'cover', border:'2px solid #F7F6F0', marginLeft: i===0?0:-6, boxShadow:'0 1px 2px rgba(0,0,0,0.14)' }} />
                    ))}
                  </div>
                  <span style={{ fontSize:11, color:'#6B6B70', fontFamily:'Inter,system-ui,sans-serif', fontWeight:600 }}>{ev.count}</span>
                </div>
              </div>

              <img src={ev.img} alt="" style={{
                width:44, height:44, borderRadius:'50%', objectFit:'cover',
                alignSelf:'center', flexShrink:0,
                border:'2px solid rgba(255,255,255,0.9)',
                boxShadow:'0 1px 2px rgba(0,0,0,0.12), 0 4px 10px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.4)',
              }} />
            </div>
          </div>
          </div>
          );
        })}
      </div>

      <button style={{
        width:'100%', padding:'16px 0', borderRadius:18,
        border:'1px solid rgba(255,255,255,0.8)',
        background:'linear-gradient(145deg, #F8F8F8 0%, #EFEFEF 100%)',
        color:'#8E8E93', fontSize:14, fontWeight:600, cursor:'pointer',
        fontFamily:'Inter,system-ui,sans-serif',
        display:'flex', alignItems:'center', justifyContent:'center', gap:6,
        boxShadow:'0 2px 4px rgba(0,0,0,0.04), 0 8px 16px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.9)',
      }}>
        <Ico.Plus size={16} /> Nieuw event
      </button>

      <EventDetail event={activeEvent} isOpen={!!activeEvent} onClose={()=>setActiveEvent(null)} />
    </div>
  );
};

// ─── Project detail page ───────────────────────────────────────────────────
const ProjectDetailPage = ({ project, onBack }) => {
  const [tab, setTab] = React.useState('Chat');
  if (!project) return null;
  return (
    <div style={{ display:'flex', flexDirection:'column', height:'100%' }}>
      {/* Hero — colored gradient using community color */}
      <div style={{
        position:'relative', flexShrink:0,
        background: `linear-gradient(150deg, ${project.communityColor || '#D0E8FF'} 0%, ${project.roleColor || '#E6F4DE'} 100%)`,
        padding:'16px 18px 22px',
      }}>
        <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom:18 }}>
          <button onClick={onBack} style={{ width:34, height:34, borderRadius:'50%', border:'none', background:'rgba(255,255,255,0.5)', backdropFilter:'blur(8px)', display:'flex', alignItems:'center', justifyContent:'center', cursor:'pointer' }}>
            <Ico.ArrowL size={16} color="#020100" />
          </button>
          <button style={{ width:34, height:34, borderRadius:'50%', border:'none', background:'rgba(255,255,255,0.5)', backdropFilter:'blur(8px)', display:'flex', alignItems:'center', justifyContent:'center', cursor:'pointer' }}>
            <Ico.Info size={15} color="#020100" />
          </button>
        </div>

        <MetaLabel style={{ color:'rgba(2,1,0,0.55)', textTransform:'uppercase', letterSpacing:'0.08em', display:'block', marginBottom:4 }}>Project</MetaLabel>
        <h1 style={{ fontFamily:'"Instrument Serif",Georgia,serif', fontWeight:400, fontSize:34, letterSpacing:'-0.8px', color:'#020100', margin:'0 0 10px', lineHeight:1 }}>{project.name}</h1>

        <div style={{ display:'flex', gap:6, flexWrap:'wrap', marginBottom:12 }}>
          <span style={{ fontSize:11, padding:'3px 10px', borderRadius:999, background:'rgba(255,255,255,0.55)', color:'#020100', fontFamily:'Inter,system-ui,sans-serif', fontWeight:600, display:'inline-flex', alignItems:'center', gap:5 }}>
            {project.communityImg && <img src={project.communityImg} alt="" style={{ width:14, height:14, borderRadius:'50%', objectFit:'cover' }} />}
            {project.community}
          </span>
          <span style={{ fontSize:11, padding:'3px 10px', borderRadius:999, background:'rgba(255,255,255,0.55)', color:'#1F3D1F', fontFamily:'Inter,system-ui,sans-serif', fontWeight:600 }}>{project.role}</span>
        </div>

        <div style={{ display:'flex', alignItems:'center', gap:10 }}>
          <AvatarStack members={project.members} />
          <span style={{ fontSize:12, color:'rgba(2,1,0,0.6)', fontFamily:'Inter,system-ui,sans-serif' }}>{project.members.length} leden</span>
          <span style={{ marginLeft:'auto', fontSize:11, padding:'3px 9px', borderRadius:999, background:'rgba(2,1,0,0.85)', color:'#fff', fontFamily:'Inter,system-ui,sans-serif', fontWeight:600, letterSpacing:'0.04em', textTransform:'uppercase' }}>
            {project.steps[project.currentStep]}
          </span>
        </div>
      </div>

      {/* Tabs */}
      <div style={{ padding:'12px 16px 0', background:'#F2F2F7', flexShrink:0 }}>
        <TabSlider tabs={[
          { id:'Chat',       label:'Chat',       Icon: Ico.Chat    },
          { id:'Doel',       label:'Doel',       Icon: Ico.Zap     },
          { id:'Rollen',     label:'Rollen',     Icon: Ico.Users   },
          { id:'Practicals', label:'Practicals', Icon: Ico.Bulb    },
          { id:'Events',     label:'Events',     Icon: Ico.Cal     },
        ]} active={tab} onChange={setTab} />
      </div>

      {/* Content */}
      {tab==='Chat' ? (
        <div style={{ flex:1, display:'flex', flexDirection:'column', minHeight:0, background:'#F2F2F7' }}>
          <PDChat project={project} />
        </div>
      ) : (
        <div style={{ flex:1, overflowY:'auto', scrollbarWidth:'none', padding:'0 16px 120px', background:'#F2F2F7' }}>
          {tab==='Doel'       && <PDDoel       project={project} />}
          {tab==='Rollen'     && <PDRollen     project={project} />}
          {tab==='Practicals' && <PDPracticals project={project} />}
          {tab==='Events'     && <PDEvents     project={project} />}
        </div>
      )}
    </div>
  );
};

Object.assign(window, { ProjectsPage, ProjectCard, ProjectDetailPage });