// tgp-feed.jsx v3 — Minimal flowing feed (inspired by visual content app)
// Post types: text | images | quote | video

// ─── Scope icons (Alle / Lokaal / Nationaal / Wereldwijd) ──────────────────
const ScopeIcon = ({ scope, size = 13, color = 'currentColor' }) => {
  const sw = 2;
  const common = { width: size, height: size, viewBox: '0 0 24 24', fill: 'none', stroke: color, strokeWidth: sw, strokeLinecap: 'round', strokeLinejoin: 'round' };
  if (scope === 'Lokaal') return (
    <svg {...common}><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
  );
  if (scope === 'Nationaal') return (
    <svg {...common}><path d="M4 22V4"/><path d="M4 4h13l-2 4 2 4H4"/></svg>
  );
  if (scope === 'Wereldwijd') return (
    <svg {...common}><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
  );
  // Alle
  return (
    <svg {...common}><circle cx="12" cy="12" r="3"/><circle cx="12" cy="12" r="9" opacity="0.5"/></svg>
  );
};

// ─── Play button SVG ───────────────────────────────────────────────────────
const PlayBtn = ({ size = 52 }) => (
  <div style={{
    width: size, height: size, borderRadius: '50%',
    background: 'rgba(255,255,255,0.92)',
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    boxShadow: '0 2px 16px rgba(0,0,0,0.25)',
  }}>
    <svg width={size * 0.4} height={size * 0.4} viewBox="0 0 24 24" fill="#020100">
      <polygon points="5,3 19,12 5,21"/>
    </svg>
  </div>
);

// ─── Image grid ────────────────────────────────────────────────────────────
const ImageGrid = ({ images }) => {
  if (images.length === 1) {
    return <img src={images[0]} alt="" style={{ width: '100%', height: 210, objectFit: 'cover', borderRadius: 14, display: 'block' }} />;
  }
  if (images.length === 2) {
    return (
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 4 }}>
        {images.map((src, i) => (
          <img key={i} src={src} alt="" style={{ width: '100%', height: 160, objectFit: 'cover', borderRadius: i === 0 ? '12px 5px 5px 12px' : '5px 12px 12px 5px', display: 'block' }} />
        ))}
      </div>
    );
  }
  // 3+ → horizontal scroll
  return (
    <div style={{ display: 'flex', gap: 6, overflowX: 'auto', scrollbarWidth: 'none', paddingRight: 2 }}>
      {images.map((src, i) => (
        <img key={i} src={src} alt="" style={{ height: 160, width: 140, objectFit: 'cover', borderRadius: 12, flexShrink: 0, display: 'block' }} />
      ))}
    </div>
  );
};

// ─── Video thumbnail ───────────────────────────────────────────────────────
const VideoThumb = ({ src, duration = '2:34' }) => {
  const [playing, setPlaying] = React.useState(false);
  return (
    <div onClick={() => setPlaying(p => !p)} style={{ position: 'relative', borderRadius: 14, overflow: 'hidden', cursor: 'pointer' }}>
      <img src={src} alt="" style={{ width: '100%', height: 200, objectFit: 'cover', display: 'block' }} />
      {/* Dark overlay */}
      <div style={{ position: 'absolute', inset: 0, background: playing ? 'rgba(0,0,0,0.15)' : 'rgba(0,0,0,0.22)' }} />
      {/* Play / Pause */}
      {!playing ? (
        <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <PlayBtn size={52} />
        </div>
      ) : (
        <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <div style={{ width: 52, height: 52, borderRadius: '50%', background: 'rgba(255,255,255,0.9)', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 5 }}>
            <div style={{ width: 4, height: 18, background: '#020100', borderRadius: 2 }} />
            <div style={{ width: 4, height: 18, background: '#020100', borderRadius: 2 }} />
          </div>
        </div>
      )}
      {/* Duration badge */}
      <div style={{ position: 'absolute', bottom: 10, right: 10, background: 'rgba(0,0,0,0.55)', borderRadius: 6, padding: '2px 8px', backdropFilter: 'blur(4px)' }}>
        <span style={{ fontSize: 11, fontWeight: 600, color: '#fff', fontFamily: 'Inter, system-ui, sans-serif' }}>{duration}</span>
      </div>
    </div>
  );
};

