// BeHueman — Go-Live (GL) screens: monetization stack
const GL = {};

// ======================================================
// SUBSCRIPTION & BILLING
// ======================================================
GL.Subscription = function Subscription({ phase }) {
  const [plan, setPlan] = useState('member');
  const [billing, setBilling] = useState('annual');
  const plans = [
    {
      id: 'member',
      name: 'Member',
      tagline: 'Pełny dostęp do platformy',
      monthly: 19, annual: 190,
      bullets: [
        'Czytanie wszystkich publicznych postów',
        'Komentowanie, lajkowanie, biblioteki',
        'Wydarzenia stacjonarne i online',
        'Short Moments + wyzwania',
        'Czat 1:1 z innymi członkami',
      ],
      hue: 'sage',
    },
    {
      id: 'author',
      name: 'Autor',
      tagline: 'Publikuj, prowadź grupy, zarabiaj',
      monthly: 49, annual: 490,
      bullets: [
        'Wszystko z planu Member',
        'Panel Autora ze statystykami',
        'Planowanie publikacji + cross-posting',
        'Prowadzenie grup subskrypcyjnych',
        'Sprzedaż produktów cyfrowych',
        'Udział w revenue sharing platformy',
      ],
      hue: 'amber',
      tag: 'Najczęściej wybierany',
    },
  ];
  const cur = plans.find(p => p.id === plan);
  const price = billing === 'annual' ? cur.annual : cur.monthly;
  const perMonth = billing === 'annual' ? Math.round(cur.annual / 12 * 100) / 100 : cur.monthly;

  return (
    <div className="page">
      <PageHeader
        eyebrow="Plan i płatności"
        title={<>Wybierz <span style={{fontStyle:'italic'}}>swój odcień</span></>}
        subtitle="Niski abonament, świadomie. Pokrywa koszty platformy i odsiewa boty. Bez ukrytych opłat, bez reklam, bez sprzedaży danych."
        ff="GL"
      />

      <div className="row" style={{justifyContent:'center', marginBottom:32}}>
        <div style={{display:'inline-flex', background:'var(--bg-elev)', border:'1px solid var(--line)', borderRadius:'var(--r-pill)', padding:4}}>
          <button onClick={()=>setBilling('monthly')} style={{padding:'8px 18px', borderRadius:'var(--r-pill)', border:'none', background: billing==='monthly'?'var(--ink-1)':'transparent', color: billing==='monthly'?'var(--bg-elev)':'var(--ink-1)', fontSize:13, fontWeight:600, cursor:'pointer'}}>Miesięcznie</button>
          <button onClick={()=>setBilling('annual')} style={{padding:'8px 18px', borderRadius:'var(--r-pill)', border:'none', background: billing==='annual'?'var(--ink-1)':'transparent', color: billing==='annual'?'var(--bg-elev)':'var(--ink-1)', fontSize:13, fontWeight:600, cursor:'pointer', display:'flex', alignItems:'center', gap:6}}>
            Rocznie
            <span style={{fontSize:10, fontWeight:700, padding:'2px 7px', borderRadius:'var(--r-pill)', background: billing==='annual'?'var(--hue-amber)':'var(--accent)', color: billing==='annual'?'var(--ink-1)':'white'}}>−17%</span>
          </button>
        </div>
      </div>

      <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:20, maxWidth:920, margin:'0 auto 40px'}}>
        {plans.map(p => {
          const active = plan === p.id;
          const m = billing === 'annual' ? Math.round(p.annual / 12 * 100) / 100 : p.monthly;
          return (
            <div key={p.id} onClick={()=>setPlan(p.id)} className="card" style={{
              padding:28, cursor:'pointer', position:'relative',
              border: active?'2px solid var(--ink-1)':'1px solid var(--line)',
              background: active? `color-mix(in oklab, var(--hue-${p.hue}) 12%, var(--bg-elev))` : 'var(--bg-elev)',
              transition:'all .18s'
            }}>
              {p.tag && <div style={{position:'absolute', top:-12, right:24, background:'var(--ink-1)', color:'var(--bg-elev)', padding:'4px 12px', borderRadius:'var(--r-pill)', fontSize:11, fontWeight:600, letterSpacing:'.04em'}}>{p.tag}</div>}
              <div className="section-eyebrow">{p.name}</div>
              <div style={{fontFamily:'var(--font-serif)', fontSize:24, fontWeight:500, marginTop:6, marginBottom:18}}>{p.tagline}</div>
              <div style={{display:'flex', alignItems:'baseline', gap:8, marginBottom:6}}>
                <span style={{fontFamily:'var(--font-serif)', fontSize:42, fontWeight:500}}>{m} zł</span>
                <span style={{fontSize:13, color:'var(--ink-3)'}}>/ miesiąc</span>
              </div>
              <div style={{fontSize:12, color:'var(--ink-3)', marginBottom:20}}>
                {billing === 'annual' ? `Płatność roczna: ${p.annual} zł · ` : ''}30 dni próby gratis
              </div>
              <ul style={{listStyle:'none', padding:0, margin:0, display:'flex', flexDirection:'column', gap:10}}>
                {p.bullets.map((b,i) => (
                  <li key={i} className="row gap-8" style={{fontSize:13.5, alignItems:'flex-start'}}>
                    <span style={{color:`var(--hue-${p.hue})`, marginTop:2, fontWeight:700}}>✓</span>
                    {b}
                  </li>
                ))}
              </ul>
            </div>
          );
        })}
      </div>

      <div className="card" style={{padding:28, maxWidth:680, margin:'0 auto'}}>
        <div className="section-eyebrow mb-12">Podsumowanie</div>
        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:24, marginBottom:24}}>
          <div>
            <div style={{fontSize:12, color:'var(--ink-3)', marginBottom:4}}>Plan</div>
            <div style={{fontFamily:'var(--font-serif)', fontSize:22, fontWeight:500}}>{cur.name} — {billing==='annual'?'rocznie':'miesięcznie'}</div>
          </div>
          <div style={{textAlign:'right'}}>
            <div style={{fontSize:12, color:'var(--ink-3)', marginBottom:4}}>Po próbie</div>
            <div style={{fontFamily:'var(--font-serif)', fontSize:22, fontWeight:500}}>{price} zł</div>
            <div style={{fontSize:11, color:'var(--ink-3)'}}>{perMonth} zł/mc · VAT wliczony</div>
          </div>
        </div>
        <div style={{padding:14, background:'var(--bg-soft)', borderRadius:'var(--r-2)', display:'flex', gap:10, alignItems:'flex-start', marginBottom:18}}>
          <I name="Sparkle" size={16}/>
          <div style={{fontSize:12.5, lineHeight:1.5}}>
            <b>30 dni za darmo.</b> Możesz anulować w każdej chwili — zachowasz dostęp do końca opłaconego okresu.
            Pierwsza płatność po próbie: <b>{(new Date(Date.now()+30*864e5)).toLocaleDateString('pl-PL', {day:'numeric', month:'long', year:'numeric'})}</b>.
          </div>
        </div>
        <div className="form-group">
          <div className="form-label">Metoda płatności</div>
          <div className="col gap-8">
            {[
              ['card','Karta · •••• 4242','Mastercard'],
              ['blik','BLIK','Płatność z aplikacji banku'],
              ['add','+ Dodaj nową metodę',''],
            ].map(([k,t,d]) => (
              <div key={k} className="row gap-12" style={{padding:14, border:'1px solid var(--line)', borderRadius:'var(--r-2)', cursor:'pointer'}}>
                <div style={{width:16, height:16, borderRadius:'50%', border:'2px solid var(--ink-1)', display:'grid', placeItems:'center', flexShrink:0}}>
                  {k==='card' && <div style={{width:8, height:8, borderRadius:'50%', background:'var(--ink-1)'}}/>}
                </div>
                <div style={{flex:1}}>
                  <div style={{fontSize:13.5, fontWeight:600}}>{t}</div>
                  {d && <div className="muted" style={{fontSize:12}}>{d}</div>}
                </div>
              </div>
            ))}
          </div>
        </div>
        <div className="row gap-8" style={{justifyContent:'space-between', alignItems:'center', borderTop:'1px solid var(--line)', paddingTop:16}}>
          <div className="muted" style={{fontSize:11.5, maxWidth:340, lineHeight:1.4}}>Płatność zabezpieczona przez Stripe. Klikając akceptujesz Regulamin i Politykę Prywatności.</div>
          <button className="btn btn-primary" style={{fontSize:14, padding:'12px 22px'}}>Rozpocznij 30 dni próby</button>
        </div>
      </div>
    </div>
  );
};

