// BeHueman v2 — Core screens: MyHue · Community · Wisdom · Joy · Library
const FF1 = {};

// ================ MYHUE DASHBOARD ================
FF1.Dashboard = function Dashboard({ phase, role, onNav }) {
  const [editMode, setEditMode] = useState(false);
  const [hidden, setHidden] = useState(new Set());
  const [widgetOrder, setWidgetOrder] = useState([
    'community', 'top', 'wisdom', 'joy', 'library', 'events',
    ...(role === 'autor' || role === 'partner' ? ['stats', 'drafts'] : []),
  ]);

  const isAuthor = role === 'autor' || role === 'partner';

  const allWidgets = {
    community: { title: 'MyCommunity', col: 'col-8',  authorOnly: false },
    top:       { title: 'Top dnia',    col: 'col-4',  authorOnly: false },
    wisdom:    { title: 'MyWisdom',    col: 'col-8',  authorOnly: false },
    joy:       { title: 'MyJoy',       col: 'col-4',  authorOnly: false },
    library:   { title: 'Biblioteka',  col: 'col-4',  authorOnly: false },
    events:    { title: 'W tym tygodniu',col:'col-12', authorOnly: false },
    stats:     { title: 'MyStats',     col: 'col-8',  authorOnly: true },
    drafts:    { title: 'Szkice',      col: 'col-4',  authorOnly: true },
  };

  const visibleWidgets = widgetOrder.filter(id => {
    const w = allWidgets[id];
    if (!w) return false;
    if (w.authorOnly && !isAuthor) return false;
    if (hidden.has(id)) return false;
    return true;
  });

  const moveWidget = (id, dir) => {
    setWidgetOrder(prev => {
      const arr = [...prev];
      const idx = arr.indexOf(id);
      const target = dir === 'up' ? idx - 1 : idx + 1;
      if (target < 0 || target >= arr.length) return prev;
      [arr[idx], arr[target]] = [arr[target], arr[idx]];
      return arr;
    });
  };

  return (
    <div className="page">
      <div className="row gap-12 mb-8" style={{justifyContent:'space-between', alignItems:'flex-start'}}>
        <div>
          <div className="page-eyebrow row gap-8" style={{alignItems:'center'}}>
            {new Date().toLocaleDateString('pl-PL', { weekday:'long', day:'numeric', month:'long' })}
          </div>
          <h1 className="page-title">
            Witaj z powrotem, <span style={{fontStyle:'italic'}}>Ty</span>.
          </h1>
          <div className="page-sub">To Twój MyHue — centrum platformy. Skonfiguruj widżety wedle swojego rytmu.</div>
        </div>
        <button
          className={`btn ${editMode ? 'btn-primary' : 'btn-ghost'}`}
          onClick={() => setEditMode(!editMode)}
        >
          <I name="Sliders" size={14}/>
          {editMode ? 'Gotowe' : 'Edytuj dashboard'}
        </button>
      </div>

      {/* Widget visibility panel in edit mode */}
      {editMode && (
        <div className="card" style={{padding:0, marginBottom:16, overflow:'hidden'}}>
          <div style={{padding:'12px 16px', borderBottom:'1px solid var(--line)', display:'flex', gap:8, alignItems:'center'}}>
            <I name="Sliders" size={14}/>
            <span style={{fontWeight:600, fontSize:13}}>Zarządzaj widżetami</span>
            <span className="muted" style={{fontSize:12}}>— włącz lub wyłącz każdy widżet</span>
          </div>
          {Object.entries(allWidgets).filter(([,w]) => !w.authorOnly || isAuthor).map(([id, w]) => (
            <div key={id} className="widget-toggle-row">
              <div style={{display:'flex', alignItems:'center', gap:10}}>
                <I name="Grip" size={14} style={{color:'var(--ink-4)'}}/>
                <span style={{fontSize:13, fontWeight:500}}>{w.title}</span>
                {w.authorOnly && <span className="role-badge autor" style={{fontSize:10}}>Autor</span>}
              </div>
              <Toggle on={!hidden.has(id)} onChange={v => {
                setHidden(prev => { const n = new Set(prev); v ? n.delete(id) : n.add(id); return n; });
              }}/>
            </div>
          ))}
        </div>
      )}

      <div className={`dash-grid ${editMode ? 'dash-edit-mode' : ''}`}>
        {visibleWidgets.map(id => {
          const w = allWidgets[id];
          if (!w) return null;
          return (
            <WidgetWrapper key={id} id={id} title={w.title} col={w.col}
              editMode={editMode}
              onMoveUp={() => moveWidget(id,'up')}
              onMoveDown={() => moveWidget(id,'down')}
              onHide={() => setHidden(prev => { const n = new Set(prev); n.add(id); return n; })}
            >
              {id === 'community' && <WidgetCommunity onNav={onNav}/>}
              {id === 'top' && <WidgetTop/>}
              {id === 'wisdom' && <WidgetWisdom onNav={onNav}/>}
              {id === 'joy' && <WidgetJoy onNav={onNav}/>}
              {id === 'library' && <WidgetLibrary onNav={onNav}/>}
              {id === 'events' && <WidgetEvents/>}
              {id === 'stats' && <WidgetStats/>}
              {id === 'drafts' && <WidgetDrafts/>}
            </WidgetWrapper>
          );
        })}
      </div>
    </div>
  );
};

