// ScreensB.jsx — Profile, Auth, Splash, Onboarding

// ─────────────────── PROFILE ───────────────────
function ScreenProfile({ onLogout, authUser, onShowBookmarks, onShowRsvps, onShowNotifications, onShowStammdaten, onShowPasswordChange }) {
  const u = authUser || { username: '—', role: 'user' };
  const roleLabel = { user: 'Mitglied', moderator: 'Moderator', admin: 'Administrator' };
  return (
    <div className="sbp-screen" style={{ overflow: 'auto', paddingBottom: 90 }}>
      <SbpTopBar
        title="Profil"
        subtitle={roleLabel[u.role] || 'Mitglied'}
        leading={<div style={{ width: 36 }}/>}
        trailing={<div style={{ width: 36 }}/>}
      />
      {/* profile header */}
      <div style={{ position: 'relative', padding: '30px 22px 24px', textAlign: 'center', overflow: 'hidden' }}>
        <div style={{
          position: 'absolute', inset: 0,
          background: 'radial-gradient(60% 60% at 50% 0%, color-mix(in oklab, var(--sbp-accent) 25%, transparent), transparent 70%)',
          pointerEvents: 'none',
        }}/>
        <div style={{
          width: 96, height: 96, borderRadius: '50%', margin: '0 auto 14px',
          background: 'linear-gradient(180deg, hsl(20 50% 28%), hsl(10 40% 12%))',
          border: '2px solid color-mix(in oklab, var(--sbp-accent) 60%, transparent)',
          boxShadow: '0 0 30px color-mix(in oklab, var(--sbp-accent) 40%, transparent)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontFamily: 'var(--sbp-font-rustic)', fontSize: 40, fontWeight: 700, color: 'var(--sbp-ember-100)',
          position: 'relative', zIndex: 1,
        }}>
          {(u.username || '?').substring(0, 2).toUpperCase()}
        </div>
        <h2 style={{ fontFamily: 'var(--sbp-font-rustic)', fontWeight: 600, fontSize: 26, margin: '4px 0 4px', position: 'relative' }}>
          {u.username}
        </h2>
        <div className="sbp-meta" style={{ position: 'relative' }}>
          {u.email || 'Pass-Mitglied'}
        </div>
        {/* Rollen-Badge */}
        <div style={{ marginTop: 10, display: 'flex', justifyContent: 'center', gap: 8 }}>
          <span className="sbp-chip" style={{
            background: u.role === 'admin' ? 'color-mix(in oklab, var(--sbp-blood-500) 30%, transparent)'
              : u.role === 'moderator' ? 'color-mix(in oklab, var(--sbp-accent) 25%, transparent)'
              : undefined,
            borderColor: u.role === 'admin' ? 'color-mix(in oklab, var(--sbp-blood-400) 60%, transparent)'
              : u.role === 'moderator' ? 'color-mix(in oklab, var(--sbp-accent) 50%, transparent)'
              : undefined,
            color: u.role !== 'user' ? 'var(--sbp-ember-100)' : undefined,
          }}>
            {u.role === 'admin' ? '⚔ Administrator' : u.role === 'moderator' ? '✦ Moderator' : '◆ Mitglied'}
          </span>
        </div>
      </div>

      {/* sections */}
      <div style={{ padding: '16px 20px 0' }}>
        <span className="sbp-eyebrow">Mein Pass</span>
        <div className="sbp-card" style={{ marginTop: 10, overflow: 'hidden' }}>
          {[
            { i: <IconHeart size={18}/>, l: 'Gemerkt', s: 'Beiträge & Termine', onClick: onShowBookmarks },
            { i: <IconThumbUp size={18}/>, l: 'Meine Zu-/Absagen', s: 'Deine Rückmeldungen zu Terminen', onClick: onShowRsvps },
            { i: <IconBell size={18}/>, l: 'Benachrichtigungen', s: 'Hier kannst du deine Benachrichtigungen steuern', onClick: onShowNotifications },
          ].map((r, i, arr) => (
            <div key={r.l} onClick={r.onClick} style={{
              display: 'flex', alignItems: 'center', gap: 14, padding: '14px 16px',
              borderBottom: i < arr.length - 1 ? '1px solid var(--sbp-border)' : 'none',
              cursor: r.onClick ? 'pointer' : 'default',
            }}>
              <span style={{ color: 'var(--sbp-ember-200)' }}>{r.i}</span>
              <div style={{ flex: 1 }}>
                <div className="sbp-body" style={{ fontWeight: 600 }}>{r.l}</div>
                <div className="sbp-meta" style={{ marginTop: 2 }}>{r.s}</div>
              </div>
              <IconChevronRight size={16}/>
            </div>
          ))}
        </div>
      </div>

      <div style={{ padding: '24px 20px 0' }}>
        <span className="sbp-eyebrow">Verwaltung</span>
        <div className="sbp-card" style={{ marginTop: 10, overflow: 'hidden' }}>
          {[
            { i: <IconUser size={18}/>, l: 'Stammdaten', s: 'Benutzername, Email ändern', onClick: onShowStammdaten },
            { i: <IconLock size={18}/>, l: 'Passwort & Sicherheit', s: 'Passwort ändern', onClick: onShowPasswordChange },
          ].map((r, i, arr) => (
            <div key={r.l} onClick={r.onClick} style={{
              display: 'flex', alignItems: 'center', gap: 14, padding: '14px 16px',
              borderBottom: i < arr.length - 1 ? '1px solid var(--sbp-border)' : 'none',
              cursor: r.onClick ? 'pointer' : 'default',
            }}>
              <span style={{ color: 'var(--sbp-ember-200)' }}>{r.i}</span>
              <div style={{ flex: 1 }}>
                <div className="sbp-body" style={{ fontWeight: 600 }}>{r.l}</div>
                <div className="sbp-meta" style={{ marginTop: 2 }}>{r.s}</div>
              </div>
              <IconChevronRight size={16}/>
            </div>
          ))}
        </div>
      </div>

      <div style={{ padding: '28px 20px 0', textAlign: 'center' }}>
        <button onClick={onLogout} style={{
          background: 'none', border: 0, cursor: 'pointer',
          color: 'var(--sbp-blood-400)',
          fontFamily: 'var(--sbp-font-display)',
          fontSize: 12, letterSpacing: '0.18em', textTransform: 'uppercase', fontWeight: 600,
        }}>Abmelden</button>
        <div className="sbp-meta" style={{ marginTop: 22, color: 'var(--sbp-text-3)' }}>
          Schafberg-Pass · Anno MMV
        </div>
      </div>
    </div>
  );
}

