// BeHueman — Detail screens part 3: Settings (full), Author Panel editor, Partner bookings
const Detail3 = {};

// ================ FULL SETTINGS ================
Detail3.SettingsFull = function SettingsFull({ phase }) {
  const [section, setSection] = useState('account');
  const [trackingOn, setTrackingOn] = useState(true);
  const [twoFA, setTwoFA] = useState(false);
  const [editor, setEditor] = useState(false);
  const sections = [
    { id:'account', label:'Konto',         icon:'User'     },
    { id:'preferences', label:'Preferencje', icon:'Sparkle' },
    { id:'privacy', label:'Prywatność',     icon:'Shield'   },
    { id:'notifications', label:'Powiadomienia', icon:'Bell' },
    { id:'language', label:'Język i region', icon:'Globe'   },
    { id:'subscription', label:'Subskrypcja', icon:'Briefcase', ff:'GL' },
    { id:'integrations', label:'Połączenia', icon:'Link'    },
    { id:'data',     label:'Dane i eksport', icon:'Bookmark', ff:'FF2' },
  ];
  return (
    <div className="page">
      <PageHeader eyebrow="Twoje konto" title="Ustawienia" ff={phase}/>
      <div style={{display:'grid', gridTemplateColumns:'240px 1fr', gap:24, alignItems:'start'}}>
        <div className="card" style={{padding:8, position:'sticky', top:80}}>
          {sections.map(s => (
            <button key={s.id} className={`nav-item ${section===s.id?'active':''}`} onClick={()=>setSection(s.id)}>
              <span className="nav-icon"><I name={s.icon} size={15}/></span>
              <span>{s.label}</span>
              {s.ff && <span className="ff-pill">{s.ff}</span>}
            </button>
          ))}
        </div>
        <div className="card" style={{padding:32}}>
          {section === 'account' && (
            <>
              <div className="section-title mb-4">Dane konta</div>
              <div className="muted mb-24" style={{fontSize:13}}>Twoja tożsamość na BeHueman. Imię i email są jedyne wymagane.</div>
              <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:16}}>
                <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 (handle)</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 className="form-group"><div className="form-label">Telefon</div><input className="input" placeholder="+48 ..."/></div>
                <div className="form-group" style={{gridColumn:'span 2'}}>
                  <div className="form-label">Bio (max 160 znaków)</div>
                  <textarea className="textarea" rows={2} defaultValue="Joga, oddech, świadome rodzicielstwo. Czasem pisanie."/>
                </div>
              </div>
              <div style={{height:24}}/>
              <div className="section-title mb-12">Bezpieczeństwo</div>
              <div className="row" style={{padding:'14px 0', borderTop:'1px solid var(--line-soft)', justifyContent:'space-between', alignItems:'center'}}>
                <div><div style={{fontWeight:600}}>Hasło</div><div className="muted" style={{fontSize:12}}>Ostatnia zmiana 14 dni temu</div></div>
                <button className="btn btn-soft btn-sm">Zmień hasło</button>
              </div>
              <div className="row" style={{padding:'14px 0', borderTop:'1px solid var(--line-soft)', justifyContent:'space-between', alignItems:'center'}}>
                <div><div style={{fontWeight:600}}>Dwuetapowa weryfikacja</div><div className="muted" style={{fontSize:12}}>Dodatkowy kod z aplikacji authenticator.</div></div>
                <Toggle on={twoFA} onChange={setTwoFA}/>
              </div>
              <div className="row" style={{padding:'14px 0', borderTop:'1px solid var(--line-soft)', justifyContent:'space-between', alignItems:'center'}}>
                <div><div style={{fontWeight:600}}>Aktywne sesje</div><div className="muted" style={{fontSize:12}}>3 urządzenia · ostatnia: Mac, Warszawa, dzisiaj</div></div>
                <button className="btn btn-ghost btn-sm">Zarządzaj</button>
              </div>
              <div style={{marginTop:24, padding:18, border:'1px dashed var(--line)', borderRadius:'var(--r-2)'}}>
                <div style={{fontWeight:600, marginBottom:6}}>Strefa zagrożenia</div>
                <div className="muted" style={{fontSize:12.5}}>Karencja 30 dni — możesz odzyskać konto. Po tym czasie nieodwracalne.</div>
                <div className="row gap-8 mt-12">
                  <button className="btn btn-ghost btn-sm">Zablokuj konto tymczasowo</button>
                  <button className="btn btn-ghost btn-sm" style={{color:'var(--accent)'}}>Usuń konto</button>
                </div>
              </div>
            </>
          )}

          {section === 'preferences' && (
            <>
              <div className="section-title mb-4">Twoje dziedziny</div>
              <div className="muted mb-24" style={{fontSize:13}}>Wybór z onboardingu — zmień w każdej chwili. Zmiana aktualizuje rekomendacje.</div>
              {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={()=>{}}/>
                    <span className="muted" style={{fontSize:12, marginLeft:'auto'}}>poziom: średni</span>
                  </div>
                  <div className="row gap-8" style={{flexWrap:'wrap', marginLeft:6}}>
                    {d.subs.map((s,i) => <button key={s} className={`chip ${i<3?'active':''}`} style={{fontSize:11}}>{s}</button>)}
                  </div>
                </div>
              ))}
              <div style={{marginTop:24}}>
                <div className="section-title mb-12">Wygląd</div>
                <div className="row" style={{padding:'14px 0', borderTop:'1px solid var(--line-soft)', justifyContent:'space-between', alignItems:'center'}}>
                  <div><div style={{fontWeight:600}}>Tryb ciemny</div><div className="muted" style={{fontSize:12}}>Synchronizacja z systemem.</div></div>
                  <Toggle on={false} onChange={()=>{}}/>
                </div>
                <div className="row" style={{padding:'14px 0', borderTop:'1px solid var(--line-soft)', justifyContent:'space-between', alignItems:'center'}}>
                  <div><div style={{fontWeight:600}}>Czytelne odstępy</div><div className="muted" style={{fontSize:12}}>Większe, swobodniejsze odstępy w postach.</div></div>
                  <Toggle on={true} onChange={()=>{}}/>
                </div>
              </div>
            </>
          )}

          {section === 'privacy' && (
            <>
              <div className="section-title mb-4">Prywatność</div>
              <div className="muted mb-24" style={{fontSize:13}}>Decyzje o widoczności, algorytmie i danych. Domyślne ustawienia są bezpieczne.</div>
              {[
                ['Profil publiczny', 'Jeśli wyłączysz, profil widoczny tylko dla zalogowanych obserwujących.', true],
                ['Algorytm uczy się z mojej aktywności', 'Bez tego — rekomendacje wyłącznie na podstawie deklarowanych preferencji.', trackingOn],
                ['Wskazuj mnie autorom jako podobnego widza', 'Pozwala lepiej rekomendować nowe treści.', false],
                ['Pokazuj posty sponsorowane (po Go-Live)', 'Decyzja na przyszłość.', false],
                ['Auto-tłumaczenie postów (po Go-Live)', 'Treści w innym języku tłumaczone w locie.', false],
                ['Pokazuj moje polecajki w bibliotekach autorów', 'Może pojawiać się w "Polecane przez Hannę".', true],
              ].map(([title,desc,on],i) => (
                <div key={i} className="row" style={{padding:'14px 0', borderTop:'1px solid var(--line-soft)', justifyContent:'space-between'}}>
                  <div style={{flex:1, paddingRight:24}}>
                    <div style={{fontWeight:600}}>{title}</div>
                    <div className="muted" style={{fontSize:12.5, marginTop:2}}>{desc}</div>
                  </div>
                  <Toggle on={on} onChange={(v) => i===1 && setTrackingOn(v)}/>
                </div>
              ))}
              <div style={{marginTop:24}}>
                <div className="section-title mb-12">Lista blokad</div>
                <div className="muted mb-12" style={{fontSize:13}}>Osoby, których nie chcesz widzieć i które nie widzą Ciebie.</div>
                <div className="row gap-8" style={{flexWrap:'wrap'}}>
                  <span className="chip">@spammer42 <I name="X" size={11}/></span>
                  <span className="chip">@reklamiarz <I name="X" size={11}/></span>
                  <button className="btn btn-ghost btn-sm">+ Dodaj blokadę</button>
                </div>
              </div>
            </>
          )}

          {section === 'notifications' && (
            <>
              <div className="section-title mb-4">Powiadomienia</div>
              <div className="muted mb-24" style={{fontSize:13}}>Wybierz, czego się dowiesz i którym kanałem.</div>
              <div style={{display:'grid', gridTemplateColumns:'1fr 90px 90px 90px', alignItems:'center', gap:0, fontSize:13}}>
                <div></div>
                <div className="muted" style={{fontWeight:600, textTransform:'uppercase', fontSize:11, letterSpacing:'.06em', textAlign:'center'}}>In-app</div>
                <div className="muted" style={{fontWeight:600, textTransform:'uppercase', fontSize:11, letterSpacing:'.06em', textAlign:'center'}}>Email</div>
                <div className="muted" style={{fontWeight:600, textTransform:'uppercase', fontSize:11, letterSpacing:'.06em', textAlign:'center'}}>Push</div>
                {[
                  ['Nowy post obserwowanego autora', true, false, true],
                  ['Odpowiedź na komentarz', true, true, true],
                  ['Lajki Twoich postów', true, false, false],
                  ['Wiadomość prywatna', true, true, true],
                  ['Nowe wydarzenie w okolicy', true, true, false],
                  ['Zaproszenie do grupy', true, true, false],
                  ['Wzmianki @anna.h', true, true, true],
                  ['Nowy kurs autora, którego śledzisz', true, true, false],
                  ['Subskrypcja kończy się za 7 dni', true, true, true],
                  ['Ostrzeżenia / blokady', true, true, true],
                ].map((row,i) => (
                  <Fragment key={i}>
                    <div style={{padding:'14px 0', borderTop:'1px solid var(--line-soft)'}}>{row[0]}</div>
                    <div style={{padding:'14px 0', borderTop:'1px solid var(--line-soft)', display:'grid', placeItems:'center'}}><Toggle on={row[1]} onChange={()=>{}}/></div>
                    <div style={{padding:'14px 0', borderTop:'1px solid var(--line-soft)', display:'grid', placeItems:'center'}}><Toggle on={row[2]} onChange={()=>{}}/></div>
                    <div style={{padding:'14px 0', borderTop:'1px solid var(--line-soft)', display:'grid', placeItems:'center'}}><Toggle on={row[3]} onChange={()=>{}}/></div>
                  </Fragment>
                ))}
              </div>
              <div style={{marginTop:24}}>
                <div className="section-title mb-12">Cisza nocna</div>
                <div className="row gap-12" style={{alignItems:'center'}}>
                  <span style={{fontSize:13}}>Od</span>
                  <input className="input" type="time" defaultValue="22:00" style={{maxWidth:140}}/>
                  <span style={{fontSize:13}}>do</span>
                  <input className="input" type="time" defaultValue="07:30" style={{maxWidth:140}}/>
                  <Toggle on={true} onChange={()=>{}}/>
                </div>
              </div>
            </>
          )}

          {section === 'language' && (
            <>
              <div className="section-title mb-4">Język i region</div>
              <div className="muted mb-24" style={{fontSize:13}}>Wpływa na interfejs i lokalne rekomendacje (wydarzenia, partnerzy).</div>
              <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:16}}>
                <div className="form-group"><div className="form-label">Język interfejsu</div>
                  <select className="select"><option>Polski</option><option>English</option><option>Deutsch</option></select>
                </div>
                <div className="form-group"><div className="form-label">Strefa czasowa</div>
                  <select className="select"><option>Europa/Warszawa (UTC+2)</option><option>Europa/Berlin</option></select>
                </div>
                <div className="form-group"><div className="form-label">Format daty</div>
                  <select className="select"><option>11 maj 2026</option><option>2026-05-11</option><option>5/11/26</option></select>
                </div>
                <div className="form-group"><div className="form-label">Pierwszy dzień tygodnia</div>
                  <select className="select"><option>Poniedziałek</option><option>Niedziela</option></select>
                </div>
                <div className="form-group"><div className="form-label">Lokalizacja (do wydarzeń)</div>
                  <input className="input" defaultValue="Warszawa, Polska"/>
                </div>
                <div className="form-group"><div className="form-label">Promień (km)</div>
                  <input className="input" type="number" defaultValue="25"/>
                </div>
              </div>
              <div style={{padding:18, background:'var(--bg-soft)', borderRadius:'var(--r-2)', marginTop:24}}>
                <div style={{fontWeight:600, marginBottom:6}}>Języki, w których chcesz widzieć treści</div>
                <div className="muted mb-12" style={{fontSize:12.5}}>Posty w innych językach pojawią się rzadziej (lub auto-tłumaczone, gdy włączysz w Prywatności).</div>
                <div className="row gap-8" style={{flexWrap:'wrap'}}>
                  {['Polski','English','Deutsch','Español','Français','Українська'].map((l,i) => (
                    <button key={l} className={`chip ${i<2?'active':''}`}>{l}</button>
                  ))}
                </div>
              </div>
            </>
          )}

          {section === 'subscription' && (
            <>
              <div className="row" style={{justifyContent:'space-between', alignItems:'flex-start', marginBottom:24}}>
                <div>
                  <div className="section-title mb-4">Subskrypcja</div>
                  <div className="muted" style={{fontSize:13}}>Twój plan i historia płatności.</div>
                </div>
                <span className="phase-ribbon gl">GL</span>
              </div>
              <div className="card" style={{padding:24, background:'linear-gradient(135deg, color-mix(in oklab, var(--hue-amber) 12%, var(--bg-elev)), var(--bg-elev))', border:'2px solid var(--ink-1)'}}>
                <div className="row" style={{justifyContent:'space-between', alignItems:'flex-start'}}>
                  <div>
                    <div className="section-eyebrow">Twój plan</div>
                    <div style={{fontFamily:'var(--font-serif)', fontSize:30, fontWeight:500, marginTop:6}}>Hueman+</div>
                    <div className="muted" style={{fontSize:13, marginTop:4}}>Aktywny do 14 czerwca 2026 · 24 zł/miesiąc</div>
                  </div>
                  <div className="col gap-8">
                    <button className="btn btn-soft btn-sm">Zmień plan</button>
                    <button className="btn btn-ghost btn-sm">Anuluj</button>
                  </div>
                </div>
              </div>
              <div style={{marginTop:24}}>
                <div className="section-title mb-12">Metoda płatności</div>
                <div className="card" style={{padding:16}}>
                  <div className="row gap-12">
                    <div style={{width:48, height:32, borderRadius:'var(--r-1)', background:'var(--ink-1)', color:'white', display:'grid', placeItems:'center', fontSize:11, fontWeight:700}}>VISA</div>
                    <div style={{flex:1}}>
                      <div style={{fontSize:13, fontWeight:600}}>•••• •••• •••• 4242</div>
                      <div className="muted" style={{fontSize:11.5}}>Wygasa 09/27 · Anna H.</div>
                    </div>
                    <button className="btn btn-ghost btn-sm">Zmień</button>
                  </div>
                </div>
              </div>
              <div style={{marginTop:24}}>
                <div className="section-title mb-12">Historia płatności</div>
                <div className="card">
                  {[
                    ['14 kwi 2026','Hueman+ · maj','24,00 zł','Opłacone'],
                    ['14 mar 2026','Hueman+ · kwiecień','24,00 zł','Opłacone'],
                    ['14 lut 2026','Hueman+ · marzec','24,00 zł','Opłacone'],
                  ].map((r,i) => (
                    <div key={i} className="row" style={{padding:'14px 18px', borderTop:i?'1px solid var(--line-soft)':'', alignItems:'center'}}>
                      <div style={{flex:1}}><div style={{fontSize:13, fontWeight:600}}>{r[1]}</div><div className="muted" style={{fontSize:11.5}}>{r[0]}</div></div>
                      <div style={{fontSize:13, fontWeight:600, marginRight:16}}>{r[2]}</div>
                      <span className="chip chip-hue-sage active" style={{fontSize:10}}>{r[3]}</span>
                      <button className="btn btn-ghost btn-sm" style={{marginLeft:8}}>PDF</button>
                    </div>
                  ))}
                </div>
              </div>
            </>
          )}

          {section === 'integrations' && (
            <>
              <div className="section-title mb-4">Połączenia</div>
              <div className="muted mb-24" style={{fontSize:13}}>Konta i narzędzia, które łączą się z BeHueman.</div>
              {[
                ['Google',                 'Połączone (anna@gmail.com)', true,  'Globe'],
                ['Apple ID',               'Niepołączone',                false, 'Globe'],
                ['Wtyczka do przeglądarki','Niezautoryzowana',            false, 'Globe'],
                ['Kalendarz Google',       'Niepołączony · po Go-Live',   false, 'Calendar'],
                ['Stripe Connect (autor)', 'Niepołączony',                false, 'Briefcase'],
                ['Substack',               'Cross-posting · połączone',   true,  'Link'],
              ].map(([name, status, on, icon], i) => (
                <div key={i} className="row" style={{padding:'16px 0', borderTop:i?'1px solid var(--line-soft)':'', justifyContent:'space-between', alignItems:'center'}}>
                  <div className="row gap-12">
                    <div style={{width:40, height:40, borderRadius:'var(--r-2)', background:'var(--bg-soft)', display:'grid', placeItems:'center'}}><I name={icon} size={16}/></div>
                    <div>
                      <div style={{fontWeight:600}}>{name}</div>
                      <div className="muted" style={{fontSize:12}}>{status}</div>
                    </div>
                  </div>
                  <button className="btn btn-ghost btn-sm">{on?'Rozłącz':'Połącz'}</button>
                </div>
              ))}
            </>
          )}

          {section === 'data' && (
            <>
              <div className="row" style={{justifyContent:'space-between', alignItems:'flex-start', marginBottom:24}}>
                <div>
                  <div className="section-title mb-4">Dane i eksport</div>
                  <div className="muted" style={{fontSize:13}}>Pełna kontrola: pobierz, zaimportuj lub usuń.</div>
                </div>
                <span className="phase-ribbon ff2">FF2</span>
              </div>
              {[
                ['Pobierz wszystkie moje dane', 'Wszystko, co dotyczy konta — w archiwum ZIP (max. 24h).', 'Eksportuj'],
                ['Eksport bibliotek (CSV)', 'Lista linków z każdej Twojej biblioteki.', 'Pobierz CSV'],
                ['Import polecajek z innej platformy', 'Goodreads, Pocket, Readwise — wgraj plik OPML/CSV.', 'Wgraj plik'],
                ['Historia rekomendacji', 'Co algorytm dla Ciebie wybrał i na jakiej podstawie (90 dni).', 'Otwórz'],
                ['Reset rekomendacji', 'Wyczyść uczone preferencje, zacznij od deklaracji.', 'Resetuj'],
              ].map((r,i) => (
                <div key={i} className="row" style={{padding:'18px 0', borderTop:i?'1px solid var(--line-soft)':'', justifyContent:'space-between', alignItems:'flex-start'}}>
                  <div style={{flex:1, paddingRight:24}}>
                    <div style={{fontWeight:600}}>{r[0]}</div>
                    <div className="muted" style={{fontSize:12.5, marginTop:2}}>{r[1]}</div>
                  </div>
                  <button className="btn btn-soft btn-sm">{r[2]}</button>
                </div>
              ))}
              <div style={{padding:18, background:'var(--bg-soft)', borderRadius:'var(--r-2)', marginTop:24, fontSize:12.5, lineHeight:1.6}} className="muted">
                Zgodnie z RODO masz prawo do wglądu, sprostowania i przenoszenia danych. Każdy eksport zawiera podpisany hash. Pełna polityka: <u>behueman.com/privacy</u>.
              </div>
            </>
          )}
        </div>
      </div>
    </div>
  );
};

window.Detail3Screens = Detail3;