// BeHueman v2 — FF2 screens: Onboarding (simplified) · PostComposer · DropAFindComposer
// + preserved FF2 screens: Groups · AuthorsCatalog · Events · BrowserPlugin · DashboardConfig
const FF2 = {};

// ================ ONBOARDING v2 (max 3 steps + mini-tutorial) ================
FF2.Onboarding = function Onboarding({ onDone }) {
  const [step, setStep] = useState(0); // 0=Welcome, 1=Domains, 2=Tutorial offer
  const [picked, setPicked] = useState(new Set(['cialo','dusza']));
  const [showTutorial, setShowTutorial] = useState(false);
  const total = 3;

  const toggle = (id) => setPicked(prev => {
    const n = new Set(prev); n.has(id) ? n.delete(id) : n.add(id); return n;
  });

  if (showTutorial) {
    return <MiniTutorial onDone={onDone}/>;
  }

  return (
    <div className="onboarding-stage">
      {/* Progress bar */}
      <div className="onboarding-progress">
        {[0,1,2].map(i => (
          <span key={i} className={i < step ? 'done' : i === step ? 'active' : ''}/>
        ))}
      </div>

      <div className="onboarding-content">

        {/* Step 0: Welcome */}
        {step === 0 && (
          <div style={{maxWidth:580, textAlign:'center'}}>
            <div className="logo-mark" style={{fontSize:46, marginBottom:20, justifyContent:'center'}}>
              be<span className="hue">hue</span>man
            </div>
            <div className="spectrum" style={{maxWidth:160, margin:'0 auto 28px'}}/>
            <h1 style={{fontFamily:'var(--font-serif)', fontWeight:400, fontSize:40, lineHeight:1.1, letterSpacing:'-0.02em', margin:'0 0 18px'}}>
              Witaj w przestrzeni,<br/>gdzie nie chodzi o uwagę.
            </h1>
            <p style={{fontSize:15, lineHeight:1.65, color:'var(--ink-2)', maxWidth:480, margin:'0 auto 28px'}}>
              Tu nie ma rankingów, gwiazdek ani algorytmu, który chce Cię zatrzymać.
              Jest miejsce na rozmowę, naukę i oddech. <em>Human</em> przez <em>hue</em> — odcień, który każdy wnosi po swojemu.
            </p>
            <div className="card" style={{padding:18, textAlign:'left', maxWidth:400, margin:'0 auto'}}>
              <div className="section-eyebrow mb-10">Nasze zasady</div>
              <ul style={{listStyle:'none', padding:0, margin:0, display:'flex', flexDirection:'column', gap:8, fontSize:13.5}}>
                {['Nie hejtujemy.','Szanujemy każdą perspektywę.','Bez gwiazdek — rozmawiamy.','Współpracujemy zamiast rywalizować.'].map(t => (
                  <li key={t} className="row gap-8"><I name="Check" size={15}/> {t}</li>
                ))}
              </ul>
            </div>
          </div>
        )}

        {/* Step 1: Domains */}
        {step === 1 && (
          <div style={{maxWidth:680, width:'100%'}}>
            <div className="section-eyebrow">2 z 3</div>
            <h2 style={{fontFamily:'var(--font-serif)', fontWeight:400, fontSize:32, letterSpacing:'-0.02em', margin:'6px 0 6px'}}>
              Co Cię ciekawi?
            </h2>
            <p className="muted mb-20" style={{fontSize:14, maxWidth:480}}>
              Kliknij dziedziny, które rezonują. Możesz zaznaczyć kilka — to nie egzamin. Zmieniasz w każdej chwili.
            </p>
            <div className="onboarding-domains-grid">
              {AppData.domains.map(d => (
                <div key={d.id}
                  className={`domain-card-v2 ${picked.has(d.id) ? 'active' : ''}`}
                  onClick={() => toggle(d.id)}
                >
                  <div className="row gap-10 mb-10">
                    <div style={{width:32, height:32, borderRadius:'50%', background:`var(--hue-${d.hue})`, flexShrink:0}}/>
                    <div style={{fontFamily:'var(--font-serif)', fontSize:20, fontWeight:500}}>{d.label}</div>
                    {picked.has(d.id) && (
                      <div style={{marginLeft:'auto', width:22, height:22, background:'var(--ink-1)', color:'white', borderRadius:'50%', display:'grid', placeItems:'center'}}>
                        <I name="Check" size={12} sw={3}/>
                      </div>
                    )}
                  </div>
                  <div className="domain-subs">
                    {d.subs.slice(0,5).map(s => (
                      <span key={s} className="chip" style={{fontSize:11, pointerEvents:'none'}}>
                        {s}
                      </span>
                    ))}
                    {d.subs.length > 5 && (
                      <span className="chip" style={{fontSize:11, color:'var(--ink-4)', pointerEvents:'none'}}>+{d.subs.length - 5}</span>
                    )}
                  </div>
                </div>
              ))}
            </div>
            <p className="muted mt-16" style={{fontSize:12}}>
              Dziedziny (Fields) są predefiniowane przez administratorów platformy. W przyszłości możliwe tagi swobodne (hashtagi).
            </p>
          </div>
        )}

        {/* Step 2: Tutorial offer */}
        {step === 2 && (
          <div style={{maxWidth:560, width:'100%', textAlign:'center'}}>
            <div className="section-eyebrow">3 z 3</div>
            <h2 style={{fontFamily:'var(--font-serif)', fontWeight:400, fontSize:32, letterSpacing:'-0.02em', margin:'6px 0 18px'}}>
              Szybki tour po platformie?
            </h2>
            <p className="muted mb-28" style={{fontSize:14, maxWidth:400, margin:'0 auto 28px', lineHeight:1.6}}>
              Trzy dymki — wskazujemy kluczowe elementy. Zajmuje 30 sekund. Możesz pominąć i wrócić do tutorialu w Ustawieniach.
            </p>
            <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:12, marginBottom:32}}>
              {[
                { icon:'Dashboard', label:'MyHue', hue:'amber', desc:'Twoje centrum — zaczynasz tu każdego dnia' },
                { icon:'Link', label:'Drop-a-Find', hue:'rose', desc:'Core feature — polecaj zasoby z całego internetu' },
                { icon:'Education', label:'Wisdom', hue:'sage', desc:'Skarbiec wiedzy tworzony przez społeczność' },
              ].map(t => (
                <div key={t.label} className="card" style={{padding:16, textAlign:'center'}}>
                  <div style={{width:40, height:40, borderRadius:'50%', background:`color-mix(in oklab, var(--hue-${t.hue}) 25%, var(--bg-elev))`, display:'grid', placeItems:'center', margin:'0 auto 10px', color:`color-mix(in oklab, var(--hue-${t.hue}) 70%, var(--ink-1))`}}>
                    <I name={t.icon} size={20}/>
                  </div>
                  <div style={{fontFamily:'var(--font-serif)', fontSize:16, fontWeight:500, marginBottom:4}}>{t.label}</div>
                  <div className="muted" style={{fontSize:12, lineHeight:1.4}}>{t.desc}</div>
                </div>
              ))}
            </div>
            <div style={{display:'flex', flexDirection:'column', gap:10, alignItems:'center'}}>
              <button className="btn btn-primary" style={{padding:'12px 28px', fontSize:14}} onClick={() => setShowTutorial(true)}>
                Pokaż mi platformę
              </button>
              <button className="btn btn-ghost" style={{fontSize:13}} onClick={onDone}>
                Przejdź dalej bez tutorialu
              </button>
            </div>
          </div>
        )}
      </div>

      <div className="onboarding-foot">
        <button className="btn btn-ghost" onClick={() => step > 0 ? setStep(step - 1) : onDone()}>
          {step === 0 ? 'Pomiń onboarding' : 'Wstecz'}
        </button>
        <div style={{fontSize:12, color:'var(--ink-3)'}}>{step + 1} z {total}</div>
        <button className="btn btn-primary" onClick={() => step < total - 1 ? setStep(step + 1) : setShowTutorial(false) || onDone()}>
          {step === total - 1 ? 'Wejdź do platformy' : 'Dalej'} <I name="Chevron" size={12}/>
        </button>
      </div>
    </div>
  );
};

