// BeHueman — Detail screens part 6: Challenge detail, Product landing+checkout, Reader mode
const Detail6 = {};

// ================ CHALLENGE DETAIL ================
Detail6.ChallengeDetail = function ChallengeDetail({ phase, challenge, onBack }) {
  const c = challenge || { id:'ch1', title:'7 dni z oddechem 4-7-8', emoji:'🌬', authorId:'hannaw', participants:1284, days:7, joined:true, progress:3, hue:'rose' };
  const a = AppData.getAuthor(c.authorId);
  const [tab, setTab] = useState('today');
  const [logged, setLogged] = useState(c.progress);
  const today = logged + 1;

  const journal = [
    { day: 1, when:'pn 4 maj', note:'Pierwsze podejście — zauważyłam jak płytko zwykle oddycham. Po sesji wyraźny spokój.' },
    { day: 2, when:'wt 5 maj', note:'Dziś rano przed pracą. 4 cykle, 5 minut. Łatwiej.' },
    { day: 3, when:'śr 6 maj', note:'Wieczorem przed snem. Zasnęłam w 8 minut zamiast 30.' },
  ];

  const ranking = [
    ['hannaw', 7, '7/7 ukończyła'],
    ['agap',   7, '7/7 ukończyła'],
    ['mdebski',6, '6/7'],
    ['lena.k', 5, '5/7'],
    ['t.karwowski', 4, '4/7'],
    ['anna.h', logged, `${logged}/7 — to Ty`],
  ];

  return (
    <div className="page">
      <button className="btn btn-ghost btn-sm mb-16" onClick={onBack}>← Wróć do wyzwań</button>
      <div className="card" style={{padding:0, overflow:'hidden', marginBottom:24}}>
        <div style={{height:140, background:`linear-gradient(135deg, var(--hue-${c.hue}), color-mix(in oklab, var(--hue-${c.hue}) 50%, var(--ink-1)))`, display:'grid', placeItems:'center'}}>
          <div style={{fontSize:64}}>{c.emoji}</div>
        </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}}>{c.title}</div>
              <div className="row gap-12 mt-8" style={{fontSize:13}}>
                <span className="row gap-4">Prowadzi <Avatar author={a} size={20}/> <b>{a.name}</b></span>
                <span style={{color:'var(--ink-3)'}}>· {c.participants} uczestników</span>
                <span style={{color:'var(--ink-3)'}}>· {c.days} dni</span>
              </div>
              <div className="row gap-16 mt-16" style={{alignItems:'center'}}>
                <svg width="80" height="80" viewBox="0 0 80 80">
                  <circle cx="40" cy="40" r="34" fill="none" stroke="var(--line)" strokeWidth="6"/>
                  <circle cx="40" cy="40" r="34" fill="none" stroke={`var(--hue-${c.hue})`} strokeWidth="6" strokeDasharray={`${(logged/c.days)*214} 214`} strokeLinecap="round" transform="rotate(-90 40 40)"/>
                  <text x="40" y="44" fontSize="18" fontWeight="600" textAnchor="middle" fill="var(--ink-1)">{logged}/{c.days}</text>
                </svg>
                <div>
                  <div className="section-eyebrow">Twój postęp</div>
                  <div style={{fontFamily:'var(--font-serif)', fontSize:18, marginTop:4}}>Dzień {today} z {c.days}</div>
                  <div className="muted" style={{fontSize:12}}>Pozostało {c.days - logged} dni · seria {logged} dni z rzędu 🔥</div>
                </div>
              </div>
            </div>
            <div className="row gap-8">
              <button className="btn btn-ghost">Opuść wyzwanie</button>
              <button className="btn btn-soft"><I name="Share" size={14}/> Udostępnij</button>
            </div>
          </div>
        </div>
      </div>

      <div className="tabs">
        {[['today','Dziś'],['journal','Dziennik'],['plan','Plan '+c.days+' dni'],['participants','Uczestnicy'],['ranking','Ranking']].map(([k,l]) => (
          <button key={k} className={`tab ${tab===k?'active':''}`} onClick={()=>setTab(k)}>{l}</button>
        ))}
      </div>

      {tab === 'today' && (
        <div style={{display:'grid', gridTemplateColumns:'2fr 1fr', gap:16}}>
          <div className="card" style={{padding:24}}>
            <div className="section-eyebrow">Dziś · dzień {today}</div>
            <div style={{fontFamily:'var(--font-serif)', fontSize:24, fontWeight:500, marginTop:6}}>Wieczorny cykl 4-7-8 · 8 minut</div>
            <div className="muted mt-12" style={{fontSize:14, lineHeight:1.6}}>
              Usiądź wygodnie. Wdech nosem przez 4 sekundy, zatrzymaj na 7 sekund, wydech ustami przez 8 sekund. Powtórz 4 razy. Zwróć uwagę na fazę zatrzymania — tam dzieje się najwięcej.
            </div>
            <div className="row gap-8 mt-16">
              <button className="btn btn-accent" onClick={()=>setLogged(Math.min(c.days, logged+1))} disabled={logged >= today}>
                <I name="Check" size={14}/> Oznacz jako wykonane
              </button>
              <button className="btn btn-soft">Przewodnik audio (8 min)</button>
            </div>
            <div className="form-group mt-16">
              <div className="form-label">Notatka z dnia (opcjonalnie)</div>
              <textarea className="textarea" rows={3} placeholder="Co zauważyłaś? Jak się czujesz?"/>
            </div>
          </div>
          <div className="col gap-16">
            <div className="card" style={{padding:18, background:`color-mix(in oklab, var(--hue-${c.hue}) 14%, var(--bg-elev))`}}>
              <div className="section-eyebrow">Wskazówka od Hanny</div>
              <div style={{fontSize:13.5, marginTop:6, lineHeight:1.55, fontStyle:'italic'}}>"Trzeci dzień to często moment zwątpienia. Daj sobie 5 minut, nawet jeśli nie chce ci się. To wystarczy."</div>
            </div>
            <div className="card" style={{padding:18}}>
              <div className="section-title mb-12">Twoja seria</div>
              <div className="row gap-4" style={{flexWrap:'wrap'}}>
                {Array.from({length:c.days}).map((_,i) => (
                  <div key={i} style={{
                    width:36, height:36, borderRadius:'var(--r-2)',
                    background: i < logged ? `var(--hue-${c.hue})` : i === logged ? `color-mix(in oklab, var(--hue-${c.hue}) 30%, var(--bg-elev))` : 'var(--bg-soft)',
                    color: i < logged ? 'white' : 'var(--ink-3)',
                    display:'grid', placeItems:'center', fontSize:13, fontWeight:600,
                    border: i === logged ? `2px solid var(--hue-${c.hue})` : '1px solid var(--line)',
                  }}>{i < logged ? '✓' : i+1}</div>
                ))}
              </div>
            </div>
          </div>
        </div>
      )}

      {tab === 'journal' && (
        <div className="card">
          {journal.map((j,i) => (
            <div key={j.day} style={{padding:'18px 22px', borderTop:i?'1px solid var(--line-soft)':''}}>
              <div className="row gap-12" style={{alignItems:'flex-start'}}>
                <div style={{width:48, textAlign:'center'}}>
                  <div style={{fontFamily:'var(--font-serif)', fontSize:22, fontWeight:500}}>{j.day}</div>
                  <div style={{fontSize:10, color:'var(--ink-3)', textTransform:'uppercase'}}>dzień</div>
                </div>
                <div style={{flex:1}}>
                  <div className="row gap-8 mb-8">
                    <span style={{fontSize:11.5, fontWeight:600, color:'var(--hue-sage)'}}>● ukończony</span>
                    <span style={{fontSize:11.5, color:'var(--ink-3)'}}>{j.when}</span>
                  </div>
                  <div style={{fontSize:14, lineHeight:1.55}}>{j.note}</div>
                </div>
                <button className="btn btn-ghost btn-sm">Edytuj</button>
              </div>
            </div>
          ))}
        </div>
      )}

      {tab === 'plan' && (
        <div className="card">
          {Array.from({length:c.days}).map((_,i) => {
            const day = i+1;
            const status = i < logged ? 'done' : i === logged ? 'today' : 'future';
            const titles = ['Wstęp','Pozycja','Rytm','Cisza po','Wieczór','Rano','Cykl pełny'];
            const descs = ['4 cykle, 5 min','4 cykle z świadomością postury','Dłuższe wydechy','3 minuty ciszy po sesji','Wieczorny pełny cykl 8 min','Poranna sesja na czczo','Zintegrowana praktyka 12 min'];
            return (
              <div key={i} className="row" style={{padding:'16px 22px', borderTop:i?'1px solid var(--line-soft)':'', gap:16, alignItems:'center'}}>
                <div style={{
                  width:36, height:36, borderRadius:'50%',
                  background: status === 'done' ? `var(--hue-${c.hue})` : status === 'today' ? 'var(--bg-elev)' : 'var(--bg-soft)',
                  border: status === 'today' ? `2px solid var(--hue-${c.hue})` : '1px solid var(--line)',
                  color: status === 'done' ? 'white' : 'var(--ink-2)',
                  display:'grid', placeItems:'center', fontSize:13, fontWeight:600,
                }}>{status === 'done' ? '✓' : day}</div>
                <div style={{flex:1}}>
                  <div style={{fontWeight:600, fontSize:14}}>Dzień {day} · {titles[i] || 'Praktyka'}</div>
                  <div className="muted" style={{fontSize:12, marginTop:2}}>{descs[i] || 'Krótka praktyka'}</div>
                </div>
                {status === 'today' && <span className="chip active">Dziś</span>}
                {status === 'done' && <span className="muted" style={{fontSize:11}}>ukończony</span>}
              </div>
            );
          })}
        </div>
      )}

      {tab === 'participants' && (
        <div className="card">
          <div style={{padding:'14px 18px', borderBottom:'1px solid var(--line)', display:'flex', gap:12, alignItems:'center'}}>
            <input className="input" placeholder="Szukaj uczestnika..." style={{maxWidth:240}}/>
            <span className="chip active">Wszyscy ({c.participants})</span>
            <span className="chip">Aktywni dziś</span>
            <span className="chip">Twoi znajomi (12)</span>
          </div>
          {AppData.authors.slice(0,5).map((u,i) => {
            const days = [7,5,3,4,2][i];
            return (
              <div key={u.id} className="row" style={{padding:'12px 20px', borderTop:'1px solid var(--line-soft)', gap:12, alignItems:'center'}}>
                <Avatar author={u} size={36}/>
                <div style={{flex:1}}>
                  <div className="row gap-4"><span style={{fontWeight:600, fontSize:13.5}}>{u.name}</span>{u.verified && <VerifiedBadge/>}</div>
                  <div className="muted" style={{fontSize:11.5}}>@{u.handle} · dzień {days}/7</div>
                </div>
                <div style={{flex:'0 0 100px'}}>
                  <div style={{height:5, background:'var(--line-soft)', borderRadius:3}}>
                    <div style={{width:`${days/7*100}%`, height:'100%', background:`var(--hue-${c.hue})`, borderRadius:3}}/>
                  </div>
                </div>
                <button className="btn btn-soft btn-sm">Obserwuj</button>
              </div>
            );
          })}
        </div>
      )}

      {tab === 'ranking' && (
        <div className="card">
          <div style={{padding:'18px 22px', borderBottom:'1px solid var(--line)'}}>
            <div className="muted" style={{fontSize:12.5}}>Ranking nie jest grą o pierwsze miejsce. Pokazuje, kto jest blisko ukończenia — żeby było łatwiej dotrwać razem.</div>
          </div>
          {ranking.map((r,i) => {
            const u = AppData.getAuthor(r[0]);
            const isMe = r[0] === 'anna.h';
            return (
              <div key={i} className="row" style={{padding:'14px 22px', borderTop:'1px solid var(--line-soft)', gap:14, alignItems:'center', background: isMe ? `color-mix(in oklab, var(--hue-${c.hue}) 8%, var(--bg-elev))` : 'transparent'}}>
                <div style={{fontFamily:'var(--font-serif)', fontSize:24, color:'var(--ink-4)', minWidth:32, fontWeight:500}}>{i+1}</div>
                <Avatar author={u} size={36}/>
                <div style={{flex:1}}>
                  <div className="row gap-4"><span style={{fontWeight:600}}>{u.name}{isMe && ' (Ty)'}</span>{u.verified && <VerifiedBadge/>}</div>
                  <div className="muted" style={{fontSize:11.5}}>{r[2]}</div>
                </div>
                {r[1] === c.days && <span style={{fontSize:18}}>🏆</span>}
              </div>
            );
          })}
        </div>
      )}
    </div>
  );
};

