// BeHueman — Detail screens part 4: Author Panel (post editor + planning + cross-posting + digital products), Partner Panel (services + bookings calendar)
const Detail4 = {};

// ================ AUTHOR PANEL — full ================
Detail4.AuthorPanelFull = function AuthorPanelFull({ phase }) {
  const [tab, setTab] = useState('overview');
  const [showEditor, setShowEditor] = useState(false);
  const [showProduct, setShowProduct] = useState(false);

  const tabs = [
    ['overview','Przegląd'],
    ['posts','Posty'],
    ['schedule','Harmonogram'],
    ['products','Produkty cyfrowe', phase === 'GL'],
    ['stats','Statystyki'],
    ['audience','Widownia'],
  ].filter(t => t[2] !== false);

  return (
    <div className="page">
      <PageHeader
        eyebrow="Panel Autora"
        title={<>Statystyki <span style={{fontStyle:'italic'}}>i strategia</span></>}
        subtitle="Twoje treści, Twoja widownia, Twój rozwój. Bez gier o zasięgi — z transparentnymi liczbami."
        ff="FF2"
        action={
          <div className="row gap-8">
            <button className="btn btn-ghost" onClick={()=>setShowEditor(true)}><I name="Plus" size={14}/> Nowy post</button>
            {phase === 'GL' && <button className="btn btn-accent" onClick={()=>setShowProduct(true)}><I name="Plus" size={14}/> Nowy produkt</button>}
          </div>
        }
      />
      <div className="tabs">
        {tabs.map(([k,l]) => (
          <button key={k} className={`tab ${tab===k?'active':''}`} onClick={()=>setTab(k)}>{l}</button>
        ))}
      </div>

      {tab === 'overview' && (
        <>
          <div style={{display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:16, marginBottom:24}}>
            {[
              ['Wyświetlenia (30 dni)', '24 891', '+18%', true],
              ['Obserwujący', '1 248', '+34', true],
              ['Zaangażowanie', '6.4%', '+0.8%', true],
              ['Przychody (30 dni)', phase === 'GL' ? '3 240 zł' : '— zł', phase === 'GL' ? '+22%' : 'Po Go-Live', phase === 'GL'],
            ].map(([l,v,d,up],i) => (
              <div key={i} className="stat">
                <div className="stat-label">{l}</div>
                <div className="stat-value">{v}</div>
                <div className={`stat-delta ${up?'up':''}`}>{d}</div>
              </div>
            ))}
          </div>
          <div style={{display:'grid', gridTemplateColumns:'2fr 1fr', gap:16}}>
            <div className="card" style={{padding:20}}>
              <div className="row" style={{justifyContent:'space-between', marginBottom:16}}>
                <div className="section-title">Wyświetlenia w czasie</div>
                <select className="select" style={{maxWidth:140, fontSize:12}}><option>30 dni</option><option>90 dni</option></select>
              </div>
              <svg width="100%" height="240" viewBox="0 0 600 240" style={{display:'block'}}>
                <defs>
                  <linearGradient id="g1auth" x1="0" y1="0" x2="0" y2="1">
                    <stop offset="0" stopColor="#C8553D" stopOpacity="0.25"/>
                    <stop offset="1" stopColor="#C8553D" stopOpacity="0"/>
                  </linearGradient>
                </defs>
                {[40,80,120,160,200].map(y => (
                  <line key={y} x1="0" y1={y} x2="600" y2={y} stroke="#E5DFD3"/>
                ))}
                <path d="M0,180 L40,170 L80,150 L120,160 L160,140 L200,120 L240,135 L280,100 L320,90 L360,110 L400,80 L440,70 L480,90 L520,60 L560,40 L600,55 L600,240 L0,240 Z" fill="url(#g1auth)"/>
                <path d="M0,180 L40,170 L80,150 L120,160 L160,140 L200,120 L240,135 L280,100 L320,90 L360,110 L400,80 L440,70 L480,90 L520,60 L560,40 L600,55" fill="none" stroke="#C8553D" strokeWidth="2"/>
              </svg>
              <div className="row" style={{justifyContent:'space-between', fontSize:11, color:'var(--ink-3)', marginTop:8}}>
                {['1 kwi','7 kwi','14 kwi','21 kwi','28 kwi'].map(d => <span key={d}>{d}</span>)}
              </div>
            </div>
            <div className="card" style={{padding:20}}>
              <div className="section-title mb-16">Top posty (30 dni)</div>
              {posts.slice(0,4).map((p,i) => (
                <div key={p.id} style={{padding:'10px 0', borderTop: i?'1px solid var(--line-soft)':''}}>
                  <div style={{fontSize:12.5, fontWeight:600, lineHeight:1.4, display:'-webkit-box', WebkitLineClamp:2, WebkitBoxOrient:'vertical', overflow:'hidden', marginBottom:6}}>{p.body.slice(0,80)}</div>
                  <div style={{display:'flex', gap:14, fontSize:11.5, color:'var(--ink-3)'}}>
                    <span><I name="Eye" size={11}/> {(4 - i*0.4).toFixed(1)}k</span>
                    <span>❤ {p.likes}</span>
                    <span>💬 {p.comments}</span>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </>
      )}

      {tab === 'posts' && (
        <div className="card">
          <div style={{padding:'14px 18px', borderBottom:'1px solid var(--line)', display:'flex', gap:12, alignItems:'center'}}>
            <input className="input" placeholder="Szukaj postów..." style={{maxWidth:280}}/>
            <select className="select" style={{maxWidth:160, fontSize:12}}>
              <option>Wszystkie</option><option>Opublikowane</option><option>Szkice</option><option>Zaplanowane</option>
            </select>
            <span className="muted" style={{marginLeft:'auto', fontSize:12}}>{posts.length} pozycji</span>
          </div>
          {posts.map((p,i) => {
            const status = i === 0 ? 'Zaplanowany · pt 17:00' : i === 1 ? 'Szkic' : 'Opublikowany';
            const statusColor = i === 0 ? 'var(--hue-amber)' : i === 1 ? 'var(--ink-3)' : 'var(--hue-sage)';
            return (
              <div key={p.id} className="row" style={{padding:'16px 20px', borderTop: '1px solid var(--line-soft)', gap:16}}>
                <div style={{flex:1, minWidth:0}}>
                  <div className="row gap-8 mb-8">
                    <span style={{fontSize:11, fontWeight:600, color: statusColor, textTransform:'uppercase', letterSpacing:'.06em'}}>● {status}</span>
                    <DomainChip domainId={p.domain}/>
                  </div>
                  <div style={{fontSize:13.5, lineHeight:1.5, display:'-webkit-box', WebkitLineClamp:2, WebkitBoxOrient:'vertical', overflow:'hidden'}}>{p.body}</div>
                  <div className="row gap-12 mt-8" style={{fontSize:11.5, color:'var(--ink-3)'}}>
                    <span>{p.time}</span>
                    {i > 1 && <>
                      <span><I name="Eye" size={11}/> {1400 + i*230}</span>
                      <span>❤ {p.likes}</span>
                      <span>💬 {p.comments}</span>
                    </>}
                  </div>
                </div>
                <div className="row gap-4">
                  <button className="btn btn-soft btn-sm" onClick={()=>setShowEditor(true)}>Edytuj</button>
                  <button className="btn btn-ghost btn-sm">Duplikuj</button>
                  <button className="icon-btn"><I name="More" size={14}/></button>
                </div>
              </div>
            );
          })}
        </div>
      )}

      {tab === 'schedule' && <AuthorScheduleCalendar onNew={()=>setShowEditor(true)}/>}

      {tab === 'products' && phase === 'GL' && <AuthorProductsTab onNew={()=>setShowProduct(true)}/>}

      {tab === 'stats' && (
        <div className="card" style={{padding:20}}>
          <div className="row gap-12 mb-16">
            <select className="select" style={{maxWidth:160}}><option>Ostatnie 30 dni</option><option>90 dni</option></select>
            <select className="select" style={{maxWidth:200}}><option>Wszystkie kategorie</option></select>
          </div>
          <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:24}}>
            <div>
              <div className="section-eyebrow mb-8">Zasięg per dziedzina</div>
              {domains.map((d,idx) => (
                <div key={d.id} className="row gap-12" style={{padding:'8px 0'}}>
                  <span className={`chip chip-hue-${d.hue}`} style={{minWidth:80, justifyContent:'center'}}>{d.label}</span>
                  <div style={{flex:1, height:6, background:'var(--line-soft)', borderRadius:3, overflow:'hidden'}}>
                    <div style={{width: `${[60,80,30,50][idx]}%`, height:'100%', background:`var(--hue-${d.hue})`}}/>
                  </div>
                  <span style={{fontSize:12, fontWeight:600, minWidth:50, textAlign:'right'}}>{[14820, 19400, 7200, 12100][idx].toLocaleString('pl-PL')}</span>
                </div>
              ))}
            </div>
            <div>
              <div className="section-eyebrow mb-8">Aktywność obserwujących wg dnia</div>
              <svg width="100%" height="160" viewBox="0 0 300 160">
                {[1,2,3,4,5,6,7].map((d,i) => (
                  <Fragment key={d}>
                    <rect x={i*40+10} y={160 - [80,120,60,90,140,100,70][i]} width="28" height={[80,120,60,90,140,100,70][i]} fill="var(--accent)" opacity="0.7" rx="2"/>
                    <text x={i*40+24} y="155" fontSize="10" fill="var(--ink-3)" textAnchor="middle">{['pn','wt','śr','cz','pt','sb','nd'][i]}</text>
                  </Fragment>
                ))}
              </svg>
            </div>
          </div>
        </div>
      )}

      {tab === 'audience' && <AuthorAudienceTab/>}

      {showEditor && <PostEditorModal phase={phase} onClose={()=>setShowEditor(false)}/>}
      {showProduct && <ProductEditorModal onClose={()=>setShowProduct(false)}/>}
    </div>
  );
};

// ---------- Author Schedule (calendar with drag-and-drop feel) ----------
function AuthorScheduleCalendar({ onNew }) {
  const [view, setView] = useState('month');
  const [month, setMonth] = useState('Maj 2026');
  // Sample scheduled items per day (1-31)
  const items = {
    3:  [{ kind:'post', text:'Post: Oddech 4-7-8', time:'9:00', status:'published' }],
    7:  [{ kind:'post', text:'Polecajka: Estés', time:'9:00', status:'scheduled' }],
    9:  [{ kind:'reel', text:'Reel: Pranayama 3 min', time:'18:00', status:'scheduled' }],
    10: [{ kind:'newsletter', text:'Newsletter majowy', time:'12:00', status:'scheduled' }],
    14: [{ kind:'live', text:'Live Q&A', time:'18:00', status:'scheduled' }, { kind:'post', text:'TCM (szkic)', time:'—', status:'draft' }],
    16: [{ kind:'post', text:'Cross-post: IG + FB', time:'10:30', status:'scheduled' }],
    21: [{ kind:'post', text:'Poranne ćwicz.', time:'7:00', status:'scheduled' }],
    23: [{ kind:'event', text:'Warsztat: oddech', time:'17:00', status:'scheduled' }],
    28: [{ kind:'post', text:'Q1 podsumowanie', time:'12:00', status:'draft' }],
  };
  const statusColor = { published:'#9FB89A', scheduled:'#E8B872', draft:'#B9B0A0', live:'#C8553D' };
  const kindIcon = { post:'📝', reel:'🎬', live:'🔴', newsletter:'✉', event:'📅' };

  return (
    <div>
      <div className="card" style={{padding:18, marginBottom:16}}>
        <div className="row" style={{justifyContent:'space-between', alignItems:'center'}}>
          <div className="row gap-12">
            <button className="icon-btn" style={{transform:'rotate(180deg)'}}><I name="Chevron" size={14}/></button>
            <div style={{fontFamily:'var(--font-serif)', fontSize:22, fontWeight:500}}>{month}</div>
            <button className="icon-btn"><I name="Chevron" size={14}/></button>
          </div>
          <div className="row gap-8">
            <div className="row gap-2" style={{background:'var(--bg-soft)', borderRadius:'var(--r-2)', padding:2}}>
              {[['month','Miesiąc'],['week','Tydzień'],['list','Lista']].map(([k,l]) => (
                <button key={k} onClick={()=>setView(k)} className="btn btn-sm" style={{background:view===k?'var(--bg-elev)':'transparent', border:view===k?'1px solid var(--line)':'1px solid transparent', boxShadow:view===k?'var(--sh-1)':'none'}}>{l}</button>
              ))}
            </div>
            <button className="btn btn-accent" onClick={onNew}><I name="Plus" size={14}/> Zaplanuj</button>
          </div>
        </div>
        <div className="row gap-16 mt-12" style={{fontSize:11.5, color:'var(--ink-3)'}}>
          {[['Opublikowane', statusColor.published], ['Zaplanowane', statusColor.scheduled], ['Szkice', statusColor.draft], ['Live', statusColor.live]].map(([l,c]) => (
            <span key={l} className="row gap-4"><span style={{width:8, height:8, borderRadius:2, background:c}}/> {l}</span>
          ))}
        </div>
      </div>

      {view === 'month' && (
        <div className="card" style={{padding:0, overflow:'hidden'}}>
          <div className="calendar">
            {['Pn','Wt','Śr','Cz','Pt','Sb','Nd'].map(d => (
              <div key={d} style={{background:'var(--bg-soft)', padding:'8px', fontSize:11, fontWeight:600, textTransform:'uppercase', color:'var(--ink-3)', textAlign:'center', minHeight:'auto'}}>{d}</div>
            ))}
            {Array.from({length:35}).map((_,i) => {
              const day = i - 2;
              const outside = day < 1 || day > 31;
              const evs = items[day] || [];
              return (
                <div key={i} className={`cal-day ${outside?'outside':''} ${day===14?'today':''}`} style={{minHeight:108, cursor: outside?'default':'pointer'}}>
                  <div className="cal-day-num" style={{display:'flex', justifyContent:'space-between', alignItems:'center'}}>
                    <span>{outside ? '' : day}</span>
                    {!outside && evs.length === 0 && <button className="icon-btn" style={{width:18, height:18, opacity:0.5}} onClick={onNew}><I name="Plus" size={11}/></button>}
                  </div>
                  {evs.map((e,j) => (
                    <div key={j} style={{
                      fontSize:10.5, padding:'3px 6px', marginBottom:3, borderRadius:4,
                      background: e.status === 'draft' ? 'var(--bg-soft)' : `color-mix(in oklab, ${statusColor[e.status]} 22%, var(--bg-elev))`,
                      borderLeft: `2px solid ${statusColor[e.status]}`,
                      whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis',
                      fontWeight: 500,
                    }}>
                      <span style={{marginRight:3}}>{kindIcon[e.kind]}</span>{e.time !== '—' && <span style={{fontWeight:600}}>{e.time}</span>} {e.text}
                    </div>
                  ))}
                </div>
              );
            })}
          </div>
        </div>
      )}

      {view === 'week' && (
        <div className="card" style={{padding:0, overflow:'hidden'}}>
          <div style={{display:'grid', gridTemplateColumns:'60px repeat(7,1fr)', gap:1, background:'var(--line)'}}>
            <div style={{background:'var(--bg-soft)', padding:'8px', fontSize:10}}/>
            {['Pn 12','Wt 13','Śr 14','Cz 15','Pt 16','Sb 17','Nd 18'].map(d => (
              <div key={d} style={{background:'var(--bg-soft)', padding:'10px 8px', fontSize:11.5, fontWeight:600, textAlign:'center'}}>{d}</div>
            ))}
            {[7,8,9,10,11,12,13,14,15,16,17,18,19,20].map(h => (
              <Fragment key={h}>
                <div style={{background:'var(--bg-elev)', padding:'8px', fontSize:10, color:'var(--ink-3)', textAlign:'right'}}>{h}:00</div>
                {[0,1,2,3,4,5,6].map(d => {
                  const isLive = d === 2 && h === 18; // Wed 14 18:00
                  const isPost = d === 4 && h === 10; // Fri 16 10:30
                  return (
                    <div key={d} style={{background:'var(--bg-elev)', minHeight:32, padding:2, position:'relative'}}>
                      {isLive && <div style={{background:'color-mix(in oklab, var(--accent) 22%, var(--bg-elev))', borderLeft:'3px solid var(--accent)', padding:'4px 6px', fontSize:10.5, borderRadius:3, fontWeight:600}}>🔴 Live Q&A</div>}
                      {isPost && <div style={{background:'color-mix(in oklab, var(--hue-amber) 22%, var(--bg-elev))', borderLeft:'3px solid var(--hue-amber)', padding:'4px 6px', fontSize:10.5, borderRadius:3, fontWeight:600}}>📝 Cross-post IG+FB</div>}
                    </div>
                  );
                })}
              </Fragment>
            ))}
          </div>
        </div>
      )}

      {view === 'list' && (
        <div className="card">
          {Object.entries(items).flatMap(([day, arr]) => arr.map((e,j) => ({ ...e, day, key:day+'-'+j }))).map((e,i,arr) => (
            <div key={e.key} className="row" style={{padding:'14px 18px', borderTop:i?'1px solid var(--line-soft)':'', gap:16, alignItems:'center'}}>
              <div style={{width:60, textAlign:'center'}}>
                <div style={{fontFamily:'var(--font-serif)', fontSize:22, fontWeight:500}}>{e.day}</div>
                <div style={{fontSize:10, color:'var(--ink-3)', textTransform:'uppercase'}}>maj</div>
              </div>
              <div style={{width:64, textAlign:'left'}}>
                <div style={{fontSize:13, fontWeight:600}}>{e.time}</div>
                <div className="row gap-4" style={{fontSize:10.5, color:'var(--ink-3)'}}>
                  <span style={{width:6, height:6, borderRadius:2, background:statusColor[e.status]}}/>
                  {e.status === 'draft' ? 'szkic' : e.status === 'scheduled' ? 'plan' : e.status === 'published' ? 'publ.' : 'live'}
                </div>
              </div>
              <div style={{flex:1}}>
                <div className="row gap-8">
                  <span style={{fontSize:14}}>{kindIcon[e.kind]}</span>
                  <span style={{fontWeight:600}}>{e.text}</span>
                </div>
                <div className="muted mt-8" style={{fontSize:11.5}}>{e.kind === 'post' ? 'Społeczność + 3 platformy zewn.' : e.kind === 'reel' ? 'Reel · 23 sek' : e.kind === 'live' ? 'Live · max 200 osób' : e.kind === 'newsletter' ? 'Mailing → 248 zapisanych' : 'Wydarzenie + post'}</div>
              </div>
              <button className="btn btn-soft btn-sm">Edytuj</button>
              <button className="icon-btn"><I name="More" size={14}/></button>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

// ---------- Author Audience tab ----------
function AuthorAudienceTab() {
  const [tab, setTab] = useState('demo');
  return (
    <div>
      <div className="row gap-8 mb-24" style={{flexWrap:'wrap'}}>
        {[['demo','Demografia'],['interests','Zainteresowania'],['retention','Retencja'],['top','Top obserwujący']].map(([k,l]) => (
          <button key={k} className={`chip ${tab===k?'active':''}`} onClick={()=>setTab(k)}>{l}</button>
        ))}
      </div>
      {tab === 'demo' && (
        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:16}}>
          <div className="card" style={{padding:20}}>
            <div className="section-title mb-16">Wiek</div>
            {[['18-24', 12],['25-34', 38],['35-44', 31],['45-54', 14],['55+', 5]].map(([l,v]) => (
              <div key={l} className="row gap-12" style={{padding:'8px 0'}}>
                <span style={{minWidth:50, fontSize:12, fontWeight:600}}>{l}</span>
                <div style={{flex:1, height:6, background:'var(--line-soft)', borderRadius:3, overflow:'hidden'}}>
                  <div style={{width:`${v}%`, height:'100%', background:'var(--accent)'}}/>
                </div>
                <span style={{fontSize:12, color:'var(--ink-3)', minWidth:34, textAlign:'right'}}>{v}%</span>
              </div>
            ))}
          </div>
          <div className="card" style={{padding:20}}>
            <div className="section-title mb-16">Lokalizacja</div>
            {[['Warszawa', 24],['Kraków', 18],['Trójmiasto', 12],['Wrocław', 9],['Poznań', 8],['Inne miasta', 22],['Zagranica (PL)', 7]].map(([l,v]) => (
              <div key={l} className="row gap-12" style={{padding:'8px 0'}}>
                <span style={{minWidth:120, fontSize:12, fontWeight:600}}>{l}</span>
                <div style={{flex:1, height:6, background:'var(--line-soft)', borderRadius:3, overflow:'hidden'}}>
                  <div style={{width:`${v*3}%`, height:'100%', background:'var(--hue-sky)'}}/>
                </div>
                <span style={{fontSize:12, color:'var(--ink-3)', minWidth:34, textAlign:'right'}}>{v}%</span>
              </div>
            ))}
          </div>
        </div>
      )}
      {tab === 'interests' && (
        <div className="card" style={{padding:20}}>
          <div className="section-title mb-16">Co jeszcze obserwują Twoi obserwujący</div>
          <div className="row gap-8" style={{flexWrap:'wrap'}}>
            {['Joga', 'Oddech', 'Medytacja', 'Permakultura', 'Świadome rodzicielstwo', 'Tarot', 'Ajurweda', 'Praca z ciałem', 'Pisanie ekspresyjne', 'Zioła', 'Książki', 'Retreaty', 'Cisza', 'Sen'].map((t,i) => (
              <span key={t} className="chip" style={{padding:`${4 + (14-i)/3}px ${10 + (14-i)/2}px`, fontSize: 11 + (14-i)/4, opacity: 0.5 + (14-i)/30}}>{t}</span>
            ))}
          </div>
        </div>
      )}
      {tab === 'retention' && (
        <div className="card" style={{padding:20}}>
          <div className="section-title mb-16">Krzywa retencji obserwujących</div>
          <svg width="100%" height="200" viewBox="0 0 600 200">
            {[40,80,120,160].map(y => <line key={y} x1="0" y1={y} x2="600" y2={y} stroke="#E5DFD3"/>)}
            <path d="M0,30 L60,40 L120,55 L180,70 L240,85 L300,98 L360,108 L420,115 L480,120 L540,124 L600,127" fill="none" stroke="#9FB89A" strokeWidth="2"/>
            <path d="M0,30 L60,55 L120,80 L180,100 L240,118 L300,130 L360,140 L420,148 L480,154 L540,158 L600,162" fill="none" stroke="#C8553D" strokeWidth="2" strokeDasharray="3 3"/>
            {['1mc','3mc','6mc','12mc','18mc','24mc'].map((l,i) => (
              <text key={l} x={i*100 + 50} y="195" fontSize="10" fill="var(--ink-3)" textAnchor="middle">{l}</text>
            ))}
          </svg>
          <div className="row gap-16 mt-12" style={{fontSize:12}}>
            <span className="row gap-4"><span style={{width:14, height:2, background:'#9FB89A'}}/> Twoi obserwujący — zostają</span>
            <span className="row gap-4"><span style={{width:14, height:2, background:'#C8553D', borderTop:'2px dashed'}}/> Średnia platformy</span>
          </div>
        </div>
      )}
      {tab === 'top' && (
        <div className="card">
          <div style={{padding:'14px 18px', borderBottom:'1px solid var(--line)', fontSize:12.5, color:'var(--ink-3)'}}>Obserwujący, którzy najczęściej angażują się w Twoje treści. Pomyśl, jak im podziękować.</div>
          {authors.slice(0,6).map((a,i) => (
            <div key={a.id} className="row" style={{padding:'14px 18px', borderTop:'1px solid var(--line-soft)', gap:14}}>
              <div style={{fontFamily:'var(--font-serif)', fontSize:24, color:'var(--ink-4)', minWidth:30}}>{i+1}</div>
              <Avatar author={a} size={40}/>
              <div style={{flex:1}}>
                <div className="row gap-4">
                  <span style={{fontWeight:600}}>{a.name}</span>
                  {a.verified && <VerifiedBadge/>}
                </div>
                <div className="muted" style={{fontSize:12}}>@{a.handle} · {12 - i} interakcji w tym mc · obserwuje od {['lutego','stycznia','grudnia','listopada','września','sierpnia'][i]}</div>
              </div>
              <button className="btn btn-soft btn-sm"><I name="Send" size={13}/> Wyślij wiadomość</button>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

// ---------- Post Editor with cross-posting + scheduling ----------
function PostEditorModal({ phase, onClose }) {
  const [body, setBody] = useState('Nad ranem, kiedy świat jeszcze milczy, oddech ma inną gęstość. Pierwsze trzy oddechy nie mają być głębokie — mają być przytomne...');
  const [tab, setTab] = useState('write');
  const [crossPost, setCrossPost] = useState({ ig: true, fb: false, ln: false, sub: true });
  const [schedule, setSchedule] = useState('now');
  const [domain, setDomain] = useState('cialo');
  const [audience, setAudience] = useState('public');
  const [paidOnly, setPaidOnly] = useState(false);

  return (
    <Modal title="Nowy post" wide onClose={onClose} footer={
      <>
        <button className="btn btn-ghost" onClick={onClose}>Anuluj</button>
        <button className="btn btn-soft">Zapisz szkic</button>
        <button className="btn btn-accent">{schedule === 'now' ? 'Opublikuj' : 'Zaplanuj'}</button>
      </>
    }>
      <div className="tabs" style={{marginBottom:18}}>
        {[['write','Treść'],['settings','Ustawienia'],['cross','Cross-posting'],['schedule','Harmonogram']].map(([k,l]) => (
          <button key={k} className={`tab ${tab===k?'active':''}`} onClick={()=>setTab(k)}>{l}</button>
        ))}
      </div>

      {tab === 'write' && (
        <div>
          <div className="form-group">
            <div className="form-label">Co chcesz powiedzieć?</div>
            <textarea className="textarea" rows={8} value={body} onChange={e=>setBody(e.target.value)}/>
            <div className="row" style={{justifyContent:'space-between', marginTop:6}}>
              <span className="form-help">Tekst sformatowany — boldy, kursywy, cytaty.</span>
              <span style={{fontSize:11, color:body.length > 1800 ? 'var(--accent)' : 'var(--ink-3)'}}>{body.length} znaków</span>
            </div>
          </div>
          <div className="form-group">
            <div className="form-label">Dołącz polecajkę (opcjonalnie)</div>
            <div className="row gap-8">
              <button className="btn btn-soft btn-sm"><I name="Plus" size={13}/> Książka / artykuł</button>
              <button className="btn btn-soft btn-sm"><I name="Plus" size={13}/> Kurs / podcast</button>
              <button className="btn btn-soft btn-sm"><I name="Plus" size={13}/> Wydarzenie</button>
              <button className="btn btn-soft btn-sm"><I name="Link" size={13}/> Z linku (auto)</button>
            </div>
          </div>
          <div className="form-group">
            <div className="form-label">Multimedia</div>
            <div style={{border:'2px dashed var(--line)', borderRadius:'var(--r-2)', padding:24, textAlign:'center', color:'var(--ink-3)', cursor:'pointer'}}>
              <I name="Plus" size={20}/>
              <div style={{marginTop:8, fontSize:13}}>Przeciągnij zdjęcia / wideo lub kliknij</div>
              <div className="muted" style={{fontSize:11.5, marginTop:4}}>Max 8 zdjęć lub 1 wideo (60 sek)</div>
            </div>
          </div>
        </div>
      )}

      {tab === 'settings' && (
        <div>
          <div className="form-group">
            <div className="form-label">Główna dziedzina</div>
            <div className="row gap-8" style={{flexWrap:'wrap'}}>
              {domains.map(d => (
                <button key={d.id} className={`chip chip-hue-${d.hue} ${domain===d.id?'active':''}`} onClick={()=>setDomain(d.id)}>{d.label}</button>
              ))}
            </div>
          </div>
          <div className="form-group">
            <div className="form-label">Tagi (do 5)</div>
            <div className="row gap-8" style={{flexWrap:'wrap'}}>
              {['Oddech','Pranayama','Poranek','Praktyka','TCM'].map((t,i) => (
                <span key={t} className={`chip ${i<3?'active':''}`} style={{fontSize:11}}># {t}</span>
              ))}
              <button className="chip" style={{borderStyle:'dashed', color:'var(--ink-3)'}}>+ dodaj</button>
            </div>
          </div>
          <div className="form-group">
            <div className="form-label">Widoczność</div>
            <div className="row gap-8" style={{flexWrap:'wrap'}}>
              {[['public','🌍 Publiczny'],['followers','👥 Tylko obserwujący'],['paid','🔒 Tylko płatni (GL)']].map(([k,l]) => (
                <button key={k} className={`chip ${audience===k?'active':''}`} onClick={()=>setAudience(k)} disabled={k==='paid' && phase!=='GL'}>{l}</button>
              ))}
            </div>
          </div>
          {phase === 'GL' && (
            <div className="row" style={{padding:'14px 0', borderTop:'1px solid var(--line-soft)', justifyContent:'space-between', alignItems:'center'}}>
              <div>
                <div style={{fontWeight:600}}>Zablokuj fragment dla niesubskrybujących</div>
                <div className="muted" style={{fontSize:12}}>Wszyscy widzą początek (~30%), reszta wymaga subskrypcji.</div>
              </div>
              <Toggle on={paidOnly} onChange={setPaidOnly}/>
            </div>
          )}
          <div className="row" style={{padding:'14px 0', borderTop:'1px solid var(--line-soft)', justifyContent:'space-between', alignItems:'center'}}>
            <div>
              <div style={{fontWeight:600}}>Zezwól na komentarze</div>
              <div className="muted" style={{fontSize:12}}>Możesz wyłączyć dla pojedynczego postu.</div>
            </div>
            <Toggle on={true} onChange={()=>{}}/>
          </div>
          <div className="row" style={{padding:'14px 0', borderTop:'1px solid var(--line-soft)', justifyContent:'space-between', alignItems:'center'}}>
            <div>
              <div style={{fontWeight:600}}>Auto-tłumaczenie (po Go-Live)</div>
              <div className="muted" style={{fontSize:12}}>Post zostanie udostępniony też w EN/DE.</div>
            </div>
            <Toggle on={false} onChange={()=>{}}/>
          </div>
        </div>
      )}

      {tab === 'cross' && (
        <div>
          <div className="muted mb-16" style={{fontSize:13}}>Opublikuj jednocześnie na zewnętrznych platformach. Be Hueman dostosuje formatowanie i długość.</div>
          {[
            { id:'ig', name:'Instagram', desc:'Skróci do 2200 znaków, doda CTA. Pierwsze zdjęcie jako okładka.', conn:true, color:'linear-gradient(135deg,#F58529,#DD2A7B,#8134AF)' },
            { id:'fb', name:'Facebook', desc:'Pełna treść, pierwsze 3 hashtagi. Jako post na Twojej stronie.', conn:true, color:'#1877F2' },
            { id:'ln', name:'LinkedIn', desc:'Sformatowany jako artykuł. Pierwsze zdanie = lead.', conn:false, color:'#0A66C2' },
            { id:'sub', name:'Newsletter (Substack)', desc:'Pełen artykuł + okładka. Wyśle do 248 zapisanych.', conn:true, color:'#FF6719' },
            { id:'rss', name:'RSS / własna strona', desc:'Wyeksportuje do XML. Twoja strona pobierze automatycznie.', conn:false, color:'#F26522' },
          ].map(p => (
            <div key={p.id} className="row" style={{padding:'14px 0', borderTop:'1px solid var(--line-soft)', gap:14, alignItems:'center'}}>
              <div style={{width:36, height:36, borderRadius:'var(--r-2)', background:p.color, display:'grid', placeItems:'center', color:'white', fontWeight:700, fontSize:13}}>{p.name[0]}</div>
              <div style={{flex:1}}>
                <div className="row gap-8">
                  <span style={{fontWeight:600}}>{p.name}</span>
                  {!p.conn && <span className="chip" style={{fontSize:10, padding:'1px 6px', color:'var(--accent)'}}>Niepołączony</span>}
                </div>
                <div className="muted" style={{fontSize:12, marginTop:2}}>{p.desc}</div>
              </div>
              {p.conn ? (
                <Toggle on={crossPost[p.id]} onChange={(v)=>setCrossPost({...crossPost, [p.id]: v})}/>
              ) : (
                <button className="btn btn-soft btn-sm">Połącz</button>
              )}
            </div>
          ))}
          <div className="card mt-16" style={{padding:14, background:'color-mix(in oklab, var(--hue-sky) 14%, var(--bg-elev))'}}>
            <div className="row gap-8">
              <I name="Shield" size={14}/>
              <div style={{flex:1, fontSize:12.5}}>
                <b>Wzajemność</b> — gdy ktoś polubi Twój post na IG, zobaczysz to też tu, w jednym miejscu. Zarządzanie z poziomu Be Hueman.
              </div>
            </div>
          </div>
        </div>
      )}

      {tab === 'schedule' && (
        <div>
          <div className="row gap-8 mb-16" style={{flexWrap:'wrap'}}>
            {[
              ['now','Opublikuj teraz'],
              ['later','Zaplanuj na konkretną datę'],
              ['best','Najlepszy moment (wg AI)'],
              ['series','Część cyklu'],
            ].map(([k,l]) => (
              <button key={k} className={`chip ${schedule===k?'active':''}`} onClick={()=>setSchedule(k)}>{l}</button>
            ))}
          </div>
          {schedule === 'now' && (
            <div className="card" style={{padding:18, background:'var(--bg-soft)'}}>
              <div className="row gap-8"><I name="Send" size={14}/><span style={{fontSize:13}}><b>Publikuję od razu</b> · post pojawi się w feedzie i kanałach cross-postingu w ciągu 30 sek.</span></div>
            </div>
          )}
          {schedule === 'later' && (
            <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:16}}>
              <div className="form-group">
                <div className="form-label">Data publikacji</div>
                <input className="input" type="date" defaultValue="2026-05-12"/>
              </div>
              <div className="form-group">
                <div className="form-label">Godzina</div>
                <input className="input" type="time" defaultValue="09:00"/>
              </div>
              <div className="form-group" style={{gridColumn:'span 2'}}>
                <div className="form-label">Strefa czasowa</div>
                <select className="select"><option>Europe/Warsaw (UTC+2)</option><option>Europe/London</option></select>
              </div>
            </div>
          )}
          {schedule === 'best' && (
            <div className="card" style={{padding:18}}>
              <div className="section-eyebrow mb-8">Sugestia AI · na podstawie Twojej widowni</div>
              <div style={{fontFamily:'var(--font-serif)', fontSize:22, fontWeight:500}}>Wtorek, 12 maja · 7:42</div>
              <div className="muted mt-8" style={{fontSize:12.5}}>Wtorki rano = +34% zaangażowania w porównaniu do Twojej średniej. 64% obserwujących jest aktywne między 7-9 rano.</div>
              <div className="row gap-8 mt-12">
                <button className="btn btn-soft btn-sm">Zobacz inne sugestie</button>
                <button className="btn btn-ghost btn-sm">Wyłącz AI dla harmonogramu</button>
              </div>
            </div>
          )}
          {schedule === 'series' && (
            <div>
              <div className="form-group">
                <div className="form-label">Wybierz cykl</div>
                <select className="select">
                  <option>Cykl: 7 dni z oddechem 4-7-8 (3/7)</option>
                  <option>Cykl: Poranne praktyki (12/30)</option>
                  <option>+ Stwórz nowy cykl</option>
                </select>
              </div>
              <div className="card" style={{padding:14, background:'var(--bg-soft)', fontSize:12.5}}>
                Posty w cyklu publikowane są automatycznie w odstępie zdefiniowanym dla całego cyklu (1 dzień). Możesz przepisać dla pojedynczego postu.
              </div>
            </div>
          )}
        </div>
      )}
    </Modal>
  );
}

// ---------- Author Products tab (digital products) ----------
function AuthorProductsTab({ onNew }) {
  const products = [
    { name:'Kurs: 7 dni z oddechem 4-7-8', kind:'Kurs e-mail', price:'89 zł', sales:128, gross:'11 392 zł', rev:'7 974 zł', status:'live' },
    { name:'PDF: 10 praktyk porannych', kind:'E-book', price:'29 zł', sales:412, gross:'11 948 zł', rev:'8 363 zł', status:'live' },
    { name:'Subskrypcja: Klub praktyki', kind:'Subskrypcja msc', price:'19 zł / mc', sales:84, gross:'1 596 zł', rev:'1 117 zł', status:'live' },
    { name:'Audio: Medytacja 21 dni', kind:'Pakiet audio', price:'59 zł', sales:0, gross:'—', rev:'—', status:'draft' },
  ];
  return (
    <div>
      <div style={{display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:16, marginBottom:24}}>
        {[
          ['Sprzedaż (30 dni)', '624', '+89', true],
          ['Przychód brutto', '24 936 zł', '+22%', true],
          ['Twoja część (70%)', '17 455 zł', '+22%', true],
          ['Najpopul. produkt', 'PDF: 10 prakt.', '412 sprzedaży', true],
        ].map(([l,v,d,up],i) => (
          <div key={i} className="stat">
            <div className="stat-label">{l}</div>
            <div className="stat-value">{v}</div>
            <div className={`stat-delta ${up?'up':''}`}>{d}</div>
          </div>
        ))}
      </div>
      <div className="card">
        <div style={{padding:'14px 18px', borderBottom:'1px solid var(--line)', display:'flex', gap:12, alignItems:'center'}}>
          <span className="section-title" style={{margin:0}}>Twoje produkty</span>
          <button className="btn btn-accent btn-sm" style={{marginLeft:'auto'}} onClick={onNew}><I name="Plus" size={13}/> Nowy produkt</button>
        </div>
        <table style={{width:'100%', fontSize:13, borderCollapse:'collapse'}}>
          <thead style={{background:'var(--bg-soft)'}}>
            <tr style={{textAlign:'left'}}>
              {['Produkt','Typ','Cena','Sprzedaż','Brutto','Twoje (70%)','Status',''].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>
            {products.map((p,i) => (
              <tr key={i} style={{borderTop:'1px solid var(--line-soft)'}}>
                <td style={{padding:'14px 16px', fontWeight:600}}>{p.name}</td>
                <td style={{padding:'14px 16px', color:'var(--ink-3)'}}>{p.kind}</td>
                <td style={{padding:'14px 16px'}}>{p.price}</td>
                <td style={{padding:'14px 16px'}}>{p.sales}</td>
                <td style={{padding:'14px 16px'}}>{p.gross}</td>
                <td style={{padding:'14px 16px', fontWeight:600}}>{p.rev}</td>
                <td style={{padding:'14px 16px'}}>
                  <span className="chip" style={{fontSize:10, padding:'2px 8px', background: p.status === 'live' ? 'color-mix(in oklab, var(--hue-sage) 22%, var(--bg-elev))' : 'var(--bg-soft)', color: p.status === 'live' ? '#3F6B3D' : 'var(--ink-3)'}}>
                    {p.status === 'live' ? '● Aktywny' : '○ Szkic'}
                  </span>
                </td>
                <td style={{padding:'14px 16px', textAlign:'right'}}>
                  <button className="btn btn-soft btn-sm">Edytuj</button>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
      <div className="card mt-16" style={{padding:18, background:'color-mix(in oklab, var(--hue-amber) 12%, var(--bg-elev))'}}>
        <div className="row gap-12">
          <I name="Shield" size={18}/>
          <div style={{flex:1}}>
            <div style={{fontWeight:600}}>Stripe Connect — wypłaty co tydzień</div>
            <div className="muted" style={{fontSize:12.5, marginTop:2}}>Twoje 70% trafia bezpośrednio na Twoje konto w piątki. Be Hueman pobiera 30% (15% platforma + 15% partner płatności).</div>
          </div>
          <button className="btn btn-soft btn-sm">Zarządzaj wypłatami</button>
        </div>
      </div>
    </div>
  );
}

// ---------- Product Editor Modal ----------
function ProductEditorModal({ onClose }) {
  const [kind, setKind] = useState('course');
  return (
    <Modal title="Nowy produkt cyfrowy" wide onClose={onClose} footer={
      <>
        <button className="btn btn-ghost" onClick={onClose}>Anuluj</button>
        <button className="btn btn-soft">Zapisz szkic</button>
        <button className="btn btn-accent">Opublikuj</button>
      </>
    }>
      <div className="form-group">
        <div className="form-label">Typ produktu</div>
        <div style={{display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:12}}>
          {[
            ['course','Kurs', 'Cykl mailowy / wideo', '📚'],
            ['ebook','E-book / PDF', 'Plik do pobrania', '📄'],
            ['audio','Audio / Medytacje', 'Pakiet plików mp3', '🎧'],
            ['sub','Subskrypcja', 'Płatność cykliczna', '🔑'],
          ].map(([k,l,d,e]) => (
            <button key={k} onClick={()=>setKind(k)} className="card" style={{padding:14, cursor:'pointer', textAlign:'left', border: kind===k ? '2px solid var(--ink-1)' : '1px solid var(--line)', background: kind===k ? 'color-mix(in oklab, var(--hue-amber) 12%, var(--bg-elev))' : 'var(--bg-elev)'}}>
              <div style={{fontSize:22}}>{e}</div>
              <div style={{fontWeight:600, fontSize:13, marginTop:6}}>{l}</div>
              <div className="muted" style={{fontSize:11, marginTop:2}}>{d}</div>
            </button>
          ))}
        </div>
      </div>
      <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:16}}>
        <div className="form-group" style={{gridColumn:'span 2'}}>
          <div className="form-label">Tytuł</div>
          <input className="input" placeholder="np. 7 dni z oddechem 4-7-8"/>
        </div>
        <div className="form-group" style={{gridColumn:'span 2'}}>
          <div className="form-label">Krótki opis</div>
          <textarea className="textarea" rows={2} placeholder="Co dostaje kupujący, dla kogo to jest..."/>
        </div>
        <div className="form-group">
          <div className="form-label">Cena</div>
          <input className="input" placeholder="89" type="number"/>
        </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 className="form-group" style={{gridColumn:'span 2'}}>
          <div className="form-label">Pliki / treść</div>
          <div style={{border:'2px dashed var(--line)', borderRadius:'var(--r-2)', padding:24, textAlign:'center', color:'var(--ink-3)'}}>
            <I name="Plus" size={20}/>
            <div style={{marginTop:8, fontSize:13}}>Przeciągnij PDF / mp3 / wideo</div>
          </div>
        </div>
      </div>
    </Modal>
  );
}

// ================ PARTNER PANEL — full ================
Detail4.PartnerPanelFull = function PartnerPanelFull({ phase }) {
  const [tab, setTab] = useState('overview');
  const [showService, setShowService] = useState(false);
  const [activeBooking, setActiveBooking] = useState(null);

  const services = [
    { id:'s1', name: 'Yin yoga · poniedziałki', cat: 'Cykl 8 spotkań', dur:90, price:'480 zł', spots: '8/12', color:'amber' },
    { id:'s2', name: 'Warsztat oddechowy', cat: 'Jednorazowy', dur:120, price:'180 zł', spots: '14/20', color:'sage' },
    { id:'s3', name: 'Sesja indywidualna · pranayama', cat: '60 min', dur:60, price:'220 zł', spots: 'Po umowie', color:'sky' },
    { id:'s4', name: 'Retreat letni', cat: '3 dni · Mazury', dur:4320, price:'1 280 zł', spots: '4/12', color:'rose' },
  ];

  return (
    <div className="page">
      <PageHeader
        eyebrow="Panel Partnera"
        title="Studio Mokshana"
        subtitle="Szkoła jogi · Łódź. Zarządzaj ofertą, kalendarzem, rezerwacjami."
        ff="FF2"
        action={<button className="btn btn-accent" onClick={()=>setShowService(true)}><I name="Plus" size={14}/> Dodaj usługę</button>}
      />
      <div className="tabs">
        {[
          ['overview','Przegląd'],
          ['services','Usługi'],
          ['calendar','Kalendarz'],
          ['bookings','Rezerwacje', phase === 'GL'],
          ['team','Zespół'],
          ['settings','Ustawienia studia'],
        ].filter(t => t[2] !== false).map(([k,l]) => (
          <button key={k} className={`tab ${tab===k?'active':''}`} onClick={()=>setTab(k)}>{l}</button>
        ))}
      </div>

      {tab === 'overview' && <PartnerOverview phase={phase}/>}
      {tab === 'services' && <PartnerServices services={services} onEdit={()=>setShowService(true)}/>}
      {tab === 'calendar' && <PartnerCalendar onSlotClick={setActiveBooking}/>}
      {tab === 'bookings' && phase === 'GL' && <PartnerBookings/>}
      {tab === 'team' && <PartnerTeam/>}
      {tab === 'settings' && <PartnerSettings/>}

      {showService && <ServiceEditorModal onClose={()=>setShowService(false)}/>}
      {activeBooking && <SlotDetailModal slot={activeBooking} onClose={()=>setActiveBooking(null)}/>}
    </div>
  );
};

function PartnerOverview({ phase }) {
  return (
    <>
      <div style={{display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:16, marginBottom:24}}>
        {[
          ['Wyświetlenia profilu', '8 240', '+12%', true],
          ['Polecenia od członków', '47', '+9', true],
          ['Rezerwacje (30 dni)', phase === 'GL' ? '184' : '—', phase === 'GL' ? '+24' : 'Po Go-Live', phase === 'GL'],
          ['Przychód (30 dni)', phase === 'GL' ? '14 240 zł' : '— zł', phase === 'GL' ? '+18%' : 'Nieaktywne', phase === 'GL'],
        ].map(([l,v,d,up],i) => (
          <div key={i} className="stat">
            <div className="stat-label">{l}</div>
            <div className="stat-value">{v}</div>
            <div className={`stat-delta ${up?'up':''}`}>{d}</div>
          </div>
        ))}
      </div>
      <div style={{display:'grid', gridTemplateColumns:'2fr 1fr', gap:16}}>
        <div className="card" style={{padding:20}}>
          <div className="section-title mb-16">Najbliższe zajęcia</div>
          {[
            { name:'Yin yoga', date:'pn 12 maj · 18:00', spots:'8/12', who:'Hanna prowadzi' },
            { name:'Warsztat oddechowy', date:'sb 17 maj · 11:00', spots:'14/20', who:'Marek' },
            { name:'Vinyasa flow', date:'wt 13 maj · 19:30', spots:'10/15', who:'Hanna' },
            { name:'Sesja indywidualna · @anna.h', date:'śr 14 maj · 17:00', spots:'1/1', who:'Marek' },
          ].map((c,i) => (
            <div key={i} className="row" style={{padding:'12px 0', borderTop:i?'1px solid var(--line-soft)':'', gap:14, alignItems:'center'}}>
              <div style={{width:48, height:48, borderRadius:'var(--r-2)', background:`linear-gradient(135deg, var(--hue-${['amber','sage','sky','rose'][i]}), var(--hue-${['rose','amber','sage','sky'][i]}))`, display:'grid', placeItems:'center', color:'white', fontFamily:'var(--font-serif)', fontWeight:500, fontSize:18}}>{c.name[0]}</div>
              <div style={{flex:1}}>
                <div style={{fontWeight:600}}>{c.name}</div>
                <div className="muted" style={{fontSize:12, marginTop:2}}>{c.date} · {c.who}</div>
              </div>
              <div style={{textAlign:'right'}}>
                <div style={{fontSize:12, fontWeight:600}}>{c.spots}</div>
                <div style={{fontSize:11, color:'var(--ink-3)'}}>zajętych</div>
              </div>
              <button className="btn btn-soft btn-sm">Lista</button>
            </div>
          ))}
        </div>
        <div className="col gap-16">
          <div className="card" style={{padding:20}}>
            <div className="section-title mb-16">Ostatnia aktywność</div>
            {[
              ['Hanna polecała Twój kurs Yin yoga', '2 godz. temu'],
              ['Marcin dodał warsztat do biblioteki', '5 godz. temu'],
              ['@lena zarezerwowała sesję indywidualną', 'wczoraj'],
              ['Studio w Top tygodnia · Łódź', '2 dni temu'],
            ].map((r,i) => (
              <div key={i} style={{padding:'10px 0', borderTop:i?'1px solid var(--line-soft)':'', fontSize:13}}>
                <div>{r[0]}</div>
                <div className="muted" style={{fontSize:11.5, marginTop:2}}>{r[1]}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </>
  );
};

function PartnerServices({ services, onEdit }) {
  return (
    <div className="card">
      <div style={{padding:'14px 18px', borderBottom:'1px solid var(--line)', display:'flex', gap:12, alignItems:'center'}}>
        <input className="input" placeholder="Szukaj usług..." style={{maxWidth:280}}/>
        <select className="select" style={{maxWidth:160, fontSize:12}}><option>Wszystkie</option><option>Aktywne</option><option>Wyłączone</option></select>
        <span className="muted" style={{marginLeft:'auto', fontSize:12}}>{services.length} usług</span>
      </div>
      {services.map((s,i) => (
        <div key={s.id} className="row" style={{padding:'18px 20px', borderTop:'1px solid var(--line-soft)', gap:16, alignItems:'center'}}>
          <div style={{width:60, height:60, borderRadius:'var(--r-2)', background:`linear-gradient(135deg, var(--hue-${s.color}), var(--hue-${['rose','amber','sky','sage'][i]}))`, flexShrink:0}}/>
          <div style={{flex:1}}>
            <div className="row gap-8">
              <span style={{fontWeight:600, fontSize:14}}>{s.name}</span>
              <span className="chip" style={{fontSize:10, padding:'1px 8px', color:'var(--hue-sage)'}}>● Aktywna</span>
            </div>
            <div className="muted mt-8" style={{fontSize:12}}>{s.cat} · {s.dur >= 60 ? Math.floor(s.dur/60)+'h '+(s.dur%60?(s.dur%60)+'min':'') : s.dur+' min'} · {s.price}</div>
            <div className="row gap-8 mt-8" style={{fontSize:11.5, color:'var(--ink-3)'}}>
              <span>📅 {s.spots} miejsc w najbliższym slocie</span>
              <span>· 47 polecało</span>
              <span>· obserwujących: 184</span>
            </div>
          </div>
          <div className="row gap-4">
            <button className="btn btn-soft btn-sm" onClick={onEdit}>Edytuj</button>
            <button className="btn btn-ghost btn-sm">Sloty</button>
            <button className="icon-btn"><I name="More" size={14}/></button>
          </div>
        </div>
      ))}
    </div>
  );
};

function PartnerCalendar({ onSlotClick }) {
  // Week view with bookings
  const days = ['Pn 12','Wt 13','Śr 14','Cz 15','Pt 16','Sb 17','Nd 18'];
  const slots = [
    { day:0, hr:18, dur:1.5, name:'Yin yoga', booked:8, cap:12, color:'amber' },
    { day:1, hr:19.5, dur:1.5, name:'Vinyasa', booked:10, cap:15, color:'sage' },
    { day:2, hr:17, dur:1, name:'Sesja · @anna.h', booked:1, cap:1, color:'sky', individual:true },
    { day:3, hr:18, dur:1.5, name:'Yin yoga', booked:5, cap:12, color:'amber' },
    { day:4, hr:19.5, dur:1.5, name:'Vinyasa', booked:12, cap:15, color:'sage' },
    { day:5, hr:11, dur:2, name:'Warsztat oddechowy', booked:14, cap:20, color:'rose' },
    { day:5, hr:17, dur:1.5, name:'Yin yoga', booked:6, cap:12, color:'amber' },
    { day:0, hr:7.5, dur:1, name:'Yoga rano', booked:5, cap:8, color:'sage' },
    { day:2, hr:7.5, dur:1, name:'Yoga rano', booked:3, cap:8, color:'sage' },
    { day:4, hr:7.5, dur:1, name:'Yoga rano', booked:7, cap:8, color:'sage' },
  ];
  const hours = [];
  for (let h = 7; h <= 20; h += 0.5) hours.push(h);

  return (
    <div>
      <div className="card" style={{padding:14, marginBottom:16}}>
        <div className="row" style={{justifyContent:'space-between', alignItems:'center'}}>
          <div className="row gap-12">
            <button className="icon-btn" style={{transform:'rotate(180deg)'}}><I name="Chevron" size={14}/></button>
            <div style={{fontFamily:'var(--font-serif)', fontSize:18, fontWeight:500}}>12 — 18 maja 2026</div>
            <button className="icon-btn"><I name="Chevron" size={14}/></button>
          </div>
          <div className="row gap-8">
            <button className="btn btn-soft btn-sm">Dziś</button>
            <select className="select" style={{maxWidth:140, fontSize:12}}><option>Tydzień</option><option>Miesiąc</option><option>Lista</option></select>
            <select className="select" style={{maxWidth:160, fontSize:12}}><option>Wszyscy nauczyciele</option><option>Hanna</option><option>Marek</option></select>
          </div>
        </div>
      </div>
      <div className="card" style={{padding:0, overflow:'hidden'}}>
        <div style={{display:'grid', gridTemplateColumns:'56px repeat(7,1fr)', gap:1, background:'var(--line)'}}>
          <div style={{background:'var(--bg-soft)'}}/>
          {days.map((d,i) => (
            <div key={d} style={{background:'var(--bg-soft)', padding:'10px 8px', fontSize:12, fontWeight:600, textAlign:'center', color: i===2 ? 'var(--accent)' : 'var(--ink-1)'}}>{d}{i===2 && ' · dziś'}</div>
          ))}
          {hours.map(h => (
            <Fragment key={h}>
              <div style={{background:'var(--bg-elev)', padding:'4px 6px', fontSize:10, color:'var(--ink-3)', textAlign:'right', minHeight:24}}>{h % 1 === 0 ? `${h}:00` : ''}</div>
              {[0,1,2,3,4,5,6].map(d => {
                const slot = slots.find(s => s.day === d && s.hr === h);
                return (
                  <div key={d} style={{background:'var(--bg-elev)', minHeight:24, padding:1, position:'relative'}}>
                    {slot && (
                      <button
                        onClick={()=>onSlotClick(slot)}
                        style={{
                          width:'100%',
                          height: slot.dur*48 - 2,
                          background: `color-mix(in oklab, var(--hue-${slot.color}) 35%, var(--bg-elev))`,
                          borderLeft: `3px solid var(--hue-${slot.color})`,
                          borderRadius: 4,
                          padding: '4px 6px',
                          textAlign:'left',
                          cursor:'pointer',
                          border:'none',
                          font:'inherit',
                          color:'var(--ink-1)',
                        }}>
                        <div style={{fontWeight:600, fontSize:11, lineHeight:1.2, whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis'}}>{slot.name}</div>
                        <div style={{fontSize:10, color:'var(--ink-2)', marginTop:2}}>
                          {slot.individual ? '1:1' : `${slot.booked}/${slot.cap}`}
                          {slot.booked === slot.cap && !slot.individual && ' · pełne'}
                        </div>
                      </button>
                    )}
                  </div>
                );
              })}
            </Fragment>
          ))}
        </div>
      </div>
    </div>
  );
};

function SlotDetailModal({ slot, onClose }) {
  return (
    <Modal title={slot.name} onClose={onClose} footer={
      <>
        <button className="btn btn-ghost" onClick={onClose}>Zamknij</button>
        <button className="btn btn-soft">Edytuj slot</button>
        <button className="btn btn-accent">Zapisz uczestników</button>
      </>
    }>
      <div className="row gap-16 mb-16" style={{padding:'12px 0'}}>
        <div>
          <div className="section-eyebrow">Termin</div>
          <div style={{fontFamily:'var(--font-serif)', fontSize:18, fontWeight:500, marginTop:4}}>śr 14 maja · {Math.floor(slot.hr)}:{slot.hr%1?'30':'00'}</div>
          <div className="muted" style={{fontSize:12, marginTop:2}}>{slot.dur*60} minut</div>
        </div>
        <div style={{borderLeft:'1px solid var(--line)', paddingLeft:16}}>
          <div className="section-eyebrow">Obłożenie</div>
          <div style={{fontFamily:'var(--font-serif)', fontSize:18, fontWeight:500, marginTop:4}}>{slot.individual ? '1:1' : `${slot.booked} / ${slot.cap}`}</div>
          <div className="muted" style={{fontSize:12, marginTop:2}}>{slot.individual ? 'Sesja indywidualna' : `${slot.cap-slot.booked} miejsc wolnych`}</div>
        </div>
      </div>
      <div className="section-eyebrow mb-12">Zapisani uczestnicy</div>
      {(slot.individual ? [{name:'Anna Hueman', handle:'anna.h', avatar:['#E8B872','#E8A4A0'], time:'rezerw. 10 maja'}] : authors.slice(0, slot.booked)).map((a,i) => (
        <div key={i} className="row" style={{padding:'10px 0', borderTop:i?'1px solid var(--line-soft)':'', gap:12, alignItems:'center'}}>
          <Avatar author={a.handle ? a : a} size={32}/>
          <div style={{flex:1}}>
            <div style={{fontSize:13, fontWeight:600}}>{a.name}</div>
            <div className="muted" style={{fontSize:11.5}}>@{a.handle} {a.time && `· ${a.time}`}</div>
          </div>
          <span className="chip" style={{fontSize:10, padding:'2px 8px', background:'color-mix(in oklab, var(--hue-sage) 22%, var(--bg-elev))'}}>● opłacone</span>
          <button className="icon-btn" title="Wyślij wiadomość"><I name="Send" size={13}/></button>
        </div>
      ))}
      {!slot.individual && slot.booked < slot.cap && (
        <div style={{padding:'14px 0', marginTop:8, borderTop:'1px solid var(--line)'}}>
          <button className="btn btn-soft btn-sm"><I name="Plus" size={13}/> Zapisz ręcznie (np. po telefonie)</button>
        </div>
      )}
    </Modal>
  );
};

function PartnerBookings() {
  const bookings = [
    { id:'b1', service:'Sesja indywidualna · pranayama', user:'anna.h', userName:'Anna Hueman', date:'śr 14 maj · 17:00', price:'220 zł', status:'paid' },
    { id:'b2', service:'Yin yoga · pn 18:00', user:'mdebski', userName:'Marcin Dębski', date:'pn 12 maj · 18:00', price:'60 zł', status:'paid' },
    { id:'b3', service:'Warsztat oddechowy', user:'lena.k', userName:'Lena Kalmuk', date:'sb 17 maj · 11:00', price:'180 zł', status:'paid' },
    { id:'b4', service:'Vinyasa flow', user:'hannaw', userName:'Hanna Wójcik', date:'pt 16 maj · 19:30', price:'60 zł', status:'pending' },
    { id:'b5', service:'Retreat letni', user:'aga.p', userName:'Agnieszka Polak', date:'27 cze · 3 dni', price:'1 280 zł', status:'paid' },
    { id:'b6', service:'Yoga rano', user:'t.karwowski', userName:'Tomasz Karwowski', date:'pn 12 maj · 7:30', price:'45 zł', status:'cancelled' },
  ];
  const statusLabel = { paid:'● Opłacona', pending:'⏱ Oczekująca', cancelled:'✕ Anulowana' };
  const statusColor = { paid:'#3F6B3D', pending:'#9B6E1F', cancelled:'var(--ink-3)' };

  return (
    <div>
      <div style={{display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:16, marginBottom:16}}>
        {[
          ['Rezerwacje (30 dni)', '184', '+24', true],
          ['Frekwencja', '94%', '+2 p.p.', true],
          ['Średnia wartość', '127 zł', '+8 zł', true],
          ['Anulacje', '5%', '-1 p.p.', true],
        ].map(([l,v,d,up],i) => (
          <div key={i} className="stat">
            <div className="stat-label">{l}</div>
            <div className="stat-value">{v}</div>
            <div className={`stat-delta ${up?'up':''}`}>{d}</div>
          </div>
        ))}
      </div>
      <div className="card">
        <div style={{padding:'14px 18px', borderBottom:'1px solid var(--line)', display:'flex', gap:12, alignItems:'center'}}>
          <input className="input" placeholder="Szukaj klienta..." style={{maxWidth:240}}/>
          <span className="chip active">Wszystkie</span>
          <span className="chip">Opłacone</span>
          <span className="chip">Oczekujące</span>
          <span className="chip">Anulowane</span>
          <button className="btn btn-ghost btn-sm" style={{marginLeft:'auto'}}><I name="Filter" size={13}/> Filtry</button>
          <button className="btn btn-soft btn-sm">Eksportuj CSV</button>
        </div>
        <table style={{width:'100%', fontSize:13, borderCollapse:'collapse'}}>
          <thead style={{background:'var(--bg-soft)'}}>
            <tr style={{textAlign:'left'}}>
              {['Klient','Usługa','Termin','Kwota','Status',''].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>
            {bookings.map(b => (
              <tr key={b.id} style={{borderTop:'1px solid var(--line-soft)'}}>
                <td style={{padding:'14px 16px'}}>
                  <div className="row gap-8">
                    <Avatar author={b.user} size={28}/>
                    <div>
                      <div style={{fontWeight:600, fontSize:13}}>{b.userName}</div>
                      <div className="muted" style={{fontSize:11}}>@{b.user}</div>
                    </div>
                  </div>
                </td>
                <td style={{padding:'14px 16px', fontSize:12.5}}>{b.service}</td>
                <td style={{padding:'14px 16px', fontSize:12.5}}>{b.date}</td>
                <td style={{padding:'14px 16px', fontWeight:600}}>{b.price}</td>
                <td style={{padding:'14px 16px'}}>
                  <span style={{fontSize:11.5, fontWeight:600, color: statusColor[b.status]}}>{statusLabel[b.status]}</span>
                </td>
                <td style={{padding:'14px 16px', textAlign:'right'}}>
                  <button className="btn btn-soft btn-sm">Szczegóły</button>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
};

function PartnerTeam() {
  const team = [
    { name:'Hanna Wójcik', role:'Założycielka · Yin, oddech', handle:'hannaw', verified:true, sessions:124, status:'active' },
    { name:'Marek Polak', role:'Vinyasa, ashtanga', handle:'marek.p', verified:false, sessions:78, status:'active' },
    { name:'Iga Sokół', role:'Asystentka · sesje 1:1', handle:'iga.s', verified:false, sessions:34, status:'active' },
    { name:'Tomasz Karwowski', role:'Pranayama', handle:'t.karwowski', verified:true, sessions:0, status:'invited' },
  ];
  return (
    <div className="card">
      <div style={{padding:'14px 18px', borderBottom:'1px solid var(--line)', display:'flex', gap:12, alignItems:'center'}}>
        <span className="section-title" style={{margin:0}}>Twój zespół</span>
        <button className="btn btn-accent btn-sm" style={{marginLeft:'auto'}}><I name="Plus" size={13}/> Dodaj nauczyciela</button>
      </div>
      {team.map((t,i) => (
        <div key={t.handle} className="row" style={{padding:'14px 18px', borderTop:'1px solid var(--line-soft)', gap:14, alignItems:'center'}}>
          <Avatar author={t.handle in {hannaw:1,mokshana:1,mdebski:1} ? t.handle : 'me'} size={42}/>
          <div style={{flex:1}}>
            <div className="row gap-4">
              <span style={{fontWeight:600}}>{t.name}</span>
              {t.verified && <VerifiedBadge/>}
            </div>
            <div className="muted" style={{fontSize:12}}>@{t.handle} · {t.role}</div>
          </div>
          <div style={{textAlign:'right'}}>
            <div style={{fontSize:13, fontWeight:600}}>{t.sessions}</div>
            <div style={{fontSize:11, color:'var(--ink-3)'}}>sesji w mc</div>
          </div>
          {t.status === 'invited'
            ? <span className="chip" style={{fontSize:11, color:'var(--ink-3)'}}>Zaproszony</span>
            : <span className="chip" style={{fontSize:11, color:'var(--hue-sage)'}}>● Aktywny</span>}
          <button className="btn btn-soft btn-sm">Edytuj rolę</button>
        </div>
      ))}
    </div>
  );
};

function PartnerSettings() {
  return (
    <div className="card" style={{padding:24, maxWidth:720}}>
      <div className="section-title mb-16">Profil studia</div>
      <div className="form-group">
        <div className="form-label">Nazwa</div>
        <input className="input" defaultValue="Studio Mokshana"/>
      </div>
      <div className="form-group">
        <div className="form-label">Adres</div>
        <input className="input" defaultValue="ul. Piotrkowska 47, Łódź"/>
      </div>
      <div className="form-group">
        <div className="form-label">Strefa czasowa</div>
        <select className="select"><option>Europe/Warsaw</option></select>
      </div>
      <div className="form-group">
        <div className="form-label">Rezerwacje przyjmuję</div>
        <div className="row gap-8" style={{flexWrap:'wrap'}}>
          {['Online (Be Hueman)','Telefonicznie','Mailowo','Z polecenia'].map((t,i) => (
            <button key={t} className={`chip ${i<2?'active':''}`}>{t}</button>
          ))}
        </div>
      </div>
      <div className="form-group">
        <div className="form-label">Polityka anulacji</div>
        <select className="select">
          <option>Bezpłatna do 24h przed</option>
          <option>Bezpłatna do 48h przed</option>
          <option>Niezwrotna</option>
        </select>
      </div>
      <div className="row" style={{padding:'14px 0', borderTop:'1px solid var(--line-soft)', justifyContent:'space-between', alignItems:'center'}}>
        <div>
          <div style={{fontWeight:600}}>Auto-potwierdzenie rezerwacji</div>
          <div className="muted" style={{fontSize:12}}>Bez Twojego zatwierdzenia po opłaceniu.</div>
        </div>
        <Toggle on={true} onChange={()=>{}}/>
      </div>
      <div className="row" style={{padding:'14px 0', borderTop:'1px solid var(--line-soft)', justifyContent:'space-between', alignItems:'center'}}>
        <div>
          <div style={{fontWeight:600}}>Lista oczekujących</div>
          <div className="muted" style={{fontSize:12}}>Gdy slot się zwolni — automatycznie powiadamiam pierwszą osobę z listy.</div>
        </div>
        <Toggle on={true} onChange={()=>{}}/>
      </div>
    </div>
  );
};

function ServiceEditorModal({ onClose }) {
  return (
    <Modal title="Nowa usługa" wide onClose={onClose} footer={
      <>
        <button className="btn btn-ghost" onClick={onClose}>Anuluj</button>
        <button className="btn btn-accent">Opublikuj</button>
      </>
    }>
      <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:16}}>
        <div className="form-group" style={{gridColumn:'span 2'}}>
          <div className="form-label">Nazwa</div>
          <input className="input" placeholder="np. Yin yoga · poniedziałki"/>
        </div>
        <div className="form-group" style={{gridColumn:'span 2'}}>
          <div className="form-label">Opis</div>
          <textarea className="textarea" rows={3} placeholder="Dla kogo, co dostają uczestnicy, czego potrzebują..."/>
        </div>
        <div className="form-group">
          <div className="form-label">Typ</div>
          <select className="select"><option>Cykliczne zajęcia grupowe</option><option>Warsztat jednorazowy</option><option>Sesja indywidualna 1:1</option><option>Retreat / wyjazd</option></select>
        </div>
        <div className="form-group">
          <div className="form-label">Czas trwania</div>
          <input className="input" placeholder="90" type="number"/>
        </div>
        <div className="form-group">
          <div className="form-label">Cena</div>
          <input className="input" placeholder="60 zł"/>
        </div>
        <div className="form-group">
          <div className="form-label">Liczba miejsc</div>
          <input className="input" placeholder="12" type="number"/>
        </div>
        <div className="form-group" style={{gridColumn:'span 2'}}>
          <div className="form-label">Powtarzalność</div>
          <div className="row gap-8" style={{flexWrap:'wrap'}}>
            {['Bez powtórzeń','Co tydzień','Co dwa tygodnie','Co miesiąc','Niestandardowo'].map((t,i) => (
              <button key={t} className={`chip ${i===1?'active':''}`}>{t}</button>
            ))}
          </div>
        </div>
        <div className="form-group" style={{gridColumn:'span 2'}}>
          <div className="form-label">Dni i godziny</div>
          <div className="row gap-8" style={{flexWrap:'wrap'}}>
            {['Pn','Wt','Śr','Cz','Pt','Sb','Nd'].map((d,i) => (
              <button key={d} className={`chip ${i===0||i===2||i===4?'active':''}`}>{d}</button>
            ))}
          </div>
          <div className="row gap-8 mt-8">
            <input className="input" type="time" defaultValue="18:00" style={{maxWidth:140}}/>
            <span style={{alignSelf:'center', color:'var(--ink-3)'}}>do</span>
            <input className="input" type="time" defaultValue="19:30" style={{maxWidth:140}}/>
          </div>
        </div>
        <div className="form-group" style={{gridColumn:'span 2'}}>
          <div className="form-label">Kategorie</div>
          <div className="row gap-8" style={{flexWrap:'wrap'}}>
            {domains.map(d => <button key={d.id} className={`chip chip-hue-${d.hue} ${d.id==='cialo'?'active':''}`}>{d.label}</button>)}
          </div>
        </div>
      </div>
    </Modal>
  );
};

window.Detail4Screens = Detail4;