// ─── Quote block ───────────────────────────────────────────────────────────
const InlineQuote = ({ quote, by }) => (
  <div style={{ borderLeft: '3px solid #020100', paddingLeft: 14, margin: '2px 0' }}>
    <p style={{
      fontFamily: '"Playfair Display", Georgia, serif', fontStyle: 'italic',
      fontSize: 15, color: '#020100', lineHeight: 1.65, margin: '0 0 6px',
    }}>"{quote}"</p>
    <MetaLabel>— {by}</MetaLabel>
  </div>
);

// ─── Post item (all types) ─────────────────────────────────────────────────
const PostItem = ({
  avatar, name, time, tag,
  type,           // 'text' | 'images' | 'quote' | 'video'
  text,
  images,         // array of src strings (for type=images)
  quote, by,      // for type=quote
  videoSrc, videoDuration,  // for type=video
  counts = [0, 0, 0],
  onDoeMee, onBijdragen, onReflecteer,
  last,
}) => {
  const typeLabel = { text: 'Tekst', images: 'Foto', quote: 'Quote', video: 'Video' }[type] || type;
  const typeColor = { text: '#8E8E93', images: '#007AFF', quote: '#FF9500', video: '#FF3B30' }[type] || '#8E8E93';

  return (
    <div style={{ paddingBottom: 20, display: 'flex', gap: 12 }}>
      {/* Avatar column */}
      <div style={{ position: 'relative', flexShrink: 0 }}>
        <Av src={avatar} name={name} size={36} style={{ borderRadius: '50%' }} />
        {/* Type badge on avatar */}
        <div style={{
          position: 'absolute', bottom: -2, right: -2,
          width: 14, height: 14, borderRadius: '50%',
          background: typeColor, border: '2px solid #F2F2F7',
        }} />
      </div>

      {/* Content column */}
      <div style={{ flex: 1, minWidth: 0 }}>
        {/* Header row */}
        <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 8, marginBottom: 2 }}>
          <span style={{ fontSize: 19, fontWeight: 400, color: '#020100', fontFamily: '"Instrument Serif", Georgia, serif', letterSpacing: '-0.2px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', lineHeight: 1.1 }}>{name}</span>
          <span style={{ fontSize: 12, color: '#C7C7CC', fontFamily: 'Inter, system-ui, sans-serif', flexShrink: 0 }}>{time}</span>
        </div>
        {tag && (
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 4,
            fontSize: 11.5, color: 'rgba(2,1,0,0.62)',
            fontFamily: 'Inter, system-ui, sans-serif', fontWeight: 600,
            letterSpacing: '-0.05px',
            marginBottom: 9,
          }}>
            <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" style={{ opacity: 0.7 }}>
              <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>
            </svg>
            <span>in <span style={{ color: '#020100', fontWeight: 700 }}>{tag}</span></span>
          </div>
        )}

        {/* Text */}
        {text && (
          <p style={{
            fontSize: 14, color: 'rgba(2,1,0,0.82)', lineHeight: 1.6,
            margin: '0 0 10px', fontFamily: 'Inter, system-ui, sans-serif',
          }}>{text}</p>
        )}

        {/* Content by type */}
        {type === 'images' && images && images.length > 0 && (
          <ImageGrid images={images} />
        )}
        {type === 'quote' && quote && (
          <InlineQuote quote={quote} by={by} />
        )}
        {type === 'video' && videoSrc && (
          <VideoThumb src={videoSrc} duration={videoDuration} />
        )}

        {/* Action row — subtle */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 18, marginTop: 12 }}>
          {[['Doe mee', counts[0], onDoeMee], ['Bijdragen', counts[1], onBijdragen], ['Reflecteer', counts[2], onReflecteer]].map(([label, count, fn]) => (
            <button key={label} onClick={fn} style={{
              background: 'none', border: 'none', padding: 0, cursor: 'pointer',
              fontSize: 12, color: '#8E8E93', fontFamily: 'Inter, system-ui, sans-serif',
              display: 'flex', alignItems: 'center', gap: 4, fontWeight: 500,
            }}>
              {label}
              {count > 0 && <span style={{ fontSize: 11, color: '#C7C7CC' }}>{count}</span>}
            </button>
          ))}
        </div>

        {/* Separator */}
        {!last && <div style={{ height: 1, background: 'rgba(60,60,67,0.08)', marginTop: 20 }} />}
      </div>
    </div>
  );
};