// ================ PRODUCT LANDING + CHECKOUT ================
Detail6.ProductLanding = function ProductLanding({ phase, product, onBack }) {
  const p = product || { id:'pr1', kind:'course', title:'7 dni z oddechem 4-7-8', authorId:'hannaw', price:89, originalPrice:120, sold:412, rating:4.8, reviews:128, cover:['#E8A4A0','#94463F'] };
  const a = AppData.getAuthor(p.authorId);
  const [showCheckout, setShowCheckout] = useState(false);
  const [step, setStep] = useState(1);
  const [method, setMethod] = useState('blik');

  return (
    <div className="page">
      <button className="btn btn-ghost btn-sm mb-16" onClick={onBack}>← Wróć</button>
      <div style={{display:'grid', gridTemplateColumns:'1.5fr 1fr', gap:32}}>
        <div>
          <div style={{aspectRatio:'16/9', borderRadius:'var(--r-3)', background:`linear-gradient(135deg, ${p.cover[0]}, ${p.cover[1]})`, marginBottom:20, position:'relative', overflow:'hidden'}}>
            <span className="chip" style={{position:'absolute', top:14, left:14, background:'rgba(255,255,255,0.92)'}}>Kurs · 7 mailowych lekcji + audio</span>
          </div>
          <div className="section-eyebrow">Kurs e-mail</div>
          <h1 style={{fontFamily:'var(--font-serif)', fontSize:36, fontWeight:500, lineHeight:1.1, margin:'8px 0 16px'}}>{p.title}</h1>
          <div className="row gap-12 mb-24" style={{alignItems:'center', fontSize:13.5}}>
            <span className="row gap-6">
              <Avatar author={a} size={28}/>
              <span><span style={{color:'var(--ink-3)'}}>Autor:</span> <b>{a.name}</b></span>
            </span>
            <span style={{color:'var(--ink-3)'}}>· {p.sold} sprzedaży</span>
            <span className="row gap-4">
              <span style={{color:'var(--hue-amber)'}}>★★★★★</span>
              <b>{p.rating}</b>
              <span style={{color:'var(--ink-3)'}}>({p.reviews} opinii)</span>
            </span>
          </div>
          <div style={{fontSize:16, lineHeight:1.65, color:'var(--ink-2)', marginBottom:32}}>
            <p>Siedem dni z jedną z najprostszych technik regulacji układu nerwowego. Codziennie krótka lekcja na maila, audio (5–10 min) i jedno pytanie do siebie. Dla osób, które nie potrzebują kolejnego "kursu" — tylko prostego pretekstu, żeby nie zapomnieć.</p>
          </div>
          <div className="section-title mb-16">Czego się nauczysz</div>
          <ul style={{padding:0, margin:0, listStyle:'none', display:'grid', gap:10}}>
            {[
              'Trzy fazy oddechu 4-7-8 i co się dzieje w każdej z nich',
              'Jak zauważyć, kiedy układ nerwowy potrzebuje krótkiej regulacji',
              'Wieczorny rytuał na lepszy sen (8 minut)',
              'Co robić, kiedy oddech "nie wchodzi" — najczęstsze blokady',
              'Jak zintegrować praktykę z dniem, bez stawiania jej w kalendarzu',
            ].map((t,i) => (
              <li key={i} className="row gap-12" style={{alignItems:'flex-start'}}>
                <span style={{color:'var(--hue-sage)', fontSize:18, lineHeight:1}}>✓</span>
                <span style={{fontSize:14}}>{t}</span>
              </li>
            ))}
          </ul>
          <div className="section-title mt-32 mb-16">Plan kursu</div>
          <div className="card" style={{padding:0}}>
            {['Wstęp · co to jest 4-7-8','Pozycja i postura','Rytm — gdzie się zgubić','Cisza po praktyce','Wieczorny cykl 8 min','Poranny cykl na czczo','Integracja na co dzień'].map((t,i) => (
              <div key={i} className="row" style={{padding:'14px 18px', borderTop:i?'1px solid var(--line-soft)':'', gap:14}}>
                <div style={{width:32, height:32, borderRadius:'50%', background:'var(--bg-soft)', display:'grid', placeItems:'center', fontSize:13, fontWeight:600}}>{i+1}</div>
                <div style={{flex:1}}>
                  <div style={{fontWeight:600, fontSize:13.5}}>Dzień {i+1} · {t}</div>
                  <div className="muted" style={{fontSize:11.5, marginTop:2}}>5–10 min audio + krótka lekcja na mailu + jedno pytanie</div>
                </div>
              </div>
            ))}
          </div>
          <div className="section-title mt-32 mb-16">Opinie</div>
          {[
            ['hannaw','Najprostsza i najczystsza wersja tej techniki, z jaką się zetknęłam. Bez wodolejstwa.','5'],
            ['mdebski','Po dwóch tygodniach od kursu wciąż wracam do wieczornego cyklu. Działa.','5'],
            ['lena.k','Dobre, ale chciałabym więcej wariantów dla osób z astmą. Może w v2?','4'],
          ].map(([who,t,r],i) => {
            const u = AppData.getAuthor(who);
            return (
              <div key={i} className="card" style={{padding:18, marginBottom:12}}>
                <div className="row gap-10 mb-8">
                  <Avatar author={u} size={32}/>
                  <div style={{flex:1}}>
                    <div className="row gap-4"><b style={{fontSize:13.5}}>{u.name}</b>{u.verified && <VerifiedBadge/>}</div>
                    <div style={{color:'var(--hue-amber)', fontSize:12}}>{'★'.repeat(parseInt(r))}{'☆'.repeat(5-parseInt(r))}</div>
                  </div>
                </div>
                <div style={{fontSize:13.5, lineHeight:1.55}}>{t}</div>
              </div>
            );
          })}
        </div>
        <div>
          <div className="card" style={{padding:24, position:'sticky', top:20}}>
            <div className="row gap-8" style={{alignItems:'baseline'}}>
              <span style={{fontFamily:'var(--font-serif)', fontSize:36, fontWeight:500}}>{p.price} zł</span>
              {p.originalPrice && <span style={{fontSize:14, color:'var(--ink-3)', textDecoration:'line-through'}}>{p.originalPrice} zł</span>}
            </div>
            <div className="muted mt-4" style={{fontSize:12}}>Jednorazowo · dożywotni dostęp</div>
            <button className="btn btn-accent mt-16" style={{width:'100%', fontSize:15, padding:'12px 16px'}} onClick={()=>setShowCheckout(true)}>Kup teraz</button>
            <button className="btn btn-soft mt-8" style={{width:'100%'}}><I name="Bookmark" size={14}/> Dodaj do biblioteki</button>
            <div className="mt-24" style={{borderTop:'1px solid var(--line-soft)', paddingTop:16}}>
              <div className="row gap-8 mb-12" style={{fontSize:12.5}}><I name="Check" size={13}/> 14 dni na zwrot · bez pytań</div>
              <div className="row gap-8 mb-12" style={{fontSize:12.5}}><I name="Check" size={13}/> Płatność: BLIK, Apple Pay, karta</div>
              <div className="row gap-8 mb-12" style={{fontSize:12.5}}><I name="Check" size={13}/> Faktura VAT na życzenie</div>
              <div className="row gap-8" style={{fontSize:12.5}}><I name="Shield" size={13}/> 70% trafia do autora</div>
            </div>
            <div className="mt-16" style={{padding:14, background:'var(--bg-soft)', borderRadius:'var(--r-2)'}}>
              <div className="section-eyebrow">Pakiet (oszczędź 30%)</div>
              <div style={{fontSize:13, marginTop:6}}>Kurs + Subskrypcja Klubu praktyki na 3 mc</div>
              <div className="row" style={{justifyContent:'space-between', marginTop:8, alignItems:'center'}}>
                <span style={{fontWeight:600}}>129 zł <span style={{color:'var(--ink-3)', textDecoration:'line-through', fontWeight:400, fontSize:12}}>185 zł</span></span>
                <button className="btn btn-soft btn-sm">Wybierz pakiet</button>
              </div>
            </div>
          </div>
        </div>
      </div>

      {showCheckout && (
        <Modal title="Finalizacja zamówienia" wide onClose={()=>{ setShowCheckout(false); setStep(1); }} footer={
          step === 3 ? <button className="btn btn-primary" onClick={()=>{ setShowCheckout(false); setStep(1); window.__app && window.__app.pushToast && window.__app.pushToast('ok','Gotowe','Kurs jest w Twojej bibliotece. Pierwszy mail za chwilę.'); }}>Otwórz w bibliotece</button> :
          <>
            <button className="btn btn-ghost" onClick={()=> step > 1 ? setStep(step-1) : setShowCheckout(false)}>{step > 1 ? '← Wstecz' : 'Anuluj'}</button>
            <button className="btn btn-accent" onClick={()=>setStep(step+1)}>{step === 1 ? 'Dalej' : `Zapłać ${p.price} zł`}</button>
          </>
        }>
          <div className="row gap-4 mb-24" style={{alignItems:'center'}}>
            {[1,2,3].map(s => (
              <Fragment key={s}>
                <div style={{
                  width:28, height:28, borderRadius:'50%',
                  background: s <= step ? 'var(--ink-1)' : 'var(--bg-soft)',
                  color: s <= step ? 'var(--bg-elev)' : 'var(--ink-3)',
                  display:'grid', placeItems:'center', fontSize:13, fontWeight:600,
                }}>{s < step ? '✓' : s}</div>
                {s < 3 && <div style={{flex:1, height:2, background: s < step ? 'var(--ink-1)' : 'var(--bg-soft)'}}/>}
              </Fragment>
            ))}
          </div>
          {step === 1 && (
            <div>
              <div className="card mb-16" style={{padding:14, display:'flex', gap:14, alignItems:'center'}}>
                <div style={{width:60, height:60, borderRadius:'var(--r-2)', background:`linear-gradient(135deg, ${p.cover[0]}, ${p.cover[1]})`}}/>
                <div style={{flex:1}}>
                  <div style={{fontWeight:600}}>{p.title}</div>
                  <div className="muted" style={{fontSize:12}}>autor: {a.name}</div>
                </div>
                <div style={{fontWeight:600}}>{p.price} zł</div>
              </div>
              <div className="form-group">
                <div className="form-label">E-mail</div>
                <input className="input" defaultValue="anna.hueman@gmail.com"/>
                <div className="form-help">Tu wyślemy potwierdzenie i pierwszą lekcję.</div>
              </div>
              <div className="row" style={{padding:'12px 0', borderTop:'1px solid var(--line-soft)', justifyContent:'space-between'}}>
                <span style={{fontSize:13}}>Faktura VAT</span>
                <Toggle on={false} onChange={()=>{}}/>
              </div>
              <div className="row" style={{padding:'12px 0', borderTop:'1px solid var(--line-soft)', justifyContent:'space-between'}}>
                <span style={{fontSize:13}}>Zapisz do newslettera autora</span>
                <Toggle on={true} onChange={()=>{}}/>
              </div>
            </div>
          )}
          {step === 2 && (
            <div>
              <div className="form-group">
                <div className="form-label">Metoda płatności</div>
                <div style={{display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:10}}>
                  {[['blik','BLIK','💸'],['card','Karta','💳'],['apple','Apple Pay','🍎'],['google','Google Pay','🅖'],['p24','Przelewy24','🏦'],['paypal','PayPal','💼']].map(([k,l,e]) => (
                    <button key={k} onClick={()=>setMethod(k)} className="card" style={{padding:14, cursor:'pointer', textAlign:'left', border: method===k ? '2px solid var(--ink-1)' : '1px solid var(--line)'}}>
                      <div style={{fontSize:20}}>{e}</div>
                      <div style={{fontWeight:600, fontSize:13, marginTop:4}}>{l}</div>
                    </button>
                  ))}
                </div>
              </div>
              {method === 'blik' && (
                <div className="form-group">
                  <div className="form-label">Kod BLIK</div>
                  <input className="input" placeholder="• • • • • •" style={{fontSize:20, letterSpacing:'0.5em', textAlign:'center'}}/>
                </div>
              )}
              {method === 'card' && (
                <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:12}}>
                  <div className="form-group" style={{gridColumn:'span 2'}}>
                    <div className="form-label">Numer karty</div>
                    <input className="input" placeholder="•••• •••• •••• ••••"/>
                  </div>
                  <div className="form-group">
                    <div className="form-label">MM / RR</div>
                    <input className="input" placeholder="12/27"/>
                  </div>
                  <div className="form-group">
                    <div className="form-label">CVC</div>
                    <input className="input" placeholder="•••"/>
                  </div>
                </div>
              )}
              <div className="card" style={{padding:14, background:'var(--bg-soft)', marginTop:8}}>
                <div className="row" style={{justifyContent:'space-between'}}><span style={{fontSize:13}}>Kurs</span><span>{p.price} zł</span></div>
                <div className="row" style={{justifyContent:'space-between', marginTop:6}}><span style={{fontSize:13, color:'var(--ink-3)'}}>VAT (23%)</span><span style={{color:'var(--ink-3)'}}>w cenie</span></div>
                <div className="row" style={{justifyContent:'space-between', marginTop:10, paddingTop:10, borderTop:'1px solid var(--line)', fontWeight:600}}><span>Razem</span><span>{p.price} zł</span></div>
              </div>
            </div>
          )}
          {step === 3 && (
            <div style={{textAlign:'center', padding:'24px 0'}}>
              <div style={{width:64, height:64, borderRadius:'50%', background:'var(--hue-sage)', display:'grid', placeItems:'center', margin:'0 auto 16px', color:'white', fontSize:32}}>✓</div>
              <div style={{fontFamily:'var(--font-serif)', fontSize:24, fontWeight:500}}>Płatność potwierdzona</div>
              <div className="muted mt-8" style={{fontSize:13.5, maxWidth:380, margin:'8px auto 0'}}>Pierwszy mail z lekcją dotrze do Ciebie w ciągu kilku minut. Kurs jest też dostępny w Twojej bibliotece.</div>
            </div>
          )}
        </Modal>
      )}
    </div>
  );
};