function WidgetWrapper({ id, title, col, editMode, onMoveUp, onMoveDown, onHide, children }) {
  const [hovered, setHovered] = useState(false);
  return (
    <div className={`widget ${col}`}
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
    >
      {/* Drag handle in edit mode */}
      {editMode && (
        <div style={{position:'absolute', top:10, left:10, zIndex:5, display:'flex', gap:4}}>
          <button onClick={onMoveUp} style={{background:'var(--bg-soft)', border:'1px solid var(--line)', borderRadius:4, width:22, height:22, cursor:'pointer', fontSize:12, display:'grid', placeItems:'center'}} title="Przesuń wyżej">↑</button>
          <button onClick={onMoveDown} style={{background:'var(--bg-soft)', border:'1px solid var(--line)', borderRadius:4, width:22, height:22, cursor:'pointer', fontSize:12, display:'grid', placeItems:'center'}} title="Przesuń niżej">↓</button>
          <button onClick={onHide} style={{background:'var(--bg-soft)', border:'1px solid var(--line)', borderRadius:4, width:22, height:22, cursor:'pointer', fontSize:12, display:'grid', placeItems:'center', color:'var(--ink-3)'}} title="Ukryj widżet"><I name="X" size={10}/></button>
        </div>
      )}
      {/* Gear icon on hover (non-edit mode) */}
      {!editMode && hovered && (
        <button className="widget-gear" onClick={() => window.__app.pushToast('ok','Konfiguracja widżetu','W trybie edycji możesz dostosować ten widżet.')}>
          <I name="Settings" size={12}/>
        </button>
      )}
      <div className="widget-head" style={{paddingLeft: editMode ? 72 : 0}}>
        <div className="widget-title">{title}</div>
      </div>
      {children}
    </div>
  );
}

function WidgetCommunity({ onNav }) {
  return (
    <div>
      <div style={{display:'flex', flexDirection:'column'}}>
        {AppData.posts.slice(0,2).map(p => <PostCard key={p.id} post={p}/>)}
      </div>
      <button className="btn btn-soft btn-sm" style={{marginTop:8}} onClick={() => onNav('community')}>
        Otwórz Community <I name="Chevron" size={12}/>
      </button>
    </div>
  );
}

function WidgetTop() {
  return (
    <div style={{display:'flex', flexDirection:'column'}}>
      {AppData.posts.slice(0,4).map((p,i) => {
        const a = AppData.getAuthor(p.authorId);
        return (
          <div key={p.id} className="row gap-12" style={{padding:'10px 0', borderTop: i?'1px solid var(--line-soft)':''}}>
            <div style={{fontFamily:'var(--font-serif)', fontSize:22, color:'var(--ink-4)', width:24, textAlign:'center'}}>{i+1}</div>
            <div style={{flex:1, minWidth:0}}>
              <div style={{fontSize:12.5, fontWeight:600, lineHeight:1.3, display:'-webkit-box', WebkitLineClamp:2, WebkitBoxOrient:'vertical', overflow:'hidden'}}>
                {p.body.slice(0,65)}…
              </div>
              <div style={{fontSize:11, color:'var(--ink-3)', marginTop:3, display:'flex', gap:8}}>
                <span>{a.name}</span>
                <span>❤️ {p.likes}</span>
              </div>
            </div>
          </div>
        );
      })}
    </div>
  );
}

function WidgetWisdom({ onNav }) {
  return (
    <div>
      <div style={{display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:10}}>
        {AppData.eduTiles.slice(0,4).map(t => <Tile key={t.id} tile={t} onClick={() => window.openDetail && window.openDetail('course', t)}/>)}
      </div>
      <button className="btn btn-soft btn-sm" style={{marginTop:8}} onClick={() => onNav('wisdom')}>
        Otwórz Wisdom <I name="Chevron" size={12}/>
      </button>
    </div>
  );
}