// ─── Reco card — cream/paper style, matching the folder aesthetic ─────────
const DarkRecoCard = ({ img, title, desc, tags, count }) => (
  <div style={{
    position: 'relative',
    background: 'linear-gradient(180deg, #FAF8F4 0%, #F1EDE4 100%)',
    borderRadius: 22,
    border: '1px solid rgba(2,1,0,0.06)',
    boxShadow: '0 1px 3px rgba(0,0,0,0.05), 0 8px 24px rgba(0,0,0,0.04)',
    marginBottom: 20, overflow: 'hidden',
  }}>
    {/* Cover image */}
    <div style={{ position: 'relative', height: 140, overflow: 'hidden' }}>
      <img src={img} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
      <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(250,248,244,0) 55%, rgba(250,248,244,0.95) 100%)' }} />
      {/* Label pinned on image */}
      <span style={{
        position: 'absolute', top: 14, left: 14,
        fontSize: 10, fontWeight: 700,
        color: 'rgba(255,255,255,0.95)', background: 'rgba(2,1,0,0.35)',
        backdropFilter: 'blur(6px)',
        padding: '5px 10px', borderRadius: 999,
        fontFamily: 'Inter, system-ui, sans-serif',
        textTransform: 'uppercase', letterSpacing: '0.08em',
      }}>Aanbevolen voor jou</span>
    </div>

    <div style={{ padding: '14px 20px 20px' }}>
      <h3 style={{
        fontFamily: '"Instrument Serif", Georgia, serif',
        fontWeight: 400, fontStyle: 'italic',
        fontSize: 26, color: '#020100',
        margin: '0 0 8px', lineHeight: 1.1, letterSpacing: '-0.4px',
      }}>{title}</h3>
      <p style={{
        fontSize: 13, color: 'rgba(2,1,0,0.6)',
        margin: '0 0 14px', lineHeight: 1.5,
        fontFamily: 'Inter, system-ui, sans-serif',
      }}>{desc}</p>
      <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', marginBottom: 16 }}>
        {tags.map(t => (
          <span key={t} style={{
            fontSize: 11, padding: '4px 10px', borderRadius: 999,
            background: 'rgba(2,1,0,0.06)', color: 'rgba(2,1,0,0.7)',
            border: '1px solid rgba(2,1,0,0.05)',
            fontFamily: 'Inter, system-ui, sans-serif', fontWeight: 500,
          }}>{t}</span>
        ))}
      </div>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', paddingTop: 10, borderTop: '1px solid rgba(2,1,0,0.06)' }}>
        <span style={{ fontSize: 12, color: '#8E8E93', fontFamily: 'Inter, system-ui, sans-serif' }}>{count}</span>
        <button style={{
          padding: '9px 18px', borderRadius: 999, border: 'none',
          background: '#020100', color: '#fff',
          fontSize: 12.5, fontWeight: 600, cursor: 'pointer',
          fontFamily: 'Inter, system-ui, sans-serif',
        }}>Bekijk</button>
      </div>
    </div>
  </div>
);

