// BeHueman — FF3 screens
const FF3 = {};

// ================ CHAT 1:1 ================
FF3.Chat = function Chat({ phase }) {
  const conversations = [
    { id: 'c1', authorId: 'hannaw', last: 'Dziękuję, sprawdzę. To 4-7-8 ma sens dla nocnych pobudek?', time: '12:42', unread: 2 },
    { id: 'c2', authorId: 'mokshana', last: 'Zarezerwowałam Ci miejsce na yin w niedzielę. Do soboty mogę zwrócić.', time: '11:15', unread: 0 },
    { id: 'c3', authorId: 'agap', last: 'Jutro w lesie jest pełnia — przyjdziesz?', time: 'wczoraj', unread: 1 },
    { id: 'c4', authorId: 'mdebski', last: 'Polecę Ci jeszcze tekst Davida Bohma, bardzo Ci się spodoba.', time: 'wczoraj', unread: 0 },
    { id: 'c5', authorId: 'tkarwowski', last: 'Ty: dziękuję 🙏', time: 'pn', unread: 0 },
    { id: 'c6', authorId: 'lenak', last: 'O, super że odpisałaś. Chciałam Cię zapytać o NVC z dziećmi…', time: 'pn', unread: 0 },
  ];
  const [active, setActive] = useState('c1');
  const a = AppData.getAuthor(conversations.find(c => c.id === active).authorId);
  const messages = [
    { from: 'them', text: 'Hej, czytałam Twój komentarz pod postem o oddechu i mam pytanie.', time: '12:31' },
    { from: 'me', text: 'Pisz śmiało, słucham.', time: '12:32' },
    { from: 'them', text: 'Mój syn (8 lat) bardzo źle zasypia. Czy 4-7-8 będzie dla niego za mocne?', time: '12:34' },
    { from: 'me', text: 'Dla 8-latka raczej zacznijmy od lżejszej wersji — wdech 4 / wydech 6, bez wstrzymania. Lepiej w pozycji leżącej, dłoń na brzuszku, żeby czuł ruch.', time: '12:38' },
    { from: 'me', text: 'Daj mu czas. Pierwsze 3-4 dni to po prostu zabawa, jeszcze nie technika.', time: '12:38' },
    { from: 'them', text: 'Dziękuję, sprawdzę. To 4-7-8 ma sens dla nocnych pobudek?', time: '12:42' },
  ];
  return (
    <div className="page" style={{maxWidth:1280, padding:'24px 32px'}}>
      <PageHeader
        eyebrow="Wiadomości"
        title="Czat"
        subtitle="Bezpośrednie rozmowy 1:1. Bez rozsyłki, bez grupowych. Spokojnie i prywatnie."
        ff="FF3"
      />
      <div className="card" style={{display:'grid', gridTemplateColumns:'320px 1fr', height:'calc(100vh - 240px)', minHeight:560, overflow:'hidden', padding:0}}>
        <div style={{borderRight:'1px solid var(--line)', display:'flex', flexDirection:'column'}}>
          <div style={{padding:14, borderBottom:'1px solid var(--line)'}}>
            <div className="search" style={{maxWidth:'none'}}>
              <span className="search-icon"><I name="Search" size={14}/></span>
              <input placeholder="Znajdź rozmowę…" style={{padding:'7px 12px 7px 34px', fontSize:12.5}}/>
            </div>
          </div>
          <div style={{flex:1, overflowY:'auto'}}>
            {conversations.map(c => {
              const ca = AppData.getAuthor(c.authorId);
              const isActive = active === c.id;
              return (
                <div key={c.id} onClick={()=>setActive(c.id)}
                     style={{padding:'12px 14px', display:'flex', gap:12, alignItems:'center', cursor:'pointer',
                       background: isActive? 'var(--bg-soft)' : 'transparent',
                       borderLeft: isActive? '3px solid var(--ink-1)' : '3px solid transparent',
                       borderBottom:'1px solid var(--line-soft)'}}>
                  <Avatar author={ca} size={40}/>
                  <div style={{flex:1, minWidth:0}}>
                    <div className="row" style={{justifyContent:'space-between'}}>
                      <span style={{fontSize:13, fontWeight:600}}>{ca.name}</span>
                      <span style={{fontSize:10.5, color:'var(--ink-3)'}}>{c.time}</span>
                    </div>
                    <div style={{fontSize:12, color:'var(--ink-3)', overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap'}}>{c.last}</div>
                  </div>
                  {c.unread > 0 && <span style={{background:'var(--accent)', color:'white', fontSize:10, fontWeight:700, padding:'1px 6px', borderRadius:'var(--r-pill)'}}>{c.unread}</span>}
                </div>
              );
            })}
          </div>
        </div>
        <div style={{display:'flex', flexDirection:'column'}}>
          <div style={{padding:'14px 20px', borderBottom:'1px solid var(--line)', display:'flex', alignItems:'center', gap:12}}>
            <Avatar author={a} size={38}/>
            <div style={{flex:1}}>
              <div className="row gap-4"><span style={{fontWeight:600}}>{a.name}</span>{a.verified && <VerifiedBadge/>}</div>
              <div style={{fontSize:11.5, color:'var(--ink-3)'}}>aktywna · @{a.handle}</div>
            </div>
            <button className="icon-btn" style={{border:'none', background:'transparent'}}><I name="More" size={16}/></button>
          </div>
          <div style={{flex:1, overflowY:'auto', padding:'20px 24px', background:'var(--bg)', display:'flex', flexDirection:'column', gap:8}}>
            <div style={{textAlign:'center', fontSize:11, color:'var(--ink-4)', margin:'10px 0', textTransform:'uppercase', letterSpacing:'.08em', fontWeight:600}}>Dziś · 12:30</div>
            {messages.map((m,i) => {
              const mine = m.from === 'me';
              return (
                <div key={i} style={{display:'flex', justifyContent: mine?'flex-end':'flex-start'}}>
                  <div style={{
                    maxWidth:'70%',
                    padding:'10px 14px',
                    borderRadius: mine? '16px 16px 4px 16px' : '16px 16px 16px 4px',
                    background: mine? 'var(--ink-1)' : 'var(--bg-elev)',
                    color: mine? 'var(--bg-elev)' : 'var(--ink-1)',
                    border: mine? 'none' : '1px solid var(--line)',
                    fontSize:13.5,
                    lineHeight:1.45,
                  }}>
                    {m.text}
                    <div style={{fontSize:10, opacity:0.6, marginTop:4, textAlign:'right'}}>{m.time}</div>
                  </div>
                </div>
              );
            })}
          </div>
          <div style={{padding:14, borderTop:'1px solid var(--line)', display:'flex', gap:10, alignItems:'center'}}>
            <input className="input" placeholder="Napisz wiadomość…" style={{flex:1}}/>
            <button className="btn btn-accent"><I name="Send" size={14}/></button>
          </div>
        </div>
      </div>
    </div>
  );
};

// ================ SHORT MOMENTS (event posts) ================
FF3.ShortMoments = function ShortMoments({ phase }) {
  const [showAdd, setShowAdd] = useState(false);
  const moments = [
    { id: 'sm1', authorId: 'lenak', when: 'Dziś · 17:00', loc: 'Park Skaryszewski, Warszawa', title: 'Idę pobiegać wolno wokół jeziorka', max: 4, joined: 2, vis: 'public' },
    { id: 'sm2', authorId: 'mdebski', when: 'Jutro · 7:30', loc: 'Kawiarnia Rano, Praga', title: 'Poranna kawa + książka. Ciszowe spotkanie.', max: 6, joined: 4, vis: 'followers' },
    { id: 'sm3', authorId: 'agap', when: 'Sobota · 6:30', loc: 'Las Bemowo', title: 'Wschód słońca w lesie. Bez aparatów.', max: 12, joined: 7, vis: 'public' },
    { id: 'sm4', authorId: 'tkarwowski', when: 'Niedziela · 9:00', loc: 'Wisła, plaża Saska', title: 'Lodowa kąpiel. Dla każdego z głową.', max: 8, joined: 8, vis: 'public' },
    { id: 'sm5', authorId: 'hannaw', when: 'Wtorek · 19:00', loc: 'Studio Mokshana', title: 'Spontaniczna joga otwierająca biodra', max: 10, joined: 3, vis: 'followers' },
    { id: 'sm6', authorId: 'me', when: 'Czwartek · 11:00', loc: 'Online', title: 'Czytamy razem "Tao Te Ching" — głośno', max: 5, joined: 1, vis: 'invited' },
  ];
  const visLabel = { public:'Publiczny', followers:'Obserwujący', invited:'Zaproszeni' };
  const visIcon = { public:'Globe', followers:'Users', invited:'User' };
  return (
    <div className="page">
      <PageHeader
        eyebrow="Short Moments"
        title={<>Spontaniczne <span style={{fontStyle:'italic'}}>mikro-eventy</span></>}
        subtitle='"Idę o 17 na jogę, kto ze mną?" Małe wyjścia, szybkie spotkania, drobne radości. Krótki wpis zamiast formalnego wydarzenia.'
        ff="FF3"
        action={<button className="btn btn-accent" onClick={()=>setShowAdd(true)}><I name="Plus" size={14}/> Rzuć moment</button>}
      />
      <div className="row gap-8 mb-24" style={{flexWrap:'wrap'}}>
        <button className="chip active">Najbliższe</button>
        <button className="chip">Dziś</button>
        <button className="chip">W tym tygodniu</button>
        <button className="chip"><I name="MapPin" size={13}/> W mojej okolicy</button>
        <button className="chip">Online</button>
        <button className="chip">Wolne miejsca</button>
      </div>
      <div style={{display:'grid', gridTemplateColumns:'repeat(auto-fill, minmax(320px, 1fr))', gap:16}}>
        {moments.map(m => {
          const a = AppData.getAuthor(m.authorId);
          const full = m.joined >= m.max;
          return (
            <div key={m.id} className="card" style={{padding:18, position:'relative', overflow:'hidden'}}>
              <div style={{position:'absolute', top:0, right:0, width:80, height:80, background:`radial-gradient(circle at top right, var(--hue-${['amber','sage','rose','sky','violet'][parseInt(m.id.slice(2))%5]}), transparent 70%)`, opacity:0.4}}/>
              <div className="row gap-12" style={{marginBottom:14}}>
                <Avatar author={a} size={36}/>
                <div style={{flex:1, minWidth:0}}>
                  <div className="row gap-4"><span style={{fontSize:13, fontWeight:600}}>{a.name}</span>{a.verified && <VerifiedBadge/>}</div>
                  <div style={{fontSize:11.5, color:'var(--ink-3)'}}>@{a.handle}</div>
                </div>
                <span className="chip" style={{fontSize:10.5}}><I name={visIcon[m.vis]} size={11}/> {visLabel[m.vis]}</span>
              </div>
              <div style={{fontFamily:'var(--font-serif)', fontSize:19, lineHeight:1.25, fontWeight:500, marginBottom:12}}>{m.title}</div>
              <div className="col gap-8" style={{fontSize:12.5, color:'var(--ink-2)', marginBottom:14}}>
                <div className="row gap-8"><I name="Calendar" size={14}/> {m.when}</div>
                <div className="row gap-8"><I name="MapPin" size={14}/> {m.loc}</div>
              </div>
              <div className="row" style={{justifyContent:'space-between', borderTop:'1px solid var(--line-soft)', paddingTop:12}}>
                <div style={{display:'flex', alignItems:'center'}}>
                  <div style={{display:'flex'}}>
                    {Array.from({length: Math.min(m.joined, 4)}).map((_,i) => {
                      const av = AppData.authors[(i + parseInt(m.id.slice(2))) % AppData.authors.length];
                      return <div key={i} style={{marginLeft: i?-8:0, border:'2px solid var(--bg-elev)', borderRadius:'50%'}}><Avatar author={av} size={26}/></div>;
                    })}
                  </div>
                  <span style={{fontSize:12, color:'var(--ink-3)', marginLeft:8}}>{m.joined}/{m.max}</span>
                </div>
                {full
                  ? <button className="btn btn-ghost btn-sm" disabled style={{opacity:0.5}}>Komplet</button>
                  : <button className="btn btn-accent btn-sm">Dołączam</button>}
              </div>
            </div>
          );
        })}
      </div>

      {showAdd && (
        <Modal title="Rzuć Short Moment" onClose={()=>setShowAdd(false)} footer={
          <>
            <button className="btn btn-ghost" onClick={()=>setShowAdd(false)}>Anuluj</button>
            <button className="btn btn-accent" onClick={()=>setShowAdd(false)}><I name="Send" size={14}/> Opublikuj</button>
          </>
        }>
          <div className="muted mb-16" style={{fontSize:12.5}}>Krótka, spontaniczna zapowiedź. Dla zwykłych wyjść, spacerów, pójścia razem na zajęcia.</div>
          <div className="form-group">
            <div className="form-label">Co planujesz?</div>
            <input className="input" placeholder="np. Idę o 17 na jogę, kto ze mną?"/>
          </div>
          <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:12}}>
            <div className="form-group">
              <div className="form-label">Data</div>
              <input className="input" type="date"/>
            </div>
            <div className="form-group">
              <div className="form-label">Godzina</div>
              <input className="input" type="time"/>
            </div>
          </div>
          <div className="form-group">
            <div className="form-label">Miejsce</div>
            <input className="input" placeholder="Adres lub 'Online'"/>
          </div>
          <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:12}}>
            <div className="form-group">
              <div className="form-label">Max uczestników</div>
              <input className="input" type="number" defaultValue="6"/>
            </div>
            <div className="form-group">
              <div className="form-label">Widoczność</div>
              <select className="select">
                <option>Publiczna</option>
                <option>Tylko obserwujący</option>
                <option>Tylko zaproszeni</option>
              </select>
            </div>
          </div>
          <div className="row" style={{padding:'12px 0', borderTop:'1px solid var(--line)', justifyContent:'space-between'}}>
            <div>
              <div style={{fontWeight:600}}>Zatwierdzaj chętnych</div>
              <div className="muted" style={{fontSize:12}}>Każdy musi być przez Ciebie zaakceptowany przed dołączeniem.</div>
            </div>
            <Toggle on={false} onChange={()=>{}}/>
          </div>
        </Modal>
      )}
    </div>
  );
};