function WidgetJoy({ onNav }) {
  const joyItems = [
    {id:'j1', type:'Muzyka', title:'Playlist do medytacji', author:'Hanna Wójcik', cover:['#B5A0CC','#8AAFC8']},
    {id:'j2', type:'Travel', title:'Mazury cisza i woda', author:'Aga Pawlik', cover:['#9FB89A','#E8B872']},
    {id:'j3', type:'Smile', title:'10 powodów do śmiechu', author:'Lena K.', cover:['#E8A4A0','#E8B872']},
    {id:'j4', type:'Moment', title:'Kawa o świcie', author:'Tomek K.', cover:['#1F1B16','#8AAFC8']},
  ];
  return (
    <div>
      <div style={{display:'grid', gridTemplateColumns:'repeat(2,1fr)', gap:10}}>
        {joyItems.map(t => <Tile key={t.id} tile={t}/>)}
      </div>
      <button className="btn btn-soft btn-sm" style={{marginTop:8}} onClick={() => onNav('joy')}>
        Otwórz Joy <I name="Chevron" size={12}/>
      </button>
    </div>
  );
}

function WidgetLibrary({ onNav }) {
  const libs = [
    { name: 'Do przeczytania', count: 14, hues: ['#E8A4A0','#E8B872','#9FB89A'] },
    { name: 'Ulubione',        count: 8,  hues: ['#8AAFC8','#B5A0CC','#E8A4A0'] },
    { name: 'Święta geometria',count: 5,  hues: ['#1F1B16','#B5A0CC','#E8B872'] },
  ];
  return (
    <div style={{display:'flex', flexDirection:'column'}}>
      {libs.map((lib,i) => (
        <div key={i} className="row gap-12" style={{padding:'10px 0', borderTop: i?'1px solid var(--line-soft)':'', cursor:'pointer'}} onClick={() => onNav('library')}>
          <div style={{display:'grid', gridTemplateColumns:'repeat(3,1fr)', width:48, height:36, gap:2, borderRadius:6, overflow:'hidden'}}>
            {lib.hues.map((h,j) => <div key={j} style={{background:h}}/>)}
          </div>
          <div style={{flex:1}}>
            <div style={{fontSize:13, fontWeight:600}}>{lib.name}</div>
            <div style={{fontSize:11, color:'var(--ink-3)'}}>{lib.count} pozycji</div>
          </div>
          <I name="Chevron" size={14}/>
        </div>
      ))}
    </div>
  );
}

function WidgetEvents() {
  return (
    <div style={{display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:14}}>
      {AppData.events.slice(0,4).map(ev => (
        <div key={ev.id} className="card" style={{overflow:'hidden', cursor:'pointer'}} onClick={() => window.openDetail && window.openDetail('event', ev)}>
          <div style={{height:72, background: coverBg(ev.cover)}}/>
          <div style={{padding:10}}>
            <div style={{fontSize:10.5, textTransform:'uppercase', letterSpacing:'.08em', color:'var(--ink-3)', fontWeight:600}}>{ev.type} · {ev.loc}</div>
            <div style={{fontFamily:'var(--font-serif)', fontSize:14, lineHeight:1.25, marginTop:3, fontWeight:500}}>{ev.title}</div>
            <div style={{fontSize:11.5, color:'var(--ink-3)', marginTop:4}}>{ev.date} · {ev.price}</div>
          </div>
        </div>
      ))}
    </div>
  );
}

