// BeHueman — Detail screens part 5: Group rich, Challenge detail, Product landing, Reader mode
const Detail5 = {};

// ================ PAID GROUP DETAIL — rich ================
Detail5.GroupRich = function GroupRich({ phase, group, onBack }) {
  const g = group || { id:'g1', name:'Krąg oddechu', authorId:'hannaw', desc:'Codzienne praktyki oddechowe + rozmowy. Cotygodniowe live.', members:312, price:35, hue:'rose', cover:['#E8A4A0','#94463F'] };
  const a = AppData.getAuthor(g.authorId);
  const [tab, setTab] = useState('feed');
  const [composerOpen, setComposerOpen] = useState(false);

  const threads = [
    { id:'t1', title:'Jak oddech 4-7-8 zmienił mój sen — 30 dni', author:a, replies:14, last:'30 min', pinned:true },
    { id:'t2', title:'Pytanie o oddech kapalabhati w ciąży', author:AppData.getAuthor('mdebski'), replies:6, last:'2 godz.' },
    { id:'t3', title:'[live] Czwartek 18:00 — oddech ognia, kto idzie?', author:AppData.getAuthor('hannaw'), replies:23, last:'1 dzień' },
  ];

  const materials = [
    { name:'Pranayama — wstęp (PDF)', kind:'PDF', size:'2.4 MB' },
    { name:'Oddech 4-7-8 — audio przewodnik (10 min)', kind:'Audio', size:'14 MB' },
    { name:'Tygodniowy plan praktyki', kind:'PDF', size:'180 KB' },
    { name:'Q&A · zapis Live z 24 kwietnia', kind:'Wideo', size:'48 min' },
  ];

  return (
    <div className="page">
      <button className="btn btn-ghost btn-sm mb-16" onClick={onBack}>← Wróć do grup</button>
      <div className="card" style={{padding:0, overflow:'hidden', marginBottom:24}}>
        <div style={{height:160, background:`linear-gradient(135deg, ${g.cover[0]}, ${g.cover[1]})`, position:'relative'}}>
          <span className="chip" style={{position:'absolute', top:14, left:14, background:'rgba(255,255,255,0.92)', fontSize:11}}>Subskrypcja · {g.price} zł / mc</span>
        </div>
        <div style={{padding:24}}>
          <div className="row" style={{justifyContent:'space-between', alignItems:'flex-start', gap:24}}>
            <div style={{flex:1}}>
              <div style={{fontFamily:'var(--font-serif)', fontSize:30, fontWeight:500, lineHeight:1.15}}>{g.name}</div>
              <div className="muted mt-8" style={{fontSize:14}}>{g.desc}</div>
              <div className="row gap-12 mt-12" style={{fontSize:13}}>
                <span className="row gap-4"><Avatar author={a} size={22} link/> Prowadzi <b>{a.name}</b></span>
                <span style={{color:'var(--ink-3)'}}>· {g.members} członków</span>
                <span style={{color:'var(--hue-sage)'}}>● Live czw. 18:00</span>
              </div>
            </div>
            <div className="row gap-8">
              <button className="btn btn-soft"><I name="Bell" size={14}/> Powiadomienia</button>
              <button className="btn btn-ghost">Opuść grupę</button>
            </div>
          </div>
        </div>
      </div>

      <div className="tabs">
        {[['feed','Feed grupy'],['threads','Wątki'],['materials','Materiały'],['live','Live'],['members','Członkowie ('+g.members+')']].map(([k,l]) => (
          <button key={k} className={`tab ${tab===k?'active':''}`} onClick={()=>setTab(k)}>{l}</button>
        ))}
      </div>

      {tab === 'feed' && (
        <>
          <div className="card mb-16" style={{padding:14, display:'flex', gap:10, alignItems:'center'}}>
            <Avatar author={'me'} size={36}/>
            <button className="input" style={{flex:1, textAlign:'left', color:'var(--ink-3)'}} onClick={()=>setComposerOpen(true)}>Podziel się z kręgiem...</button>
            <button className="btn btn-soft btn-sm">Pytanie</button>
            <button className="btn btn-soft btn-sm">Praktyka</button>
          </div>
          {AppData.posts.slice(0,3).map(p => <PostCard key={p.id} post={p}/>)}
        </>
      )}

      {tab === 'threads' && (
        <div className="card">
          <div style={{padding:'14px 18px', borderBottom:'1px solid var(--line)', display:'flex', gap:12, alignItems:'center'}}>
            <input className="input" placeholder="Szukaj w wątkach..." style={{maxWidth:280}}/>
            <select className="select" style={{maxWidth:140, fontSize:12}}><option>Wszystkie</option><option>Pytania</option><option>Praktyki</option></select>
            <button className="btn btn-accent btn-sm" style={{marginLeft:'auto'}}><I name="Plus" size={13}/> Nowy wątek</button>
          </div>
          {threads.map((t,i) => (
            <div key={t.id} className="row" style={{padding:'16px 20px', borderTop:i?'1px solid var(--line-soft)':'', gap:14, alignItems:'center', cursor:'pointer'}}>
              <Avatar author={t.author} size={36} link/>
              <div style={{flex:1}}>
                <div className="row gap-8">
                  {t.pinned && <span style={{fontSize:11, color:'var(--hue-amber)'}}>📌</span>}
                  <span style={{fontWeight:600, fontSize:14}}>{t.title}</span>
                </div>
                <div className="muted mt-8" style={{fontSize:12}}>{t.author.name} · ostatnia odpowiedź {t.last} temu</div>
              </div>
              <div style={{textAlign:'center', minWidth:60}}>
                <div style={{fontFamily:'var(--font-serif)', fontSize:20, fontWeight:500}}>{t.replies}</div>
                <div style={{fontSize:10, color:'var(--ink-3)'}}>odp.</div>
              </div>
            </div>
          ))}
        </div>
      )}

      {tab === 'materials' && (
        <div className="card">
          <div style={{padding:'14px 18px', borderBottom:'1px solid var(--line)', display:'flex', gap:12, alignItems:'center'}}>
            <span className="section-title" style={{margin:0}}>Materiały do pobrania</span>
            <span className="muted" style={{marginLeft:'auto', fontSize:12}}>{materials.length} plików · dla członków grupy</span>
          </div>
          {materials.map((m,i) => (
            <div key={i} className="row" style={{padding:'14px 20px', borderTop:'1px solid var(--line-soft)', gap:14, alignItems:'center'}}>
              <div style={{width:40, height:40, borderRadius:'var(--r-2)', background:'var(--bg-soft)', display:'grid', placeItems:'center', fontSize:18}}>
                {m.kind === 'PDF' ? '📄' : m.kind === 'Audio' ? '🎧' : '🎬'}
              </div>
              <div style={{flex:1}}>
                <div style={{fontWeight:600, fontSize:13.5}}>{m.name}</div>
                <div className="muted" style={{fontSize:11.5}}>{m.kind} · {m.size}</div>
              </div>
              <button className="btn btn-soft btn-sm">Pobierz</button>
            </div>
          ))}
        </div>
      )}

      {tab === 'live' && (
        <div className="card" style={{padding:24}}>
          <div className="section-eyebrow">Następne live</div>
          <div style={{fontFamily:'var(--font-serif)', fontSize:26, fontWeight:500, marginTop:6}}>Czwartek, 14 maja · 18:00</div>
          <div className="muted mt-8" style={{fontSize:14}}>Oddech ognia (Bhastrika) — sesja z Hanną. Q&A na końcu.</div>
          <div className="row gap-8 mt-16">
            <button className="btn btn-accent">Dodaj do kalendarza</button>
            <button className="btn btn-soft">Przypomnij mi</button>
          </div>
          <div className="section-eyebrow mt-24 mb-12">Wcześniejsze live (zapisy)</div>
          {[
            ['Pranayama wstęp','24 kwi · 48 min','142 obejrzenia'],
            ['Oddech a sen','17 kwi · 35 min','98 obejrzeń'],
            ['Q&A · ciąża i oddech','10 kwi · 51 min','176 obejrzeń'],
          ].map((r,i) => (
            <div key={i} className="row" style={{padding:'12px 0', borderTop:i?'1px solid var(--line-soft)':'1px solid var(--line)', gap:14}}>
              <div style={{width:80, height:48, borderRadius:'var(--r-2)', background:`linear-gradient(135deg, var(--hue-rose), var(--hue-amber))`, display:'grid', placeItems:'center', color:'white', fontSize:18}}>▶</div>
              <div style={{flex:1}}>
                <div style={{fontWeight:600, fontSize:13.5}}>{r[0]}</div>
                <div className="muted" style={{fontSize:11.5}}>{r[1]} · {r[2]}</div>
              </div>
              <button className="btn btn-soft btn-sm">Odtwórz</button>
            </div>
          ))}
        </div>
      )}

      {tab === 'members' && (
        <div className="card">
          <div style={{padding:'14px 18px', borderBottom:'1px solid var(--line)', display:'flex', gap:12, alignItems:'center'}}>
            <input className="input" placeholder="Szukaj członka..." style={{maxWidth:280}}/>
            <span className="chip active">Wszyscy ({g.members})</span>
            <span className="chip">Najaktywniejsi</span>
            <span className="chip">Nowi</span>
          </div>
          {AppData.authors.map((m,i) => (
            <div key={m.id} className="row" style={{padding:'12px 20px', borderTop:'1px solid var(--line-soft)', gap:12, alignItems:'center'}}>
              <Avatar author={m} size={36} link/>
              <div style={{flex:1}}>
                <div className="row gap-4">
                  <span style={{fontWeight:600, fontSize:13.5}}>{m.name}</span>
                  {m.verified && <VerifiedBadge/>}
                  {i === 0 && <span className="chip" style={{fontSize:10, padding:'1px 6px', color:'var(--accent)'}}>Prowadząca</span>}
                </div>
                <div className="muted" style={{fontSize:11.5}}>@{m.handle} · w grupie od {['stycznia','marca','kwietnia','grudnia'][i%4]}</div>
              </div>
              <button className="btn btn-soft btn-sm" onClick={()=>{ window.openChat && window.openChat(m.id); }}><I name="Send" size={13}/> Napisz</button>
            </div>
          ))}
        </div>
      )}
    </div>
  );
};

window.Detail5Screens = Detail5;