// ─── Nudge card — cream/paper style, matching the folder aesthetic ────────
const NudgeCard = () => (
  <div style={{
    background: 'linear-gradient(180deg, #FAF8F4 0%, #F1EDE4 100%)',
    borderRadius: 22,
    border: '1px solid rgba(2,1,0,0.06)',
    boxShadow: '0 1px 3px rgba(0,0,0,0.05), 0 8px 24px rgba(0,0,0,0.04)',
    padding: '22px 20px 20px',
    marginBottom: 20,
  }}>
    <p style={{
      fontFamily: '"Instrument Serif", Georgia, serif',
      fontStyle: 'italic', fontWeight: 400,
      fontSize: 26, color: '#020100',
      margin: '0 0 4px', textAlign: 'center',
      lineHeight: 1.15, letterSpacing: '-0.4px',
    }}>Geïnspireerd geraakt?</p>
    <p style={{
      fontSize: 13, color: 'rgba(2,1,0,0.55)',
      textAlign: 'center', margin: '0 0 18px', lineHeight: 1.5,
      fontFamily: 'Inter, system-ui, sans-serif',
    }}>Misschien is dit het moment om iets in beweging te zetten.</p>
    {[{ l:'B', n:'Bosgym Bouwen', s:'2 taken open · Materialenlijst', bg:'#6B8F6F' }, { l:'O', n:'Eerste Keer OBE', s:'1 taak open · Audio-cue', bg:'#7C3AED' }].map(({ l,n,s,bg }) => (
      <div key={n} style={{
        display: 'flex', alignItems: 'center', gap: 12,
        background: '#FFFFFF',
        border: '1px solid rgba(2,1,0,0.05)',
        borderRadius: 14, padding: '11px 13px', marginBottom: 8, cursor: 'pointer',
        boxShadow: '0 1px 2px rgba(0,0,0,0.03)',
      }}>
        <div style={{ width: 34, height: 34, borderRadius: 10, background: bg, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 15, fontWeight: 800, color: '#fff', flexShrink: 0 }}>{l}</div>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 13.5, fontWeight: 600, color: '#020100', fontFamily: 'Inter, system-ui, sans-serif' }}>{n}</div>
          <div style={{ fontSize: 11, color: 'rgba(2,1,0,0.5)', fontFamily: 'Inter, system-ui, sans-serif', marginTop: 1 }}>{s}</div>
        </div>
        <Ico.ChevR size={15} color="rgba(2,1,0,0.28)" />
      </div>
    ))}
    <p style={{
      fontSize: 12, color: 'rgba(2,1,0,0.4)',
      textAlign: 'center', margin: '14px 0 0',
      fontStyle: 'italic',
      fontFamily: '"Instrument Serif", Georgia, serif',
      letterSpacing: '-0.1px',
    }}>Consumeren inspireert. Creëren verandert.</p>
  </div>
);