// ─────────────────── AUTH ───────────────────────
function ScreenAuth({ onAuth, installPrompt, onInstall, onShowInstallSheet }) {
  const [mode, setMode]       = React.useState('login'); // 'login' | 'register' | 'pending'
  const [loading, setLoading] = React.useState(false);
  const [error, setError]     = React.useState('');

  const isIOS = /iP(hone|ad|od)/.test(navigator.userAgent);
  const showInstallBtn = true;

  const handleInstallClick = async () => {
    if (installPrompt) { await onInstall(); return; }
    if (isIOS) { onShowInstallSheet(); }
  };

  // Felder
  const [name, setName]         = React.useState('');
  const [email, setEmail]       = React.useState('');
  const [password, setPassword] = React.useState('');

  const reset = (m) => { setMode(m); setError(''); setName(''); setEmail(''); setPassword(''); };

  const handleSubmit = async () => {
    setError('');
    setLoading(true);
    try {
      if (mode === 'register') {
        await sbpApi('POST', '/auth/register', { username: name, email, password });
        reset('pending');
      } else {
        const data = await sbpApi('POST', '/auth/login', { email, password });
        onAuth(data.user, data.token);
      }
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div style={{ position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column', overflow: 'auto' }}>
      {/* hero header */}
      <div style={{
        position: 'relative',
        padding: mode === 'register' ? '28px 24px 14px' : showInstallBtn ? '24px 24px 16px' : '60px 24px 28px',
        textAlign: 'center', overflow: 'hidden',
      }}>
        <div style={{
          position: 'absolute', inset: 0,
          background: 'radial-gradient(70% 80% at 50% 0%, color-mix(in oklab, var(--sbp-accent) 35%, transparent), transparent 70%)',
          pointerEvents: 'none',
        }}/>
        <div style={{ position: 'relative', display: 'inline-flex', flexDirection: 'column', alignItems: 'center' }}>
          <SbpMark size={mode === 'register' ? 48 : showInstallBtn ? 48 : 64}/>
          <div className="sbp-display" style={{ fontSize: 11, letterSpacing: '0.32em', marginTop: 10 }}>Schafberg · Pass</div>
          <h1 style={{
            fontFamily: 'var(--sbp-font-rustic)', fontWeight: 600,
            fontSize: mode === 'register' ? 28 : showInstallBtn ? 28 : 34,
            lineHeight: 1.1, margin: '8px 0 4px', textAlign: 'center',
          }} className="sbp-glow-text">
            {mode === 'pending' ? 'Beim Obmann' : mode === 'register' ? 'Tritt uns bei' : 'Willkommen'}
          </h1>
          {mode !== 'register' && (
            <p className="sbp-body" style={{ color: 'var(--sbp-text-2)', maxWidth: 280, margin: '0 auto', fontSize: showInstallBtn ? 13 : undefined }}>
              {mode === 'pending'
                ? 'Dein Antrag liegt zur Sichtung beim Vorstand.'
                : 'Melde dich an oder lade die App herunter.'}
            </p>
          )}
        </div>
      </div>

      {/* form */}
      <div style={{ padding: '0 24px 24px' }}>
        {mode === 'pending' ? (
          <div className="sbp-card" style={{
            padding: 24, textAlign: 'center',
            background: 'linear-gradient(180deg, color-mix(in oklab, var(--sbp-accent) 12%, var(--sbp-night-2)), var(--sbp-night-2))',
            border: '1px solid color-mix(in oklab, var(--sbp-accent) 30%, transparent)',
          }}>
            <div style={{
              width: 64, height: 64, borderRadius: '50%', margin: '0 auto 16px',
              background: 'color-mix(in oklab, var(--sbp-accent) 22%, transparent)',
              border: '1px solid color-mix(in oklab, var(--sbp-accent) 50%, transparent)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              color: 'var(--sbp-ember-100)',
              boxShadow: '0 0 20px color-mix(in oklab, var(--sbp-accent) 40%, transparent)',
            }}>
              <IconClock size={28}/>
            </div>
            <h3 className="sbp-h2" style={{ fontFamily: 'var(--sbp-font-rustic)', fontSize: 22, fontWeight: 600 }}>
              Antrag eingegangen
            </h3>
            <p className="sbp-body" style={{ color: 'var(--sbp-text-2)', marginTop: 10 }}>
              Ein Vorstandsmitglied wird deinen Beitritt bald freigegeben.
              Üblicherweise dauert das maximal zwischen 1 bis 3 Tage.
            </p>
            <button onClick={() => reset('login')} className="sbp-btn sbp-btn--ghost" style={{ marginTop: 22 }}>
              Zur Anmeldung
            </button>
          </div>
        ) : (
          <>
            {error && (
              <div style={{
                padding: '12px 16px', marginBottom: 16, borderRadius: 10,
                background: 'color-mix(in oklab, var(--sbp-blood-500) 25%, transparent)',
                border: '1px solid color-mix(in oklab, var(--sbp-blood-400) 50%, transparent)',
                color: 'var(--sbp-ember-100)', fontSize: 13,
              }}>
                {error}
              </div>
            )}

            {mode === 'register' && (
              <>
                <label className="sbp-label">Name</label>
                <input className="sbp-input" placeholder="Vor- und Nachname"
                       value={name} onChange={e => setName(e.target.value)}/>
              </>
            )}

            <label className="sbp-label" style={{ marginTop: mode === 'register' ? 14 : 0 }}>E-Mail</label>
            <div style={{ position: 'relative' }}>
              <input className="sbp-input" placeholder="name@beispiel.at" style={{ paddingLeft: 44 }}
                     value={email} onChange={e => setEmail(e.target.value)}/>
              <span style={{ position: 'absolute', left: 14, top: '50%', transform: 'translateY(-50%)', color: 'var(--sbp-text-3)' }}>
                <IconMail size={18}/>
              </span>
            </div>

            <label className="sbp-label" style={{ marginTop: 14 }}>Passwort</label>
            <div style={{ position: 'relative' }}>
              <input type="password" className="sbp-input" placeholder="••••••••" style={{ paddingLeft: 44 }}
                     value={password} onChange={e => setPassword(e.target.value)}
                     onKeyDown={e => e.key === 'Enter' && handleSubmit()}/>
              <span style={{ position: 'absolute', left: 14, top: '50%', transform: 'translateY(-50%)', color: 'var(--sbp-text-3)' }}>
                <IconLock size={18}/>
              </span>
            </div>

            {mode === 'register' && (
              <div className="sbp-card" style={{
                padding: 14, marginTop: 16, display: 'flex', gap: 10, alignItems: 'flex-start',
                background: 'color-mix(in oklab, var(--sbp-ember-700) 30%, var(--sbp-night-2))',
                border: '1px solid color-mix(in oklab, var(--sbp-accent) 25%, transparent)',
              }}>
                <span style={{ color: 'var(--sbp-ember-200)', flexShrink: 0, marginTop: 1 }}><IconInfo size={18}/></span>
                <div>
                  <div className="sbp-body" style={{ fontSize: 13, fontWeight: 600 }}>Mitgliedschaft wird geprüft</div>
                  <div className="sbp-meta" style={{ marginTop: 4, color: 'var(--sbp-text-2)', textTransform: 'none', letterSpacing: 0, fontSize: 12, lineHeight: 1.5 }}>
                    Dein Konto wird erst nach Freigabe durch den Vorstand aktiv.
                  </div>
                </div>
              </div>
            )}

            <button onClick={handleSubmit} disabled={loading}
                    className="sbp-btn sbp-btn--primary" style={{ width: '100%', marginTop: 22, opacity: loading ? 0.6 : 1 }}>
              <IconFlame size={16}/>
              {loading ? 'Bitte warten…' : mode === 'register' ? 'Antrag senden' : 'Anmelden'}
            </button>

            <div style={{ marginTop: 18, textAlign: 'center' }}>
              <button onClick={() => reset(mode === 'login' ? 'register' : 'login')} style={{
                background: 'none', border: 0, color: 'var(--sbp-ember-200)', cursor: 'pointer',
                fontFamily: 'var(--sbp-font-display)', fontSize: 11, letterSpacing: '0.2em',
                textTransform: 'uppercase', fontWeight: 600,
              }}>
                {mode === 'login' ? 'Noch kein Mitglied? Beitreten' : 'Schon Mitglied? Anmelden'}
              </button>
            </div>

          </>
        )}
      </div>

      <div style={{ padding: '0 24px 8px', textAlign: 'center' }}>
        <div className="sbp-meta" style={{ color: 'var(--sbp-text-3)' }}>Anno MMV · Salzkammergut</div>
      </div>

      <div style={{ padding: '0 24px 24px' }}>
        <button onClick={handleInstallClick} style={{
          width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
          padding: '13px 20px', borderRadius: 12, cursor: 'pointer',
          background: 'color-mix(in oklab, var(--sbp-accent) 15%, transparent)',
          border: '1px solid color-mix(in oklab, var(--sbp-accent) 45%, transparent)',
          color: 'var(--sbp-ember-200)', fontFamily: 'var(--sbp-font-display)',
          fontSize: 13, fontWeight: 600, letterSpacing: '0.04em',
        }}>
          <IconDownload size={16}/>
          App jetzt installieren
        </button>
      </div>
    </div>
  );
}

// ─────────────────── SPLASH ───────────────────
function ScreenSplash() {
  return (
    <div style={{
      position: 'absolute', inset: 0,
      display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
      gap: 18,
    }}>
      <div style={{ animation: 'sbp-fade-in 0.6s ease' }}>
        <SbpMark size={120}/>
      </div>
      <div className="sbp-display" style={{ fontSize: 13, letterSpacing: '0.4em', color: 'var(--sbp-fog-200)' }}>
        Schafberg · Pass
      </div>
      <div className="sbp-meta" style={{ color: 'var(--sbp-text-3)' }}>Anno MMV</div>
      <div style={{ position: 'absolute', bottom: 60, left: '50%', transform: 'translateX(-50%)', display: 'flex', gap: 6 }}>
        {[0,1,2].map(i => (
          <span key={i} style={{
            width: 6, height: 6, borderRadius: '50%', background: 'var(--sbp-accent)',
            boxShadow: '0 0 8px var(--sbp-accent)',
            animation: `sbp-fade-in 1s ${i * 0.2}s ease infinite alternate`,
          }}/>
        ))}
      </div>
    </div>
  );
}

// ─────────────────── ONBOARDING ───────────────────
function ScreenOnboarding({ onDone }) {
  const [step, setStep] = React.useState(0);
  const slides = [
    {
      eyebrow: 'Willkommen bei der', title: 'Schafberg-Pass',
      body: 'Die Schafberg-Pass ist ein Brauchtums-Krampusverein aus dem Salzkammergut. \n Diese App ist für alle Mitglieder.',
      icon: <IconFlame size={42}/>,
    },
    {
      eyebrow: 'News', title: 'Bleib am aktuellen Stand',
      body: 'Lauf­pläne, Termine und alles, was im Pass passiert. Direkt am Handy.',
      icon: <IconNews size={42}/>,
    },
    {
      eyebrow: 'Termine', title: 'Keinen Lauf\nverpassen.',
      body: 'Der Terminkalender zeigt dir alle Läufe, Versammlungen und wichtige Termine auf einen Blick.',
      icon: <IconEvents size={42}/>,
    },
  ];
  const s = slides[step];
  return (
    <div style={{ position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column' }}>
      <div style={{ display: 'flex', justifyContent: 'flex-end', padding: '14px 18px' }}>
        <button onClick={onDone} style={{
          background: 'none', border: 0, color: 'var(--sbp-text-3)', cursor: 'pointer',
          fontFamily: 'var(--sbp-font-display)', fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase', fontWeight: 600,
        }}>Überspringen</button>
      </div>
      <div style={{ flex: 1, padding: '20px 28px', display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', textAlign: 'center' }}>
        <div style={{
          width: 110, height: 110, borderRadius: '50%',
          background: 'radial-gradient(60% 60% at 50% 50%, color-mix(in oklab, var(--sbp-accent) 40%, transparent), transparent 70%)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          color: 'var(--sbp-ember-100)', marginBottom: 30,
          filter: 'drop-shadow(0 0 20px var(--sbp-accent))',
        }}>{s.icon}</div>
        <span className="sbp-eyebrow">{s.eyebrow}</span>
        <h1 style={{ fontFamily: 'var(--sbp-font-rustic)', fontWeight: 600, fontSize: 40, lineHeight: 1.05, margin: '14px 0 14px', whiteSpace: 'pre-line' }} className="sbp-glow-text">
          {s.title}
        </h1>
        <p className="sbp-body" style={{ color: 'var(--sbp-text-2)', maxWidth: 280, fontSize: 16 }}>{s.body}</p>
      </div>
      <div style={{ padding: '0 28px 30px' }}>
        <div style={{ display: 'flex', gap: 8, justifyContent: 'center', marginBottom: 22 }}>
          {slides.map((_, i) => (
            <span key={i} style={{
              width: i === step ? 24 : 6, height: 6, borderRadius: 3,
              background: i === step ? 'var(--sbp-accent)' : 'var(--sbp-fog-500)',
              boxShadow: i === step ? '0 0 8px var(--sbp-accent)' : 'none',
              transition: 'all 0.3s ease',
            }}/>
          ))}
        </div>
        <button onClick={() => step < slides.length - 1 ? setStep(step + 1) : onDone()}
                className="sbp-btn sbp-btn--primary" style={{ width: '100%' }}>
          {step < slides.length - 1 ? <>Weiter<IconArrowRight size={16}/></> : <>Loslegen<IconFlame size={16}/></>}
        </button>
      </div>
    </div>
  );
}

// ─────────────────── BOOKMARKS ─────────────────────
function ScreenBookmarks({ onBack, onOpenArticle, onOpenEvent, bookmarks = { news: {}, events: {} }, onBookmarkToggle, events = [] }) {
  // Live-Event-Daten bevorzugen (aktuelle Daten statt veraltetem Snapshot)
  const eventsById = Object.fromEntries(events.map(e => [String(e.id), e]));

  const newsItems  = Object.values(bookmarks.news || {}).sort((a, b) => b._at - a._at);
  const eventItems = Object.entries(bookmarks.events || {})
    .map(([id, snap]) => ({ ...(eventsById[id] || snap), _at: snap._at }))
    .sort((a, b) => b._at - a._at);
  const isEmpty = newsItems.length === 0 && eventItems.length === 0;

  const remove = (type, id, data) => onBookmarkToggle?.(type, id, data);

  return (
    <div className="sbp-screen" style={{ overflow: 'auto', paddingBottom: 90 }}>
      <SbpTopBar
        title="Gemerkt"
        subtitle="Deine gespeicherten Inhalte"
        leading={
          <button onClick={onBack} className="sbp-icon-btn" style={{ width: 36, height: 36 }}>
            <IconChevronLeft size={20}/>
          </button>
        }
      />

      {isEmpty ? (
        <div style={{ padding: '60px 32px', textAlign: 'center' }}>
          <div style={{
            width: 72, height: 72, borderRadius: '50%', margin: '0 auto 20px',
            background: 'color-mix(in oklab, var(--sbp-accent) 12%, transparent)',
            border: '1px solid color-mix(in oklab, var(--sbp-accent) 30%, transparent)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            color: 'var(--sbp-text-3)',
          }}>
            <IconHeart size={28}/>
          </div>
          <h3 className="sbp-h3" style={{ fontFamily: 'var(--sbp-font-rustic)', fontSize: 22, fontWeight: 600, marginBottom: 10 }}>
            Noch nichts gemerkt
          </h3>
          <p className="sbp-body" style={{ color: 'var(--sbp-text-2)', lineHeight: 1.6 }}>
            Tippe auf das Herz-Icon in einem Beitrag oder Termin, um ihn hier zu speichern.
          </p>
        </div>
      ) : (
        <div style={{ padding: '16px 20px 0' }}>

          {/* News-Beiträge */}
          {newsItems.length > 0 && (
            <>
              <span className="sbp-eyebrow" style={{ display: 'block', marginBottom: 10 }}>News</span>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 12, marginBottom: 28 }}>
                {newsItems.map((n, i) => (
                  <div key={n.id} className="sbp-card" style={{ overflow: 'hidden', position: 'relative' }}>
                    <button
                      onClick={() => onOpenArticle(n)}
                      style={{ display: 'block', width: '100%', background: 'none', border: 0, padding: 0, cursor: 'pointer', textAlign: 'left', color: 'inherit' }}
                    >
                      <div className="sbp-img" style={{ height: 100 }}>
                        <div style={{
                          position: 'absolute', inset: 0,
                          background: i % 2 === 0
                            ? 'radial-gradient(50% 70% at 30% 80%, rgba(217,109,28,0.55), transparent 70%)'
                            : 'radial-gradient(50% 70% at 70% 30%, rgba(155,28,28,0.6), transparent 70%)',
                        }}/>
                        <div style={{ position: 'absolute', top: 10, left: 10 }}>
                          <span className="sbp-chip sbp-chip--ember">{n.tag}</span>
                        </div>
                      </div>
                      <div style={{ padding: '12px 14px' }}>
                        <div className="sbp-meta" style={{ marginBottom: 4 }}>
                          {n.date || fmtBmDate(n.created_at)} · {n.eyebrow || n.author_name}
                        </div>
                        <div className="sbp-h3" style={{ fontFamily: 'var(--sbp-font-rustic)', fontSize: 18, fontWeight: 600 }}>{n.title}</div>
                      </div>
                    </button>
                    <button onClick={() => remove('news', n.id, n)} style={{
                      position: 'absolute', top: 8, right: 8,
                      width: 32, height: 32, borderRadius: 8,
                      background: 'rgba(0,0,0,0.55)', backdropFilter: 'blur(8px)',
                      border: '1px solid color-mix(in oklab, var(--sbp-accent) 50%, transparent)',
                      color: 'var(--sbp-accent)', cursor: 'pointer',
                      display: 'flex', alignItems: 'center', justifyContent: 'center',
                    }}>
                      <IconHeart size={14} fill="currentColor"/>
                    </button>
                  </div>
                ))}
              </div>
            </>
          )}

          {/* Termine */}
          {eventItems.length > 0 && (
            <>
              <span className="sbp-eyebrow" style={{ display: 'block', marginBottom: 10 }}>Termine</span>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                {eventItems.map(ev => (
                  <div key={ev.id} className="sbp-card" style={{ position: 'relative', overflow: 'hidden' }}>
                    <button
                      onClick={() => onOpenEvent(ev)}
                      style={{ display: 'flex', gap: 14, padding: 14, width: '100%', background: 'none', border: 0, cursor: 'pointer', textAlign: 'left', color: 'inherit' }}
                    >
                      <div style={{
                        width: 56, minWidth: 56, height: 64, borderRadius: 10,
                        border: '1px solid var(--sbp-border-strong)',
                        background: 'linear-gradient(180deg, color-mix(in oklab, var(--sbp-accent) 25%, transparent), transparent)',
                        display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
                      }}>
                        <span className="sbp-meta" style={{ color: 'var(--sbp-ember-200)' }}>{ev.month}</span>
                        <span style={{ fontSize: 22, fontWeight: 700, lineHeight: 1, fontFamily: 'var(--sbp-font-rustic)' }}>{ev.day}</span>
                        <span className="sbp-meta" style={{ fontSize: 10 }}>{ev.year}</span>
                      </div>
                      <div style={{ flex: 1, minWidth: 0 }}>
                        <div style={{ marginBottom: 4 }}>
                          <span className="sbp-chip sbp-chip--ember">{ev.kind}</span>
                        </div>
                        <div className="sbp-h3" style={{ marginBottom: 3 }}>{ev.title}</div>
                        <div className="sbp-meta" style={{ display: 'flex', gap: 10 }}>
                          <span style={{ display: 'inline-flex', gap: 4, alignItems: 'center' }}><IconClock size={11}/>{ev.time}</span>
                          <span style={{ display: 'inline-flex', gap: 4, alignItems: 'center', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}><IconLocation size={11}/>{ev.location}</span>
                        </div>
                      </div>
                    </button>
                    <button onClick={() => remove('events', ev.id, ev)} style={{
                      position: 'absolute', top: 10, right: 10,
                      width: 30, height: 30, borderRadius: 8,
                      background: 'rgba(0,0,0,0.45)', backdropFilter: 'blur(8px)',
                      border: '1px solid color-mix(in oklab, var(--sbp-accent) 50%, transparent)',
                      color: 'var(--sbp-accent)', cursor: 'pointer',
                      display: 'flex', alignItems: 'center', justifyContent: 'center',
                    }}>
                      <IconHeart size={13} fill="currentColor"/>
                    </button>
                  </div>
                ))}
              </div>
            </>
          )}
        </div>
      )}
    </div>
  );
}

// ─────────────────── MEINE ZU-/ABSAGEN ────────────────────────
function ScreenMyRsvps({ rsvps = {}, events = [], onBack, onOpenEvent }) {
  const eventsById = Object.fromEntries(events.map(e => [String(e.id), e]));

  const zusagen = Object.entries(rsvps)
    .filter(([, r]) => r === 'zusagen')
    .map(([id]) => eventsById[id])
    .filter(Boolean)
    .sort((a, b) => {
      const M = ['Jän','Feb','Mär','Apr','Mai','Jun','Jul','Aug','Sep','Okt','Nov','Dez'];
      return new Date(a.year, M.indexOf(a.month), a.day) - new Date(b.year, M.indexOf(b.month), b.day);
    });

  const absagen = Object.entries(rsvps)
    .filter(([, r]) => r === 'absagen')
    .map(([id]) => eventsById[id])
    .filter(Boolean)
    .sort((a, b) => {
      const M = ['Jän','Feb','Mär','Apr','Mai','Jun','Jul','Aug','Sep','Okt','Nov','Dez'];
      return new Date(a.year, M.indexOf(a.month), a.day) - new Date(b.year, M.indexOf(b.month), b.day);
    });

  const isEmpty = zusagen.length === 0 && absagen.length === 0;

  const RsvpEventCard = ({ ev, type }) => (
    <button onClick={() => onOpenEvent(ev)} className="sbp-card" style={{
      display: 'flex', gap: 14, padding: 14, width: '100%',
      background: 'none', border: 0, cursor: 'pointer', textAlign: 'left', color: 'inherit',
      position: 'relative', overflow: 'hidden',
    }}>
      {/* Datum-Box */}
      <div style={{
        width: 56, minWidth: 56, height: 64, borderRadius: 10,
        border: '1px solid var(--sbp-border-strong)',
        background: type === 'zusagen'
          ? 'linear-gradient(180deg, color-mix(in oklab, #22c55e 25%, transparent), transparent)'
          : 'linear-gradient(180deg, color-mix(in oklab, var(--sbp-blood-500) 35%, transparent), transparent)',
        display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
      }}>
        <span className="sbp-meta" style={{ color: type === 'zusagen' ? '#4ade80' : 'var(--sbp-blood-400)' }}>{ev.month}</span>
        <span style={{ fontSize: 22, fontWeight: 700, lineHeight: 1, fontFamily: 'var(--sbp-font-rustic)' }}>{ev.day}</span>
        <span className="sbp-meta" style={{ fontSize: 10 }}>{ev.year}</span>
      </div>
      {/* Info */}
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ display: 'flex', gap: 6, marginBottom: 6, alignItems: 'center' }}>
          <span className="sbp-chip sbp-chip--ember">{ev.kind}</span>
          <span style={{
            display: 'inline-flex', alignItems: 'center', gap: 4,
            fontSize: 10, fontWeight: 700, letterSpacing: '0.14em', textTransform: 'uppercase',
            padding: '2px 7px', borderRadius: 20,
            background: type === 'zusagen'
              ? 'color-mix(in oklab, #22c55e 15%, transparent)'
              : 'color-mix(in oklab, var(--sbp-blood-500) 20%, transparent)',
            border: type === 'zusagen'
              ? '1px solid color-mix(in oklab, #22c55e 35%, transparent)'
              : '1px solid color-mix(in oklab, var(--sbp-blood-400) 35%, transparent)',
            color: type === 'zusagen' ? '#4ade80' : 'var(--sbp-blood-400)',
          }}>
            {type === 'zusagen' ? <IconThumbUp size={10}/> : <IconThumbDown size={10}/>}
            {type === 'zusagen' ? 'Zugesagt' : 'Abgesagt'}
          </span>
        </div>
        <div className="sbp-h3" style={{ marginBottom: 4 }}>{ev.title}</div>
        <div className="sbp-meta" style={{ display: 'flex', gap: 10 }}>
          <span style={{ display: 'inline-flex', gap: 4, alignItems: 'center' }}><IconClock size={11}/>{ev.time}</span>
          <span style={{ display: 'inline-flex', gap: 4, alignItems: 'center', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
            <IconLocation size={11}/>{ev.location}
          </span>
        </div>
      </div>
    </button>
  );

  return (
    <div className="sbp-screen" style={{ overflow: 'auto', paddingBottom: 90 }}>
      <SbpTopBar
        title="Meine Zu-/Absagen"
        subtitle="Deine Rückmeldungen"
        leading={
          <button onClick={onBack} className="sbp-icon-btn" style={{ width: 36, height: 36 }}>
            <IconChevronLeft size={20}/>
          </button>
        }
      />

      {isEmpty ? (
        <div style={{ padding: '60px 32px', textAlign: 'center' }}>
          <div style={{
            width: 72, height: 72, borderRadius: '50%', margin: '0 auto 20px',
            background: 'color-mix(in oklab, var(--sbp-accent) 10%, transparent)',
            border: '1px solid color-mix(in oklab, var(--sbp-accent) 25%, transparent)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            color: 'var(--sbp-text-3)',
          }}>
            <IconThumbUp size={28}/>
          </div>
          <h3 className="sbp-h3" style={{ fontFamily: 'var(--sbp-font-rustic)', fontSize: 22, fontWeight: 600, marginBottom: 10 }}>
            Noch keine Rückmeldungen
          </h3>
          <p className="sbp-body" style={{ color: 'var(--sbp-text-2)', lineHeight: 1.6 }}>
            Öffne einen Termin und tippe auf „Zusagen" oder „Absagen", um deine Rückmeldung zu geben.
          </p>
        </div>
      ) : (
        <div style={{ padding: '16px 20px 0' }}>
          {zusagen.length > 0 && (
            <>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
                <span className="sbp-eyebrow" style={{ color: '#4ade80' }}>Zugesagt</span>
                <span style={{
                  minWidth: 20, height: 20, padding: '0 6px', borderRadius: 99,
                  background: 'color-mix(in oklab, #22c55e 20%, transparent)',
                  border: '1px solid color-mix(in oklab, #22c55e 35%, transparent)',
                  color: '#4ade80', fontSize: 10, fontWeight: 700, letterSpacing: 0,
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                }}>{zusagen.length}</span>
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginBottom: 28 }}>
                {zusagen.map(ev => <RsvpEventCard key={ev.id} ev={ev} type="zusagen"/>)}
              </div>
            </>
          )}

          {absagen.length > 0 && (
            <>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
                <span className="sbp-eyebrow" style={{ color: 'var(--sbp-blood-400)' }}>Abgesagt</span>
                <span style={{
                  minWidth: 20, height: 20, padding: '0 6px', borderRadius: 99,
                  background: 'color-mix(in oklab, var(--sbp-blood-500) 20%, transparent)',
                  border: '1px solid color-mix(in oklab, var(--sbp-blood-400) 35%, transparent)',
                  color: 'var(--sbp-blood-400)', fontSize: 10, fontWeight: 700, letterSpacing: 0,
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                }}>{absagen.length}</span>
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                {absagen.map(ev => <RsvpEventCard key={ev.id} ev={ev} type="absagen"/>)}
              </div>
            </>
          )}
        </div>
      )}
    </div>
  );
}

// ─────────────────── BENACHRICHTIGUNGS-EINSTELLUNGEN ──────────
function ScreenNotificationSettings({ onBack, onEnablePush, onDisablePush }) {
  const token = sessionStorage.getItem('sbp_token');
  const [categories, setCategories] = React.useState({ news: [], events: [] });
  const [prefs, setPrefs]           = React.useState({});
  const [loading, setLoading]       = React.useState(true);
  const [saving, setSaving]         = React.useState(null);

  // ── Push-State ──────────────────────────────────────────────
  const pushSupported = typeof Notification !== 'undefined' && 'serviceWorker' in navigator && 'PushManager' in window;
  const [pushPermission, setPushPermission] = React.useState(() =>
    pushSupported ? Notification.permission : 'unsupported'
  );
  const [pushActive, setPushActive] = React.useState(false);
  const [pushBusy,   setPushBusy]   = React.useState(false);

  React.useEffect(() => {
    if (!pushSupported) return;
    navigator.serviceWorker.getRegistration('/sw.js').then(reg => {
      reg?.pushManager?.getSubscription().then(sub => setPushActive(!!sub));
    });
  }, []);

  const handlePushToggle = async () => {
    if (pushBusy) return;
    setPushBusy(true);
    if (pushActive) {
      await onDisablePush();
      setPushActive(false);
    } else {
      const ok = await onEnablePush();
      setPushPermission(Notification.permission);
      if (ok) setPushActive(true);
    }
    setPushBusy(false);
  };

  React.useEffect(() => {
    const load = async () => {
      try {
        const [cats, userPrefs] = await Promise.all([
          sbpApi('GET', '/notification-categories', null, token),
          sbpApi('GET', '/notification-prefs', null, token),
        ]);
        setCategories(cats);
        const map = {};
        userPrefs.forEach(p => { map[`${p.type}:${p.category}`] = !!p.enabled; });
        setPrefs(map);
      } catch (_) {}
      finally { setLoading(false); }
    };
    load();
  }, []);

  const isEnabled = (type, category) => {
    const key = `${type}:${category}`;
    return key in prefs ? prefs[key] : true;
  };

  const toggle = async (type, category) => {
    const key = `${type}:${category}`;
    const newVal = !isEnabled(type, category);
    setPrefs(prev => ({ ...prev, [key]: newVal }));
    setSaving(key);
    try {
      await sbpApi('PUT', '/notification-prefs', { category, type, enabled: newVal }, token);
    } catch (_) {
      setPrefs(prev => ({ ...prev, [key]: !newVal }));
    }
    setSaving(null);
  };

  const Toggle = ({ type, category }) => {
    const on = isEnabled(type, category);
    const busy = saving === `${type}:${category}`;
    return (
      <button onClick={() => toggle(type, category)} disabled={busy} style={{
        width: 44, height: 26, borderRadius: 13, flexShrink: 0,
        background: on ? 'var(--sbp-accent)' : 'rgba(255,255,255,0.1)',
        border: on
          ? '1px solid color-mix(in oklab, var(--sbp-accent) 70%, transparent)'
          : '1px solid var(--sbp-border)',
        boxShadow: on ? `0 0 10px color-mix(in oklab, var(--sbp-accent) 40%, transparent)` : 'none',
        cursor: 'pointer', padding: 0, transition: 'all 0.2s ease',
        position: 'relative', opacity: busy ? 0.6 : 1,
      }}>
        <span style={{
          position: 'absolute', top: 3, left: on ? 21 : 3,
          width: 18, height: 18, borderRadius: '50%',
          background: on ? '#fff' : 'var(--sbp-text-3)',
          transition: 'left 0.2s ease',
          boxShadow: '0 1px 4px rgba(0,0,0,0.3)',
        }}/>
      </button>
    );
  };

  const Section = ({ title, items, type }) => (
    <div style={{ marginBottom: 28 }}>
      <span className="sbp-eyebrow" style={{ display: 'block', marginBottom: 10 }}>{title}</span>
      <div className="sbp-card" style={{ overflow: 'hidden' }}>
        {items.length === 0 ? (
          <div style={{ padding: '14px 16px' }}>
            <div className="sbp-meta" style={{ textTransform: 'none', letterSpacing: 0, color: 'var(--sbp-text-3)' }}>
              Noch keine {type === 'news' ? 'Kategorien' : 'Termin-Arten'} vorhanden.
            </div>
          </div>
        ) : items.map((cat, i) => (
          <div key={cat} style={{
            display: 'flex', alignItems: 'center', gap: 14, padding: '14px 16px',
            borderBottom: i < items.length - 1 ? '1px solid var(--sbp-border)' : 'none',
          }}>
            <div style={{ flex: 1 }}>
              <div className="sbp-body" style={{ fontWeight: 600 }}>{cat}</div>
              <div className="sbp-meta" style={{ marginTop: 2, textTransform: 'none', letterSpacing: 0 }}>
                {isEnabled(type, cat) ? 'Benachrichtigungen aktiv' : 'Stummgeschaltet'}
              </div>
            </div>
            <Toggle type={type} category={cat}/>
          </div>
        ))}
      </div>
    </div>
  );

  return (
    <div className="sbp-screen" style={{ overflow: 'auto', paddingBottom: 90 }}>
      <SbpTopBar
        title="Benachrichtigungen"
        subtitle="Einstellungen"
        leading={
          <button onClick={onBack} className="sbp-icon-btn" style={{ width: 36, height: 36 }}>
            <IconChevronLeft size={20}/>
          </button>
        }
      />

      <div style={{ padding: '14px 20px 0' }}>
        {/* Push-Benachrichtigungen Karte */}
        <div style={{ marginBottom: 24 }}>
          <span className="sbp-eyebrow" style={{ display: 'block', marginBottom: 10 }}>Push-Benachrichtigungen</span>
          <div className="sbp-card" style={{ overflow: 'hidden' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 14, padding: '14px 16px' }}>
              <div style={{ flex: 1 }}>
                <div className="sbp-body" style={{ fontWeight: 600 }}>
                  {!pushSupported ? 'Nicht unterstützt' : pushPermission === 'denied' ? 'Blockiert' : 'Benachrichtigungen'}
                </div>
                <div className="sbp-meta" style={{ marginTop: 2, textTransform: 'none', letterSpacing: 0 }}>
                  {!pushSupported
                    ? 'Dein Browser unterstützt kein Push'
                    : pushPermission === 'denied'
                    ? 'In den Browser-Einstellungen entsperren'
                    : pushActive
                    ? 'Push-Benachrichtigungen aktiv'
                    : 'Tippe zum Aktivieren'}
                </div>
              </div>
              {pushSupported && pushPermission !== 'denied' && (
                <button onClick={handlePushToggle} disabled={pushBusy} style={{
                  width: 44, height: 26, borderRadius: 13, flexShrink: 0,
                  background: pushActive ? 'var(--sbp-accent)' : 'rgba(255,255,255,0.1)',
                  border: pushActive
                    ? '1px solid color-mix(in oklab, var(--sbp-accent) 70%, transparent)'
                    : '1px solid var(--sbp-border)',
                  boxShadow: pushActive ? `0 0 10px color-mix(in oklab, var(--sbp-accent) 40%, transparent)` : 'none',
                  cursor: pushBusy ? 'wait' : 'pointer', padding: 0, transition: 'all 0.2s ease',
                  position: 'relative', opacity: pushBusy ? 0.6 : 1,
                }}>
                  <span style={{
                    position: 'absolute', top: 3, left: pushActive ? 21 : 3,
                    width: 18, height: 18, borderRadius: '50%',
                    background: pushActive ? '#fff' : 'var(--sbp-text-3)',
                    transition: 'left 0.2s ease',
                    boxShadow: '0 1px 4px rgba(0,0,0,0.3)',
                  }}/>
                </button>
              )}
            </div>
            {pushPermission === 'denied' && (
              <div style={{ padding: '0 16px 14px' }}>
                <div className="sbp-meta" style={{ textTransform: 'none', letterSpacing: 0, color: 'var(--sbp-text-3)', lineHeight: 1.5 }}>
                  Push ist für diese Seite blockiert. Öffne die Browser-Einstellungen → Datenschutz → Benachrichtigungen und erlaube diese Seite.
                </div>
              </div>
            )}
          </div>
        </div>

        {/* Info-Banner */}
        <div style={{
          padding: '12px 16px', borderRadius: 12, marginBottom: 24,
          background: 'color-mix(in oklab, var(--sbp-accent) 10%, transparent)',
          border: '1px solid color-mix(in oklab, var(--sbp-accent) 25%, transparent)',
          display: 'flex', gap: 10, alignItems: 'flex-start',
        }}>
          <span style={{ color: 'var(--sbp-ember-200)', flexShrink: 0, marginTop: 1 }}><IconBell size={18}/></span>
          <div className="sbp-meta" style={{ textTransform: 'none', letterSpacing: 0, lineHeight: 1.5, color: 'var(--sbp-text-2)' }}>
            Deaktiviere einzelne Kategorien, um keine Benachrichtigungen mehr dafür zu erhalten. Neue Kategorien werden automatisch aktiviert.
          </div>
        </div>

        {loading ? (
          <div style={{ textAlign: 'center', padding: '40px 0', color: 'var(--sbp-text-3)' }}>
            <div className="sbp-meta">Lade Einstellungen…</div>
          </div>
        ) : (
          <>
            <Section title="News-Kategorien" items={categories.news} type="news"/>
            <Section title="Termin-Arten" items={categories.events} type="event"/>
          </>
        )}
      </div>
    </div>
  );
}

// ─── Push Permission Prompt Sheet ────────────────────────────
function PushPromptSheet({ onAllow, onDismiss }) {
  return (
    <div style={{
      position: 'absolute', inset: 0, zIndex: 200,
      background: 'rgba(0,0,0,0.65)', backdropFilter: 'blur(6px)',
      display: 'flex', alignItems: 'flex-end',
      animation: 'sbp-fade-in 0.25s ease',
    }}>
      <div style={{
        width: '100%',
        background: 'linear-gradient(180deg, var(--sbp-night-2), var(--sbp-night-1))',
        borderTopLeftRadius: 28, borderTopRightRadius: 28,
        border: '1px solid var(--sbp-border-strong)', borderBottom: 0,
        boxShadow: '0 -24px 60px rgba(0,0,0,0.6)',
        padding: '10px 0 36px',
        animation: 'sbp-slide-up 0.35s cubic-bezier(.22,.68,0,1.2)',
      }}>
        <div style={{ width: 40, height: 4, background: 'var(--sbp-fog-500)', borderRadius: 2, margin: '0 auto 28px' }}/>

        {/* Icon */}
        <div style={{ textAlign: 'center', marginBottom: 20 }}>
          <div style={{
            width: 72, height: 72, borderRadius: 20, margin: '0 auto',
            background: 'color-mix(in oklab, var(--sbp-accent) 18%, transparent)',
            border: '1px solid color-mix(in oklab, var(--sbp-accent) 40%, transparent)',
            boxShadow: '0 0 32px color-mix(in oklab, var(--sbp-accent) 30%, transparent)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            color: 'var(--sbp-ember-200)',
          }}>
            <IconBell size={32}/>
          </div>
        </div>

        {/* Text */}
        <div style={{ padding: '0 28px', textAlign: 'center', marginBottom: 28 }}>
          <h3 className="sbp-display" style={{ fontSize: 18, letterSpacing: '0.1em', marginBottom: 10 }}>
            Benachrichtigungen
          </h3>
          <p className="sbp-body" style={{ color: 'var(--sbp-text-2)', lineHeight: 1.6, margin: 0 }}>
            Erhalte sofortige Benachrichtigungen wenn neue Beiträge oder Termine vom Schafberg-Pass veröffentlicht werden.
          </p>
        </div>

        {/* Buttons */}
        <div style={{ padding: '0 20px', display: 'flex', flexDirection: 'column', gap: 10 }}>
          <button onClick={onAllow} className="sbp-btn sbp-btn--primary" style={{ width: '100%' }}>
            <IconBell size={16}/> Benachrichtigungen aktivieren
          </button>
          <button onClick={onDismiss} className="sbp-btn sbp-btn--ghost" style={{ width: '100%', color: 'var(--sbp-text-3)' }}>
            Später
          </button>
        </div>
      </div>
    </div>
  );
}

// Hilfsfunktion nur für Bookmarks-Seite
function fmtBmDate(s) {
  if (!s) return '';
  return new Date(s).toLocaleDateString('de-AT', { day: 'numeric', month: 'long', year: 'numeric' });
}

// ─────────────────── STAMMDATEN ────────────────────
function ScreenStammdaten({ authUser, onBack, onSave }) {
  const u = authUser || {};
  const [username, setUsername] = React.useState(u.username || '');
  const [email, setEmail]       = React.useState(u.email || '');
  const [loading, setLoading]   = React.useState(false);
  const [error, setError]       = React.useState('');
  const [success, setSuccess]   = React.useState(false);

  const isDirty = username !== u.username || email !== u.email;

  const handleSave = async () => {
    setError('');
    setSuccess(false);
    setLoading(true);
    try {
      await onSave(username.trim(), email.trim());
      setSuccess(true);
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="sbp-screen" style={{ overflow: 'auto', paddingBottom: 90 }}>
      <SbpTopBar
        title="Stammdaten"
        leading={
          <button className="sbp-icon-btn" onClick={onBack} style={{ width: 36, height: 36 }}>
            <IconChevronLeft size={20}/>
          </button>
        }
        trailing={<div style={{ width: 36 }}/>}
      />

      <div style={{ padding: '24px 20px 0' }}>
        {/* Avatar-Vorschau */}
        <div style={{ textAlign: 'center', marginBottom: 28 }}>
          <div style={{
            width: 80, height: 80, borderRadius: '50%', margin: '0 auto 12px',
            background: 'linear-gradient(180deg, hsl(20 50% 28%), hsl(10 40% 12%))',
            border: '2px solid color-mix(in oklab, var(--sbp-accent) 60%, transparent)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontFamily: 'var(--sbp-font-rustic)', fontSize: 34, fontWeight: 700, color: 'var(--sbp-ember-100)',
          }}>
            {(username || '?').substring(0, 2).toUpperCase()}
          </div>
          <div className="sbp-meta">Dein Profil-Avatar</div>
        </div>

        {/* Formular */}
        <div className="sbp-card" style={{ overflow: 'hidden' }}>
          {/* Benutzername */}
          <div style={{ padding: '16px 16px 12px', borderBottom: '1px solid var(--sbp-border)' }}>
            <label style={{ display: 'block', fontSize: 11, fontWeight: 600, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--sbp-text-3)', marginBottom: 6 }}>
              Benutzername
            </label>
            <input
              value={username}
              onChange={e => { setUsername(e.target.value); setError(''); setSuccess(false); }}
              placeholder="Dein Name"
              style={{
                width: '100%', background: 'none', border: 'none', outline: 'none',
                color: 'var(--sbp-text-1)', fontFamily: 'var(--sbp-font-display)', fontSize: 15,
                padding: 0,
              }}
            />
          </div>
          {/* E-Mail */}
          <div style={{ padding: '16px 16px 12px' }}>
            <label style={{ display: 'block', fontSize: 11, fontWeight: 600, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--sbp-text-3)', marginBottom: 6 }}>
              E-Mail-Adresse
            </label>
            <input
              value={email}
              onChange={e => { setEmail(e.target.value); setError(''); setSuccess(false); }}
              placeholder="deine@email.at"
              type="email"
              style={{
                width: '100%', background: 'none', border: 'none', outline: 'none',
                color: 'var(--sbp-text-1)', fontFamily: 'var(--sbp-font-display)', fontSize: 15,
                padding: 0,
              }}
            />
          </div>
        </div>

        {/* Hinweis */}
        <p className="sbp-meta" style={{ marginTop: 12, paddingLeft: 4 }}>
          Dein Benutzername ist für andere Mitglieder sichtbar. Die E-Mail-Adresse wird für den Login verwendet.
        </p>

        {/* Fehler / Erfolg */}
        {error && (
          <div style={{ marginTop: 14, padding: '12px 14px', borderRadius: 10, background: 'color-mix(in oklab, var(--sbp-blood-500) 20%, transparent)', border: '1px solid color-mix(in oklab, var(--sbp-blood-400) 50%, transparent)', color: 'var(--sbp-blood-300)', fontSize: 13 }}>
            {error}
          </div>
        )}
        {success && (
          <div style={{ marginTop: 14, padding: '12px 14px', borderRadius: 10, background: 'color-mix(in oklab, #4ade80 12%, transparent)', border: '1px solid color-mix(in oklab, #4ade80 40%, transparent)', color: '#86efac', fontSize: 13 }}>
            Stammdaten erfolgreich gespeichert ✓
          </div>
        )}

        {/* Speichern */}
        <button
          onClick={handleSave}
          disabled={loading || !isDirty}
          className="sbp-btn sbp-btn--primary"
          style={{ width: '100%', marginTop: 20, opacity: (!isDirty || loading) ? 0.5 : 1 }}
        >
          {loading ? 'Wird gespeichert…' : 'Speichern'}
        </button>
      </div>
    </div>
  );
}

// ─────────────────── PASSWORT & SICHERHEIT ─────────────────────
function ScreenPasswordChange({ onBack, onSave }) {
  const [current, setCurrent]   = React.useState('');
  const [next, setNext]         = React.useState('');
  const [repeat, setRepeat]     = React.useState('');
  const [loading, setLoading]   = React.useState(false);
  const [error, setError]       = React.useState('');

  const mismatch = next && repeat && next !== repeat;
  const canSave  = current && next.length >= 8 && next === repeat;

  const handleSave = async () => {
    setError('');
    setLoading(true);
    try {
      await onSave(current, next);
      // onSave löst Logout aus — kein weiterer State nötig
    } catch (err) {
      setError(err.message);
      setLoading(false);
    }
  };

  const fieldStyle = {
    width: '100%', background: 'none', border: 'none', outline: 'none',
    color: 'var(--sbp-text-1)', fontFamily: 'var(--sbp-font-display)', fontSize: 15, padding: 0,
  };
  const labelStyle = {
    display: 'block', fontSize: 11, fontWeight: 600, letterSpacing: '0.1em',
    textTransform: 'uppercase', color: 'var(--sbp-text-3)', marginBottom: 6,
  };

  return (
    <div className="sbp-screen" style={{ overflow: 'auto', paddingBottom: 90 }}>
      <SbpTopBar
        title="Passwort & Sicherheit"
        leading={
          <button className="sbp-icon-btn" onClick={onBack} style={{ width: 36, height: 36 }}>
            <IconChevronLeft size={20}/>
          </button>
        }
        trailing={<div style={{ width: 36 }}/>}
      />

      <div style={{ padding: '24px 20px 0' }}>
        {/* Icon */}
        <div style={{ textAlign: 'center', marginBottom: 28 }}>
          <div style={{
            width: 64, height: 64, borderRadius: '50%', margin: '0 auto 12px',
            background: 'color-mix(in oklab, var(--sbp-accent) 15%, transparent)',
            border: '1.5px solid color-mix(in oklab, var(--sbp-accent) 40%, transparent)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>
            <IconLock size={26} style={{ color: 'var(--sbp-ember-200)' }}/>
          </div>
          <div className="sbp-meta">Wähle ein sicheres Passwort (mind. 8 Zeichen)</div>
        </div>

        {/* Formular */}
        <div className="sbp-card" style={{ overflow: 'hidden' }}>
          <div style={{ padding: '16px 16px 12px', borderBottom: '1px solid var(--sbp-border)' }}>
            <label style={labelStyle}>Aktuelles Passwort</label>
            <input type="password" value={current} onChange={e => { setCurrent(e.target.value); setError(''); }}
              placeholder="••••••••" style={fieldStyle}/>
          </div>
          <div style={{ padding: '16px 16px 12px', borderBottom: '1px solid var(--sbp-border)' }}>
            <label style={labelStyle}>Neues Passwort</label>
            <input type="password" value={next} onChange={e => { setNext(e.target.value); setError(''); }}
              placeholder="••••••••" style={fieldStyle}/>
          </div>
          <div style={{ padding: '16px 16px 12px' }}>
            <label style={{ ...labelStyle, color: mismatch ? 'var(--sbp-blood-400)' : labelStyle.color }}>
              Neues Passwort wiederholen
            </label>
            <input type="password" value={repeat} onChange={e => { setRepeat(e.target.value); setError(''); }}
              placeholder="••••••••" style={{ ...fieldStyle, color: mismatch ? 'var(--sbp-blood-300)' : fieldStyle.color }}/>
          </div>
        </div>

        {mismatch && (
          <div className="sbp-meta" style={{ marginTop: 8, paddingLeft: 4, color: 'var(--sbp-blood-400)' }}>
            Die Passwörter stimmen nicht überein.
          </div>
        )}

        {/* Hinweis Abmeldung */}
        <div style={{
          marginTop: 16, padding: '12px 14px', borderRadius: 10,
          background: 'color-mix(in oklab, var(--sbp-accent) 10%, transparent)',
          border: '1px solid color-mix(in oklab, var(--sbp-accent) 30%, transparent)',
          display: 'flex', gap: 10, alignItems: 'flex-start',
        }}>
          <IconBell size={15} style={{ color: 'var(--sbp-ember-200)', flexShrink: 0, marginTop: 1 }}/>
          <p className="sbp-meta" style={{ margin: 0 }}>
            Nach dem Ändern des Passworts wirst du automatisch abgemeldet und musst dich mit dem neuen Passwort neu anmelden.
          </p>
        </div>

        {error && (
          <div style={{ marginTop: 14, padding: '12px 14px', borderRadius: 10, background: 'color-mix(in oklab, var(--sbp-blood-500) 20%, transparent)', border: '1px solid color-mix(in oklab, var(--sbp-blood-400) 50%, transparent)', color: 'var(--sbp-blood-300)', fontSize: 13 }}>
            {error}
          </div>
        )}

        <button
          onClick={handleSave}
          disabled={loading || !canSave}
          className="sbp-btn sbp-btn--primary"
          style={{ width: '100%', marginTop: 20, opacity: (!canSave || loading) ? 0.5 : 1 }}
        >
          {loading ? 'Wird gespeichert…' : 'Passwort ändern & abmelden'}
        </button>
      </div>
    </div>
  );
}

// ─────────────────── INSTALL BANNER ────────────────────
function InstallBanner({ onInstall, onDismiss }) {
  return (
    <div style={{
      position: 'absolute', bottom: 80, left: 12, right: 12, zIndex: 200,
      background: 'color-mix(in oklab, var(--sbp-surface-2) 95%, transparent)',
      backdropFilter: 'blur(20px)',
      border: '1px solid color-mix(in oklab, var(--sbp-accent) 40%, transparent)',
      borderRadius: 16, padding: '14px 16px',
      display: 'flex', alignItems: 'center', gap: 12,
      boxShadow: '0 8px 32px rgba(0,0,0,0.5)',
      animation: 'sbp-slide-up 0.3s ease',
    }}>
      <img src="/icon-192.png" alt="" style={{ width: 44, height: 44, borderRadius: 10, flexShrink: 0 }}/>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div className="sbp-body" style={{ fontWeight: 700, fontSize: 13 }}>App installieren</div>
        <div className="sbp-meta" style={{ marginTop: 2 }}>Schafberg-Pass zum Homescreen hinzufügen</div>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 6, flexShrink: 0 }}>
        <button onClick={onInstall} className="sbp-btn sbp-btn--primary" style={{ padding: '6px 14px', fontSize: 12, minHeight: 0 }}>
          Installieren
        </button>
        <button onClick={onDismiss} style={{
          background: 'none', border: 'none', cursor: 'pointer',
          color: 'var(--sbp-text-3)', fontSize: 11, textAlign: 'center',
        }}>
          Nicht jetzt
        </button>
      </div>
    </div>
  );
}

// ─────────────────── IOS INSTALL SHEET ────────────────────
function IOSInstallSheet({ onClose }) {
  const steps = [
    { n: '1', t: 'Teilen antippen', d: 'Das Teilen-Symbol (Rechteck mit Pfeil nach oben) in der unteren Safari-Leiste antippen.' },
    { n: '2', t: '„Mehr Anzeigen"', d: 'Im Teilen-Menü auf „Mehr Anzeigen" tippen.' },
    { n: '3', t: '„Zum Home-Bildschirm"', d: 'Nach unten scrollen und „Zum Home-Bildschirm" antippen.' },
    { n: '4', t: 'Hinzufügen bestätigen', d: 'Oben rechts auf „Hinzufügen" tippen — fertig!' },
  ];
  return (
    <div style={{ position: 'absolute', inset: 0, zIndex: 300, background: 'rgba(0,0,0,0.85)', display: 'flex', alignItems: 'flex-end' }} onClick={onClose}>
      <div style={{ width: '100%', background: '#1a0f0a', borderRadius: '20px 20px 0 0', padding: '28px 24px 44px', boxShadow: '0 -8px 40px rgba(0,0,0,0.8)' }} onClick={e => e.stopPropagation()}>
        <div style={{ textAlign: 'center', marginBottom: 20 }}>
          <img src="/icon-maskable-512.webp" alt="" style={{ width: 64, height: 64, borderRadius: 14, marginBottom: 12 }}/>
          <h3 style={{ fontFamily: 'var(--sbp-font-rustic)', fontSize: 22, margin: '0 0 6px', color: '#f0e9df' }}>Zum Home-Bildschirm</h3>
          <p style={{ fontSize: 13, color: '#aea49a', margin: 0 }}>Anleitung für Safari</p>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 14, marginBottom: 24 }}>
          {steps.map(s => (
            <div key={s.n} style={{ display: 'flex', gap: 14, alignItems: 'flex-start' }}>
              <div style={{
                width: 30, height: 30, borderRadius: '50%', flexShrink: 0,
                background: '#B8410D', display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontFamily: 'var(--sbp-font-rustic)', fontSize: 14, fontWeight: 700, color: '#fff',
              }}>{s.n}</div>
              <div>
                <div style={{ fontWeight: 700, fontSize: 14, color: '#f0e9df' }}>{s.t}</div>
                <div style={{ marginTop: 3, fontSize: 13, color: '#aea49a', lineHeight: 1.5 }}>{s.d}</div>
              </div>
            </div>
          ))}
        </div>
        <button onClick={onClose} style={{
          width: '100%', padding: '13px', borderRadius: 12, cursor: 'pointer',
          background: 'rgba(255,255,255,0.08)', border: '1px solid rgba(255,255,255,0.15)',
          color: '#f0e9df', fontFamily: 'var(--sbp-font-display)', fontSize: 13,
          fontWeight: 600, letterSpacing: '0.12em', textTransform: 'uppercase',
        }}>Schließen</button>
      </div>
    </div>
  );
}

Object.assign(window, {
  ScreenProfile, ScreenAuth, ScreenSplash, ScreenOnboarding, ScreenBookmarks, ScreenMyRsvps, ScreenNotificationSettings, PushPromptSheet, ScreenStammdaten, ScreenPasswordChange, InstallBanner, IOSInstallSheet
});