// ================ MINI TUTORIAL (3 tooltip overlays) ================
function MiniTutorial({ onDone }) {
  const [step, setStep] = useState(0);

  const tips = [
    {
      id: 'myhue',
      title: 'MyHue — Twoje centrum',
      body: 'Tu zaczyna się Twój dzień. Widżety konfigurujesz sam — posty ze społeczności, najciekawsze z Wisdom, biblioteka.',
      pos: { top: 72, left: 260 },
      arrowClass: 'arrow-left',
      highlight: { top: 64, left: 14, width: 212, height: 36, borderRadius: 8 },
    },
    {
      id: 'dropafind',
      title: 'Drop-a-Find — core feature',
      body: 'Wklej link z dowolnej strony — platforma pobiera metadane, Ty wybierasz dziedzinę i publikujesz polecajkę dla społeczności.',
      pos: { top: 72, right: 200 },
      arrowClass: 'arrow-top',
      highlight: { top: 55, right: 160, width: 140, height: 36, borderRadius: 20 },
    },
    {
      id: 'wisdom',
      title: 'Wisdom — skarbiec wiedzy',
      body: 'Książki, kursy, podcasty, artykuły — polecane przez ludzi, nie algorytm. Ułożone w dziedziny i poddziedziny.',
      pos: { top: 72, left: 260 },
      arrowClass: 'arrow-left',
      highlight: { top: 64 + 36 + 4 + 36 + 4 + 36 + 4, left: 14, width: 212, height: 36, borderRadius: 8 },
    },
  ];

  const tip = tips[step];
  const isLast = step === tips.length - 1;

  return (
    <div style={{position:'relative', width:'100vw', height:'100vh', background:'rgba(31,27,22,0.25)', backdropFilter:'blur(1px)'}}>
      {/* Highlight ring */}
      <div style={{
        position:'fixed',
        ...tip.highlight,
        boxShadow: '0 0 0 3px var(--hue-amber), 0 0 0 8px rgba(232,184,114,0.25)',
        borderRadius: tip.highlight.borderRadius || 8,
        animation: 'pulseRing 2s ease-in-out infinite',
        pointerEvents: 'none',
        zIndex: 2001,
      }}/>
      {/* Tooltip */}
      <div className={`tutorial-tooltip ${tip.arrowClass}`} style={{
        position: 'fixed', zIndex: 2002,
        ...tip.pos,
      }}>
        <div className="tutorial-step-count">{step + 1} / {tips.length}</div>
        <div style={{fontWeight:700, marginBottom:5}}>{tip.title}</div>
        <div style={{opacity:0.85, lineHeight:1.5}}>{tip.body}</div>
        <div style={{display:'flex', justifyContent:'flex-end', gap:8, marginTop:12}}>
          {!isLast ? (
            <>
              <button style={{background:'transparent', border:'none', color:'rgba(255,255,255,0.6)', fontSize:12, cursor:'pointer'}} onClick={onDone}>Pomiń</button>
              <button style={{background:'rgba(255,255,255,0.18)', border:'1px solid rgba(255,255,255,0.25)', borderRadius:'var(--r-pill)', padding:'5px 14px', color:'white', fontSize:12, cursor:'pointer'}} onClick={() => setStep(s => s + 1)}>
                Dalej →
              </button>
            </>
          ) : (
            <button style={{background:'var(--hue-amber)', border:'none', borderRadius:'var(--r-pill)', padding:'6px 16px', color:'var(--ink-1)', fontSize:12.5, fontWeight:700, cursor:'pointer'}} onClick={onDone}>
              Gotowe — wchodzę! ✓
            </button>
          )}
        </div>
      </div>
    </div>
  );
}