// ─── Bottom sheet ──────────────────────────────────────────────────────────
const BottomSheet = ({ type, onClose }) => {
  const [reflectType, setReflectType] = React.useState('Spanning');
  const [visibility, setVisibility] = React.useState('Project');
  const [text, setText] = React.useState('');
  if (!type) return null;

  const opts = {
    doeMee:    [['🤝','Word lid','Neem een actieve rol'],['⚡','Help eenmalig','Draag bij voor een taak'],['💬','Stuur bericht','Neem direct contact op'],['🔔','Volg dit initiatief','Blijf op de hoogte']],
    bijdragen: [['🧠','Kennis delen','Deel expertise of bronnen'],['🛠','Skill aanbieden','Bied een vaardigheid aan'],['📸','Media toevoegen',"Foto's, video of documenten"],['💰','Middelen','Materiaal of budget']],
  };

  return (
    <div style={{ position: 'absolute', inset: 0, background: 'rgba(0,0,0,0.4)', zIndex: 200, display: 'flex', alignItems: 'flex-end', backdropFilter: 'blur(4px)' }} onClick={onClose}>
      <div onClick={e => e.stopPropagation()} style={{ width: '100%', background: '#F2F2F7', borderRadius: '24px 24px 0 0', paddingTop: 12, maxHeight: '82%', overflowY: 'auto', scrollbarWidth: 'none' }}>
        <div style={{ width: 36, height: 4, borderRadius: 999, background: 'rgba(60,60,67,0.18)', margin: '0 auto 16px' }} />
        <div style={{ padding: '0 20px 36px' }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16 }}>
            <h2 style={{ fontFamily: 'Inter, system-ui, sans-serif', fontWeight: 800, fontSize: 26, letterSpacing: '-1px', color: '#020100', margin: 0 }}>
              {type === 'doeMee' ? 'Doe mee' : type === 'bijdragen' ? 'Bijdragen' : 'Reflecteer'}
            </h2>
            <button onClick={onClose} style={{ width: 30, height: 30, borderRadius: '50%', border: 'none', background: 'rgba(116,116,128,0.15)', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer' }}>
              <Ico.X size={14} />
            </button>
          </div>

          {type !== 'reflecteer' && (
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              {(opts[type] || []).map(([icon, t, s]) => (
                <button key={t} onClick={onClose} style={{ display: 'flex', alignItems: 'center', gap: 14, background: '#fff', border: 'none', borderRadius: 16, padding: '14px 16px', cursor: 'pointer', textAlign: 'left', boxShadow: '0 1px 3px rgba(0,0,0,0.07)' }}>
                  <span style={{ fontSize: 22 }}>{icon}</span>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontSize: 15, fontWeight: 600, color: '#020100', fontFamily: 'Inter, system-ui, sans-serif', marginBottom: 2 }}>{t}</div>
                    <MetaLabel>{s}</MetaLabel>
                  </div>
                  <Ico.ChevR size={16} color="#C7C7CC" />
                </button>
              ))}
            </div>
          )}

          {type === 'reflecteer' && (
            <>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr', gap: 8, marginBottom: 16 }}>
                {[['⚡','Spanning','#FF3B30'],['❓','Vraag','#007AFF'],['💡','Idee','#FF9500'],['🙏','Dank','#34C759']].map(([icon,label,color]) => (
                  <button key={label} onClick={() => setReflectType(label)} style={{ padding: '10px 4px', borderRadius: 14, border: 'none', background: reflectType === label ? color : '#fff', color: reflectType === label ? '#fff' : '#8E8E93', fontSize: 11, fontWeight: 600, cursor: 'pointer', fontFamily: 'Inter, system-ui, sans-serif', boxShadow: '0 1px 3px rgba(0,0,0,0.07)' }}>
                    <div style={{ fontSize: 18 }}>{icon}</div>
                    <div style={{ marginTop: 3 }}>{label}</div>
                  </button>
                ))}
              </div>
              <textarea value={text} onChange={e => setText(e.target.value)} placeholder="Beschrijf je reflectie..."
                style={{ width: '100%', height: 100, background: '#fff', border: '1px solid rgba(60,60,67,0.1)', borderRadius: 16, padding: '14px 16px', fontSize: 14, fontFamily: 'Inter, system-ui, sans-serif', resize: 'none', outline: 'none', boxSizing: 'border-box', color: '#020100' }} />
              <div style={{ display: 'flex', alignItems: 'center', gap: 10, margin: '12px 0 18px' }}>
                <MetaLabel>Zichtbaar voor</MetaLabel>
                <div style={{ display: 'flex', gap: 6 }}>
                  {['Project','Community','Iedereen'].map(v => (
                    <button key={v} onClick={() => setVisibility(v)} style={{ padding: '5px 12px', borderRadius: 999, border: 'none', background: visibility === v ? '#020100' : 'rgba(116,116,128,0.12)', color: visibility === v ? '#fff' : '#8E8E93', fontSize: 12, fontWeight: 500, cursor: 'pointer', fontFamily: 'Inter, system-ui, sans-serif' }}>{v}</button>
                  ))}
                </div>
              </div>
              <button onClick={onClose} style={{ width: '100%', padding: '15px 0', borderRadius: 16, border: 'none', background: '#020100', color: '#fff', fontSize: 15, fontWeight: 700, cursor: 'pointer', fontFamily: 'Inter, system-ui, sans-serif' }}>Reflectie plaatsen</button>
            </>
          )}
        </div>
      </div>
    </div>
  );
};

