/* Mereka v2 — Program admin feed (post-publish community view) */

const PROGRAM_RAIL = [
  { id: 'p1', name: 'AI4U', hue: 340, active: true },
  { id: 'p2', name: 'AI Fluency', hue: 220, active: false },
  { id: 'p3', name: 'Brand Sprint', hue: 25, active: false },
];

const FEED_NAV = [
  { group: 'Community', items: [
    { label: 'Feed', icon: 'menu', active: true },
    { label: 'Announcements', icon: 'bell', badge: true },
    { label: 'Discussions', icon: 'chat' },
    { label: 'Members', icon: 'user' },
  ]},
  { group: 'Learning', items: [
    { label: 'Courses', icon: 'graduation', badge: true },
    { label: 'Resources', icon: 'bookmark' },
  ]},
  { group: 'Events', items: [
    { label: 'Recordings', icon: 'play' },
  ]},
  { group: 'Admin', items: [
    { label: 'Manage forms', icon: 'edit' },
    { label: 'Manage members', icon: 'user' },
    { label: 'Manage Content', icon: 'layers' },
    { label: 'Inbox', icon: 'message' },
    { label: 'Program feedback', icon: 'star' },
  ]},
];

const FEED_MEMBERS_ONLINE = [
  { n: 'Jessica B', tag: 'ADMIN', hue: 340 },
  { n: 'Jason B', tag: 'MENTOR', hue: 290 },
  { n: 'Natalie A', hue: 220 },
  { n: 'Sarah L', hue: 25 },
  { n: 'Nicholas H', hue: 170 },
];
const FEED_MEMBERS_OFFLINE = [
  { n: 'Florence J', hue: 30 }, { n: 'Sarah L', hue: 25 }, { n: 'Chris W', hue: 220 },
  { n: 'Natalie A', hue: 220 }, { n: 'Florence J', hue: 30 }, { n: 'Sarah L', hue: 25 },
  { n: 'Chris W', hue: 220 }, { n: 'Natalie A', hue: 220 }, { n: 'Florence J', hue: 30 },
  { n: 'Sarah L', hue: 25 }, { n: 'Chris W', hue: 220 },
];

/* Feed content — Figma 5289-52845 (learner-feed) / 53564 (feed-post) */
function memberSlug(name) { return String(name).toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, ''); }
const MEMBER_DIR = {
  'Faiz Fadhillah': { role: 'Hub Admin · Biji-biji Initiative', tag: 'ADMIN', location: 'Kuala Lumpur', joined: 'Jan 2025', posts: 34, comments: 180, likes: 920, bio: 'Hub admin at Biji-biji Initiative. I run programmes, experiences and gigs across the Mereka ecosystem and help our community upskill in AI.' },
  'Jessica': { role: 'Community Admin', tag: 'ADMIN', location: 'Kuala Lumpur', joined: 'Jan 2025', posts: 48, comments: 213, likes: 1290, bio: 'Community lead at Mereka. I keep the programme running smoothly, post announcements and help you get the most out of every module.' },
  'Michael': { role: 'AI Practitioner', tag: null, location: 'Petaling Jaya', joined: 'Feb 2025', posts: 22, comments: 96, likes: 540, bio: 'Automation enthusiast exploring how AI tools can remove busywork from everyday operations.' },
  'Samantha': { role: 'Programme Facilitator', tag: 'MENTOR', location: 'Penang', joined: 'Dec 2024', posts: 31, comments: 152, likes: 870, bio: 'Facilitator focused on responsible AI. I run workshops and love connecting learners with the right resources.' },
  'Jackson': { role: 'Full-stack Developer', tag: null, location: 'Cyberjaya', joined: 'Mar 2025', posts: 8, comments: 34, likes: 120, bio: 'Full-stack developer getting AI-equipped so I do not get left behind. Always up for a build session.' },
  'Sophia': { role: 'UI/UX Designer', tag: null, location: 'Kuala Lumpur', joined: 'Mar 2025', posts: 11, comments: 47, likes: 205, bio: 'UI/UX designer passionate about intuitive experiences and how AI can speed up the design process.' },
  'Liam': { role: 'Product Manager', tag: null, location: 'Singapore', joined: 'Apr 2025', posts: 9, comments: 40, likes: 176, bio: 'Product manager with a focus on innovation. Keen to optimise delivery workflows with AI.' },
  'Emma': { role: 'Data Analyst', tag: null, location: 'Johor Bahru', joined: 'Apr 2025', posts: 6, comments: 28, likes: 98, bio: 'Data analyst interested in AI applications for data visualisation and storytelling.' },
};
function getMember(slug) {
  const name = Object.keys(MEMBER_DIR).find(n => memberSlug(n) === slug);
  if (name) return { name, ...MEMBER_DIR[name] };
  const nm = String(slug || 'member').split('-').map(w => w.charAt(0).toUpperCase() + w.slice(1)).join(' ');
  return { name: nm, role: 'Community Member', tag: null, location: 'Malaysia', joined: '2025', posts: 5, comments: 22, likes: 84, bio: nm + ' is a member of this programme community.' };
}
function AuthorLink({ name, className = '', children }) {
  return <Link to={'/app/community/member/' + memberSlug(name)} className={className}>{children}</Link>;
}