function WidgetStats() {
  return (
    <div>
      <div style={{display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:12, marginBottom:12}}>
        {[
          { label:'Wyświetlenia', value:'4 218', delta:'+12%', up:true },
          { label:'Zapisano do Bibliotek', value:'342', delta:'+8%', up:true },
          { label:'Drop-a-Find', value:'89', delta:'+4%', up:true },
          { label:'Obserwujących', value:'1 241', delta:'+23%', up:true },
        ].map((s,i) => (
          <div key={i} className="stat">
            <div className="stat-label">{s.label}</div>
            <div className="stat-value">{s.value}</div>
            <div className={`stat-delta ${s.up?'up':'down'}`}>{s.delta} vs. poprz. tydzień</div>
          </div>
        ))}
      </div>
      <div className="todo-note"><span>📌</span> [TODO #5] Autor Free: udział w zysku = TAK (algorytm), brak narzędzi PRO</div>
    </div>
  );
}

function WidgetDrafts() {
  const drafts = [
    { title:'O ciszy po medytacji', domain:'Umysł', updated:'wczoraj', section:'Wisdom' },
    { title:'Polecajka: "Stolen Focus"', domain:'Ciało', updated:'2 dni temu', section:'Drop-a-Find' },
    { title:'Retreat sierpień — opis', domain:'Praktyki', updated:'tydzień', section:'Practices' },
  ];
  return (
    <div style={{display:'flex', flexDirection:'column'}}>
      {drafts.map((d,i) => (
        <div key={i} className="row gap-12" style={{padding:'10px 0', borderTop: i?'1px solid var(--line-soft)':'', cursor:'pointer'}}>
          <div style={{flex:1, minWidth:0}}>
            <div style={{fontSize:13, fontWeight:600, fontStyle:'italic'}}>{d.title}</div>
            <div style={{fontSize:11, color:'var(--ink-3)', marginTop:2, display:'flex', gap:8}}>
              <span>{d.domain}</span>
              <span>·</span>
              <span>{d.section}</span>
              <span>·</span>
              <span>{d.updated}</span>
            </div>
          </div>
          <button className="btn btn-soft btn-sm"><I name="Pencil" size={12}/></button>
        </div>
      ))}
    </div>
  );
}

// ================ COMMUNITY ================
FF1.Community = function Community({ phase, onOpenComposer, onDropAFind, onNav }) {
  const [tab, setTab] = useState('all');

  const tabItems = [
    { id:'all',      label:'Wszyscy' },
    { id:'following',label:'Obserwowani' },
    { id:'threads',  label:'Wątki tematyczne' },
  ];

  return (
    <div className="page" style={{maxWidth:1280}}>
      <div style={{display:'grid', gridTemplateColumns:'1fr 320px', gap:24, alignItems:'start'}}>
        <div>
          <PageHeader
            eyebrow="Community"
            title="Feed"
            subtitle="Twoje wątki, Twoje tempo. Zero algorytmu kradnącego uwagę."
            ff={phase}
            action={
              <div style={{display:'flex', gap:8}}>
                <button className="btn btn-ghost" onClick={onOpenComposer}>
                  <I name="Plus" size={14}/> Post
                </button>
                <button className="btn btn-drop" onClick={onDropAFind}>
                  <I name="Link" size={14}/> Drop-a-Find
                </button>
              </div>
            }
          />

          {/* Feed tabs */}
          <div className="feed-tabs">
            {tabItems.map(t => (
              <button key={t.id} className={`feed-tab ${tab===t.id?'active':''}`} onClick={() => setTab(t.id)}>
                {t.label}
              </button>
            ))}
          </div>

          {tab === 'threads' ? (
            <ThreadsView/>
          ) : (
            <div className="card">
              {AppData.posts.map(p => <PostCard key={p.id} post={p}/>)}
            </div>
          )}

          <div className="row" style={{justifyContent:'center', padding:'24px'}}>
            <button className="btn btn-ghost">Wczytaj starsze</button>
          </div>
        </div>
        <RightRail onOpenAuthor={(a) => window.openDetail && window.openDetail('author', a)}/>
      </div>
    </div>
  );
};

function ThreadsView() {
  return (
    <div style={{display:'flex', flexDirection:'column', gap:12}}>
      {AppData.threads.map((th, i) => {
        const d = AppData.domains.find(x => x.id === th.domain);
        return (
          <div key={th.id} className="card" style={{padding:18, cursor:'pointer', transition:'transform 180ms ease'}}
               onMouseEnter={e => e.currentTarget.style.transform='translateY(-1px)'}
               onMouseLeave={e => e.currentTarget.style.transform=''}>
            <div className="row gap-12" style={{alignItems:'flex-start'}}>
              <div style={{width:44, height:44, borderRadius:10, background:`var(--hue-${d?.hue||'sage'})`, flexShrink:0, display:'grid', placeItems:'center'}}>
                <I name="Users" size={20} sw={1.8} style={{color:'white'}}/>
              </div>
              <div style={{flex:1}}>
                <div style={{fontFamily:'var(--font-serif)', fontSize:18, fontWeight:500, marginBottom:4}}>{th.name}</div>
                <div style={{fontSize:13, color:'var(--ink-2)', lineHeight:1.5, marginBottom:8}}>{th.desc}</div>
                <div style={{display:'flex', gap:12, fontSize:12, color:'var(--ink-3)'}}>
                  <span><b>{th.members.toLocaleString('pl-PL')}</b> członków</span>
                  <span><b>{th.posts}</b> postów</span>
                  {d && <span className={`chip chip-hue-${d.id}`} style={{padding:'2px 8px', fontSize:11}}>{d.label}</span>}
                </div>
              </div>
              <button className="btn btn-ghost btn-sm">Dołącz</button>
            </div>
          </div>
        );
      })}
    </div>
  );
}

// ================ WISDOM (Netflix layout) ================
FF1.Wisdom = function Wisdom({ phase }) {
  const [showAdv, setShowAdv] = useState(false);

  // Group tiles by domain
  const domainRows = AppData.domains.map(d => ({
    domain: d,
    items: AppData.eduTiles.filter((_, i) => i % AppData.domains.length === AppData.domains.indexOf(d))
      .concat(AppData.eduTiles.slice(0, 3)),
  }));

  return (
    <div className="page">
      <PageHeader
        eyebrow="Wisdom"
        title="Wisdom"
        subtitle="Skarbiec wiedzy platformy. Polecajki, kursy, podcasty, artykuły — wybierane przez ludzi."
        ff={phase}
        action={
          <button className="btn btn-ghost" onClick={() => setShowAdv(true)}>
            <I name="Filter" size={14}/> Zaawansowane
          </button>
        }
      />

      {/* Personalised top row */}
      <RowStrip
        eyebrow="Dla Ciebie"
        title="Bo czytasz o oddechu i ciele"
        items={AppData.eduTiles.slice(0,6)}
      />

      {/* Domain rows */}
      {AppData.domains.map(d => (
        <div key={d.id}>
          {/* Domain header strip */}
          <div style={{display:'flex', alignItems:'center', gap:12, marginBottom:14, marginTop:16}}>
            <div style={{width:10, height:10, borderRadius:'50%', background:`var(--hue-${d.hue})`, flexShrink:0}}/>
            <div style={{fontFamily:'var(--font-serif)', fontSize:22, fontWeight:500}}>{d.label}</div>
            <div style={{flex:1, height:1, background:'var(--line-soft)'}}/>
            <button className="btn btn-soft btn-sm">Wszystkie z {d.label} <I name="Chevron" size={12}/></button>
          </div>

          {/* Sub-rows per subdomain (2 rows) */}
          <RowStrip
            eyebrow={d.subs.slice(0,3).join(' · ')}
            title={`Polecane w ${d.label}`}
            items={AppData.eduTiles.slice(0, 6)}
          />
          <RowStrip
            eyebrow="Drop-a-Finds"
            title={`Polecajki z dziedziny ${d.label}`}
            items={[...AppData.eduTiles].reverse().slice(0, 6)}
          />
        </div>
      ))}

      {/* Top of the week */}
      <RowStrip
        eyebrow="Top tygodnia"
        title="Najczęściej zapisywane"
        items={[...AppData.eduTiles].sort(() => Math.random() - 0.5)}
      />

      {showAdv && (
        <Modal title="Zaawansowane wyszukiwanie" wide onClose={() => setShowAdv(false)} footer={
          <>
            <button className="btn btn-ghost" onClick={() => setShowAdv(false)}>Wyczyść</button>
            <button className="btn btn-primary" onClick={() => setShowAdv(false)}>Pokaż wyniki</button>
          </>
        }>
          <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:18}}>
            <div className="form-group">
              <div className="form-label">Typ treści</div>
              <div className="row gap-8" style={{flexWrap:'wrap'}}>
                {['Artykuł','Książka','Podcast','Kurs','Wykład','Drop-a-Find'].map((t,i) => (
                  <button key={t} className={`chip ${i<2?'active':''}`}>{t}</button>
                ))}
              </div>
            </div>
            <div className="form-group">
              <div className="form-label">Dziedzina (Fields)</div>
              <div className="row gap-8" style={{flexWrap:'wrap'}}>
                {AppData.domains.map(d => (
                  <button key={d.id} className={`chip chip-hue-${d.hue} active`}>{d.label}</button>
                ))}
              </div>
              <div className="form-help">Predefiniowane przez adminów. [TODO #3: dziedzina jako graf, nie drzewo]</div>
            </div>
            <div className="form-group">
              <div className="form-label">Język</div>
              <div className="row gap-8">
                {['Polski','English','Deutsch','Wszystkie'].map((t,i) => (
                  <button key={t} className={`chip ${i===0?'active':''}`}>{t}</button>
                ))}
              </div>
            </div>
            <div className="form-group">
              <div className="form-label">Autor</div>
              <input className="input" placeholder="Szukaj autora…"/>
            </div>
          </div>
        </Modal>
      )}
    </div>
  );
};