// ================ POST COMPOSER ================
FF2.PostComposer = function PostComposer({ onClose, role }) {
  const [body, setBody] = useState('');
  const [domain, setDomain] = useState('cialo');
  const [sections, setSections] = useState(new Set(['community']));
  const [scheduled, setScheduled] = useState(false);
  const isAuthor = role === 'autor' || role === 'partner';

  const toggleSection = (id) => setSections(prev => {
    const n = new Set(prev); n.has(id) ? n.delete(id) : n.add(id); return n;
  });

  const authorSections = ['wisdom', 'joy', 'practices', 'goods-market'];
  const sectionLabels = { community:'Community', wisdom:'Wisdom', joy:'Joy', practices:'Practices', 'goods-market':'Goods Market' };

  return (
    <Modal title={<span className="row gap-8"><I name="Pencil" size={16}/> Nowy Post</span>}
      wide onClose={onClose}
      footer={
        <>
          <button className="btn btn-ghost" onClick={onClose}>Anuluj</button>
          <button className="btn btn-soft" onClick={() => { onClose(); window.__app.pushToast('ok','Zapisano szkic','Znajdziesz go w sekcji Create → Szkice.'); }}>
            Zapisz szkic
          </button>
          {scheduled
            ? <button className="btn btn-primary" onClick={onClose}><I name="Calendar" size={14}/> Zaplanuj</button>
            : <button className="btn btn-accent" onClick={onClose}><I name="Send" size={14}/> Opublikuj</button>
          }
        </>
      }
    >
      {/* Author context */}
      {role === 'partner' && (
        <div className="form-group">
          <div className="form-label">Publikujesz jako</div>
          <div className="row gap-6">
            {['Anna Hueman (Ty)','Studio Wellness Sp. z o.o.'].map((n,i) => (
              <button key={i} className={`chip ${i===0?'active':''}`}>{n}</button>
            ))}
          </div>
        </div>
      )}

      {/* Sekcja (Community domyślnie) */}
      <div className="form-group">
        <div className="form-label">Sekcja docelowa</div>
        <div className="row gap-6" style={{flexWrap:'wrap'}}>
          <button className={`chip ${sections.has('community')?'active':''}`} onClick={() => toggleSection('community')}>
            <I name="Community" size={12}/> Community
          </button>
          {isAuthor && authorSections.map(s => (
            <button key={s} className={`chip ${sections.has(s)?'active':''}`} onClick={() => toggleSection(s)}>
              {sectionLabels[s]}
            </button>
          ))}
        </div>
        {!isAuthor && (
          <div className="form-help">Jako Member możesz publikować w Community. Zostań Autorem, żeby tworzyć treści w Wisdom, Joy i Practices.</div>
        )}
      </div>

      {/* Body */}
      <div className="form-group">
        <div className="form-label">Treść</div>
        <textarea className="textarea" rows={6} placeholder="Co dziś chcesz powiedzieć?" value={body} onChange={e => setBody(e.target.value)}/>
        <div style={{textAlign:'right', fontSize:11, color:'var(--ink-4)', marginTop:4}}>{body.length} znaków</div>
      </div>

      {/* Media placeholder */}
      <div className="form-group">
        <div className="form-label">Media (opcjonalnie)</div>
        <div style={{border:'1.5px dashed var(--line)', borderRadius:'var(--r-2)', padding:'24px', textAlign:'center', cursor:'pointer', color:'var(--ink-3)'}}
             onClick={() => window.__app.pushToast('ok','Dodawanie mediów','Funkcja dodawania zdjęć i video wkrótce.')}>
          <I name="Image" size={22}/>
          <div style={{marginTop:8, fontSize:13}}>Dodaj zdjęcie lub video</div>
        </div>
      </div>

      {/* Domain */}
      {isAuthor && (
        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:16}}>
          <div className="form-group">
            <div className="form-label">Dziedzina (Fields)</div>
            <select className="select" value={domain} onChange={e => setDomain(e.target.value)}>
              {AppData.domains.map(d => <option key={d.id} value={d.id}>{d.label}</option>)}
            </select>
          </div>
          <div className="form-group">
            <div className="form-label">Poddziedzina</div>
            <select className="select">
              {AppData.domains.find(d => d.id === domain)?.subs.map(s => <option key={s}>{s}</option>)}
            </select>
          </div>
        </div>
      )}

      {/* Scheduled */}
      <div className="row" style={{padding:'14px 0', borderTop:'1px solid var(--line-soft)', justifyContent:'space-between'}}>
        <div>
          <div style={{fontWeight:600, fontSize:13}}>Zaplanuj publikację</div>
          <div className="muted" style={{fontSize:12}}>Automatyczna publikacja w wybranym terminie.</div>
        </div>
        <Toggle on={scheduled} onChange={setScheduled}/>
      </div>
      {scheduled && (
        <div className="row gap-12" style={{marginTop:8}}>
          <input className="input" type="date" defaultValue="2026-05-15"/>
          <input className="input" type="time" defaultValue="09:00"/>
        </div>
      )}
    </Modal>
  );
};

