// BeHueman — Detail / extended screens (round 2 polish)
// All keyed off props.onBack to return to parent route.
const Detail = {};

// ================ EVENT DETAIL with booking calendar ================
Detail.EventDetail = function EventDetail({ event, onBack }) {
  const ev = event || events[0];
  const author = getAuthor(ev.author === 'Studio Mokshana' ? 'mokshana' : 'hannaw');
  const [day, setDay] = useState(11);
  const [slot, setSlot] = useState(null);
  const [confirmed, setConfirmed] = useState(false);
  const slots = ['08:00','10:00','12:00','16:00','18:00','19:30'];
  const days = [
    { d: 8,  full: false, label:'czw' },
    { d: 9,  full: true,  label:'pt' },
    { d: 10, full: false, label:'sb' },
    { d: 11, full: false, label:'nd' },
    { d: 12, full: false, label:'pn' },
    { d: 13, full: false, label:'wt' },
    { d: 14, full: false, label:'śr' },
  ];
  return (
    <div className="page">
      <button className="btn btn-ghost btn-sm mb-16" onClick={onBack}><I name="Chevron" size={12}/> Wróć do wydarzeń</button>
      <div style={{display:'grid', gridTemplateColumns:'1.6fr 1fr', gap:24, alignItems:'start'}}>
        <div>
          <div style={{height:280, background: coverBg(ev.cover), borderRadius:'var(--r-3)', position:'relative', overflow:'hidden'}}>
            <span className="tile-type" style={{top:14, left:14}}>{ev.type}</span>
            <div style={{position:'absolute', bottom:14, left:14, color:'white'}}>
              <div style={{fontSize:11, textTransform:'uppercase', letterSpacing:'.1em', opacity:.85}}>{ev.date}</div>
              <h1 style={{fontFamily:'var(--font-serif)', fontSize:34, fontWeight:500, lineHeight:1.05, marginTop:6, letterSpacing:'-0.02em', maxWidth:520}}>{ev.title}</h1>
            </div>
          </div>
          <div className="row gap-12 mt-16" style={{flexWrap:'wrap'}}>
            <span className="chip"><I name="MapPin" size={12}/> {ev.loc}</span>
            <span className="chip"><I name="Calendar" size={12}/> {ev.date}</span>
            <span className="chip"><I name="Users" size={12}/> {ev.spots}</span>
            <span className="chip chip-hue-amber active">{ev.price}</span>
          </div>
          <div className="card mt-16" style={{padding:24}}>
            <div className="section-eyebrow">O wydarzeniu</div>
            <p style={{fontSize:15, lineHeight:1.6, marginTop:8, color:'var(--ink-1)'}}>
              Cykl 4 spotkań w łódzkiej szkole jogi — yin pratyka, lekkie pranayamy i zamykające medytacje. Małe grupy (do 12 osób), własne maty mile widziane. Po każdym spotkaniu krótka rozmowa przy herbacie.
            </p>
            <div className="row gap-12 mt-16">
              <Avatar author={author} size={44}/>
              <div>
                <div style={{fontSize:14, fontWeight:600}}>{author.name}</div>
                <div className="muted" style={{fontSize:12}}>{author.bio}</div>
              </div>
              <button className="btn btn-soft btn-sm" style={{marginLeft:'auto'}}>Zobacz profil</button>
            </div>
          </div>
          <div className="card mt-16" style={{padding:24}}>
            <div className="section-eyebrow mb-12">Co dostajesz</div>
            <ul style={{listStyle:'none', padding:0, margin:0, display:'grid', gridTemplateColumns:'1fr 1fr', gap:10, fontSize:13.5}}>
              {['90 min praktyki','Materiały PDF do oddechu','Małe grupy (do 12)','Herbata po sesji','Nagranie po spotkaniu','Społeczność uczestników'].map(t => (
                <li key={t} className="row gap-8"><I name="Check" size={14}/>{t}</li>
              ))}
            </ul>
          </div>
          <div className="card mt-16" style={{padding:24}}>
            <div className="row" style={{justifyContent:'space-between'}}>
              <div className="section-eyebrow">Komentarze uczestników</div>
              <span className="muted" style={{fontSize:12}}>Bez gwiazdek — tylko słowa</span>
            </div>
            {posts.slice(0,2).map(p => <PostCard key={p.id} post={p}/>)}
          </div>
        </div>

        <div className="col gap-16" style={{position:'sticky', top:80}}>
          <div className="card" style={{padding:20}}>
            <div className="section-eyebrow mb-12">Zarezerwuj termin</div>
            <div style={{display:'grid', gridTemplateColumns:'repeat(7,1fr)', gap:6, marginBottom:14}}>
              {days.map(x => (
                <button key={x.d} disabled={x.full} onClick={()=>setDay(x.d)} className="cal-pick" style={{
                  padding:'10px 0', borderRadius:'var(--r-2)', border:'1px solid var(--line)',
                  background: day===x.d ? 'var(--ink-1)' : x.full ? 'var(--bg-soft)' : 'var(--bg-elev)',
                  color: day===x.d ? 'white' : x.full ? 'var(--ink-4)' : 'var(--ink-1)',
                  cursor: x.full ? 'not-allowed' : 'pointer', textAlign:'center',
                  textDecoration: x.full ? 'line-through' : 'none',
                }}>
                  <div style={{fontSize:10, textTransform:'uppercase', opacity:.7}}>{x.label}</div>
                  <div style={{fontSize:16, fontWeight:600, marginTop:2}}>{x.d}</div>
                </button>
              ))}
            </div>
            <div className="muted mb-8" style={{fontSize:11.5, textTransform:'uppercase', letterSpacing:'.08em', fontWeight:600}}>Godzina</div>
            <div style={{display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:6, marginBottom:16}}>
              {slots.map(s => (
                <button key={s} onClick={()=>setSlot(s)} className="cal-slot" style={{
                  padding:'10px 0', borderRadius:'var(--r-2)',
                  border: slot===s ? '2px solid var(--ink-1)' : '1px solid var(--line)',
                  background: slot===s ? 'color-mix(in oklab, var(--accent) 12%, var(--bg-elev))' : 'var(--bg-elev)',
                  fontSize:13, fontWeight:600, cursor:'pointer',
                }}>{s}</button>
              ))}
            </div>
            <div className="row" style={{justifyContent:'space-between', padding:'12px 0', borderTop:'1px solid var(--line-soft)'}}>
              <div className="muted" style={{fontSize:12.5}}>Cena za sesję</div>
              <div style={{fontFamily:'var(--font-serif)', fontSize:22, fontWeight:500}}>{ev.price}</div>
            </div>
            <button className="btn btn-accent" style={{width:'100%', justifyContent:'center'}}
              disabled={!slot} onClick={()=>setConfirmed(true)}>
              {slot ? `Rezerwuj — ${day} maj · ${slot}` : 'Wybierz termin'}
            </button>
            <div className="muted mt-12" style={{fontSize:11, lineHeight:1.5}}>
              Płatność po Go-Live (Stripe). Teraz: rezerwacja niewiążąca, bez płatności.
            </div>
          </div>
          <div className="card" style={{padding:20}}>
            <div className="section-eyebrow mb-8">Lokalizacja</div>
            <div style={{height:140, background:'linear-gradient(135deg, #E8DFCF, #C8C0B0)', borderRadius:'var(--r-2)', position:'relative'}}>
              <div style={{position:'absolute', left:'45%', top:'40%', color:'var(--accent)'}}><I name="MapPin" size={28}/></div>
            </div>
            <div className="mt-12" style={{fontSize:13, fontWeight:600}}>{ev.loc}</div>
            <div className="muted" style={{fontSize:12, marginTop:2}}>ul. Piotrkowska 142, 90-062 Łódź</div>
          </div>
          <div className="card" style={{padding:20}}>
            <div className="row" style={{justifyContent:'space-between'}}>
              <button className="btn btn-soft btn-sm" style={{flex:1, justifyContent:'center'}}><I name="Bookmark" size={13}/> Do biblioteki</button>
              <button className="btn btn-soft btn-sm" style={{flex:1, justifyContent:'center', marginLeft:8}}><I name="Share" size={13}/> Udostępnij</button>
            </div>
          </div>
        </div>
      </div>

      {confirmed && (
        <Modal title="Rezerwacja potwierdzona" onClose={()=>{setConfirmed(false); setSlot(null);}} footer={
          <button className="btn btn-accent" onClick={()=>{setConfirmed(false); setSlot(null);}}>Świetnie!</button>
        }>
          <div className="row gap-12 mb-16">
            <div style={{width:48, height:48, borderRadius:'50%', background:'color-mix(in oklab, var(--hue-sage) 25%, var(--bg-elev))', display:'grid', placeItems:'center'}}>
              <I name="Check" size={20}/>
            </div>
            <div>
              <div style={{fontFamily:'var(--font-serif)', fontSize:20, fontWeight:500}}>Widzimy się {day} maja o {slot}</div>
              <div className="muted" style={{fontSize:13}}>Wysłaliśmy potwierdzenie na anna@hueman.com</div>
            </div>
          </div>
          <div className="muted" style={{fontSize:12.5, lineHeight:1.6, padding:14, background:'var(--bg-soft)', borderRadius:'var(--r-2)'}}>
            Po Go-Live ten krok zawiera płatność i kalendarz Google/Apple. Teraz — wydarzenie pojawi się w Twojej bibliotece "Nadchodzące".
          </div>
        </Modal>
      )}
    </div>
  );
};