// ================ JOY ================
FF1.Joy = function Joy({ phase }) {
  const joyTiles = {
    moments: [
      {id:'jm1', type:'Shared Moment', title:'Kawa na Mokotowie w czwartek 8:00', author:'Anna H.', cover:['#E8B872','#E8A4A0']},
      {id:'jm2', type:'Shared Moment', title:'Wieczorna joga w parku, niedziela', author:'Hanna W.', cover:['#9FB89A','#E8B872']},
      {id:'jm3', type:'Shared Moment', title:'Spacer po lesie — ktoś z Kabat?', author:'Marcin D.', cover:['#8AAFC8','#B5A0CC']},
      {id:'jm4', type:'Shared Moment', title:'Wyjście na muzeum, sobota rano', author:'Aga P.', cover:['#B5A0CC','#E8A4A0']},
      {id:'jm5', type:'Shared Moment', title:'Improwizacja teatralna, wtorek', author:'Lena K.', cover:['#E8A4A0','#1F1B16']},
    ],
    music: [
      {id:'mu1', type:'Muzyka', title:'Playlist do porannej praktyki', author:'Hanna Wójcik', cover:['#B5A0CC','#8AAFC8']},
      {id:'mu2', type:'Muzyka', title:'Binaural beats — skupienie', author:'Marcin Dębski', cover:['#8AAFC8','#1F1B16']},
      {id:'mu3', type:'Muzyka', title:'Chant tybetański — 40 min', author:'Studio Mokshana', cover:['#9FB89A','#B5A0CC']},
      {id:'mu4', type:'Muzyka', title:'Lo-fi do czytania', author:'Lena K.', cover:['#E8B872','#9FB89A']},
    ],
    travel: [
      {id:'tr1', type:'Travel', title:'Mazury ciszy i wody — 3 dni', author:'Aga Pawlik', cover:['#9FB89A','#8AAFC8']},
      {id:'tr2', type:'Travel', title:'Bieszczady w maju', author:'Tomek K.', cover:['#E8B872','#9FB89A']},
      {id:'tr3', type:'Travel', title:'Kraków — miejsca poza szlakiem', author:'Anna H.', cover:['#E8A4A0','#E8B872']},
    ],
    smile: [
      {id:'sm1', type:'Smile', title:'10 filozoficznych żartów, które śmieszą', author:'Marcin D.', cover:['#E8B872','#E8A4A0']},
      {id:'sm2', type:'Smile', title:'Memy o jodze vs. rzeczywistość', author:'Hanna W.', cover:['#9FB89A','#E8A4A0']},
      {id:'sm3', type:'Smile', title:'Co powie fizyk kwantowy na przyjęciu', author:'Marcin D.', cover:['#8AAFC8','#B5A0CC']},
    ],
    inspired: [
      {id:'ia1', type:'Inspired Action', title:'7 dni bez telefonu — mój raport', author:'Lena K.', cover:['#B5A0CC','#E8B872']},
      {id:'ia2', type:'Inspired Action', title:'30 dni wdzięczności — wyniki', author:'Anna H.', cover:['#E8A4A0','#9FB89A']},
      {id:'ia3', type:'Inspired Action', title:'Wyzwanie: rano bez ekranu', author:'Tomek K.', cover:['#8AAFC8','#E8A4A0']},
      {id:'ia4', type:'Inspired Action', title:'Tydzień bez oceniania innych', author:'Aga P.', cover:['#9FB89A','#B5A0CC']},
    ],
  };

  return (
    <div className="page">
      <PageHeader
        eyebrow="Joy"
        title="Joy"
        subtitle="Życie to nie tylko praca nad sobą. Wspólne chwile, muzyka, podróże, małe radości i inspiracje do działania."
        ff={phase}
      />

      {/* Shared Moments — horizontal scroll with special card style */}
      <div className="row-strip">
        <div className="row-strip-head">
          <div>
            <div className="row-strip-eyebrow">Spontanicznie · Dzieje się teraz</div>
            <div className="row-strip-title">Shared Moments</div>
          </div>
          <button className="btn btn-drop btn-sm"><I name="Plus" size={12}/> Dodaj Moment</button>
        </div>
        <div className="row-strip-track">
          {joyTiles.moments.map(m => (
            <div key={m.id} className="joy-moment-card">
              <div style={{height:80, borderRadius:'var(--r-1)', background:coverBg(m.cover), marginBottom:8}}/>
              <div style={{fontSize:10.5, textTransform:'uppercase', letterSpacing:'.06em', color:'var(--ink-3)', fontWeight:600}}>{m.type}</div>
              <div className="moment-title">{m.title}</div>
              <div className="moment-who">{m.author}</div>
              <button className="btn btn-soft btn-sm" style={{marginTop:10, width:'100%'}}>Dołącz</button>
            </div>
          ))}
        </div>
      </div>

      <RowStrip eyebrow="Muzyka" title="Dźwięk do Twojego rytmu" items={joyTiles.music}/>
      <RowStrip eyebrow="Travel" title="Miejsca z duszą" items={joyTiles.travel}/>
      <RowStrip eyebrow="Smile" title="Śmiech też jest praktyką" items={joyTiles.smile}/>
      <RowStrip eyebrow="Inspired Actions" title="Małe kroki, wielkie zmiany" items={joyTiles.inspired}/>

      {/* Coming soon teaser */}
      <div className="card" style={{padding:24, background:'linear-gradient(135deg, color-mix(in oklab, var(--hue-amber) 15%, var(--bg-elev)), var(--bg-elev))'}}>
        <div className="row gap-16">
          <div style={{flex:1}}>
            <div className="section-eyebrow">Wkrótce · FF3</div>
            <div className="section-title" style={{marginTop:6}}>Short Moments — spontaniczne mikro-eventy</div>
            <div className="muted mt-8" style={{maxWidth:520}}>"Idę o 17 na jogę, kto ze mną?" · "Spacer w Kabatach o świcie" · Zwykłe życie, dzielone.</div>
          </div>
          <span className="phase-ribbon ff3" style={{alignSelf:'flex-start', background:'color-mix(in oklab, var(--hue-amber) 20%, var(--bg-elev))', color:'#8C6A20'}}>FF3</span>
        </div>
      </div>
    </div>
  );
};