// ================ DROP-A-FIND COMPOSER ================
FF2.DropAFindComposer = function DropAFindComposer({ onClose, role }) {
  const [url, setUrl] = useState('');
  const [loading, setLoading] = useState(false);
  const [fetched, setFetched] = useState(null);
  const [domain, setDomain] = useState('cialo');
  const [targetSections, setTargetSections] = useState(new Set(['wisdom']));
  const [addToCommunity, setAddToCommunity] = useState(false);
  const [comment, setComment] = useState('');
  const [scheduled, setScheduled] = useState(false);
  const isAuthor = role === 'autor' || role === 'partner';

  const SAMPLE_PREVIEWS = {
    goodreads: { title:'Kobiety, które biegają z wilkami', author:'Clarissa Pinkola Estés', source:'Goodreads · Książka', cover:['#94463F','#E8B872'] },
    spotify:   { title:'The Huberman Lab Podcast', author:'Andrew Huberman', source:'Spotify · Podcast', cover:['#1F1B16','#9FB89A'] },
    youtube:   { title:'Fizyka kwantowa dla laika — wykład', author:'Marcin Dębski', source:'YouTube · Video', cover:['#8AAFC8','#E8B872'] },
    default:   { title:'Interesujący artykuł z sieci', author:'Autor zewnętrzny', source:'artykuł', cover:['#B5A0CC','#8AAFC8'] },
  };

  const handleFetch = (inputUrl) => {
    if (!inputUrl.trim()) return;
    setLoading(true);
    setFetched(null);
    setTimeout(() => {
      const key = inputUrl.includes('goodreads') ? 'goodreads'
        : inputUrl.includes('spotify') ? 'spotify'
        : inputUrl.includes('youtube') ? 'youtube'
        : 'default';
      setFetched(SAMPLE_PREVIEWS[key]);
      setLoading(false);
    }, 1200);
  };

  const toggleSection = (id) => setTargetSections(prev => {
    const n = new Set(prev); n.has(id) ? n.delete(id) : n.add(id); return n;
  });

  return (
    <Modal
      title={
        <span className="row gap-8">
          <span style={{color:'var(--hue-amber)'}}>◆</span>
          <span>Nowy Drop-a-Find</span>
          <span style={{fontSize:12, background:'color-mix(in oklab, var(--hue-amber) 20%, var(--bg-elev))', padding:'2px 8px', borderRadius:'var(--r-pill)', color:'color-mix(in oklab, var(--hue-amber) 80%, var(--ink-1))', fontWeight:700}}>core feature</span>
        </span>
      }
      wide onClose={onClose}
      footer={
        <>
          <button className="btn btn-ghost" onClick={onClose}>Anuluj</button>
          <button className="btn btn-soft" onClick={() => { onClose(); window.__app.pushToast('ok','Zapisano szkic Drop-a-Find','Znajdziesz go w Create → Szkice.'); }}>
            Zapisz szkic
          </button>
          <button className="btn btn-drop" onClick={() => { onClose(); window.__app.pushToast('ok','Drop-a-Find opublikowany','Polecajka pojawiła się w wybranych sekcjach.'); }}
                  disabled={!fetched && !url.trim()}>
            <I name="Link" size={14}/> Opublikuj Drop-a-Find
          </button>
        </>
      }
    >
      {/* URL input */}
      <div className="form-group">
        <div className="form-label row gap-6">
          <I name="Link" size={12}/>
          Wklej link do zasobu zewnętrznego
        </div>
        <div className="row gap-8">
          <input
            className="input"
            placeholder="https://www.goodreads.com/book/… lub spotify.com/…"
            value={url}
            onChange={e => { setUrl(e.target.value); setFetched(null); }}
            onPaste={e => { const v = e.clipboardData.getData('text'); setTimeout(() => handleFetch(v), 50); }}
            onBlur={() => handleFetch(url)}
            style={{flex:1}}
          />
          <button className="btn btn-soft" onClick={() => handleFetch(url)}>
            <I name="Link" size={14}/> Pobierz dane
          </button>
        </div>
        <div className="form-help">Obsługujemy: Goodreads, Spotify, Apple Podcasts, YouTube, Wikipedia, blogi i inne strony z Open Graph.</div>
      </div>

      {/* Loading state */}
      {loading && (
        <div className="url-fetch-preview">
          <div className="url-fetch-cover loading-shimmer"/>
          <div className="url-fetch-meta">
            <div className="loading-shimmer" style={{height:10, width:'40%', borderRadius:4, marginBottom:8}}/>
            <div className="loading-shimmer" style={{height:14, width:'80%', borderRadius:4, marginBottom:6}}/>
            <div className="loading-shimmer" style={{height:11, width:'50%', borderRadius:4}}/>
          </div>
        </div>
      )}

      {/* Fetched preview */}
      {fetched && !loading && (
        <div className="url-fetch-preview" style={{marginBottom:8}}>
          <div className="url-fetch-cover" style={{background: coverBg(fetched.cover)}}/>
          <div className="url-fetch-meta">
            <div className="url-fetch-source">{fetched.source}</div>
            <div className="url-fetch-title">{fetched.title}</div>
            <div style={{fontSize:12.5, color:'var(--ink-3)'}}>{fetched.author}</div>
            <div className="row gap-6 mt-8">
              <span style={{fontSize:11, color:'var(--hue-sage)'}}>✓ Metadane pobrane automatycznie</span>
            </div>
          </div>
        </div>
      )}

      {/* Domains */}
      <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:16}}>
        <div className="form-group">
          <div className="form-label">Dziedzina (Fields)</div>
          <select className="select" value={domain} onChange={e => setDomain(e.target.value)}>
            {AppData.domains.map(d => <option key={d.id} value={d.id}>{d.label}</option>)}
          </select>
        </div>
        <div className="form-group">
          <div className="form-label">Poddziedzina</div>
          <select className="select">
            {AppData.domains.find(d => d.id === domain)?.subs.map(s => <option key={s}>{s}</option>)}
          </select>
        </div>
      </div>

      {/* Target sections */}
      <div className="form-group">
        <div className="form-label">Sekcja docelowa (główna)</div>
        <div className="row gap-6" style={{flexWrap:'wrap'}}>
          {[['wisdom','Wisdom'],['joy','Joy'],['practices','Practices']].map(([id,label]) => (
            <button key={id} className={`chip ${targetSections.has(id)?'active':''}`} onClick={() => toggleSection(id)}>
              {label}
            </button>
          ))}
        </div>
        <div className="form-help">Polecajka trafi do wybranej sekcji dziedzinowej — nie na wall Community (domyślnie).</div>
      </div>

      {/* Optional comment */}
      <div className="form-group">
        <div className="form-label">Twój komentarz (opcjonalnie)</div>
        <textarea className="textarea" rows={3}
          placeholder="Dlaczego to polecasz? Co z tego wyniosłaś/wyniosłeś?"
          value={comment} onChange={e => setComment(e.target.value)}
        />
      </div>

      {/* Add to Community option — unchecked by default */}
      <div className="row" style={{padding:'14px 0', borderTop:'1px solid var(--line-soft)', justifyContent:'space-between', alignItems:'flex-start', gap:16}}>
        <div style={{flex:1}}>
          <div style={{fontWeight:600, fontSize:13}}>Dodaj też do Community (pojawi się na moim wallu)</div>
          <div className="muted" style={{fontSize:12, marginTop:3}}>Domyślnie wyłączone — polecajka trafia głównie do sekcji dziedzinowej, nie na wall.</div>
        </div>
        <Toggle on={addToCommunity} onChange={setAddToCommunity}/>
      </div>

      {/* Schedule */}
      <div className="row" style={{padding:'14px 0', borderTop:'1px solid var(--line-soft)', justifyContent:'space-between'}}>
        <div>
          <div style={{fontWeight:600, fontSize:13}}>Zaplanuj publikację</div>
          <div className="muted" style={{fontSize:12}}>Automatyczna publikacja w wybranym terminie.</div>
        </div>
        <Toggle on={scheduled} onChange={setScheduled}/>
      </div>
      {scheduled && (
        <div className="row gap-12" style={{marginTop:8}}>
          <input className="input" type="date" defaultValue="2026-05-15"/>
          <input className="input" type="time" defaultValue="09:00"/>
        </div>
      )}

      <div className="todo-note" style={{marginTop:12}}>
        📌 [TODO #2: decyzja klienta] Czy Drop-a-Find przez wtyczkę może trafiać do Biblioteki (nie tylko jako polecajka)?
      </div>
    </Modal>
  );
};