// ================ READER MODE (zewnętrzna polecajka — artykuł) ================
Detail6.Reader = function Reader({ phase, item, onBack }) {
  const r = item || { type:'Artykuł', title:'O cichej sile powolnych poranków', author:'Maria Popova', source:'themarginalian.org', cover:['#94463F','#E8B872'], readTime:'8 min', savedBy:24 };
  const [theme, setTheme] = useState('paper');
  const [size, setSize] = useState(16);

  const themeStyles = {
    paper:  { background:'#F2EBDD', color:'#1F1B16' },
    night:  { background:'#1F1B16', color:'#E5DFD3' },
    sepia:  { background:'#E8D9C1', color:'#3F3327' },
  };
  const ts = themeStyles[theme];

  return (
    <div className="page" style={{maxWidth:'none', padding:0}}>
      <div style={{position:'sticky', top:0, zIndex:5, background:'var(--bg-elev)', borderBottom:'1px solid var(--line)', padding:'10px 24px'}}>
        <div className="row gap-12" style={{alignItems:'center', maxWidth:1100, margin:'0 auto'}}>
          <button className="btn btn-ghost btn-sm" onClick={onBack}>← Wróć</button>
          <div style={{flex:1, fontSize:12, color:'var(--ink-3)', whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis'}}>
            <span style={{fontWeight:600, color:'var(--ink-1)'}}>{r.title}</span> · {r.source}
          </div>
          <div className="row gap-4">
            <button className="icon-btn" title="Zmniejsz" onClick={()=>setSize(Math.max(13, size-1))}><span style={{fontSize:11}}>A−</span></button>
            <button className="icon-btn" title="Zwiększ" onClick={()=>setSize(Math.min(22, size+1))}><span style={{fontSize:14}}>A+</span></button>
            <div style={{width:1, background:'var(--line)', margin:'0 4px', height:20}}/>
            {[['paper','📄'],['sepia','🟫'],['night','🌙']].map(([k,e]) => (
              <button key={k} className="icon-btn" onClick={()=>setTheme(k)} style={{background:theme===k?'var(--bg-soft)':'transparent'}}>{e}</button>
            ))}
            <div style={{width:1, background:'var(--line)', margin:'0 4px', height:20}}/>
            <button className="btn btn-soft btn-sm"><I name="Bookmark" size={13}/> Zapisz</button>
            <button className="btn btn-soft btn-sm"><I name="Share" size={13}/></button>
            <button className="btn btn-ghost btn-sm">Otwórz oryginał ↗</button>
          </div>
        </div>
      </div>

      <div style={{...ts, minHeight:'70vh', padding:'48px 24px', transition:'background 200ms'}}>
        <article style={{maxWidth:680, margin:'0 auto', fontSize:size, lineHeight:1.7, fontFamily:'var(--font-serif)'}}>
          <div style={{fontSize:11, letterSpacing:'.16em', textTransform:'uppercase', opacity:.65, fontFamily:'var(--font-sans)'}}>{r.type} · {r.readTime} czytania</div>
          <h1 style={{fontSize:size*2.4, fontWeight:500, lineHeight:1.1, margin:'12px 0 20px'}}>{r.title}</h1>
          <div className="row gap-12 mb-32" style={{alignItems:'center', fontFamily:'var(--font-sans)', fontSize:13}}>
            <span><b>{r.author}</b></span>
            <span style={{opacity:.6}}>· {r.source}</span>
            <span style={{opacity:.6}}>· {r.savedBy} osób z BeHueman zapisało</span>
          </div>
          <div style={{aspectRatio:'16/9', borderRadius:8, background:`linear-gradient(135deg, ${r.cover[0]}, ${r.cover[1]})`, marginBottom:32}}/>
          <p>Pierwsza godzina poranka nie jest dla produktywności. Jest dla zauważania — co światło robi na ścianie, co ciało już zdecydowało o dzisiejszym dniu zanim umysł zdąży się odezwać, jaki rodzaj ciszy trzyma pokój.</p>
          <p>Przez większość dorosłego życia traktowałam poranki jak pas startowy. Kawa, wiadomości, plan, start. Pas zawsze kończył się tym samym startem: rozproszona. Pierwsza godzina dnia ustawiała ton <em>oddalania się od</em>, zamiast <em>kierowania się ku</em>.</p>
          <blockquote style={{borderLeft:`3px solid currentColor`, paddingLeft:20, margin:'24px 0', opacity:.85, fontStyle:'italic'}}>
            "W twoim ciele jest więcej mądrości niż w twojej najgłębszej filozofii." — Nietzsche, często cytowany przez ludzi, którzy nigdy tego nie spróbowali.
          </blockquote>
          <h2 style={{fontSize:size*1.5, fontWeight:500, margin:'32px 0 12px'}}>Trzy małe eksperymenty</h2>
          <p>Wiosną zaczęłam 30-dniowy eksperyment robienia niczego przez pierwszą godzinę. Nie nic w sensie scrollowania — nic w sensie <em>nieinicjowania niczego</em>. Siedzenie na werandzie. Pozwalanie herbacie stygnąć. Patrzenie, co przychodzi.</p>
          <p>Pierwszy tydzień był nie do zniesienia. W drugim tygodniu ciało zaczęło budzić się wcześniej. Do trzeciego tygodnia pisałam najlepsze zdania roku na odwrocie kopert między drugim a trzecim łykiem.</p>
          <p>Czego się nauczyłam, powoli: poranek nie jest pasem startowym. Jest polaną. Można tam coś zasiać, ale tylko wtedy, gdy najpierw przyjdziesz z pustymi rękami.</p>
        </article>
      </div>

      <div style={{background:'var(--bg-elev)', borderTop:'1px solid var(--line)', padding:'24px'}}>
        <div style={{maxWidth:680, margin:'0 auto'}}>
          <div className="section-title mb-16">Powiązane na BeHueman</div>
          <div className="row gap-12" style={{flexWrap:'wrap'}}>
            {AppData.eduTiles.slice(0,3).map(t => (
              <div key={t.id} className="card" style={{flex:'1 1 200px', padding:0, overflow:'hidden', cursor:'pointer'}} onClick={()=>window.openDetail && window.openDetail('course', t)}>
                <div style={{height:80, background:`linear-gradient(135deg, ${t.cover[0]}, ${t.cover[1]})`}}/>
                <div style={{padding:14}}>
                  <div className="section-eyebrow">{t.type}</div>
                  <div style={{fontFamily:'var(--font-serif)', fontSize:15, fontWeight:500, marginTop:4, lineHeight:1.3}}>{t.title}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

// ================ EMPTY STATE primitive ================
Detail6.Empty = function Empty({ icon='🌿', title, body, action }) {
  return (
    <div style={{padding:'48px 24px', textAlign:'center', color:'var(--ink-3)'}}>
      <div style={{fontSize:40, marginBottom:14}}>{icon}</div>
      <div style={{fontFamily:'var(--font-serif)', fontSize:20, fontWeight:500, color:'var(--ink-1)'}}>{title}</div>
      {body && <div style={{fontSize:13.5, marginTop:8, maxWidth:420, margin:'8px auto 0', lineHeight:1.55}}>{body}</div>}
      {action && <div style={{marginTop:18}}>{action}</div>}
    </div>
  );
};

window.Detail6Screens = Detail6;