// ================ LIBRARY (Pinterest-style boards) ================
FF1.Library = function Library({ phase }) {
  const [showSave, setShowSave] = useState(false);
  const boards = [
    { name:'Do przeczytania', count:14, hues:['#E8A4A0','#E8B872','#9FB89A','#8AAFC8'], system:true },
    { name:'Ulubione',        count:8,  hues:['#8AAFC8','#B5A0CC','#E8A4A0','#E8B872'], system:true },
    { name:'Obejrzane',       count:32, hues:['#9FB89A','#1F1B16','#B5A0CC','#E8A4A0'], system:true },
    { name:'Święta geometria',count:5,  hues:['#1F1B16','#B5A0CC','#E8B872','#94463F'] },
    { name:'Fizyka kwantowa', count:12, hues:['#8AAFC8','#1F1B16','#B5A0CC','#E8A4A0'] },
    { name:'Joga rano',       count:7,  hues:['#E8B872','#9FB89A','#E8A4A0','#B5A0CC'] },
  ];
  return (
    <div className="page">
      <PageHeader
        eyebrow="Biblioteka"
        title="Biblioteka"
        subtitle="Twoje tablice. Zapisuj posty, polecajki, kursy i artykuły w prywatnych kolekcjach."
        ff={phase}
        action={
          <button className="btn btn-accent" onClick={() => setShowSave(true)}>
            <I name="Plus" size={14}/> Nowa tablica
          </button>
        }
      />
      <div className="library-boards">
        {boards.map(b => (
          <div key={b.name} className="library-board">
            <div className="library-board-mosaic">
              <div className="main-cell" style={{background:b.hues[0]}}/>
              <div style={{background:b.hues[1]}}/>
              <div style={{background:b.hues[2]}}/>
            </div>
            <div className="library-board-info">
              <div className="library-board-name">{b.name}</div>
              <div className="library-board-count">{b.count} pozycji{b.system ? ' · systemowa' : ''}</div>
            </div>
          </div>
        ))}
      </div>

      {showSave && (
        <div className="save-popup" onClick={() => setShowSave(false)}>
          <div className="save-popup-panel" onClick={e => e.stopPropagation()}>
            <div style={{padding:'16px 18px', borderBottom:'1px solid var(--line)', display:'flex', justifyContent:'space-between', alignItems:'center'}}>
              <div style={{fontFamily:'var(--font-serif)', fontSize:18, fontWeight:500}}>Nowa tablica</div>
              <button className="icon-btn" style={{border:'none', background:'transparent'}} onClick={() => setShowSave(false)}>
                <I name="X" size={14}/>
              </button>
            </div>
            <div style={{padding:18}}>
              <div className="form-group">
                <div className="form-label">Nazwa tablicy</div>
                <input className="input" placeholder="np. Fizyka kwantowa, Poranne rytuały…" autoFocus/>
              </div>
              <button className="btn btn-primary" style={{width:'100%', justifyContent:'center'}}
                      onClick={() => { setShowSave(false); window.__app.pushToast('ok','Tablica utworzona','Możesz teraz zapisywać treści w tej tablicy.'); }}>
                Utwórz tablicę
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

// ================ PRACTICES (Events & Services) ================
FF1.Practices = function Practices({ phase }) {
  return (
    <div className="page">
      <PageHeader
        eyebrow="Practices"
        title="Practices"
        subtitle="Zajęcia, terapie, produkty cyfrowe, kursy stacjonarne i online. Wszystko od autorów i partnerów platformy."
        ff={phase}
      />
      <div style={{display:'grid', gridTemplateColumns:'repeat(auto-fill, minmax(280px,1fr))', gap:16}}>
        {AppData.events.map(ev => (
          <div key={ev.id} className="card" style={{overflow:'hidden', cursor:'pointer'}} onClick={() => window.openDetail && window.openDetail('event', ev)}>
            <div style={{height:120, background: coverBg(ev.cover)}}/>
            <div style={{padding:16}}>
              <div style={{fontSize:11, textTransform:'uppercase', letterSpacing:'.08em', color:'var(--ink-3)', fontWeight:600, marginBottom:4}}>{ev.type}</div>
              <div style={{fontFamily:'var(--font-serif)', fontSize:18, fontWeight:500, lineHeight:1.25, marginBottom:8}}>{ev.title}</div>
              <div style={{fontSize:13, color:'var(--ink-2)'}}>{ev.author}</div>
              <div style={{display:'flex', gap:12, marginTop:10, fontSize:12.5, color:'var(--ink-3)'}}>
                <span><I name="MapPin" size={12}/> {ev.loc}</span>
                <span><I name="Calendar" size={12}/> {ev.date}</span>
              </div>
              <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', marginTop:12, paddingTop:12, borderTop:'1px solid var(--line-soft)'}}>
                <span style={{fontWeight:700, fontSize:15}}>{ev.price}</span>
                <span style={{fontSize:12, color:'var(--ink-3)'}}>{ev.spots}</span>
              </div>
            </div>
          </div>
        ))}
      </div>
      <div className="todo-note" style={{marginTop:16}}>
        📌 [TODO #7] Widok artykułu w trybie Netflix — modal na całą szerokość z treścią + pasek z autorem i powiązanymi
      </div>
    </div>
  );
};

// ================ SETTINGS (preserved) ================
FF1.Settings = function Settings({ phase }) {
  const [section, setSection] = useState('account');
  const sections = [
    { id:'account', label:'Konto' },
    { id:'preferences', label:'Preferencje' },
    { id:'privacy', label:'Prywatność' },
    { id:'notifications', label:'Powiadomienia' },
    { id:'integrations', label:'Połączenia' },
  ];
  return (
    <div className="page">
      <PageHeader eyebrow="Twoje konto" title="Ustawienia" ff={phase}/>
      <div style={{display:'grid', gridTemplateColumns:'220px 1fr', gap:24, alignItems:'start'}}>
        <div className="card" style={{padding:8}}>
          {sections.map(s => (
            <button key={s.id} className={`nav-item ${section===s.id?'active':''}`} onClick={() => setSection(s.id)}>
              {s.label}
            </button>
          ))}
        </div>
        <div className="card" style={{padding:24}}>
          {section === 'account' && <>
            <div className="section-title mb-16">Dane konta</div>
            <div className="form-group"><div className="form-label">Imię i nazwisko</div><input className="input" defaultValue="Anna Hueman"/></div>
            <div className="form-group"><div className="form-label">Nick</div><input className="input" defaultValue="anna.h"/></div>
            <div className="form-group"><div className="form-label">Email</div><input className="input" defaultValue="anna@hueman.com"/></div>
            <div style={{marginTop:24, padding:16, border:'1px dashed var(--line)', borderRadius:'var(--r-2)'}}>
              <div style={{fontWeight:600, marginBottom:6}}>Usunięcie konta</div>
              <div className="muted" style={{fontSize:12.5}}>Po wybraniu tej opcji konto przechodzi w stan karencji 30 dni.</div>
              <button className="btn btn-ghost btn-sm mt-12" style={{color:'var(--accent)'}}>Usuń konto</button>
            </div>
          </>}
          {section === 'preferences' && <>
            <div className="section-title mb-16">Twoje dziedziny (Fields)</div>
            <div className="muted mb-16" style={{fontSize:13}}>Wybór z onboardingu — zmień w każdej chwili. Zmiana aktualizuje rekomendacje.</div>
            {AppData.domains.map(d => (
              <div key={d.id} style={{padding:'14px 0', borderTop:'1px solid var(--line-soft)'}}>
                <div className="row gap-8 mb-8">
                  <span className={`chip chip-hue-${d.hue} active`}>{d.label}</span>
                  <Toggle on={true} onChange={()=>{}}/>
                </div>
                <div className="row gap-6" style={{flexWrap:'wrap'}}>
                  {d.subs.map((s,i) => <button key={s} className={`chip ${i<3?'active':''}`} style={{fontSize:11}}>{s}</button>)}
                </div>
              </div>
            ))}
          </>}
          {section === 'privacy' && <>
            <div className="section-title mb-16">Prywatność</div>
            {[
              ['Profil publiczny', 'Jeśli wyłączysz, profil widoczny tylko dla Ciebie.', true],
              ['Algorytm uczy się z aktywności', 'Bez tego — tylko preferencje z onboardingu.', true],
              ['Posty sponsorowane (po Go-Live)', 'Zawsze oznaczone. Możesz wyłączyć z wyprzedzeniem.', false],
            ].map(([title, desc, on], i) => (
              <div key={i} className="row" style={{padding:'14px 0', borderTop:i?'1px solid var(--line-soft)':'', justifyContent:'space-between'}}>
                <div style={{flex:1}}>
                  <div style={{fontWeight:600}}>{title}</div>
                  <div className="muted" style={{fontSize:12.5}}>{desc}</div>
                </div>
                <Toggle on={on} onChange={()=>{}}/>
              </div>
            ))}
          </>}
          {section !== 'account' && section !== 'preferences' && section !== 'privacy' && (
            <div className="empty"><div className="empty-icon">∅</div><div className="muted">Sekcja w przygotowaniu.</div></div>
          )}
        </div>
      </div>
    </div>
  );
};

window.FF1 = FF1;