// ================ CHALLENGES ================
FF3.Challenges = function Challenges({ phase }) {
  const challenges = [
    { id:'ch1', title:'7 dni z oddechem 4-7-8', emoji:'🌬', authorId:'hannaw', participants:1284, days:7, joined:true, progress:3, hue:'rose' },
    { id:'ch2', title:'Codziennie jedna polecajka', emoji:'📚', authorId:'agap', participants:842, days:30, joined:false, progress:0, hue:'sage' },
    { id:'ch3', title:'Poranek bez telefonu (14 dni)', emoji:'🌅', authorId:'tkarwowski', participants:2103, days:14, joined:true, progress:9, hue:'amber' },
    { id:'ch4', title:'Tydzień pisania ręcznie', emoji:'✍️', authorId:'lenak', participants:412, days:7, joined:false, progress:0, hue:'sky' },
    { id:'ch5', title:'30 dni jogi z Mokshaną', emoji:'🧘', authorId:'mokshana', participants:1842, days:30, joined:false, progress:0, hue:'violet' },
    { id:'ch6', title:'Cisza wieczorów (21 dni)', emoji:'🌙', authorId:'mdebski', participants:614, days:21, joined:false, progress:0, hue:'sky' },
  ];
  return (
    <div className="page">
      <PageHeader
        eyebrow="Wyzwania"
        title={<>Krótkie zobowiązania, długi efekt</>}
        subtitle='Drobne praktyki, które wprowadzasz na 7, 14, 30 dni. Nie po to, żeby "wygrać" — po to, żeby coś sprawdzić w sobie.'
        ff="FF3"
      />
      <div className="card" style={{padding:24, marginBottom:24, background:'linear-gradient(135deg, color-mix(in oklab, var(--hue-amber) 16%, var(--bg-elev)), var(--bg-elev) 70%)'}}>
        <div className="row" style={{justifyContent:'space-between', alignItems:'flex-start', gap:16, flexWrap:'wrap'}}>
          <div>
            <div className="section-eyebrow">Twoje aktywne wyzwania</div>
            <div className="section-title mt-8">2 wyzwania w toku</div>
          </div>
          <div className="row gap-16">
            {challenges.filter(c=>c.joined).map(c => (
              <div key={c.id} style={{textAlign:'center'}}>
                <svg width="64" height="64" viewBox="0 0 64 64">
                  <circle cx="32" cy="32" r="26" fill="none" stroke="var(--line)" strokeWidth="4"/>
                  <circle cx="32" cy="32" r="26" fill="none" stroke={`var(--hue-${c.hue})`} strokeWidth="4"
                          strokeDasharray={`${163 * c.progress / c.days} 163`}
                          strokeLinecap="round" transform="rotate(-90 32 32)"/>
                  <text x="32" y="38" textAnchor="middle" fontSize="20" fontFamily="var(--font-serif)" fontWeight="500">{c.progress}</text>
                </svg>
                <div style={{fontSize:11, color:'var(--ink-3)', marginTop:4}}>z {c.days} dni</div>
              </div>
            ))}
          </div>
        </div>
      </div>
      <div className="row gap-8 mb-24" style={{flexWrap:'wrap'}}>
        <button className="chip active">Wszystkie</button>
        <button className="chip">Trwające</button>
        <button className="chip">Krótkie (≤7 dni)</button>
        <button className="chip">Długie (≥30 dni)</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(280px, 1fr))', gap:16}}>
        {challenges.map(c => {
          const a = AppData.getAuthor(c.authorId);
          return (
            <div key={c.id} className="card" style={{overflow:'hidden'}}>
              <div style={{height:80, background:`linear-gradient(135deg, var(--hue-${c.hue}), color-mix(in oklab, var(--hue-${c.hue}) 50%, var(--ink-1)))`, display:'grid', placeItems:'center', fontSize:36}}>
                {c.emoji}
              </div>
              <div style={{padding:16}}>
                <div style={{fontFamily:'var(--font-serif)', fontSize:18, fontWeight:500, lineHeight:1.25, marginBottom:8}}>{c.title}</div>
                <div className="row gap-8" style={{marginBottom:12}}>
                  <Avatar author={a} size={22}/>
                  <span style={{fontSize:12, color:'var(--ink-3)'}}>{a.name} · {c.days} dni</span>
                </div>
                {c.joined && (
                  <div style={{marginBottom:12}}>
                    <div style={{height:5, background:'var(--line-soft)', borderRadius:3, overflow:'hidden'}}>
                      <div style={{width:`${c.progress/c.days*100}%`, height:'100%', background:`var(--hue-${c.hue})`}}/>
                    </div>
                    <div style={{fontSize:11, color:'var(--ink-3)', marginTop:4}}>Dzień {c.progress} z {c.days}</div>
                  </div>
                )}
                <div className="row" style={{justifyContent:'space-between'}}>
                  <span style={{fontSize:11.5, color:'var(--ink-3)'}}>{c.participants.toLocaleString('pl-PL')} osób</span>
                  {c.joined
                    ? <button className="btn btn-soft btn-sm">Zaznacz dziś ✓</button>
                    : <button className="btn btn-accent btn-sm">Dołącz</button>}
                </div>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
};

// ================ MARKET ================
FF3.Market = function Market({ phase }) {
  const products = [
    { id:'mp1', title:'Olej z czarnuszki tłoczony na zimno', cat:'Zioła i odżywianie', loc:'Kazimierz Dolny', price:'58 zł', dist:'45 km', partnerId:'agap', cover:['#9FB89A','#1F1B16'], hue:'sage' },
    { id:'mp2', title:'Mata do jogi z włókna kokosowego', cat:'Akcesoria do praktyki', loc:'Łódź', price:'380 zł', dist:'130 km', partnerId:'mokshana', cover:['#E8B872','#94463F'], hue:'amber' },
    { id:'mp3', title:'Świeca z wosku pszczelego, ręcznie', cat:'Rytuały', loc:'Warszawa Praga', price:'42 zł', dist:'4 km', partnerId:'hannaw', cover:['#E8A4A0','#E8B872'], hue:'rose' },
    { id:'mp4', title:'Misa dźwiękowa z Bhutanu', cat:'Praktyki dźwiękowe', loc:'Kraków', price:'620 zł', dist:'290 km', partnerId:'mokshana', cover:['#1F1B16','#B5A0CC'], hue:'violet' },
    { id:'mp5', title:'Suszone zioła — zestaw uzdrawiający', cat:'Zioła i odżywianie', loc:'Warszawa Mokotów', price:'85 zł', dist:'8 km', partnerId:'agap', cover:['#9FB89A','#E8B872'], hue:'sage' },
    { id:'mp6', title:'Dziennik gratitude — papier handmade', cat:'Książki i papier', loc:'Warszawa Wola', price:'120 zł', dist:'12 km', partnerId:'lenak', cover:['#B5A0CC','#8AAFC8'], hue:'violet' },
  ];
  return (
    <div className="page page-wide">
      <PageHeader
        eyebrow="Market"
        title={<>Polecajki <span style={{fontStyle:'italic'}}>fizyczne</span></>}
        subtitle="To nie sklep. To katalog rzeczy, które ludzie z naszej społeczności robią, sprzedają lub polecają. Klikasz, kontaktujesz się, umawiasz osobiście."
        ff="FF3"
      />
      <div className="card" style={{padding:14, marginBottom:24, background:'color-mix(in oklab, var(--hue-amber) 12%, var(--bg-elev))', display:'flex', gap:12, alignItems:'center'}}>
        <I name="Sparkle" size={18}/>
        <div style={{flex:1, fontSize:13}}>
          <b>Brak transakcji w aplikacji.</b> Świadomie. Kontaktujesz się z autorem polecajki, umawiasz, odbierasz osobiście. Tak jak w prawdziwym życiu.
        </div>
      </div>

      <div style={{display:'grid', gridTemplateColumns:'1fr 1.2fr', gap:24, marginBottom:32}}>
        <div>
          <div className="row gap-8 mb-16" style={{flexWrap:'wrap'}}>
            <button className="chip active">Wszystkie</button>
            <button className="chip"><I name="MapPin" size={13}/> ≤ 25 km</button>
            <button className="chip">Polecane przez członków</button>
          </div>
          <div className="form-group">
            <div className="form-label">Kategoria</div>
            <div className="row gap-8" style={{flexWrap:'wrap'}}>
              {['Zioła i odżywianie','Akcesoria','Rytuały','Książki','Dźwięk','Rękodzieło'].map((c,i) => (
                <button key={c} className={`chip ${i===0?'active':''}`}>{c}</button>
              ))}
            </div>
          </div>
          <div className="form-group">
            <div className="form-label">Cena</div>
            <div className="row gap-8" style={{flexWrap:'wrap'}}>
              {['Wszystko','do 50 zł','50–200 zł','200–500 zł','>500 zł'].map((c,i) => (
                <button key={c} className={`chip ${i===0?'active':''}`}>{c}</button>
              ))}
            </div>
          </div>
          <div className="form-group">
            <div className="form-label">Dystans od mojej lokalizacji</div>
            <div style={{padding:'10px 14px', background:'var(--bg-elev)', border:'1px solid var(--line)', borderRadius:'var(--r-2)'}}>
              <input type="range" min="0" max="500" defaultValue="50" style={{width:'100%'}}/>
              <div className="row" style={{justifyContent:'space-between', fontSize:11, color:'var(--ink-3)', marginTop:4}}>
                <span>0 km</span><span>50 km (aktualnie)</span><span>500+ km</span>
              </div>
            </div>
          </div>
        </div>
        <div className="card" style={{padding:0, overflow:'hidden', minHeight:380, position:'relative', background:'linear-gradient(135deg, #E8E2D2 0%, #DCD5C5 100%)'}}>
          {/* Stylized map */}
          <svg width="100%" height="100%" style={{position:'absolute', inset:0}} viewBox="0 0 600 380" preserveAspectRatio="none">
            <defs>
              <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
                <path d="M 40 0 L 0 0 0 40" fill="none" stroke="rgba(31,27,22,0.05)" strokeWidth="1"/>
              </pattern>
            </defs>
            <rect width="600" height="380" fill="url(#grid)"/>
            {/* Vistula river curve */}
            <path d="M 0 140 Q 180 80 300 180 T 600 220" fill="none" stroke="#8AAFC8" strokeWidth="14" strokeLinecap="round" opacity="0.45"/>
            <path d="M 80 0 Q 140 100 100 200 T 220 380" fill="none" stroke="#9FB89A" strokeWidth="50" strokeLinecap="round" opacity="0.25"/>
            {/* District blobs */}
            {[
              [120, 90, 50, '#E8A4A0'],
              [380, 260, 70, '#E8B872'],
              [480, 110, 45, '#B5A0CC'],
              [240, 320, 55, '#9FB89A'],
            ].map((b,i) => (
              <circle key={i} cx={b[0]} cy={b[1]} r={b[2]} fill={b[3]} opacity="0.18"/>
            ))}
          </svg>
          {/* Pins */}
          {[
            [180, 130, products[0]],
            [330, 170, products[1]],
            [400, 220, products[2]],
            [110, 200, products[3]],
            [380, 100, products[4]],
            [490, 280, products[5]],
          ].map((pin,i) => (
            <div key={i} style={{position:'absolute', left:pin[0], top:pin[1], transform:'translate(-50%,-100%)', cursor:'pointer'}}>
              <div style={{
                background:'var(--bg-elev)', padding:'6px 10px', borderRadius:'var(--r-pill)',
                border:'2px solid var(--ink-1)', fontSize:11, fontWeight:700, whiteSpace:'nowrap',
                boxShadow:'var(--sh-2)',
              }}>{pin[2].price}</div>
              <div style={{
                width:0, height:0, margin:'0 auto',
                borderLeft:'5px solid transparent', borderRight:'5px solid transparent',
                borderTop:'7px solid var(--ink-1)',
              }}/>
            </div>
          ))}
          {/* You-are-here */}
          <div style={{position:'absolute', left:280, top:200, transform:'translate(-50%,-50%)'}}>
            <div style={{width:14, height:14, borderRadius:'50%', background:'var(--accent)', border:'3px solid var(--bg-elev)', boxShadow:'0 0 0 6px color-mix(in oklab, var(--accent) 30%, transparent)'}}/>
          </div>
          <div style={{position:'absolute', top:14, left:14, background:'rgba(251,248,241,0.94)', padding:'6px 12px', borderRadius:'var(--r-pill)', fontSize:11.5, fontWeight:600, border:'1px solid var(--line)'}}>
            <I name="MapPin" size={12}/> Warszawa, 25 km
          </div>
          <div style={{position:'absolute', bottom:14, right:14, display:'flex', flexDirection:'column', gap:4}}>
            <button className="icon-btn" style={{width:30, height:30, fontSize:18}}>+</button>
            <button className="icon-btn" style={{width:30, height:30, fontSize:18}}>−</button>
          </div>
        </div>
      </div>

      <RowStrip eyebrow="Top tygodnia" title="Najczęściej zapisywane" items={products.map(p=>({id:p.id, type:p.cat.split(' ')[0], title:p.title, author:p.loc, cover:p.cover}))}/>

      <div className="row-strip">
        <div className="row-strip-head">
          <div>
            <div className="row-strip-eyebrow">Wszystkie</div>
            <div className="row-strip-title">{products.length} produktów blisko Ciebie</div>
          </div>
          <div className="row gap-8">
            <button className="chip active">Najbliżej</button>
            <button className="chip">Cena ↑</button>
            <button className="chip">Najnowsze</button>
          </div>
        </div>
        <div style={{display:'grid', gridTemplateColumns:'repeat(auto-fill, minmax(260px, 1fr))', gap:16}}>
          {products.map(p => {
            const a = AppData.getAuthor(p.partnerId);
            return (
              <div key={p.id} className="card" style={{overflow:'hidden'}}>
                <div style={{height:160, background: coverBg(p.cover), position:'relative'}}>
                  <span className="tile-type">{p.cat}</span>
                  <span style={{position:'absolute', bottom:8, right:8, background:'rgba(251,248,241,0.95)', padding:'4px 10px', borderRadius:'var(--r-pill)', fontSize:11.5, fontWeight:700}}>{p.price}</span>
                </div>
                <div style={{padding:14}}>
                  <div style={{fontFamily:'var(--font-serif)', fontSize:16, lineHeight:1.25, fontWeight:500, marginBottom:8}}>{p.title}</div>
                  <div className="row gap-8" style={{fontSize:11.5, color:'var(--ink-3)', marginBottom:12}}>
                    <I name="MapPin" size={11}/> {p.loc} · {p.dist}
                  </div>
                  <div className="row" style={{justifyContent:'space-between', borderTop:'1px solid var(--line-soft)', paddingTop:10}}>
                    <div className="row gap-8">
                      <Avatar author={a} size={22}/>
                      <span style={{fontSize:11.5, color:'var(--ink-2)'}}>{a.name}</span>
                    </div>
                    <button className="btn btn-soft btn-sm">Skontaktuj się</button>
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
};

// ================ REPORT MODAL (FF3) ================
FF3.ReportContent = function ReportContent({ phase }) {
  const [reason, setReason] = useState('');
  const reasons = [
    ['hate', 'Hejt / atak personalny', 'Treść zawiera obraźliwy język wobec osoby lub grupy.'],
    ['misinfo', 'Nieprawdziwe informacje', 'Zwłaszcza w sferze zdrowia / medycyny.'],
    ['spam', 'Spam / promocja', 'Nachalna reklama lub link niezwiązany z dziedziną.'],
    ['nudity', 'Treści nieodpowiednie', 'Nagość, przemoc, treści dla dorosłych.'],
    ['copyright', 'Naruszenie praw autorskich', 'Skopiowane bez zgody autora.'],
    ['other', 'Inne — opiszę poniżej', 'Coś nie pasuje, ale chcę to zgłosić.'],
  ];
  return (
    <div className="page" style={{maxWidth:920}}>
      <PageHeader
        eyebrow="System moderacji"
        title="Zgłoś naruszenie"
        subtitle="Każde zgłoszenie trafia do kolejki moderacji platformy. Działamy ręcznie, czytamy każde — w pierwszych miesiącach bez AI."
        ff="FF3"
      />
      <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:24, alignItems:'start'}}>
        <div className="card" style={{padding:24}}>
          <div className="section-eyebrow mb-8">Zgłaszasz</div>
          <div style={{padding:14, background:'var(--bg-soft)', borderRadius:'var(--r-2)', marginBottom:20}}>
            <div className="row gap-8" style={{marginBottom:6}}>
              <Avatar author={'tkarwowski'} size={28}/>
              <span style={{fontSize:13, fontWeight:600}}>Tomek Karwowski</span>
              <span style={{fontSize:11, color:'var(--ink-3)'}}>· post · 2 dni temu</span>
            </div>
            <div style={{fontSize:13, lineHeight:1.5, color:'var(--ink-2)'}}>
              "Trzecia zima z lodowymi kąpielami. Najtrudniejsze nie były pierwsze sekundy — tylko zaufanie własnemu oddechowi."
            </div>
          </div>
          <div className="form-label mb-8">Powód zgłoszenia</div>
          <div className="col gap-8">
            {reasons.map(([k,t,d]) => (
              <div key={k} onClick={()=>setReason(k)} className="row gap-12" style={{padding:14, border: reason===k?'2px solid var(--ink-1)':'1px solid var(--line)', borderRadius:'var(--r-2)', cursor:'pointer', alignItems:'flex-start', background: reason===k?'var(--bg-soft)':'transparent'}}>
                <div style={{width:16, height:16, borderRadius:'50%', border:'2px solid var(--ink-1)', display:'grid', placeItems:'center', flexShrink:0, marginTop:2}}>
                  {reason===k && <div style={{width:8, height:8, borderRadius:'50%', background:'var(--ink-1)'}}/>}
                </div>
                <div>
                  <div style={{fontWeight:600, fontSize:13.5}}>{t}</div>
                  <div className="muted" style={{fontSize:12}}>{d}</div>
                </div>
              </div>
            ))}
          </div>
          <div className="form-group mt-16">
            <div className="form-label">Opis (opcjonalny)</div>
            <textarea className="textarea" placeholder="Powiedz coś więcej, jeśli to pomaga zrozumieć kontekst." rows={3}/>
          </div>
          <div className="row" style={{justifyContent:'space-between', padding:'14px 0', borderTop:'1px solid var(--line)', marginTop:8}}>
            <div>
              <div style={{fontWeight:600, fontSize:13}}>Zgłaszam anonimowo</div>
              <div className="muted" style={{fontSize:12}}>Autor zgłoszenia widoczny tylko dla zespołu Be Hueman.</div>
            </div>
            <Toggle on={true} onChange={()=>{}}/>
          </div>
          <div className="row gap-8 mt-16" style={{justifyContent:'flex-end'}}>
            <button className="btn btn-ghost">Anuluj</button>
            <button className="btn btn-primary" disabled={!reason} style={{opacity:reason?1:0.5}}>Wyślij zgłoszenie</button>
          </div>
        </div>
        <div className="col gap-16">
          <div className="card" style={{padding:20}}>
            <div className="section-eyebrow mb-12">Co dzieje się dalej</div>
            <div style={{display:'flex', flexDirection:'column', gap:14}}>
              {[
                ['1. Trafia do kolejki', 'Twoje zgłoszenie pojawia się w panelu moderacji w ciągu sekund.'],
                ['2. Moderator przegląda', 'Człowiek z zespołu czyta treść w kontekście. Bez AI w pierwszej fazie.'],
                ['3. Decyzja', 'Treść zostaje, jest ukrywana, autor dostaje ostrzeżenie lub konto jest blokowane.'],
                ['4. Powiadomienie', 'Wracasz do nas wynikiem — czego nie zobaczył nikt inny.'],
              ].map(([t,d],i) => (
                <div key={i} className="row gap-12" style={{alignItems:'flex-start'}}>
                  <div style={{width:6, height:6, borderRadius:'50%', background:'var(--accent)', marginTop:8, flexShrink:0}}/>
                  <div>
                    <div style={{fontSize:13, fontWeight:600}}>{t}</div>
                    <div className="muted" style={{fontSize:12.5, lineHeight:1.5}}>{d}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
          <div className="card" style={{padding:20, background:'color-mix(in oklab, var(--hue-sage) 14%, var(--bg-elev))'}}>
            <div className="section-eyebrow">Auto-generacja postów</div>
            <div style={{fontFamily:'var(--font-serif)', fontSize:18, fontWeight:500, lineHeight:1.3, marginTop:6}}>FF3 włącza też auto-publikacje.</div>
            <div className="muted mt-8" style={{fontSize:12.5, lineHeight:1.5}}>Kiedy autor doda kurs lub partner produkt — w Społeczności automatycznie pojawia się zapowiedź. Bez ręcznego copy-paste.</div>
          </div>
        </div>
      </div>
    </div>
  );
};

// ================ ADMIN: USER MGMT (FF3) ================
FF3.AdminUsers = function AdminUsers({ phase }) {
  const users = [
    { name:'Hanna Wójcik', handle:'hannaw', role:'autor', joined:'12 sty 2026', status:'active', last:'aktywna teraz', verified:true, avId:'hannaw' },
    { name:'Tomek Karwowski', handle:'t.karwowski', role:'autor', joined:'8 lut 2026', status:'warned', last:'wczoraj', verified:false, avId:'tkarwowski' },
    { name:'Marcin Dębski', handle:'mdebski', role:'autor', joined:'24 lut 2026', status:'active', last:'2 godz. temu', verified:false, avId:'mdebski' },
    { name:'Studio Mokshana', handle:'mokshana', role:'partner', joined:'2 mar 2026', status:'active', last:'aktywna 30 min', verified:true, avId:'mokshana' },
    { name:'Aga Pawlik', handle:'aga.p', role:'autor', joined:'15 mar 2026', status:'active', last:'5 godz. temu', verified:true, avId:'agap' },
    { name:'Lena Kowalska', handle:'lena.k', role:'member', joined:'4 kwi 2026', status:'active', last:'2 godz. temu', verified:false, avId:'lenak' },
    { name:'Anonimowy użytkownik', handle:'kowal_82', role:'member', joined:'9 kwi 2026', status:'blocked', last:'3 dni temu', verified:false, avId:'lenak' },
  ];
  const statusLabels = { active: ['Aktywny', '#4F6B49'], warned: ['Ostrzeżenie', '#8C6A20'], blocked: ['Zablokowany', '#94463F'] };
  return (
    <div className="page page-wide">
      <PageHeader
        eyebrow="Panel Admina · FF3"
        title="Zarządzanie kontami"
        subtitle="Filtry, statusy, blokady. Każda akcja powoduje email do użytkownika z możliwością odwołania."
        ff="FF3"
      />
      <div className="card" style={{padding:0, overflow:'hidden'}}>
        <div style={{padding:14, borderBottom:'1px solid var(--line)', display:'flex', gap:12, alignItems:'center', flexWrap:'wrap'}}>
          <input className="input" placeholder="Szukaj po nicku lub mailu…" style={{maxWidth:280}}/>
          <select className="select" style={{maxWidth:160}}><option>Wszystkie role</option><option>Member</option><option>Autor</option><option>Partner</option></select>
          <select className="select" style={{maxWidth:160}}><option>Wszystkie statusy</option><option>Aktywne</option><option>Z ostrzeżeniem</option><option>Zablokowane</option></select>
          <select className="select" style={{maxWidth:160}}><option>Data rejestracji ↓</option><option>Data rejestracji ↑</option></select>
          <span className="muted" style={{marginLeft:'auto', fontSize:12}}>2 137 kont</span>
        </div>
        <table style={{width:'100%', borderCollapse:'collapse', fontSize:13}}>
          <thead style={{background:'var(--bg-soft)'}}>
            <tr style={{textAlign:'left'}}>
              {['Użytkownik','Rola','Status','Dołączył(a)','Ostatnia aktywność','Akcje'].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>
            {users.map((u,i) => {
              const a = AppData.getAuthor(u.avId);
              return (
                <tr key={u.handle} style={{borderTop:'1px solid var(--line-soft)'}}>
                  <td style={{padding:'12px 16px'}}>
                    <div className="row gap-12">
                      <Avatar author={a} size={32}/>
                      <div>
                        <div className="row gap-4"><span style={{fontWeight:600}}>{u.name}</span>{u.verified && <VerifiedBadge/>}</div>
                        <div className="muted" style={{fontSize:11.5}}>@{u.handle}</div>
                      </div>
                    </div>
                  </td>
                  <td style={{padding:'12px 16px'}}>
                    <span className="chip" style={{fontSize:11, textTransform:'capitalize'}}>{u.role}</span>
                  </td>
                  <td style={{padding:'12px 16px'}}>
                    <span style={{fontSize:11.5, fontWeight:600, padding:'3px 8px', borderRadius:'var(--r-pill)', background: `color-mix(in oklab, ${statusLabels[u.status][1]} 18%, var(--bg-elev))`, color: statusLabels[u.status][1]}}>
                      {statusLabels[u.status][0]}
                    </span>
                  </td>
                  <td style={{padding:'12px 16px', color:'var(--ink-3)', fontSize:12.5}}>{u.joined}</td>
                  <td style={{padding:'12px 16px', color:'var(--ink-3)', fontSize:12.5}}>{u.last}</td>
                  <td style={{padding:'12px 16px'}}>
                    <div className="row gap-4">
                      {u.status === 'active' && (
                        <>
                          <button className="btn btn-ghost btn-sm">Ostrzeż</button>
                          <button className="btn btn-soft btn-sm" style={{color:'#94463F'}}>Zablokuj</button>
                        </>
                      )}
                      {u.status === 'warned' && (
                        <>
                          <button className="btn btn-ghost btn-sm">Cofnij ostrz.</button>
                          <button className="btn btn-soft btn-sm" style={{color:'#94463F'}}>Zablokuj</button>
                        </>
                      )}
                      {u.status === 'blocked' && (
                        <button className="btn btn-soft btn-sm">Odblokuj</button>
                      )}
                      <button className="btn btn-ghost btn-sm"><I name="More" size={14}/></button>
                    </div>
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </div>
  );
};

window.FF3Screens = FF3;