// ======================================================
// PAID GROUPS — DISCOVER + DETAIL
// ======================================================
GL.PaidGroups = function PaidGroups({ phase, onOpenGroup }) {
  const groups = [
    { id:'g1', name:'Krąg oddechu', authorId:'hannaw', desc:'Codzienne praktyki oddechowe + rozmowy. Cotygodniowe live.', members:312, price:35, period:'mc', trial:7, hue:'rose', cover:['#E8A4A0','#94463F'], free:false, mine:true },
    { id:'g2', name:'Ścieżka leśna', authorId:'agap', desc:'Zioła, pory roku, rytuały. Comiesięczny zin PDF + offline spotkania.', members:184, price:45, period:'mc', trial:14, hue:'sage', cover:['#9FB89A','#1F1B16'], free:false, mine:false },
    { id:'g3', name:'Czytamy razem', authorId:'mdebski', desc:'Wspólne czytanie filozofów Wschodu. Tekst miesiąca + dyskusja.', members:520, price:0, period:'mc', trial:0, hue:'sky', cover:['#8AAFC8','#B5A0CC'], free:true, mine:false },
    { id:'g4', name:'Studio Mokshana — Inner Circle', authorId:'mokshana', desc:'Joga online 4×/tydz. + biblioteka 200 zajęć.', members:892, price:79, period:'mc', trial:14, hue:'amber', cover:['#E8B872','#94463F'], free:false, mine:false },
    { id:'g5', name:'Pisanie ręczne', authorId:'lenak', desc:'Praktyka pisania dziennika. Comiesięczne tematy + komentarze.', members:96, price:25, period:'mc', trial:7, hue:'violet', cover:['#B5A0CC','#1F1B16'], free:false, mine:true },
    { id:'g6', name:'Lodowa Praktyka', authorId:'tkarwowski', desc:'Zima razem. Cotygodniowe video, weekendy w Wiśle.', members:218, price:55, period:'mc', trial:0, hue:'sky', cover:['#8AAFC8','#9FB89A'], free:false, mine:false },
  ];

  return (
    <div className="page">
      <PageHeader
        eyebrow="Grupy subskrypcyjne"
        title={<>Zamknięte przestrzenie <span style={{fontStyle:'italic'}}>autorów</span></>}
        subtitle="Model Patronite/Skool wbudowany w platformę. Tylko autor publikuje, członkowie komentują. Mogą być bezpłatne lub płatne miesięcznie. 30 dni próby tam, gdzie to możliwe."
        ff="GL"
      />

      <div className="row gap-8 mb-24" style={{flexWrap:'wrap'}}>
        <button className="chip active">Wszystkie</button>
        <button className="chip">Moje grupy</button>
        <button className="chip">Bezpłatne</button>
        <button className="chip">Z trial 14 dni</button>
        {AppData.domains.slice(0,4).map(d => <button key={d.id} className={`chip chip-hue-${d.hue}`}>{d.label}</button>)}
      </div>

      {groups.some(g=>g.mine) && (
        <div style={{marginBottom:32}}>
          <div className="section-eyebrow">Moje grupy</div>
          <div style={{display:'grid', gridTemplateColumns:'repeat(auto-fill, minmax(280px, 1fr))', gap:14, marginTop:12}}>
            {groups.filter(g=>g.mine).map(g => {
              const a = AppData.getAuthor(g.authorId);
              return (
                <div key={g.id} className="card" onClick={()=>onOpenGroup&&onOpenGroup(g)} style={{padding:16, cursor:'pointer', display:'flex', gap:12, alignItems:'center'}}>
                  <div style={{width:48, height:48, borderRadius:12, flexShrink:0, background:coverBg(g.cover)}}/>
                  <div style={{flex:1, minWidth:0}}>
                    <div style={{fontFamily:'var(--font-serif)', fontSize:16, fontWeight:500, lineHeight:1.2}}>{g.name}</div>
                    <div className="muted" style={{fontSize:12, marginTop:2}}>{a.name} · {g.members} osób</div>
                  </div>
                  <div className="chip" style={{fontSize:10.5, color:`var(--hue-${g.hue})`, fontWeight:700}}>● ACTIVE</div>
                </div>
              );
            })}
          </div>
        </div>
      )}

      <div className="section-eyebrow">Odkryj</div>
      <div style={{display:'grid', gridTemplateColumns:'repeat(auto-fill, minmax(320px, 1fr))', gap:20, marginTop:12}}>
        {groups.map(g => {
          const a = AppData.getAuthor(g.authorId);
          return (
            <div key={g.id} className="card" style={{padding:0, overflow:'hidden', cursor:'pointer'}} onClick={()=>onOpenGroup&&onOpenGroup(g)}>
              <div style={{height:120, background:coverBg(g.cover), position:'relative'}}>
                {g.free
                  ? <span style={{position:'absolute', top:12, left:12, background:'var(--bg-elev)', padding:'4px 10px', borderRadius:'var(--r-pill)', fontSize:11, fontWeight:700}}>Bezpłatna</span>
                  : <span style={{position:'absolute', top:12, left:12, background:'rgba(31,27,22,.85)', color:'var(--bg-elev)', padding:'4px 10px', borderRadius:'var(--r-pill)', fontSize:11, fontWeight:700}}>{g.price} zł / {g.period}</span>}
                {g.trial>0 && !g.free && <span style={{position:'absolute', top:12, right:12, background:'var(--hue-amber)', padding:'4px 10px', borderRadius:'var(--r-pill)', fontSize:11, fontWeight:700, color:'var(--ink-1)'}}>{g.trial} dni gratis</span>}
              </div>
              <div style={{padding:18}}>
                <div className="row gap-8" style={{marginBottom:8}}>
                  <Avatar author={a} size={26}/>
                  <div className="row gap-4"><span style={{fontSize:12, fontWeight:600}}>{a.name}</span>{a.verified && <VerifiedBadge/>}</div>
                </div>
                <div style={{fontFamily:'var(--font-serif)', fontSize:20, fontWeight:500, lineHeight:1.2, marginBottom:6}}>{g.name}</div>
                <div className="muted" style={{fontSize:13, lineHeight:1.5, marginBottom:14}}>{g.desc}</div>
                <div className="row" style={{justifyContent:'space-between', borderTop:'1px solid var(--line-soft)', paddingTop:12}}>
                  <span style={{fontSize:12, color:'var(--ink-3)'}}><I name="Users" size={12}/> {g.members.toLocaleString('pl-PL')} osób</span>
                  {g.mine
                    ? <button className="btn btn-soft btn-sm">Wejdź</button>
                    : g.free
                      ? <button className="btn btn-accent btn-sm">Dołącz</button>
                      : <button className="btn btn-accent btn-sm">{g.trial>0?`${g.trial} dni gratis`:'Subskrybuj'}</button>}
                </div>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
};

// ======================================================
// GROUP DETAIL (inside a paid group)
// ======================================================
GL.GroupDetail = function GroupDetail({ phase, group, onBack }) {
  const g = group || { 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 tabs = ['Posty', 'Wątki', 'Biblioteka', 'Live', 'Członkowie'];
  const [tab, setTab] = useState('Posty');
  const posts = [
    { time:'2 godz.', title:'Praktyka 4-7-8 dla początkujących — wideo 12 min', kind:'video', locked:false },
    { time:'wczoraj', title:'O zasypianiu — krótka medytacja audio', kind:'audio', locked:false },
    { time:'2 dni', title:'Live: pytania o oddech — nagranie z czwartku', kind:'live-recording', locked:false },
    { time:'tydzień', title:'PDF: schemat tygodnia praktyki dla zaczynających', kind:'pdf', locked:false },
  ];

  return (
    <div className="page page-wide">
      <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:200, background:coverBg(g.cover), position:'relative'}}/>
        <div style={{padding:24, display:'flex', gap:24, alignItems:'flex-start', flexWrap:'wrap'}}>
          <div style={{flex:1, minWidth:280}}>
            <div className="row gap-8 mb-8">
              <Avatar author={a} size={32}/>
              <div className="row gap-4"><span style={{fontWeight:600}}>{a.name}</span>{a.verified && <VerifiedBadge/>}</div>
              <span className="muted" style={{fontSize:12}}>· prowadzi</span>
            </div>
            <div style={{fontFamily:'var(--font-serif)', fontSize:32, fontWeight:500, lineHeight:1.15}}>{g.name}</div>
            <div className="muted mt-8" style={{fontSize:14, lineHeight:1.5, maxWidth:580}}>{g.desc}</div>
            <div className="row gap-16 mt-16" style={{fontSize:12.5, color:'var(--ink-3)'}}>
              <span><I name="Users" size={13}/> {g.members||312} członków</span>
              <span><I name="Calendar" size={13}/> Spotyka się od 8 mc</span>
              <span style={{color:`var(--hue-${g.hue||'rose'})`, fontWeight:700}}>● Twoja subskrypcja: aktywna</span>
            </div>
          </div>
          <div className="card" style={{padding:18, minWidth:240, background:'var(--bg-soft)'}}>
            <div className="muted" style={{fontSize:11, textTransform:'uppercase', letterSpacing:'.06em', fontWeight:600}}>Twoja subskrypcja</div>
            <div style={{fontFamily:'var(--font-serif)', fontSize:24, fontWeight:500, marginTop:4}}>{g.price||35} zł / mc</div>
            <div className="muted" style={{fontSize:12, marginTop:4}}>Następne odnowienie: 12 maja</div>
            <button className="btn btn-ghost btn-sm" style={{width:'100%', marginTop:14}}>Zarządzaj subskrypcją</button>
          </div>
        </div>
        <div className="row gap-4" style={{borderTop:'1px solid var(--line)', padding:'0 24px', overflow:'auto'}}>
          {tabs.map(t => (
            <button key={t} onClick={()=>setTab(t)} style={{
              padding:'14px 16px', border:'none', background:'transparent', cursor:'pointer',
              fontSize:13, fontWeight:600,
              borderBottom: tab===t?'2px solid var(--ink-1)':'2px solid transparent',
              color: tab===t?'var(--ink-1)':'var(--ink-3)',
            }}>{t}</button>
          ))}
        </div>
      </div>

      <div style={{display:'grid', gridTemplateColumns:'1fr 280px', gap:24}}>
        <div>
          <div className="card" style={{padding:18, marginBottom:18, display:'flex', gap:12, alignItems:'center'}}>
            <Avatar author={'me'} size={36}/>
            <input className="input" placeholder="Tylko autor publikuje. Możesz komentować pod postem." disabled style={{flex:1, opacity:0.6}}/>
          </div>
          {posts.map((p,i) => (
            <div key={i} className="card" style={{padding:20, marginBottom:14}}>
              <div className="row gap-8 mb-12">
                <Avatar author={a} size={32}/>
                <div className="row gap-4"><span style={{fontSize:13, fontWeight:600}}>{a.name}</span>{a.verified && <VerifiedBadge/>}</div>
                <span className="muted" style={{fontSize:12}}>· {p.time}</span>
                <span className="chip" style={{fontSize:10.5, marginLeft:'auto'}}>{ {video:'Wideo', audio:'Audio', 'live-recording':'Live · zapis', pdf:'PDF'}[p.kind] }</span>
              </div>
              <div style={{fontFamily:'var(--font-serif)', fontSize:18, fontWeight:500, lineHeight:1.3, marginBottom:14}}>{p.title}</div>
              <div style={{height:140, background:`linear-gradient(135deg, var(--hue-${g.hue||'rose'}) 0%, color-mix(in oklab, var(--hue-${g.hue||'rose'}) 50%, var(--ink-1)))`, borderRadius:'var(--r-2)', position:'relative', display:'grid', placeItems:'center'}}>
                <div style={{width:50, height:50, borderRadius:'50%', background:'rgba(251,248,241,.95)', display:'grid', placeItems:'center'}}>
                  <I name={p.kind==='audio'?'Sparkle':'Education'} size={20}/>
                </div>
              </div>
              <div className="row gap-16 mt-12" style={{fontSize:12.5, color:'var(--ink-3)'}}>
                <span><I name="Heart" size={13}/> 84</span>
                <span><I name="MessageSquare" size={13}/> 23 komentarze</span>
                <span><I name="Bookmark" size={13}/> Zapisz</span>
              </div>
            </div>
          ))}
        </div>
        <div>
          <div className="card" style={{padding:16, marginBottom:14}}>
            <div className="section-eyebrow">Najbliższe live</div>
            <div style={{fontFamily:'var(--font-serif)', fontSize:18, fontWeight:500, lineHeight:1.25, marginTop:8, marginBottom:6}}>Q&A o oddechu w stresie</div>
            <div className="muted" style={{fontSize:12, marginBottom:12}}><I name="Calendar" size={12}/> Czwartek 19:00 · Zoom</div>
            <button className="btn btn-soft btn-sm" style={{width:'100%'}}>Zapisz w kalendarzu</button>
          </div>
          <div className="card" style={{padding:16}}>
            <div className="section-eyebrow">Aktywni członkowie</div>
            <div className="col gap-12" style={{marginTop:12}}>
              {AppData.authors.slice(0,5).map(au => (
                <div key={au.id} className="row gap-8">
                  <Avatar author={au} size={28}/>
                  <span style={{fontSize:13, fontWeight:600, flex:1}}>{au.name}</span>
                  <span className="muted" style={{fontSize:11}}>5 min</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

// ======================================================
// AUTHOR EARNINGS — Stripe Connect + Revenue Sharing
// ======================================================
GL.AuthorEarnings = function AuthorEarnings({ phase }) {
  const [tab, setTab] = useState('overview');
  // 12-month earnings sparkline
  const monthly = [820, 940, 1100, 1280, 1450, 1620, 1840, 2050, 2210, 2480, 2680, 2940];
  const months = ['cze','lip','sie','wrz','paź','lis','gru','sty','lut','mar','kwi','maj'];
  const max = Math.max(...monthly);

  return (
    <div className="page page-wide">
      <PageHeader
        eyebrow="Panel Autora · Zarobki"
        title="Twoje przychody z platformy"
        subtitle="Trzy strumienie: udział w abonamentach Member (revenue sharing), subskrypcje Twoich grup, sprzedaż produktów cyfrowych. Wypłaty bezpośrednio przez Stripe Connect."
        ff="GL"
      />

      <div className="card" style={{padding:24, background:'linear-gradient(135deg, color-mix(in oklab, var(--hue-amber) 16%, var(--bg-elev)), var(--bg-elev))', marginBottom:24}}>
        <div className="row" style={{justifyContent:'space-between', alignItems:'flex-start', flexWrap:'wrap', gap:16}}>
          <div>
            <div className="section-eyebrow">Saldo do wypłaty</div>
            <div style={{fontFamily:'var(--font-serif)', fontSize:48, fontWeight:500, lineHeight:1, marginTop:8}}>2 940,00 zł</div>
            <div className="muted mt-8" style={{fontSize:13}}>Ostatnia wypłata: <b>1 kwietnia · 2 480 zł</b> · następna automatycznie 1 maja</div>
          </div>
          <div className="row gap-8">
            <button className="btn btn-ghost">Historia wypłat</button>
            <button className="btn btn-primary">Wypłać teraz</button>
          </div>
        </div>
        <div className="row gap-12 mt-16" style={{alignItems:'center', padding:12, background:'rgba(251,248,241,.7)', borderRadius:'var(--r-2)'}}>
          <div style={{width:36, height:36, borderRadius:8, background:'#635bff', display:'grid', placeItems:'center', color:'white', fontWeight:700, fontSize:14}}>S</div>
          <div style={{flex:1}}>
            <div style={{fontSize:13, fontWeight:600}}>Konto Stripe Connect — aktywne</div>
            <div className="muted" style={{fontSize:11.5}}>•••• PL61 1090 · Verified · KYC ukończone 14.02.2026</div>
          </div>
          <button className="btn btn-ghost btn-sm">Zarządzaj</button>
        </div>
      </div>

      <div className="row gap-4 mb-16" style={{borderBottom:'1px solid var(--line)'}}>
        {[
          ['overview','Przegląd'],
          ['revshare','Revenue sharing'],
          ['groups','Subskrypcje grup'],
          ['products','Produkty cyfrowe'],
        ].map(([k,l]) => (
          <button key={k} onClick={()=>setTab(k)} style={{
            padding:'12px 18px', border:'none', background:'transparent', cursor:'pointer',
            fontSize:13, fontWeight:600,
            borderBottom: tab===k?'2px solid var(--ink-1)':'2px solid transparent',
            color: tab===k?'var(--ink-1)':'var(--ink-3)',
          }}>{l}</button>
        ))}
      </div>

      {tab==='overview' && <>
        <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:14, marginBottom:24}}>
          {[
            ['Revenue sharing', '1 240,00 zł', '+18% mc/mc', 'amber'],
            ['Grupy subskrypcyjne', '1 360,00 zł', '+9% mc/mc', 'rose'],
            ['Produkty cyfrowe', '340,00 zł', '+24% mc/mc', 'sage'],
          ].map(([l,v,d,h],i) => (
            <div key={i} className="card" style={{padding:18, background:`color-mix(in oklab, var(--hue-${h}) 8%, var(--bg-elev))`}}>
              <div className="muted" style={{fontSize:11, textTransform:'uppercase', letterSpacing:'.06em', fontWeight:600}}>{l}</div>
              <div style={{fontFamily:'var(--font-serif)', fontSize:28, fontWeight:500, marginTop:6}}>{v}</div>
              <div style={{fontSize:11.5, color:`var(--hue-${h})`, fontWeight:600, marginTop:4}}>↑ {d}</div>
            </div>
          ))}
        </div>
        <div className="card" style={{padding:24}}>
          <div className="row" style={{justifyContent:'space-between', marginBottom:16}}>
            <div>
              <div className="section-eyebrow">Przychody w czasie</div>
              <div className="section-title mt-4">Ostatnie 12 miesięcy</div>
            </div>
            <select className="select" style={{maxWidth:160}}><option>Suma trzech źródeł</option><option>Tylko revenue sharing</option><option>Tylko grupy</option></select>
          </div>
          <svg width="100%" height="220" viewBox="0 0 720 220" preserveAspectRatio="none">
            {[0,1,2,3].map(i => <line key={i} x1="0" y1={20+i*55} x2="720" y2={20+i*55} stroke="var(--line)" strokeWidth="1"/>)}
            <polyline
              fill="none"
              stroke="var(--hue-amber)"
              strokeWidth="2.5"
              points={monthly.map((v,i)=>`${i*65+20},${200-v/max*180}`).join(' ')}
            />
            <polyline
              fill="color-mix(in oklab, var(--hue-amber) 18%, transparent)"
              stroke="none"
              points={monthly.map((v,i)=>`${i*65+20},${200-v/max*180}`).join(' ') + ` 770,200 20,200`}
            />
            {monthly.map((v,i)=>(
              <Fragment key={i}>
                <circle cx={i*65+20} cy={200-v/max*180} r="4" fill="var(--bg-elev)" stroke="var(--hue-amber)" strokeWidth="2"/>
                <text x={i*65+20} y={215} fontSize="10" textAnchor="middle" fill="var(--ink-3)">{months[i]}</text>
              </Fragment>
            ))}
          </svg>
        </div>
      </>}

      {tab==='revshare' && <>
        <div className="card" style={{padding:24, marginBottom:18}}>
          <div className="section-eyebrow">Jak liczymy Twój udział</div>
          <div style={{fontFamily:'var(--font-serif)', fontSize:22, fontWeight:500, lineHeight:1.3, marginTop:8, maxWidth:680}}>
            50% miesięcznych przychodów z abonamentów platformy idzie do autorów — proporcjonalnie do popularności postów.
          </div>
          <div className="muted mt-12" style={{fontSize:13, lineHeight:1.6, maxWidth:680}}>
            Co miesiąc cron bierze pulę, sumuje wszystkie posty wszystkich autorów, waży popularnością z 30 dni i dzieli proporcjonalnie. Twoja część trafia bezpośrednio na konto Stripe Connect.
          </div>
        </div>
        <div className="card" style={{padding:0, overflow:'hidden'}}>
          <div style={{padding:'14px 20px', borderBottom:'1px solid var(--line)', display:'flex', justifyContent:'space-between', alignItems:'center'}}>
            <div>
              <div className="section-eyebrow">Maj 2026 (w toku)</div>
              <div style={{fontFamily:'var(--font-serif)', fontSize:22, fontWeight:500, marginTop:4}}>1 240,00 zł — przewidywany wynik</div>
            </div>
            <span className="chip">Pula tego mc: 184 200 zł</span>
          </div>
          <table style={{width:'100%', borderCollapse:'collapse', fontSize:13}}>
            <thead style={{background:'var(--bg-soft)'}}>
              <tr style={{textAlign:'left'}}>
                {['Post','Wyświetlenia','Czas czytania','Punkty popularności','Udział'].map(h => (
                  <th key={h} style={{padding:'10px 16px', fontWeight:600, fontSize:11, textTransform:'uppercase', letterSpacing:'.06em', color:'var(--ink-3)'}}>{h}</th>
                ))}
              </tr>
            </thead>
            <tbody>
              {[
                ['Praktyka oddechu 4-7-8 — wideo', '12 480', '4m 12s', 248, 380],
                ['Ciało wie wcześniej. O sygnałach przed paniką.', '8 920', '3m 48s', 184, 280],
                ['Co dzieje się w nocy przy lęku — fizjologia', '7 110', '5m 02s', 162, 250],
                ['Krótka medytacja audio — przed snem', '5 480', '8m 14s', 128, 195],
                ['Liść pomarańczy. O tym, co prawdziwe.', '3 920', '2m 38s', 84, 135],
              ].map((r,i) => (
                <tr key={i} style={{borderTop:'1px solid var(--line-soft)'}}>
                  <td style={{padding:'12px 16px', fontWeight:600, fontFamily:'var(--font-serif)', fontSize:14}}>{r[0]}</td>
                  <td style={{padding:'12px 16px', color:'var(--ink-2)'}}>{r[1].toLocaleString('pl-PL')}</td>
                  <td style={{padding:'12px 16px', color:'var(--ink-2)'}}>{r[2]}</td>
                  <td style={{padding:'12px 16px', color:'var(--ink-2)'}}>{r[3]}</td>
                  <td style={{padding:'12px 16px', fontWeight:600, color:'var(--hue-amber-deep, #94463F)'}}>{r[4]} zł</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </>}

      {tab==='groups' && (
        <div className="card" style={{padding:0, overflow:'hidden'}}>
          <table style={{width:'100%', borderCollapse:'collapse', fontSize:13}}>
            <thead style={{background:'var(--bg-soft)'}}>
              <tr style={{textAlign:'left'}}>
                {['Grupa','Członków','MRR','Po prowizji 12%','Trend'].map(h => (
                  <th key={h} style={{padding:'10px 16px', fontWeight:600, fontSize:11, textTransform:'uppercase', letterSpacing:'.06em', color:'var(--ink-3)'}}>{h}</th>
                ))}
              </tr>
            </thead>
            <tbody>
              {[
                ['Krąg oddechu', 312, '10 920 zł', '9 610 zł', '+34 mc'],
                ['Pisanie ręczne', 96, '2 400 zł', '2 112 zł', '+12 mc'],
              ].map((r,i) => (
                <tr key={i} style={{borderTop:'1px solid var(--line-soft)'}}>
                  <td style={{padding:'12px 16px', fontWeight:600, fontFamily:'var(--font-serif)', fontSize:14}}>{r[0]}</td>
                  <td style={{padding:'12px 16px'}}>{r[1]}</td>
                  <td style={{padding:'12px 16px'}}>{r[2]}</td>
                  <td style={{padding:'12px 16px', fontWeight:600}}>{r[3]}</td>
                  <td style={{padding:'12px 16px', color:'var(--hue-sage)'}}>↑ {r[4]}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}

      {tab==='products' && (
        <div className="card" style={{padding:0, overflow:'hidden'}}>
          <table style={{width:'100%', borderCollapse:'collapse', fontSize:13}}>
            <thead style={{background:'var(--bg-soft)'}}>
              <tr style={{textAlign:'left'}}>
                {['Produkt','Cena','Sprzedanych','Przychód','Po prowizji 12%'].map(h => (
                  <th key={h} style={{padding:'10px 16px', fontWeight:600, fontSize:11, textTransform:'uppercase', letterSpacing:'.06em', color:'var(--ink-3)'}}>{h}</th>
                ))}
              </tr>
            </thead>
            <tbody>
              {[
                ['Mini-kurs "Oddech w pracy" (PDF + 4 audio)', '49 zł', 14, '686 zł', '604 zł'],
                ['Audio: medytacje na noc (zestaw 7)', '29 zł', 8, '232 zł', '204 zł'],
              ].map((r,i) => (
                <tr key={i} style={{borderTop:'1px solid var(--line-soft)'}}>
                  <td style={{padding:'12px 16px', fontWeight:600, fontFamily:'var(--font-serif)', fontSize:14}}>{r[0]}</td>
                  <td style={{padding:'12px 16px'}}>{r[1]}</td>
                  <td style={{padding:'12px 16px'}}>{r[2]}</td>
                  <td style={{padding:'12px 16px'}}>{r[3]}</td>
                  <td style={{padding:'12px 16px', fontWeight:600}}>{r[4]}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}
    </div>
  );
};

// ======================================================
// STRIPE CONNECT ONBOARDING (KYC)
// ======================================================
GL.StripeOnboarding = function StripeOnboarding({ phase }) {
  const [step, setStep] = useState(2);
  const steps = [
    ['Konto', 'Dane podstawowe i typ działalności'],
    ['Tożsamość', 'Weryfikacja KYC (dokument + selfie)'],
    ['Konto bankowe', 'IBAN do wypłat'],
    ['Podatki', 'NIP / status VAT'],
    ['Aktywacja', 'Zatwierdzenie po stronie Stripe'],
  ];
  return (
    <div className="page" style={{maxWidth:880}}>
      <PageHeader
        eyebrow="Włącz monetyzację"
        title="Stripe Connect — onboarding"
        subtitle="Aby zacząć zarabiać (revenue sharing, grupy płatne, produkty cyfrowe), potrzebujemy potwierdzenia Twojej tożsamości po stronie Stripe. Dane nie są przechowywane na BeHueman — przekazywane bezpośrednio do Stripe."
        ff="GL"
      />

      <div className="card" style={{padding:0, overflow:'hidden'}}>
        <div style={{padding:'18px 24px', borderBottom:'1px solid var(--line)', background:'var(--bg-soft)', display:'flex', alignItems:'center', gap:14}}>
          <div style={{width:32, height:32, borderRadius:6, background:'#635bff', display:'grid', placeItems:'center', color:'white', fontWeight:700}}>S</div>
          <div style={{flex:1}}>
            <div style={{fontSize:13, fontWeight:600}}>Krok {step+1} z {steps.length} · {steps[step][0]}</div>
            <div className="muted" style={{fontSize:12}}>{steps[step][1]}</div>
          </div>
          <span className="chip" style={{fontSize:11}}>● W toku</span>
        </div>
        {/* progress bar */}
        <div style={{height:4, background:'var(--line)', position:'relative'}}>
          <div style={{position:'absolute', inset:0, width:`${(step+1)/steps.length*100}%`, background:'#635bff'}}/>
        </div>
        <div style={{display:'grid', gridTemplateColumns:'220px 1fr', gap:0}}>
          <div style={{borderRight:'1px solid var(--line)', padding:18}}>
            {steps.map((s,i) => (
              <div key={i} className="row gap-12" style={{padding:'10px 6px', cursor: i<=step?'pointer':'default', opacity: i>step?0.4:1}}>
                <div style={{width:22, height:22, borderRadius:'50%', background: i<step?'var(--hue-sage)': i===step?'var(--ink-1)':'var(--line)', color: i<=step?'var(--bg-elev)':'var(--ink-3)', display:'grid', placeItems:'center', fontSize:11, fontWeight:700}}>
                  {i<step?'✓':i+1}
                </div>
                <div style={{fontSize:12.5, fontWeight: i===step?700:500}}>{s[0]}</div>
              </div>
            ))}
          </div>
          <div style={{padding:24}}>
            {step===2 && <>
              <div style={{fontFamily:'var(--font-serif)', fontSize:22, fontWeight:500}}>Konto bankowe do wypłat</div>
              <div className="muted mt-8" style={{fontSize:13}}>Wypłaty automatycznie 1. dnia każdego miesiąca. Możesz wypłacić ręcznie w dowolnym momencie (próg: 100 zł).</div>
              <div className="form-group mt-16">
                <div className="form-label">IBAN</div>
                <input className="input" placeholder="PL61 1090 0000 0000 0000 0000 0000" style={{fontFamily:'var(--font-mono)'}}/>
              </div>
              <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:12}}>
                <div className="form-group">
                  <div className="form-label">Imię i nazwisko właściciela konta</div>
                  <input className="input" defaultValue="Hanna Wójcik"/>
                </div>
                <div className="form-group">
                  <div className="form-label">Waluta</div>
                  <select className="select"><option>PLN</option><option>EUR</option><option>USD</option></select>
                </div>
              </div>
              <div className="form-group">
                <div className="form-label">Adres właściciela</div>
                <input className="input" placeholder="ul. ____ , 00-000 Warszawa"/>
              </div>
              <div className="row" style={{padding:14, background:'color-mix(in oklab, var(--hue-amber) 14%, var(--bg-elev))', borderRadius:'var(--r-2)', gap:10}}>
                <I name="Sparkle" size={16}/>
                <div style={{fontSize:12.5, lineHeight:1.5}}><b>Bezpieczeństwo.</b> Numer konta jest zaszyfrowany przed wysyłką. Po stronie BeHueman nie są przechowywane dane bankowe.</div>
              </div>
              <div className="row gap-8 mt-16" style={{justifyContent:'flex-end'}}>
                <button className="btn btn-ghost" onClick={()=>setStep(s=>Math.max(0,s-1))}>← Wstecz</button>
                <button className="btn btn-primary" style={{background:'#635bff'}} onClick={()=>setStep(s=>Math.min(4,s+1))}>Zapisz i kontynuuj →</button>
              </div>
            </>}
            {step!==2 && <>
              <div style={{fontFamily:'var(--font-serif)', fontSize:22, fontWeight:500}}>{steps[step][0]}</div>
              <div className="muted mt-8" style={{fontSize:13}}>{steps[step][1]}</div>
              <div className="row gap-8 mt-32" style={{justifyContent:'flex-end'}}>
                <button className="btn btn-ghost" onClick={()=>setStep(s=>Math.max(0,s-1))}>← Wstecz</button>
                <button className="btn btn-primary" style={{background:'#635bff'}} onClick={()=>setStep(s=>Math.min(4,s+1))}>Kontynuuj →</button>
              </div>
            </>}
          </div>
        </div>
      </div>
    </div>
  );
};

// ======================================================
// LOCKED DIGITAL PRODUCT
// ======================================================
GL.LockedPost = function LockedPost({ phase }) {
  const a = AppData.getAuthor('hannaw');
  const [bought, setBought] = useState(false);
  const [showCheckout, setShowCheckout] = useState(false);
  return (
    <div className="page" style={{maxWidth:780}}>
      <PageHeader
        eyebrow="Produkt cyfrowy autora"
        title='"Oddech w pracy" — mini-kurs'
        subtitle="Treść posta jest dostępna po zakupie. Pojedyncza płatność — bez subskrypcji."
        ff="GL"
      />
      <div className="card" style={{padding:0, overflow:'hidden'}}>
        <div style={{height:280, background:'linear-gradient(135deg, #E8A4A0 0%, #94463F 100%)', position:'relative', display:'grid', placeItems:'center'}}>
          <div style={{textAlign:'center', color:'rgba(251,248,241,.95)', padding:24}}>
            <div style={{fontSize:11, letterSpacing:'.18em', fontWeight:700, opacity:0.85}}>HANNA WÓJCIK</div>
            <div style={{fontFamily:'var(--font-serif)', fontSize:36, fontWeight:500, fontStyle:'italic', marginTop:6}}>Oddech w pracy</div>
            <div style={{fontSize:12, marginTop:8, opacity:0.85}}>PDF 28 stron + 4 nagrania audio</div>
          </div>
        </div>
        <div style={{padding:24}}>
          <div className="row gap-8 mb-12">
            <Avatar author={a} size={36}/>
            <div>
              <div className="row gap-4"><span style={{fontSize:13, fontWeight:600}}>{a.name}</span>{a.verified && <VerifiedBadge/>}</div>
              <div className="muted" style={{fontSize:11.5}}>opublikowane 14 marca · 412 osób kupiło</div>
            </div>
          </div>
          <div style={{fontFamily:'var(--font-serif)', fontSize:18, fontWeight:500, lineHeight:1.5, marginBottom:14}}>
            Cztery konkretne techniki oddechowe do wykorzystania przy biurku, bez podejrzliwych spojrzeń kolegów. Plus dlaczego oddech jest pierwszą bramą — i jak go nie zepsuć kawą.
          </div>
          <div className="muted" style={{fontSize:13.5, lineHeight:1.6}}>
            <b>W środku:</b> 28-stronicowy PDF z teorią i ćwiczeniami · 4 nagrania audio (3–8 min każde) do natychmiastowego użycia · pakiet print do powieszenia nad biurkiem.
          </div>
          <div style={{marginTop:20, padding:16, background:`color-mix(in oklab, var(--hue-rose) 12%, var(--bg-elev))`, borderRadius:'var(--r-2)', filter: bought?'none':'blur(4px)', userSelect: bought?'auto':'none', position:'relative'}}>
            <div className="section-eyebrow">Pełna treść posta</div>
            <div style={{fontFamily:'var(--font-serif)', fontSize:15, lineHeight:1.65, marginTop:10}}>
              Pierwsza technika to oddech 4-7-8. Wdech nosem przez 4, zatrzymanie 7, wydech ustami przez 8. Dlaczego działa? Dwutlenek węgla rośnie podczas zatrzymania, układ przywspółczulny włącza się…
            </div>
          </div>

          {bought ? (
            <div className="row gap-12 mt-20" style={{padding:14, background:'color-mix(in oklab, var(--hue-sage) 18%, var(--bg-elev))', borderRadius:'var(--r-2)'}}>
              <I name="Sparkle" size={18}/>
              <div style={{flex:1, fontSize:13}}>Zakup potwierdzony. Materiały dostępne w <b>Twojej Bibliotece → Zakupy</b>.</div>
              <button className="btn btn-soft btn-sm">Pobierz PDF</button>
            </div>
          ) : (
            <div className="row mt-20" style={{padding:18, border:'2px solid var(--ink-1)', borderRadius:'var(--r-2)', justifyContent:'space-between', alignItems:'center', flexWrap:'wrap', gap:12}}>
              <div>
                <div style={{fontSize:11, color:'var(--ink-3)', textTransform:'uppercase', letterSpacing:'.08em', fontWeight:600}}>Cena jednorazowa</div>
                <div style={{fontFamily:'var(--font-serif)', fontSize:32, fontWeight:500, marginTop:2}}>49 zł</div>
                <div className="muted" style={{fontSize:11.5}}>Dostęp na zawsze · faktura VAT</div>
              </div>
              <button className="btn btn-primary" style={{background:'#635bff', fontSize:14}} onClick={()=>setShowCheckout(true)}>Odblokuj — Stripe Checkout</button>
            </div>
          )}
        </div>
      </div>

      {showCheckout && (
        <Modal title="Stripe Checkout" onClose={()=>setShowCheckout(false)} footer={
          <>
            <button className="btn btn-ghost" onClick={()=>setShowCheckout(false)}>Anuluj</button>
            <button className="btn btn-primary" style={{background:'#635bff'}} onClick={()=>{setBought(true); setShowCheckout(false);}}>Zapłać 49 zł</button>
          </>
        }>
          <div className="row gap-8 mb-16" style={{padding:12, background:'var(--bg-soft)', borderRadius:'var(--r-2)'}}>
            <div style={{width:32, height:32, borderRadius:6, background:'#635bff', display:'grid', placeItems:'center', color:'white', fontWeight:700, fontSize:13}}>S</div>
            <div style={{flex:1, fontSize:12}}>
              <b>Płatność zabezpieczona przez Stripe.</b> BeHueman nie widzi Twoich danych karty.
            </div>
          </div>
          <div className="form-group">
            <div className="form-label">Email</div>
            <input className="input" defaultValue="anna.h@example.com"/>
          </div>
          <div className="form-group">
            <div className="form-label">Numer karty</div>
            <input className="input" placeholder="1234 1234 1234 1234" style={{fontFamily:'var(--font-mono)'}}/>
          </div>
          <div style={{display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:12}}>
            <div className="form-group">
              <div className="form-label">MM / RR</div>
              <input className="input" placeholder="12/28"/>
            </div>
            <div className="form-group">
              <div className="form-label">CVC</div>
              <input className="input" placeholder="123"/>
            </div>
            <div className="form-group">
              <div className="form-label">Kod pocztowy</div>
              <input className="input" placeholder="00-000"/>
            </div>
          </div>
          <div className="row" style={{padding:'10px 0', justifyContent:'space-between', borderTop:'1px solid var(--line)', marginTop:8}}>
            <span style={{fontSize:13}}>Do zapłaty</span>
            <span style={{fontFamily:'var(--font-serif)', fontSize:22, fontWeight:600}}>49,00 zł</span>
          </div>
        </Modal>
      )}
    </div>
  );
};

// ======================================================
// EVENT BOOKING (calendar slot)
// ======================================================
GL.EventBooking = function EventBooking({ phase }) {
  const [day, setDay] = useState(12);
  const [slot, setSlot] = useState(null);
  const days = Array.from({length:14}, (_,i) => i+8);
  const slots = ['09:00','10:30','12:00','13:30','15:00','16:30','18:00','19:30'];
  const taken = ['10:30','15:00','18:00'];
  return (
    <div className="page" style={{maxWidth:1100}}>
      <PageHeader
        eyebrow="Rezerwacja"
        title="Sesja indywidualna · Studio Mokshana"
        subtitle="System rezerwacji z kalendarzem dostępności partnera. Slot na konkretną godzinę, płatność przy rezerwacji, blokada terminu."
        ff="GL"
      />

      <div style={{display:'grid', gridTemplateColumns:'1fr 320px', gap:24}}>
        <div className="card" style={{padding:24}}>
          <div className="section-eyebrow">Wybierz dzień</div>
          <div className="row gap-8 mt-12 mb-24" style={{flexWrap:'wrap'}}>
            {days.map(d => {
              const date = new Date(2026, 4, d);
              const isWeekend = [0,6].includes(date.getDay());
              const isPast = d < 8;
              const isActive = day === d;
              return (
                <button key={d} onClick={()=>!isPast && setDay(d)} disabled={isPast} style={{
                  width:54, padding:'10px 6px', textAlign:'center', cursor: isPast?'not-allowed':'pointer',
                  border: isActive?'2px solid var(--ink-1)':'1px solid var(--line)',
                  borderRadius:'var(--r-2)',
                  background: isActive?'var(--ink-1)':'var(--bg-elev)',
                  color: isActive?'var(--bg-elev)':'var(--ink-1)',
                  opacity: isPast?0.3:1,
                }}>
                  <div style={{fontSize:10, opacity:0.7, fontWeight:600}}>{['nd','pn','wt','śr','cz','pt','sb'][date.getDay()]}</div>
                  <div style={{fontFamily:'var(--font-serif)', fontSize:18, fontWeight:500, marginTop:2}}>{d}</div>
                </button>
              );
            })}
          </div>
          <div className="section-eyebrow">Dostępne sloty — {day} maja 2026</div>
          <div style={{display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:10, marginTop:12}}>
            {slots.map(s => {
              const isTaken = taken.includes(s);
              const isActive = slot === s;
              return (
                <button key={s} onClick={()=>!isTaken && setSlot(s)} disabled={isTaken} style={{
                  padding:'12px 6px', textAlign:'center', cursor:isTaken?'not-allowed':'pointer',
                  border: isActive?'2px solid var(--ink-1)':'1px solid var(--line)',
                  borderRadius:'var(--r-2)',
                  background: isActive?'var(--hue-amber)':isTaken?'var(--bg-soft)':'var(--bg-elev)',
                  textDecoration: isTaken?'line-through':'none',
                  color: isTaken?'var(--ink-4)':'var(--ink-1)',
                  fontSize:14, fontWeight:600,
                }}>
                  {s}
                  {isTaken && <div style={{fontSize:10, fontWeight:500, marginTop:2}}>zajęte</div>}
                </button>
              );
            })}
          </div>
        </div>

        <div className="card" style={{padding:20, alignSelf:'start'}}>
          <div className="section-eyebrow">Twoja rezerwacja</div>
          <div className="col gap-12 mt-12" style={{paddingBottom:14, borderBottom:'1px solid var(--line)'}}>
            <div className="row gap-8"><I name="Calendar" size={14}/><span style={{fontSize:13.5}}>{day} maja 2026, {slot || '—'}</span></div>
            <div className="row gap-8"><I name="MapPin" size={14}/><span style={{fontSize:13.5}}>Studio Mokshana, Warszawa</span></div>
            <div className="row gap-8"><I name="Education" size={14}/><span style={{fontSize:13.5}}>Sesja indywidualna · 60 min</span></div>
          </div>
          <div className="row mt-12" style={{justifyContent:'space-between'}}>
            <span style={{fontSize:13}}>Cena</span>
            <span style={{fontFamily:'var(--font-serif)', fontSize:24, fontWeight:600}}>180 zł</span>
          </div>
          <div className="muted mt-4" style={{fontSize:11.5, lineHeight:1.5}}>Po zapłaceniu termin jest zablokowany. Anulowanie do 24h przed sesją bez opłat.</div>
          <button className="btn btn-primary" disabled={!slot} style={{width:'100%', marginTop:14, background:'#635bff', opacity: slot?1:0.4}}>
            {slot ? 'Zarezerwuj — Stripe Checkout' : 'Wybierz godzinę'}
          </button>
        </div>
      </div>
    </div>
  );
};

// ======================================================
// SPONSORED POST + TRANSLATION DEMO
// ======================================================
GL.FeedExtras = function FeedExtras({ phase }) {
  const [translated, setTranslated] = useState(false);
  const sponsorAuthor = AppData.getAuthor('mokshana');
  const transAuthor = AppData.getAuthor('mdebski');
  return (
    <div className="page">
      <PageHeader
        eyebrow="Społeczność · funkcje GL"
        title="Sponsored posts + tłumaczenie w locie"
        subtitle="Po Go-Live feed pokazuje też posty sponsorowane (zawsze oznaczone) i przycisk auto-tłumaczenia treści w innym języku przez Google Translation API."
        ff="GL"
      />

      <div style={{maxWidth:680}}>
        {/* Sponsored post */}
        <div className="card" style={{padding:22, marginBottom:18, position:'relative', overflow:'hidden'}}>
          <div style={{position:'absolute', top:0, left:0, right:0, height:4, background:'linear-gradient(90deg, var(--hue-amber), var(--accent))'}}/>
          <div className="row gap-8 mb-12">
            <Avatar author={sponsorAuthor} size={36}/>
            <div style={{flex:1}}>
              <div className="row gap-4"><span style={{fontSize:13, fontWeight:600}}>{sponsorAuthor.name}</span>{sponsorAuthor.verified && <VerifiedBadge/>}</div>
              <div className="muted" style={{fontSize:11.5}}>@{sponsorAuthor.handle} · post sponsorowany</div>
            </div>
            <span className="chip" style={{fontSize:10, background:'color-mix(in oklab, var(--hue-amber) 30%, var(--bg-elev))', fontWeight:700}}>
              <I name="Sparkle" size={11}/> SPONSOROWANY
            </span>
          </div>
          <div style={{fontFamily:'var(--font-serif)', fontSize:20, fontWeight:500, lineHeight:1.35, marginBottom:12}}>
            Otwieramy zapisy na cykl wiosenny. 12 tygodni jogi i medytacji online — z osobistym mentorem.
          </div>
          <div style={{height:160, background:'linear-gradient(135deg, #E8B872, #94463F)', borderRadius:'var(--r-2)', marginBottom:12}}/>
          <div className="row" style={{justifyContent:'space-between', alignItems:'center', borderTop:'1px solid var(--line-soft)', paddingTop:12}}>
            <span className="muted" style={{fontSize:11.5}}>Każdy może wyłączyć sponsorowane posty w Ustawieniach.</span>
            <button className="btn btn-accent btn-sm">Sprawdź ofertę</button>
          </div>
        </div>

        {/* Translation post */}
        <div className="card" style={{padding:22}}>
          <div className="row gap-8 mb-12">
            <Avatar author={transAuthor} size={36}/>
            <div style={{flex:1}}>
              <div className="row gap-4"><span style={{fontSize:13, fontWeight:600}}>{transAuthor.name}</span>{transAuthor.verified && <VerifiedBadge/>}</div>
              <div className="muted" style={{fontSize:11.5}}>@{transAuthor.handle} · 4 godz. · pisze po angielsku</div>
            </div>
            <span className="chip" style={{fontSize:10.5}}>EN</span>
          </div>
          {!translated ? (
            <div style={{fontFamily:'var(--font-serif)', fontSize:17, fontWeight:500, lineHeight:1.55, marginBottom:14}}>
              The body remembers things the mind would rather forget. We don't notice until it knocks back, often through symptoms we mistake for unrelated. The first work, then, is listening — not analyzing.
            </div>
          ) : (
            <div style={{fontFamily:'var(--font-serif)', fontSize:17, fontWeight:500, lineHeight:1.55, marginBottom:14}}>
              Ciało pamięta to, o czym umysł wolałby zapomnieć. Nie zauważamy tego, dopóki nie zacznie pukać z powrotem — często poprzez objawy, które bierzemy za niepowiązane. Pierwszą pracą jest więc słuchanie, nie analizowanie.
            </div>
          )}
          {translated && (
            <div className="muted mb-12" style={{fontSize:11, fontStyle:'italic'}}>
              Przetłumaczone automatycznie z angielskiego · Google Translate
            </div>
          )}
          <div className="row" style={{justifyContent:'space-between', alignItems:'center', borderTop:'1px solid var(--line-soft)', paddingTop:12}}>
            <button className="btn btn-soft btn-sm" onClick={()=>setTranslated(t=>!t)}>
              <I name="Globe" size={13}/> {translated ? 'Pokaż oryginał' : 'Przetłumacz na polski'}
            </button>
            <div className="row gap-12" style={{fontSize:12.5, color:'var(--ink-3)'}}>
              <span><I name="Heart" size={13}/> 248</span>
              <span><I name="MessageSquare" size={13}/> 47</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

// ======================================================
// REELS (on profile only)
// ======================================================
GL.Reels = function Reels({ phase }) {
  const reels = [
    { id:1, title:'Oddech 4-7-8 w 30 sekund', authorId:'hannaw', views:'12,4 tys.', dur:'0:32', hue:'rose' },
    { id:2, title:'Co robić, gdy budzisz się o 3 rano', authorId:'hannaw', views:'8,9 tys.', dur:'0:48', hue:'amber' },
    { id:3, title:'Jeden oddech — najprostsza praktyka', authorId:'hannaw', views:'6,2 tys.', dur:'0:22', hue:'sage' },
    { id:4, title:'Jak wraca panika — i jak nie panikować', authorId:'hannaw', views:'5,7 tys.', dur:'1:04', hue:'sky' },
    { id:5, title:'Trzy techniki na biuro', authorId:'hannaw', views:'4,1 tys.', dur:'0:54', hue:'violet' },
    { id:6, title:'Co mówi ciało, gdy umysł milczy', authorId:'hannaw', views:'3,8 tys.', dur:'0:38', hue:'rose' },
  ];
  return (
    <div className="page">
      <PageHeader
        eyebrow="Profil autora · Hanna Wójcik"
        title="Reels"
        subtitle='Krótkie wideo dostępne tylko na profilu autora — nie ma globalnego feedu Reels (świadoma decyzja, by nie generować "scrollu bez końca").'
        ff="GL"
      />
      <div style={{display:'grid', gridTemplateColumns:'repeat(auto-fill, minmax(180px, 1fr))', gap:16}}>
        {reels.map(r => (
          <div key={r.id} className="card" style={{padding:0, overflow:'hidden', cursor:'pointer'}}>
            <div style={{aspectRatio:'9/16', background:`linear-gradient(160deg, var(--hue-${r.hue}), color-mix(in oklab, var(--hue-${r.hue}) 50%, var(--ink-1)))`, position:'relative'}}>
              <div style={{position:'absolute', top:8, right:8, background:'rgba(31,27,22,.7)', color:'var(--bg-elev)', padding:'2px 8px', borderRadius:'var(--r-pill)', fontSize:10.5, fontWeight:600}}>{r.dur}</div>
              <div style={{position:'absolute', inset:0, display:'grid', placeItems:'center'}}>
                <div style={{width:48, height:48, borderRadius:'50%', background:'rgba(251,248,241,.25)', backdropFilter:'blur(6px)', display:'grid', placeItems:'center'}}>
                  <div style={{width:0, height:0, borderLeft:'14px solid white', borderTop:'9px solid transparent', borderBottom:'9px solid transparent', marginLeft:4}}/>
                </div>
              </div>
              <div style={{position:'absolute', bottom:0, left:0, right:0, padding:12, background:'linear-gradient(to top, rgba(31,27,22,.85), transparent)'}}>
                <div style={{fontSize:12.5, fontWeight:600, color:'rgba(251,248,241,.95)', lineHeight:1.3}}>{r.title}</div>
                <div style={{fontSize:10.5, color:'rgba(251,248,241,.7)', marginTop:4}}>{r.views} obejrzeń</div>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

window.GLScreens = GL;