// ================ FF2: GROUPS / THREADS ================
FF2.Groups = function Groups({ phase, onOpen }) {
  const [activeDomain, setActiveDomain] = useState('all');
  return (
    <div className="page">
      <PageHeader
        eyebrow="Wątki tematyczne"
        title="Wątki tematyczne"
        subtitle="Otwarte wątki, jak hashtagi. Bez akceptacji, bez zaproszeń. Drzewo budowane przez społeczność w obrębie czterech dziedzin."
        ff="FF2"
        action={<button className="btn btn-accent"><I name="Plus" size={14}/> Załóż wątek</button>}
      />
      <div className="row gap-8 mb-24" style={{flexWrap:'wrap'}}>
        <button className={`chip ${activeDomain==='all'?'active':''}`} onClick={()=>setActiveDomain('all')}>Wszystkie</button>
        {AppData.domains.map(d => (
          <button key={d.id} className={`chip chip-hue-${d.hue} ${activeDomain===d.id?'active':''}`} onClick={()=>setActiveDomain(d.id)}>{d.label}</button>
        ))}
      </div>
      <div style={{display:'grid', gridTemplateColumns:'repeat(auto-fill, minmax(280px, 1fr))', gap:16}}>
        {AppData.threads.filter(t => activeDomain==='all' || t.domain === activeDomain).map(t => {
          const d = AppData.domains.find(x => x.id === t.domain);
          return (
            <div key={t.id} className="card" style={{padding:18, cursor:'pointer'}} onClick={()=>onOpen && onOpen(t)}>
              <div className="row gap-8 mb-12">
                <span className={`chip chip-hue-${d?.hue||'sage'}`} style={{fontSize:11}}>{d?.label}</span>
              </div>
              <div style={{fontFamily:'var(--font-serif)', fontSize:22, fontWeight:500}}>{t.name}</div>
              <div className="muted mt-8" style={{fontSize:13, lineHeight:1.5}}>{t.desc}</div>
              <div className="row mt-16" style={{justifyContent:'space-between', borderTop:'1px solid var(--line-soft)', paddingTop:12}}>
                <span style={{fontSize:12, color:'var(--ink-3)'}}>{t.members.toLocaleString('pl-PL')} członków · {t.posts} postów</span>
                <button className="btn btn-soft btn-sm">Dołącz</button>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
};

// ================ FF2: AUTHORS CATALOG ================
FF2.AuthorsCatalog = function AuthorsCatalog({ phase }) {
  const [verifiedOnly, setVerifiedOnly] = useState(false);
  return (
    <div className="page">
      <PageHeader eyebrow="Katalog" title="Autorzy" subtitle="Ludzie, którzy dzielą się wiedzą i doświadczeniem." ff="FF2"/>
      <div className="row gap-8 mb-24" style={{flexWrap:'wrap'}}>
        <input className="input" placeholder="Wyszukaj autora..." style={{maxWidth:280}}/>
        <button className={`chip ${verifiedOnly?'active':''}`} onClick={()=>setVerifiedOnly(!verifiedOnly)}>
          <I name="Verified" size={13}/> Tylko Verified
        </button>
        {AppData.domains.map(d => <button key={d.id} className={`chip chip-hue-${d.hue}`}>{d.label}</button>)}
      </div>
      <div style={{display:'grid', gridTemplateColumns:'repeat(auto-fill, minmax(320px, 1fr))', gap:16}}>
        {AppData.authors.filter(a => a.role !== 'member').filter(a => !verifiedOnly || a.verified).map(a => (
          <div key={a.id} className="card" style={{padding:0, overflow:'hidden'}}>
            <div style={{height:60, background: `linear-gradient(135deg, ${a.avatar[0]}, ${a.avatar[1]})`}}/>
            <div style={{padding:18, marginTop:-26}}>
              <Avatar author={a} size={56}/>
              <div className="row gap-4 mt-12"><span style={{fontWeight:600, fontSize:15}}>{a.name}</span>{a.verified && <VerifiedBadge/>}</div>
              <div className="muted" style={{fontSize:12.5, marginTop:2}}>@{a.handle}</div>
              <div className="mt-12" style={{fontSize:13.5, lineHeight:1.5}}>{a.bio}</div>
              <div className="row mt-16" style={{justifyContent:'space-between'}}>
                <span style={{fontSize:12, color:'var(--ink-3)'}}>{a.followers} obserwujących</span>
                <div className="row gap-6">
                  <button className="btn btn-ghost btn-sm" onClick={()=>window.openDetail && window.openDetail('author', a)}>Profil</button>
                  <button className="btn btn-soft btn-sm">Obserwuj</button>
                </div>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

// ================ FF2: EVENTS (kept as Practices fallback) ================
FF2.Events = function Events({ phase }) {
  return (
    <div className="page">
      <PageHeader eyebrow="Practices" title="Practices" subtitle="Warsztaty, retreaty, kursy stacjonarne i online." ff="FF2"/>
      <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:14}}>
              <div style={{fontFamily:'var(--font-serif)', fontSize:17, fontWeight:500}}>{ev.title}</div>
              <div className="muted mt-8" style={{fontSize:12.5}}>{ev.author} · {ev.loc} · {ev.date}</div>
              <div className="row mt-12" style={{justifyContent:'space-between'}}>
                <span style={{fontWeight:700}}>{ev.price}</span>
                <button className="btn btn-soft btn-sm">Szczegóły</button>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

// ================ FF2: BROWSER PLUGIN ================
FF2.BrowserPlugin = function BrowserPlugin({ phase }) {
  return (
    <div className="page">
      <PageHeader eyebrow="Wtyczka przeglądarkowa" title="Drop-a-Find Extension" subtitle="Polecaj zasoby z dowolnej strony — kliknięcie ikony otwiera mini-popup, który inicjuje kreator w aplikacji." ff="FF2"/>
      <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:32, alignItems:'center'}}>
        <div>
          <div className="section-eyebrow mb-8">Flow: wtyczka → aplikacja</div>
          <h3 style={{fontFamily:'var(--font-serif)', fontWeight:400, fontSize:24, lineHeight:1.2, marginBottom:16}}>Trzy kliknięcia od pomysłu do polecajki.</h3>
          {[
            ['1. Klikasz ikonę', 'Wtyczka wykrywa URL + pobiera Open Graph metadane.'],
            ['2. Potwierdzasz URL', 'Mini popup — podgląd i przycisk „Utwórz polecajkę na BeHueman".'],
            ['3. Kreator w aplikacji', 'Nowa karta: pełny Drop-a-Find kreator z pre-wypełnionym URL i metadanymi.'],
          ].map(([t,d],i) => (
            <div key={i} className="row gap-16" style={{marginBottom:16}}>
              <div style={{width:32, height:32, borderRadius:'50%', background:'var(--bg-soft)', display:'grid', placeItems:'center', flexShrink:0, fontFamily:'var(--font-serif)', fontWeight:500}}>{i+1}</div>
              <div><div style={{fontWeight:600}}>{t}</div><div className="muted" style={{fontSize:13, lineHeight:1.5}}>{d}</div></div>
            </div>
          ))}
          <div className="todo-note mt-16">📌 [TODO #2] Wtyczka tylko inicjuje — kreator jest w głównej aplikacji. Wtyczka NIE buduje polecajki samodzielnie.</div>
          <button className="btn btn-primary mt-16"><I name="Globe" size={14}/> Zainstaluj wtyczkę</button>
        </div>
        {/* Browser mockup */}
        <div>
          <div style={{background:'linear-gradient(135deg, #2C2720, #1F1B16)', borderRadius:'var(--r-3)', padding:'10px 12px', display:'flex', alignItems:'center', gap:8, color:'#999', fontSize:12, fontFamily:'var(--font-mono)', marginBottom:0}}>
            <div style={{display:'flex', gap:6}}>
              {['#FF5F57','#FEBC2E','#28C840'].map(c => <span key={c} style={{width:10, height:10, borderRadius:'50%', background:c}}/>)}
            </div>
            <div style={{flex:1, padding:'4px 12px', background:'#3A332B', borderRadius:'var(--r-pill)', color:'#BBB'}}>goodreads.com/book/show/95821</div>
            <span style={{width:24, height:24, background:'var(--accent)', borderRadius:'var(--r-1)', display:'grid', placeItems:'center', fontFamily:'var(--font-serif)', color:'white', fontSize:13, cursor:'pointer'}}>h</span>
          </div>
          <div className="card" style={{padding:18, boxShadow:'var(--sh-3)', position:'relative', marginTop:8}}>
            <div className="row" style={{justifyContent:'space-between', alignItems:'center', marginBottom:12}}>
              <div className="logo-mark" style={{fontSize:14, padding:0}}>be<span className="hue">hue</span>man</div>
              <button className="icon-btn" style={{width:24, height:24}}><I name="X" size={12}/></button>
            </div>
            <div className="rec" style={{padding:0, background:'transparent', border:'none', marginBottom:14}}>
              <div className="rec-cover" style={{background: coverBg(['#94463F','#E8B872']), width:56, height:76}}/>
              <div className="rec-content">
                <span className="rec-source">Książka · Goodreads</span>
                <span className="rec-title" style={{fontSize:14}}>Kobiety, które biegają z wilkami</span>
                <span className="rec-author">Clarissa Pinkola Estés</span>
              </div>
            </div>
            <div className="form-group" style={{marginBottom:10}}>
              <div className="form-label" style={{fontSize:10}}>Dziedzina</div>
              <div className="row gap-4">
                <button className="chip chip-hue-dusza active" style={{fontSize:11}}>Dusza</button>
                <button className="chip" style={{fontSize:11}}>Umysł</button>
              </div>
            </div>
            <button className="btn btn-drop btn-sm" style={{width:'100%', justifyContent:'center', fontSize:13, padding:'9px'}}>
              <I name="Link" size={13}/> Utwórz polecajkę na BeHueman →
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};

// ================ FF2: DASHBOARD CONFIG ================
FF2.DashboardConfig = function DashboardConfig({ phase }) {
  return (
    <div className="page">
      <PageHeader eyebrow="Dashboard" title="Konfiguracja MyHue" subtitle="Zarządzaj widżetami bezpośrednio z dashboardu — kliknij 'Edytuj dashboard' na stronie MyHue." ff="FF2"/>
      <div className="card" style={{padding:24, textAlign:'center', maxWidth:480, margin:'64px auto'}}>
        <div style={{fontSize:42, marginBottom:16}}>⚙</div>
        <div style={{fontFamily:'var(--font-serif)', fontSize:22, fontWeight:500, marginBottom:8}}>Konfiguracja widżetów</div>
        <div className="muted" style={{fontSize:14, lineHeight:1.6, marginBottom:20}}>
          Edycja dashboardu dostępna jest bezpośrednio na stronie MyHue. Kliknij przycisk "Edytuj dashboard" w prawym górnym rogu, żeby włączać, wyłączać i zmieniać kolejność widżetów.
        </div>
        <a href="#" onClick={e => { e.preventDefault(); window.__setRoute && window.__setRoute('myhue'); }} className="btn btn-primary">
          <I name="Dashboard" size={14}/> Przejdź do MyHue
        </a>
      </div>
    </div>
  );
};

// ================ FF2: AUTHOR PANEL (Create section) ================
FF2.AuthorPanel = function AuthorPanel({ phase }) {
  const [tab, setTab] = useState('overview');
  return (
    <div className="page">
      <PageHeader
        eyebrow="Create"
        title={<>Twoje treści</>}
        subtitle="Zarządzaj postami, Drop-a-Findami, statystykami i harmonogramem publikacji."
        ff={phase}
      />
      <div className="tabs">
        {[['overview','Przegląd'],['posts','Posty'],['drops','Drop-a-Finds'],['stats','Statystyki']].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],['Drop-a-Finds','89','+12%',true],['Zarobki','Wkrótce','Go-Live',false]].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="todo-note">📌 [TODO #5] Autor Free: udział w zysku = TAK (algorytm), brak narzędzi PRO (szczegółowych statystyk, zaplanowanych publikacji).</div>
        </>
      )}
      {tab === 'posts' && (
        <div className="card">
          {AppData.posts.map((p,i) => (
            <div key={p.id} className="row" style={{padding:'16px 20px', borderTop:i?'1px solid var(--line-soft)':'', gap:16}}>
              <div style={{flex:1, minWidth:0}}>
                <div style={{fontSize:13.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)'}}>
                  <DomainChip domainId={p.domain}/> <span>{p.time}</span> <span>❤ {p.likes}</span> <span>💬 {p.comments}</span>
                </div>
              </div>
              <div className="row gap-4">
                <button className="btn btn-soft btn-sm">Edytuj</button>
                <button className="btn btn-ghost btn-sm">Promuj (GL)</button>
              </div>
            </div>
          ))}
        </div>
      )}
      {tab === 'drops' && (
        <div className="card" style={{padding:20, textAlign:'center'}}>
          <div className="empty">
            <div className="empty-icon">◆</div>
            <div>Twoje Drop-a-Findy pojawią się tu po opublikowaniu pierwszej polecajki.</div>
            <div className="muted mt-8" style={{fontSize:12}}>Kliknij przycisk "Drop-a-Find" w górnym pasku, żeby dodać pierwszy zasób.</div>
          </div>
        </div>
      )}
      {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></select>
          </div>
          {AppData.domains.map(d => (
            <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][AppData.domains.indexOf(d)]}%`, height:'100%', background:`var(--hue-${d.hue})`}}/>
              </div>
              <span style={{fontSize:12, fontWeight:600, minWidth:50}}>{[14820,19400,7200,12100][AppData.domains.indexOf(d)].toLocaleString('pl-PL')}</span>
            </div>
          ))}
        </div>
      )}
    </div>
  );
};

// ================ FF2: PARTNER PANEL ================
FF2.PartnerPanel = function PartnerPanel({ phase }) {
  return (
    <div className="page">
      <PageHeader
        eyebrow="Panel Partnera"
        title="Studio Mokshana"
        subtitle="Szkoła jogi · Łódź. Zarządzaj ofertą, śledź statystyki, dodawaj usługi w Practices."
        ff="FF2"
        action={<button className="btn btn-accent"><I name="Plus" size={14}/> Dodaj usługę</button>}
      />
      <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 (Go-Live)','—','Nieaktywne',false],['Zarobki (Go-Live)','— zł','Nieaktywne',false]].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="todo-note">📌 [TODO #6] Partner w kontekście firmy: czy nadal widzi Community i pozostałe zakładki? Rekomendacja: TAK.</div>
    </div>
  );
};

window.FF2Screens = FF2;