// ================ COURSE / SERIES DETAIL ================
Detail.CourseDetail = function CourseDetail({ tile, onBack }) {
  const t = tile || eduTiles[1];
  const author = getAuthor('hannaw');
  const [tab, setTab] = useState('overview');
  const [enrolled, setEnrolled] = useState(false);
  const lessons = [
    { id:1, title:'Wstęp · Po co uważność?',          dur:'12 min', kind:'wideo',   done:true },
    { id:2, title:'Oddech jako kotwica',              dur:'18 min', kind:'wideo',   done:true },
    { id:3, title:'Praktyka skanowania ciała',        dur:'25 min', kind:'audio',   done:enrolled },
    { id:4, title:'Czytanie · Kabat-Zinn rozdz. 3',   dur:'14 min', kind:'tekst',   done:false },
    { id:5, title:'Tydzień 2 · Uważność emocji',      dur:'22 min', kind:'wideo',   done:false },
    { id:6, title:'Praktyka · 20 min siedzenia',      dur:'20 min', kind:'audio',   done:false },
    { id:7, title:'Q&A z Hanną · live (czw 19:00)',   dur:'60 min', kind:'live',    done:false },
    { id:8, title:'Zamknięcie · własna ścieżka',      dur:'10 min', kind:'wideo',   done:false },
  ];
  const done = lessons.filter(l => l.done).length;
  const pct = Math.round((done/lessons.length)*100);
  return (
    <div>
      <div style={{height:260, background: coverBg(t.cover), position:'relative'}}>
        <button className="btn btn-soft btn-sm" onClick={onBack} style={{position:'absolute', top:18, left:18}}><I name="Chevron" size={12}/> Edukacja</button>
        <div style={{position:'absolute', bottom:30, left:30, color:'white', maxWidth:680}}>
          <div className="row gap-8 mb-12">
            <span className="phase-ribbon" style={{background:'rgba(255,255,255,0.2)', color:'white', borderColor:'rgba(255,255,255,0.3)'}}>{t.type === 'Kurs' ? 'KURS · 8 TYG.' : 'SERIA'}</span>
            <span style={{fontSize:11, textTransform:'uppercase', letterSpacing:'.1em', opacity:.85}}>{t.author}</span>
          </div>
          <h1 style={{fontFamily:'var(--font-serif)', fontSize:46, fontWeight:500, lineHeight:1.0, letterSpacing:'-0.02em'}}>{t.title}</h1>
        </div>
      </div>
      <div className="page" style={{paddingTop:24}}>
        <div style={{display:'grid', gridTemplateColumns:'1.6fr 1fr', gap:24, alignItems:'start'}}>
          <div>
            <div className="tabs">
              {[['overview','Przegląd'],['lessons','Lekcje'],['materials','Materiały'],['discussion','Dyskusja']].map(([k,l]) => (
                <button key={k} className={`tab ${tab===k?'active':''}`} onClick={()=>setTab(k)}>{l}</button>
              ))}
            </div>
            {tab === 'overview' && (
              <>
                <div className="card" style={{padding:24}}>
                  <div className="section-eyebrow">O kursie</div>
                  <p style={{fontSize:15.5, lineHeight:1.7, marginTop:10}}>
                    Osiem tygodni praktyki uważności w wersji "domowej" — zero korporacyjnego mindfulness, zero pop-coachingu. Dziennik refleksji, krótkie sesje audio i jedno spotkanie live na tydzień. Każda lekcja kończy się pytaniem do Twojego notatnika.
                  </p>
                </div>
                <div className="card mt-16" style={{padding:24}}>
                  <div className="section-eyebrow mb-12">Czego się nauczysz</div>
                  <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:14}}>
                    {['Stabilizować uwagę bez przymusu','Pracować z emocjami zamiast ich tłumić','Rozumieć cykle wegetatywne ciała','Tworzyć własną codzienną praktykę','Rozróżniać sygnał od szumu w sobie','Łączyć ciszę z aktywnością'].map(x => (
                      <div key={x} className="row gap-8" style={{fontSize:13.5}}><I name="Check" size={14}/> <span>{x}</span></div>
                    ))}
                  </div>
                </div>
                <div className="card mt-16" style={{padding:24}}>
                  <div className="section-eyebrow mb-12">Prowadzi</div>
                  <div className="row gap-16">
                    <Avatar author={author} size={56}/>
                    <div style={{flex:1}}>
                      <div className="row gap-4"><b>{author.name}</b> {author.verified && <VerifiedBadge/>}</div>
                      <div className="muted mt-4" style={{fontSize:13, lineHeight:1.55}}>{author.bio} Pracuje w nurcie MBSR/MBCT. Współpracuje ze szpitalem w Krakowie.</div>
                      <div className="row gap-8 mt-12">
                        <button className="btn btn-soft btn-sm">Obserwuj</button>
                        <button className="btn btn-ghost btn-sm">Inne kursy autorki</button>
                      </div>
                    </div>
                  </div>
                </div>
              </>
            )}
            {tab === 'lessons' && (
              <div className="card">
                {lessons.map((l,i) => (
                  <div key={l.id} className="row" style={{padding:'16px 20px', borderTop:i?'1px solid var(--line-soft)':'', gap:14, alignItems:'center'}}>
                    <div style={{width:32, height:32, borderRadius:'50%', display:'grid', placeItems:'center',
                      background: l.done ? 'var(--ink-1)' : 'var(--bg-soft)',
                      color: l.done ? 'white' : 'var(--ink-3)',
                      fontSize:12, fontWeight:600,
                    }}>{l.done ? <I name="Check" size={13}/> : l.id}</div>
                    <div style={{flex:1}}>
                      <div style={{fontWeight:600, fontSize:14}}>{l.title}</div>
                      <div className="muted" style={{fontSize:12, marginTop:2}}>{l.kind} · {l.dur}</div>
                    </div>
                    {l.kind === 'live' && <span className="chip chip-hue-rose active" style={{fontSize:10}}>LIVE</span>}
                    <button className="btn btn-soft btn-sm">{l.done ? 'Powtórz' : 'Otwórz'}</button>
                  </div>
                ))}
              </div>
            )}
            {tab === 'materials' && (
              <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:14}}>
                {[
                  ['Dziennik · PDF do druku','82 KB','PDF'],
                  ['Audio: 20 min skanowania','MP3 18 min','Audio'],
                  ['Lista lektur uzupełniających','—','Linki'],
                  ['Karta praktyki dziennej','A5 · PDF','PDF'],
                ].map(([n,s,k]) => (
                  <div key={n} className="card" style={{padding:16}}>
                    <div className="row gap-12">
                      <div style={{width:42, height:42, borderRadius:'var(--r-2)', background:'color-mix(in oklab, var(--hue-sky) 18%, var(--bg-elev))', display:'grid', placeItems:'center', fontSize:11, fontWeight:700}}>{k}</div>
                      <div style={{flex:1}}>
                        <div style={{fontWeight:600, fontSize:14}}>{n}</div>
                        <div className="muted" style={{fontSize:12, marginTop:2}}>{s}</div>
                      </div>
                      <button className="btn btn-ghost btn-sm">Pobierz</button>
                    </div>
                  </div>
                ))}
              </div>
            )}
            {tab === 'discussion' && (
              <div className="card">
                {posts.slice(0,3).map(p => <PostCard key={p.id} post={p}/>)}
              </div>
            )}
          </div>

          <div className="col gap-16" style={{position:'sticky', top:80}}>
            <div className="card" style={{padding:20}}>
              <div className="row" style={{justifyContent:'space-between'}}>
                <div>
                  <div className="section-eyebrow">{enrolled ? 'Twój postęp' : 'Dostęp'}</div>
                  {!enrolled && <div style={{fontFamily:'var(--font-serif)', fontSize:30, fontWeight:500, marginTop:6}}>180 zł</div>}
                  {enrolled && <div style={{fontFamily:'var(--font-serif)', fontSize:30, fontWeight:500, marginTop:6}}>{pct}%</div>}
                </div>
                <I name={enrolled ? 'Award' : 'Briefcase'} size={28}/>
              </div>
              {enrolled && (
                <div style={{height:6, background:'var(--line-soft)', borderRadius:3, overflow:'hidden', marginTop:10}}>
                  <div style={{width:`${pct}%`, height:'100%', background:'var(--accent)'}}/>
                </div>
              )}
              {!enrolled ? (
                <button className="btn btn-accent mt-16" style={{width:'100%', justifyContent:'center'}} onClick={()=>setEnrolled(true)}>
                  Zapisz się — 180 zł
                </button>
              ) : (
                <button className="btn btn-accent mt-16" style={{width:'100%', justifyContent:'center'}}>
                  Wróć do nauki — Lekcja 3
                </button>
              )}
              <div className="muted mt-12" style={{fontSize:11, lineHeight:1.55}}>
                Płatność jednorazowa, dożywotni dostęp. Pieniądze wracają w 14 dni bez pytań.
              </div>
            </div>
            <div className="card" style={{padding:20}}>
              <div className="section-eyebrow mb-12">Zawartość</div>
              <div style={{display:'flex', flexDirection:'column', gap:8, fontSize:13}}>
                <div className="row" style={{justifyContent:'space-between'}}><span>Lekcji</span><b>{lessons.length}</b></div>
                <div className="row" style={{justifyContent:'space-between'}}><span>Czas</span><b>~3h</b></div>
                <div className="row" style={{justifyContent:'space-between'}}><span>Spotkania live</span><b>1 / tydz.</b></div>
                <div className="row" style={{justifyContent:'space-between'}}><span>Społeczność</span><b>248 osób</b></div>
                <div className="row" style={{justifyContent:'space-between'}}><span>Język</span><b>Polski</b></div>
              </div>
            </div>
            <div className="card" style={{padding:20, background:'color-mix(in oklab, var(--hue-amber) 12%, var(--bg-elev))'}}>
              <div className="section-eyebrow">Często z tym kursem</div>
              {eduTiles.slice(0,2).map((x,i) => (
                <div key={x.id} className="row gap-12" style={{padding:'10px 0', borderTop:i?'1px solid var(--line-soft)':''}}>
                  <div style={{width:42, height:54, borderRadius:'var(--r-1)', background: coverBg(x.cover)}}/>
                  <div style={{flex:1, minWidth:0}}>
                    <div style={{fontSize:12.5, fontWeight:600, lineHeight:1.3}}>{x.title}</div>
                    <div className="muted" style={{fontSize:11}}>{x.author}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

window.DetailScreens = Detail;