function ProgramMemberProfilePage({ slug }) {
  const m = getMember(slug);
  const activity = [
    { t: 'Commented on', s: 'Welcome to AI4U!', time: '2 days ago' },
    { t: 'Liked', s: 'Upcoming workshop on AI ethics', time: '4 days ago' },
    { t: 'Posted', s: 'How to maximize your AI tools usage', time: '1 week ago' },
  ];
  return (
    <div className="min-h-screen bg-neutral-50" style={{ fontFamily: _la }}>
      <HomeHeader />
      <div className="max-w-[min(1100px,92vw)] mx-auto px-4 lg:px-8 py-8">
        <button onClick={() => history.back()} className="inline-flex items-center gap-1 text-sm text-neutral-500 hover:text-neutral-900 mb-5"><Icon name="chevronLeft" size={15} /> Back</button>
        <div className="bg-white border border-neutral-200 rounded-2xl p-8">
          <div className="flex items-start gap-5 flex-wrap">
            <Avatar name={m.name} size={96} />
            <div className="flex-1 min-w-[220px]">
              <div className="flex items-center gap-2.5">
                <h1 className="text-2xl font-bold text-neutral-900" style={{ fontFamily: _pp }}>{m.name}</h1>
                {m.tag && <span className="px-2 py-0.5 rounded text-[11px] font-bold" style={{ background: m.tag === 'ADMIN' ? '#F7B5D3' : '#D9B5F7', color: m.tag === 'ADMIN' ? '#9D174D' : '#5B21B6' }}>{m.tag}</span>}
              </div>
              <p className="text-neutral-600 mt-1">{m.role}</p>
              <div className="flex items-center gap-3 text-sm text-neutral-500 mt-2">
                <span className="inline-flex items-center gap-1"><Icon name="pin" size={14} /> {m.location}</span>
                <span>·</span><span>Joined {m.joined}</span>
              </div>
            </div>
            <div className="flex items-center gap-2">
              <button className="h-10 px-5 rounded-full bg-neutral-900 text-white text-sm font-semibold hover:bg-neutral-800 inline-flex items-center gap-2"><Icon name="send" size={15} /> Message</button>
              <button className="h-10 px-5 rounded-full border border-neutral-300 text-sm font-semibold hover:bg-neutral-50">Follow</button>
            </div>
          </div>
          <p className="text-neutral-700 leading-relaxed mt-6">{m.bio}</p>
          <div className="grid grid-cols-3 gap-4 mt-6">
            {[['Posts', m.posts], ['Comments', m.comments], ['Likes', m.likes]].map(([k, v]) => (
              <div key={k} className="bg-neutral-50 rounded-xl px-5 py-4 text-center">
                <div className="text-2xl font-bold text-neutral-900">{v}</div>
                <div className="text-xs text-neutral-500 mt-0.5 uppercase tracking-wide font-semibold">{k}</div>
              </div>
            ))}
          </div>
        </div>
        <h2 className="text-lg font-bold text-neutral-900 mt-8 mb-3" style={{ fontFamily: _pp }}>Recent activity</h2>
        <div className="bg-white border border-neutral-200 rounded-2xl divide-y divide-neutral-100">
          {activity.map((a, i) => (
            <div key={i} className="flex items-center gap-3 px-5 py-4">
              <div className="w-9 h-9 rounded-full bg-neutral-100 flex items-center justify-center text-neutral-500"><Icon name="chat" size={16} /></div>
              <div className="flex-1"><span className="text-neutral-500">{a.t} </span><span className="font-semibold text-neutral-900">{a.s}</span></div>
              <span className="text-xs text-neutral-400">{a.time}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

const FEED_POSTS = [
  { id: 'welcome', author: 'Jessica', tag: 'ADMIN', cat: 'Announcement', ts: 5, meta: 'Nov 14  •  Posted in Announcements',
    title: 'Welcome to AI4U!', body: '👋 Introduce yourself and why you joined this community.',
    likes: 59, comments: 12, shares: 4, pinned: true, highlight: true },
  { id: 'ai-tools', author: 'Michael', cat: 'Discussion', ts: 4, meta: 'Nov 13  •  Posted in Discussions',
    title: 'How to maximize your AI tools usage.', body: '🛠️ Share your favorite AI tool and how it has helped you.',
    likes: 45, comments: 19, shares: 6 },
  { id: 'ethics-workshop', author: 'Samantha', tag: null, cat: 'Announcement', ts: 3, meta: 'Nov 12  •  Posted in Announcements',
    title: 'Upcoming workshop on AI ethics.', body: 'Join us next week for a deep dive into responsible AI — register via the events tab.',
    likes: 31, comments: 7, shares: 2 },
  { id: '30-day', author: 'Jessica', tag: 'ADMIN', cat: 'Discussion', ts: 2, meta: 'Nov 10  •  Posted in Discussions',
    title: 'The 30 Day Challenge', body: ['I created this challenge to help keep you on track and get quick breakthrough. Check out the #30daychallenge.', 'You should be able to complete it with a 1 hour commitment per day.'],
    likes: 59, comments: 12, shares: 3 },
];
const FEED_PINNED = [
  { author: 'Jessica', tag: 'ADMIN', date: 'Nov 16  •  Announcements', title: 'Welcome to AI4U!', excerpt: "We're thrilled to share some exciting updates with you! Our…" },
  { author: 'Jessica', tag: 'ADMIN', date: 'Nov 13  •  Announcements', title: 'Your thoughts matter!', excerpt: "We'd love to hear your feedback on the recent updates. Please share your ideas with us!" },
  { author: 'Jessica', tag: 'ADMIN', date: 'Nov 11  •  Announcements', title: 'Join our next webinar!', excerpt: "Don't miss out on our upcoming webinar where we'll dive deeper into the new features!" },
];
const POST_RESPONSES = [
  { author: 'Jackson', time: 'Yesterday at 2:07 PM', body: "Hi! I'm Jackson, a fullstack developer looking to get myself equipped with AI skills so I don't get left behind in the industry! Nice to meet you all, looking forward to learning and growing together :)", likes: 59, replies: 1, shares: 0 },
  { author: 'Sophia', time: 'Yesterday at 3:15 PM', body: "Hello everyone! I'm Sophia, a UI/UX designer passionate about creating intuitive user experiences. Excited to explore AI and how it can enhance design processes!", likes: 45, replies: 2, shares: 0 },
  { author: 'Liam', time: 'Today at 10:22 AM', body: "Hey there! I'm Liam, a product manager with a focus on innovation. Eager to dive into AI and see how it can optimize our workflows! Let's collaborate!", likes: 32, replies: 1, shares: 0 },
  { author: 'Emma', time: 'Today at 11:00 AM', body: "Hi all! I'm Emma, a data analyst interested in AI applications in data visualization. Can't wait to share insights and learn from you all!", likes: 28, replies: 0, shares: 0 },
];

function FeedMembersPanel() {
  return (
    <aside className="w-[300px] bg-white border-l border-neutral-200 flex-shrink-0 py-6 px-5 hidden xl:block relative">
      <div className="flex items-center justify-between mb-5">
        <h3 className="font-bold text-base">Members (41)</h3>
        <button className="text-neutral-500 hover:text-neutral-900"><Icon name="user" size={16} /></button>
      </div>
      <div className="mb-2">
        <p className="text-xs text-neutral-500 mb-2">Online – 5</p>
        <div className="space-y-2">
          {FEED_MEMBERS_ONLINE.map(m => (
            <div key={m.n} className="flex items-center gap-2.5">
              <AuthorLink name={m.n}><Avatar name={m.n} size={32} /></AuthorLink>
              <AuthorLink name={m.n} className="text-sm text-neutral-800 flex-1 hover:underline">{m.n}</AuthorLink>
              {m.tag && (
                <span className="px-2 py-0.5 rounded text-[11px] font-bold" style={{
                  background: m.tag === 'ADMIN' ? '#F7B5D3' : '#D9B5F7',
                  color: m.tag === 'ADMIN' ? '#9D174D' : '#5B21B6',
                }}>{m.tag}</span>
              )}
            </div>
          ))}
        </div>
      </div>
      <div className="mt-6">
        <p className="text-xs text-neutral-500 mb-2">Offline – 11</p>
        <div className="space-y-2 max-h-[280px] overflow-y-auto scrollbar-thin">
          {FEED_MEMBERS_OFFLINE.map((m, i) => (
            <div key={i} className="flex items-center gap-2.5 opacity-80">
              <AuthorLink name={m.n}><Avatar name={m.n} size={32} /></AuthorLink>
              <AuthorLink name={m.n} className="text-sm text-neutral-500 flex-1 hover:underline">{m.n}</AuthorLink>
            </div>
          ))}
        </div>
      </div>
      <div className="absolute bottom-0 left-0 right-0 px-5 py-3 bg-white border-t border-neutral-200 text-xs text-neutral-500 flex items-center gap-1.5">
        5 members online <span className="w-1.5 h-1.5 rounded-full bg-blue-500" />
      </div>
    </aside>
  );
}

function FeedComposer({ placeholder = 'Start a post...' }) {
  return (
    <div className="bg-white border border-neutral-200 rounded-xl p-3 flex items-center gap-3">
      <Avatar name="Faiz Fadhillah" size={36} />
      <input placeholder={placeholder} className="flex-1 text-sm focus:outline-none placeholder:text-neutral-500 bg-transparent" />
      <button className="w-7 h-7 rounded-full border border-neutral-300 flex items-center justify-center text-neutral-500 hover:bg-neutral-50"><Icon name="plus" size={15} /></button>
    </div>
  );
}

function FeedFilterBar({ cat, setCat, sort, setSort }) {
  const chips = ['All', 'Announcement', 'Discussion'];
  const [open, setOpen] = useState(false);
  const ref = useRef(null);
  useEffect(() => {
    if (!open) return;
    const h = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
    document.addEventListener('mousedown', h);
    return () => document.removeEventListener('mousedown', h);
  }, [open]);
  const sorts = ['Newest', 'Oldest', 'Most liked', 'Most discussed'];
  return (
    <div className="flex items-center gap-2.5 my-5">
      {chips.map(c => (
        <button key={c} onClick={() => setCat(c)}
          className={`px-4 h-9 rounded-full text-[13px] font-medium border transition-colors ${cat === c ? 'bg-neutral-900 text-white border-neutral-900' : 'bg-white text-neutral-600 border-neutral-200 hover:bg-neutral-50'}`}>
          {c}
        </button>
      ))}
      <div className="relative ml-auto" ref={ref}>
        <button onClick={() => setOpen(o => !o)} className="inline-flex items-center gap-2 px-4 h-9 rounded-full text-[13px] font-medium bg-white text-neutral-600 border border-neutral-200 hover:bg-neutral-50">
          Sort by: {sort} <Icon name="chevronDown" size={14} className={`transition-transform ${open ? 'rotate-180' : ''}`} />
        </button>
        {open && (
          <div className="absolute right-0 top-[calc(100%+6px)] z-30 min-w-[190px] bg-white border border-neutral-200 rounded-xl py-1.5" style={{ boxShadow: '0 16px 40px rgba(0,0,0,0.14)' }}>
            {sorts.map(o => (
              <button key={o} onClick={() => { setSort(o); setOpen(false); }}
                className="w-full flex items-center justify-between gap-3 px-4 py-2 text-left text-sm hover:bg-neutral-50">
                <span className={sort === o ? 'font-semibold text-neutral-900' : 'text-neutral-700'}>{o}</span>
                {sort === o && <Icon name="check" size={15} className="text-neutral-900" />}
              </button>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}

function FeedStats({ withSearch, q, setQ }) {
  return (
    <div className="flex items-center gap-7 text-sm flex-wrap">
      <Stat2 label="1,751 Members" hues={[170, 25, 290]} />
      <Stat2 label="215 Experts" hues={[170, 25, 290]} />
      <Stat2 label="5 Mentors" hues={[200]} />
      {withSearch && (
        <div className="ml-auto flex items-center gap-2 bg-white border border-neutral-200 rounded-full px-4 h-10 min-w-[220px]">
          <Icon name="search" size={16} className="text-neutral-400" />
          <input value={q} onChange={e => setQ(e.target.value)} placeholder="Search in feed..." className="flex-1 text-sm focus:outline-none placeholder:text-neutral-400 bg-transparent" />
        </div>
      )}
    </div>
  );
}

function FeedHero() {
  const prog = useProg();
  return (
    <div className="rounded-2xl p-10 relative overflow-hidden" style={{ background: 'linear-gradient(125deg, #FFE3F0 0%, #FFC4DE 45%, #F9A8C9 100%)' }}>
      <div className="absolute -top-20 -right-20 w-72 h-72 rounded-full bg-white/40 blur-3xl" />
      <h1 className="relative text-4xl lg:text-[44px] font-bold leading-[1.05] tracking-tight text-neutral-900 max-w-md">Welcome to <br />{prog.name}</h1>
    </div>
  );
}

function PinnedColumn() {
  return (
    <aside className="w-[280px] flex-shrink-0 hidden lg:block">
      <h3 className="font-bold text-base mb-3">Pinned</h3>
      <div className="space-y-3">
        {FEED_PINNED.map((p, i) => (
          <div key={i} className="bg-white border border-neutral-200 rounded-xl p-4">
            <div className="flex items-start justify-between gap-2">
              <div className="flex items-center gap-2">
                <AuthorLink name={p.author}><Avatar name={p.author} size={28} /></AuthorLink>
                <div className="leading-tight">
                  <div className="flex items-center gap-1.5">
                    <AuthorLink name={p.author} className="font-bold text-[13px] hover:underline">{p.author}</AuthorLink>
                    <span className="px-1.5 py-0.5 rounded text-[11px] font-bold" style={{ background: '#F7B5D3', color: '#9D174D' }}>{p.tag}</span>
                  </div>
                  <div className="text-[12px] text-neutral-500">{p.date}</div>
                </div>
              </div>
              <Icon name="pin" size={15} className="text-blue-500" fill="#3B82F6" strokeWidth={0} />
            </div>
            <h4 className="font-bold text-sm mt-2.5">{p.title}</h4>
            <p className="text-[13px] text-neutral-600 mt-1 leading-snug line-clamp-2">{p.excerpt}</p>
            <Link to="/app/program/admin/feed/welcome" className="inline-flex items-center gap-1 text-[13px] font-semibold text-blue-600 mt-2 hover:underline">
              View post <Icon name="arrowRight" size={13} />
            </Link>
          </div>
        ))}
      </div>
    </aside>
  );
}

function ProgramAdminFeedPage() {
  const [q, setQ] = useState('');
  const [cat, setCat] = useState('All');
  const [sort, setSort] = useState('Newest');
  let posts = FEED_POSTS.filter(p =>
    (cat === 'All' || p.cat === cat) &&
    (q === '' || (p.title + ' ' + (Array.isArray(p.body) ? p.body.join(' ') : p.body) + ' ' + p.author).toLowerCase().includes(q.toLowerCase())));
  if (sort === 'Oldest') posts = [...posts].sort((a, b) => a.ts - b.ts);
  else if (sort === 'Most liked') posts = [...posts].sort((a, b) => b.likes - a.likes);
  else if (sort === 'Most discussed') posts = [...posts].sort((a, b) => b.comments - a.comments);
  else posts = [...posts].sort((a, b) => b.ts - a.ts);
  return (
    <div className="min-h-screen bg-neutral-50">
      <HomeHeader />
      <div className="flex">
        <ProgramSideNav active="feed" />

        {/* Main feed */}
        <main className="flex-1 min-w-0 py-6 px-8">
          <div className="max-w-[min(1960px,90vw)]">
            <FeedHero />
            {/* Sponsors */}
            <div className="flex items-center gap-7 my-5 flex-wrap">
              <span className="font-serif text-xl" style={{ fontFamily: 'Georgia, serif' }}>
                <span className="text-[#4285F4]">G</span><span className="text-[#EA4335]">o</span><span className="text-[#FBBC05]">o</span><span className="text-[#4285F4]">g</span><span className="text-[#34A853]">l</span><span className="text-[#EA4335]">e</span><span className="text-neutral-500">.org</span>
              </span>
              <div style={{ height: 24 }}><MerekaLogo /></div>
              <span className="text-base font-bold tracking-wider" style={{ color: '#E33333' }}>avpn</span>
              <span className="text-base font-bold tracking-wider text-neutral-900">KORIKA</span>
            </div>
            <FeedStats withSearch q={q} setQ={setQ} />
            <div className="flex gap-6 mt-6 items-start">
              <div className="flex-1 min-w-0 max-w-[680px]">
                <FeedComposer />
                <FeedFilterBar cat={cat} setCat={setCat} sort={sort} setSort={setSort} />
                {posts.length === 0
                  ? <div className="bg-white border border-neutral-200 rounded-xl py-14 text-center"><p className="text-sm font-semibold text-neutral-900">No posts found</p><p className="text-sm text-neutral-500 mt-1">Try a different search or filter.</p></div>
                  : posts.map(p => <FeedPost key={p.id} {...p} />)}
              </div>
              <PinnedColumn />
            </div>
          </div>
        </main>

        <FeedMembersPanel />
      </div>
    </div>
  );
}

function Stat2({ label, hues }) {
  return (
    <div className="flex items-center gap-2">
      <div className="flex -space-x-2">
        {hues.map((h, i) => (
          <div key={i} className="w-6 h-6 rounded-full border-2 border-white" style={{ background: `linear-gradient(135deg, oklch(0.78 0.13 ${h}), oklch(0.62 0.18 ${h + 30}))` }} />
        ))}
      </div>
      <span className="font-medium text-neutral-700">{label}</span>
    </div>
  );
}

function ReactorStack({ hues = [25, 220, 340, 290], size = 7 }) {
  return (
    <div className="flex -space-x-2">
      {hues.map((h, i) => (
        <div key={i} className={`w-${size} h-${size} rounded-full border-2 border-white`} style={{ width: size * 4, height: size * 4, background: `linear-gradient(135deg, oklch(0.78 0.13 ${h}), oklch(0.62 0.18 ${h + 30}))` }} />
      ))}
    </div>
  );
}

function FeedPost({ id, author, tag, meta, title, body, likes, comments, shares, pinned, highlight }) {
  const bodies = Array.isArray(body) ? body : [body];
  return (
    <div className={`bg-white rounded-xl p-5 mb-4 ${highlight ? 'border-2 border-blue-300' : 'border border-neutral-200'}`}>
      <div className="flex items-start justify-between gap-3 mb-3">
        <div className="flex items-center gap-3">
          <AuthorLink name={author}><Avatar name={author} size={40} /></AuthorLink>
          <div>
            <div className="flex items-center gap-2">
              <AuthorLink name={author} className="font-bold text-sm hover:underline">{author}</AuthorLink>
              {tag && <span className="px-1.5 py-0.5 rounded text-[11px] font-bold" style={{ background: '#F7B5D3', color: '#9D174D' }}>{tag}</span>}
            </div>
            <div className="text-xs text-neutral-500 mt-0.5">{meta}</div>
          </div>
        </div>
        <div className="flex items-center gap-2.5 text-neutral-400">
          {pinned && <Icon name="pin" size={16} fill="#3B82F6" strokeWidth={0} className="text-blue-500" />}
          <button className="hover:text-neutral-700"><Icon name="bookmark" size={16} /></button>
          <RowKebab plain items={[{ icon: 'pin', label: 'Unpin post' }, { icon: 'edit', label: 'Edit post' }, { icon: 'shield', label: 'Lock comments' }, { icon: 'trash', label: 'Delete post', danger: true }]} />
        </div>
      </div>
      <Link to={`/app/program/admin/feed/${id}`} className="block">
        <h3 className="font-bold text-lg mb-2 hover:text-blue-600">{title}</h3>
      </Link>
      {bodies.map((b, i) => <p key={i} className="text-sm text-neutral-700 leading-relaxed mb-2">{b}</p>)}
      <div className="mt-3 flex items-center gap-5 text-sm text-neutral-600">
        <button className="flex items-center gap-1.5 hover:text-neutral-900"><Icon name="heart" size={16} /> {likes}</button>
        <button className="flex items-center gap-1.5 hover:text-neutral-900"><Icon name="chat" size={16} /> {comments}</button>
        <button className="flex items-center gap-1.5 hover:text-neutral-900"><Icon name="send" size={15} /> {shares}</button>
        <div className="ml-auto"><ReactorStack /></div>
      </div>
    </div>
  );
}

function ResponseCard({ author, time, body, likes, replies, shares }) {
  return (
    <div className="border-b border-neutral-100 pb-5 mb-5 last:border-0">
      <div className="flex items-start justify-between gap-3 mb-2">
        <div className="flex items-center gap-2.5">
          <AuthorLink name={author}><Avatar name={author} size={32} /></AuthorLink>
          <div className="flex items-center gap-2">
            <AuthorLink name={author} className="font-bold text-sm hover:underline">{author}</AuthorLink>
            <span className="text-xs text-neutral-400">{time}</span>
          </div>
        </div>
        <div className="flex items-center gap-2.5 text-neutral-400">
          <button className="hover:text-neutral-700"><Icon name="bookmark" size={15} /></button>
          <RowKebab plain items={[{ icon: 'user', label: 'Member profile' }, { icon: 'send', label: 'Message member' }, { icon: 'close', label: 'Mute member' }, { icon: 'trash', label: 'Delete comment', danger: true }]} />
        </div>
      </div>
      <p className="text-sm text-neutral-700 leading-relaxed mb-2.5 pl-[42px]">{body}</p>
      <div className="flex items-center gap-5 text-sm text-neutral-500 pl-[42px]">
        <button className="flex items-center gap-1.5 hover:text-neutral-900"><Icon name="heart" size={15} /> {likes}</button>
        <button className="flex items-center gap-1.5 hover:text-neutral-900"><Icon name="refresh" size={15} /> {replies}</button>
        <button className="flex items-center gap-1.5 hover:text-neutral-900"><Icon name="send" size={14} /> {shares}</button>
      </div>
    </div>
  );
}

function ProgramFeedPostPage({ id }) {
  const post = FEED_POSTS.find(p => p.id === id) || FEED_POSTS[0];
  const bodies = Array.isArray(post.body) ? post.body : [post.body];
  return (
    <div className="min-h-screen bg-neutral-50">
      <HomeHeader />
      <div className="flex">
        <ProgramSideNav active="feed" />
        <main className="flex-1 min-w-0 py-6 px-8">
          <div className="max-w-[760px]">
            <div className="flex items-center gap-2 text-sm mb-5">
              <Link to="/app/program/admin/feed" className="text-neutral-500 hover:text-neutral-800">Feed</Link>
              <Icon name="chevronRight" size={14} className="text-neutral-400" />
              <span className="font-semibold text-neutral-900">{post.title}</span>
            </div>

            {/* Post card */}
            <div className="bg-white border border-neutral-200 rounded-xl p-5 mb-6">
              <div className="flex items-start justify-between gap-3 mb-3">
                <div className="flex items-center gap-3">
                  <AuthorLink name={post.author}><Avatar name={post.author} size={40} /></AuthorLink>
                  <div>
                    <div className="flex items-center gap-2">
                      <AuthorLink name={post.author} className="font-bold text-sm hover:underline">{post.author}</AuthorLink>
                      {post.tag && <span className="px-1.5 py-0.5 rounded text-[11px] font-bold" style={{ background: '#F7B5D3', color: '#9D174D' }}>{post.tag}</span>}
                    </div>
                    <div className="text-xs text-neutral-500 mt-0.5">{post.meta}</div>
                  </div>
                </div>
                <div className="flex items-center gap-2.5 text-neutral-400">
                  {post.pinned && <Icon name="pin" size={16} fill="#3B82F6" strokeWidth={0} className="text-blue-500" />}
                  <button className="hover:text-neutral-700"><Icon name="bookmark" size={16} /></button>
                  <RowKebab plain items={[{ icon: 'pin', label: 'Unpin post' }, { icon: 'edit', label: 'Edit post' }, { icon: 'shield', label: 'Lock comments' }, { icon: 'trash', label: 'Delete post', danger: true }]} />
                </div>
              </div>
              <h1 className="font-bold text-xl mb-2">{post.title}</h1>
              {bodies.map((b, i) => <p key={i} className="text-sm text-neutral-700 leading-relaxed mb-2">{b}</p>)}
              <div className="mt-3 flex items-center gap-5 text-sm text-neutral-600">
                <button className="flex items-center gap-1.5 hover:text-neutral-900"><Icon name="heart" size={16} /> {post.likes}</button>
                <button className="flex items-center gap-1.5 hover:text-neutral-900"><Icon name="chat" size={16} /> {post.comments}</button>
                <button className="flex items-center gap-1.5 hover:text-neutral-900"><Icon name="send" size={15} /> {post.shares}</button>
                <div className="ml-auto"><ReactorStack /></div>
              </div>
            </div>

            <h3 className="font-bold text-base mb-4">{post.comments} responses</h3>
            <div className="bg-white border border-neutral-200 rounded-xl p-5">
              {POST_RESPONSES.map((r, i) => <ResponseCard key={i} {...r} />)}
            </div>

            {/* Comment composer */}
            <div className="sticky bottom-4 mt-4">
              <FeedComposer placeholder="Leave a comment..." />
            </div>
          </div>
        </main>
        <FeedMembersPanel />
      </div>
    </div>
  );
}

Object.assign(window, { ProgramAdminFeedPage, ProgramFeedPostPage, ProgramMemberProfilePage });