// ─── Feed Page ─────────────────────────────────────────────────────────────
const FeedPage = ({ onSheet }) => {
  const [scope, setScope] = React.useState('Alle');
  const o = (t) => onSheet(t);

  const POSTS = [
    { id:1,  avatar:IMG.lisa, name:'Kees Jan', time:'2u',  tag:'Bosgym Bouwen',       type:'images', text:'Eerste opstelling staat — pull-up bar, dips en een log voor squats. Wie komt zaterdag meebouwen?', images:[IMG.sports, IMG.nature],        counts:[5,3,2]  },
    { id:2,  avatar:IMG.mark, name:'Jelle',   time:'4u',  tag:'OBE Nederland',       type:'quote', text:'Uit mijn ochtend-journaal:', quote:'Het lichaam is de poort, niet de grens.', by:'Robert Monroe',                            counts:[12,7,4] },
    { id:3,  avatar:IMG.sara, name:'Sara Ahmed',    time:'6u',  tag:'Holacracy Ondernemen', type:'text',  text:'Wie heeft ervaring met rol-evolutie in een kleine coöperatie? We zoeken advies over spanning-verwerking en hoe je "doctor" en "holacracy" combineert in de praktijk.', counts:[2,9,6]  },
    { id:4,  avatar:IMG.tom,  name:'Joep',    time:'1d',  tag:'Holacracy Ondernemen', type:'video', text:'Workshop materiaal live: Holacracy-vergadering in 5 stappen.', videoSrc:IMG.meeting, videoDuration:'4:12',                counts:[18,14,3] },
    { id:5,  avatar:IMG.nina, name:'Melissa', time:'1d',  tag:'Homeschooling NL',    type:'images', text:'Onze eerste homeschool meet-up was een groot succes — 30 ouders en kinderen samen in de tuin.', images:[IMG.books, IMG.team, IMG.park], counts:[28,11,5] },
    { id:6,  avatar:IMG.eva,  name:'Eva Smit',      time:'2d',  tag:'Tinyhouse Nederland', type:'text',   text:'Tinyhouse-collectief heeft de eerste grondkoop rond! We kunnen samen 40% besparen ten opzichte van individueel inkopen.', counts:[34,8,1]  },
    { id:7,  avatar:IMG.anna, name:'Anna de Groot', time:'2d',  tag:'Meditatie Thuis',     type:'quote',  text:'', quote:'Stilte is niet de afwezigheid van geluid, maar van afleiding.', by:'Anna de Groot',                              counts:[9,3,1]  },
    { id:8,  avatar:IMG.mark, name:'Jelle',   time:'3d',  tag:'4x4 Off-road NL',     type:'video',  text:'Terugblik op de Ardennen-trip van afgelopen weekend — 8 voertuigen, 48 uur, 6 routes gereden.', videoSrc:IMG.nature, videoDuration:'7:45', counts:[45,22,7] },
    { id:9,  avatar:IMG.joep, name:'Kevin Cucks',   time:'3d',  tag:'Bosgym Bouwen',       type:'images', text:'Moodboard voor de bos-opstelling — natuurlijke materialen, minimalistisch.', images:[IMG.nature, IMG.sports, IMG.repair, IMG.park], counts:[11,4,2] },
    { id:10, avatar:IMG.lisa, name:'Kees Jan', time:'4d',  tag:'OBE Nederland',       type:'text',   text:'Reminder: de volgende begeleide sessie is zaterdag om 20:00 online. Audio-cue staat in de map, body scan van 20 min vooraf.',                                      counts:[3,1,0]   },
  ];

  return (
    <div style={{ background: '#FFFFFF' }}>
      {/* Scope pills */}
      <div style={{ display: 'flex', gap: 8, overflowX: 'auto', scrollbarWidth: 'none', padding: '4px 20px 16px', background: '#F2F2F7' }}>
        {['Alle','Lokaal','Nationaal','Wereldwijd'].map(s => (
          <Pill key={s} active={scope===s} onClick={()=>setScope(s)}>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
              <ScopeIcon scope={s} size={13} />
              {s}
            </span>
          </Pill>
        ))}
      </div>

      {/* Terwijl je weg was */}
      <div style={{ background: '#F2F2F7', padding: '12px 20px 20px' }}>
        <div style={{ fontSize: 12, fontWeight: 700, color: '#8E8E93', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 10, fontFamily: 'Inter, system-ui, sans-serif' }}>Terwijl je weg was</div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 7 }}>
          {[['🧘',<><b style={{color:'#020100'}}>OBE Nederland</b> verwelkomde 3 nieuwe leden</>],['💪',<><b style={{color:'#020100'}}>Bosgym Bouwen</b> bereikte mijlpaal 'Opstelling fase 1'</>],['💬',<><b style={{color:'#020100'}}>Sara</b> reageerde op jouw reflectie in <b style={{color:'#020100'}}>Holacracy Ondernemen</b></>]].map(([icon,txt],i)=>(
            <div key={i} style={{ display:'flex', gap:10, alignItems:'flex-start' }}>
              <span style={{ fontSize:14, flexShrink:0 }}>{icon}</span>
              <span style={{ fontSize:13, color:'rgba(2,1,0,0.7)', fontFamily:'Inter,system-ui,sans-serif', lineHeight:1.4 }}>{txt}</span>
            </div>
          ))}
        </div>
      </div>

      {/* Composer bar */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '14px 20px', borderBottom: '1px solid rgba(60,60,67,0.08)', background: '#fff' }}>
        <img src={IMG.joep} alt="" style={{ width: 36, height: 36, borderRadius: '50%', objectFit: 'cover', flexShrink: 0 }} />
        <div style={{ flex: 1, background: 'rgba(116,116,128,0.1)', borderRadius: 999, padding: '10px 16px', fontSize: 14, color: '#C7C7CC', fontFamily: 'Inter, system-ui, sans-serif' }}>Deel iets met je netwerk...</div>
        <button style={{ width: 36, height: 36, borderRadius: '50%', border: 'none', background: '#020100', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer' }}>
          <Ico.Plus size={16} color="#fff" />
        </button>
      </div>

      {/* Posts */}
      <div style={{ padding: '20px 20px 0', background: '#fff' }}>
        {POSTS.map((post, i) => (
          <React.Fragment key={post.id}>
            <PostItem
              {...post}
              last={i === POSTS.length - 1}
              onDoeMee={()=>o('doeMee')}
              onBijdragen={()=>o('bijdragen')}
              onReflecteer={()=>o('reflecteer')}
            />
            {/* Inject reco + nudge at intervals */}
            {i === 3 && (
              <div style={{ margin: '4px -20px 20px' }}>
                <div style={{ padding: '0 20px' }}>
                  <DarkRecoCard img={IMG.nature} title="Regenerative Living Collective" desc="Wereldwijde community rond regeneratief leven. 2.400 leden." tags={['Permacultuur','Regeneratief']} count="2.400 leden" />
                </div>
                <div style={{ height: 1, background: 'rgba(60,60,67,0.08)', margin: '0 0 20px' }} />
              </div>
            )}
            {i === 6 && (
              <div style={{ margin: '4px -20px 20px' }}>
                <div style={{ padding: '0 20px' }}>
                  <NudgeCard />
                </div>
                <div style={{ height: 1, background: 'rgba(60,60,67,0.08)', margin: '0 0 20px' }} />
              </div>
            )}
          </React.Fragment>
        ))}
      </div>

      {/* Bottom padding */}
      <div style={{ height: 120, background: '#fff' }} />
    </div>
  );
};

Object.assign(window, { FeedPage, PostItem, BottomSheet, ImageGrid, VideoThumb, InlineQuote, DarkRecoCard, NudgeCard });