// ============ Yap — social screens ============

// ---------- Onboarding / login ----------
function OnboardingScreen({ onEnter }) {
  return (
    <div className="screen" style={{ background:
      'radial-gradient(120% 80% at 20% 0%, var(--brand-soft), transparent 60%), var(--bg)' }}>
      <div className="scroll" style={{ display: 'flex', flexDirection: 'column', padding: '0 28px' }}>
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center',
          alignItems: 'center', minHeight: 360, gap: 26, paddingTop: 60 }}>
          {/* playful avatar cluster */}
          <div style={{ position: 'relative', width: 200, height: 150 }} className="page-fade">
            {[
              { who: 'lila', s: 64, x: 60, y: 4, d: 0 },
              { who: 'theo', s: 52, x: 6, y: 40, d: .05 },
              { who: 'sami', s: 56, x: 130, y: 56, d: .1 },
              { who: 'noah', s: 46, x: 30, y: 100, d: .15 },
              { who: 'jade', s: 50, x: 116, y: 0, d: .2 },
              { who: 'ines', s: 44, x: 92, y: 108, d: .25 },
            ].map((a, i) => (
              <div key={i} style={{ position: 'absolute', left: a.x, top: a.y,
                animation: `pop .5s ${a.d}s var(--spring) both`,
                borderRadius: '50%', boxShadow: '0 8px 20px -8px oklch(0.3 0.1 270 / 0.5)' }}>
                <Avatar who={a.who} size={a.s} ring="var(--bg)" />
              </div>
            ))}
          </div>
          <div style={{ textAlign: 'center' }} className="page-fade">
            <div className="brandmark" style={{ fontSize: 64, color: 'var(--brand)', lineHeight: 1 }}>Yap</div>
            <h1 style={{ fontSize: 27, marginTop: 18, letterSpacing: '-0.02em' }}>
              Tes potes. Tes groupes.<br />Zéro blabla en trop.
            </h1>
            <p style={{ color: 'var(--ink-soft)', fontSize: 15.5, marginTop: 12, maxWidth: 300,
              marginLeft: 'auto', marginRight: 'auto' }}>
              La messagerie simple et colorée pour rester proche de ceux qui comptent.
            </p>
          </div>
        </div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 11, paddingBottom: 'calc(28px + env(safe-area-inset-bottom))' }}>
          <button className="btn btn--block" onClick={onEnter}>Créer un compte</button>
          <button className="btn btn--block btn--ghost" onClick={onEnter}>
            <Icon name="lock" size={18} /> J'ai déjà un compte
          </button>
          <p style={{ textAlign: 'center', fontSize: 11.5, color: 'var(--ink-faint)', marginTop: 8,
            lineHeight: 1.5 }}>
            En continuant, tu acceptes nos Conditions<br />et notre Politique de confidentialité.
          </p>
        </div>
      </div>
    </div>
  );
}

// ---------- Feed ----------
function FeedScreen() {
  const [posts, setPosts] = useState(FEED.map(p => ({ ...p })));
  const [saved, setSaved] = useState({});
  function toggleLike(id) {
    setPosts(ps => ps.map(p => p.id === id
      ? { ...p, liked: !p.liked, likes: p.likes + (p.liked ? -1 : 1) } : p));
  }
  return (
    <div className="screen page-fade">
      <TopBar>
        <div className="brandmark" style={{ fontSize: 27, flex: 1 }}>Feed</div>
        <button className="iconbtn"><Icon name="search" size={22} /></button>
        <button className="iconbtn" style={{ marginRight: -6 }}><Icon name="bookmark" size={21} /></button>
      </TopBar>
      <div className="scroll stagger" style={{ padding: '4px 0 18px' }}>
        {posts.map((post, i) => {
          const a = person(post.author);
          return (
            <article key={post.id} style={{ padding: '12px 16px 8px', animationDelay: (i * 0.04) + 's' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 11, marginBottom: 11 }}>
                <Presence online={a.online} size={11}><Avatar who={a} size={44} /></Presence>
                <div style={{ flex: 1, lineHeight: 1.25 }}>
                  <div style={{ fontWeight: 700, fontSize: 14.5 }}>{a.name}</div>
                  <div style={{ fontSize: 12.5, color: 'var(--ink-faint)', fontWeight: 600 }}>
                    {a.handle} · {post.time}
                  </div>
                </div>
                <button className="iconbtn" style={{ width: 34, height: 34, marginRight: -6 }}>
                  <Icon name="more" size={20} />
                </button>
              </div>
              <p style={{ fontSize: 15, margin: '0 0 12px', color: 'var(--ink)', lineHeight: 1.5,
                textWrap: 'pretty' }}>{post.text}</p>
              {post.image && (
                <div className="ph" style={{ width: '100%', aspectRatio: '4 / 3',
                  borderRadius: 'var(--card-radius)', marginBottom: 11 }}>
                  <span className="ph__label">{post.image}</span>
                </div>
              )}
              <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
                <button className="iconbtn" style={{ width: 'auto', padding: '0 6px', gap: 7,
                  borderRadius: 99, color: post.liked ? 'var(--like)' : 'var(--ink)' }}
                  onClick={() => toggleLike(post.id)}>
                  <Icon name="heart" size={23} fill={post.liked ? 'current' : 'none'}
                    style={{ transition: 'transform .2s var(--spring)',
                      transform: post.liked ? 'scale(1.12)' : 'none' }} />
                  <span style={{ fontSize: 13.5, fontWeight: 700 }}>{post.likes}</span>
                </button>
                <button className="iconbtn" style={{ width: 'auto', padding: '0 6px', gap: 7, borderRadius: 99 }}>
                  <Icon name="comment" size={22} />
                  <span style={{ fontSize: 13.5, fontWeight: 700 }}>{post.comments}</span>
                </button>
                <button className="iconbtn" style={{ width: 'auto', padding: '0 6px', borderRadius: 99 }}>
                  <Icon name="share" size={21} />
                </button>
                <div style={{ flex: 1 }} />
                <button className="iconbtn" style={{ width: 36, height: 36, marginRight: -6,
                  color: saved[post.id] ? 'var(--brand)' : 'var(--ink)' }}
                  onClick={() => setSaved(s => ({ ...s, [post.id]: !s[post.id] }))}>
                  <Icon name="bookmark" size={21} fill={saved[post.id] ? 'current' : 'none'} />
                </button>
              </div>
              {i < posts.length - 1 && <div className="divider" style={{ marginTop: 12 }} />}
            </article>
          );
        })}
      </div>
    </div>
  );
}

// ---------- Notifications ----------
const NOTIF_ICON = {
  like: { name: 'heart', bg: 'var(--like)' },
  follow: { name: 'userplus', bg: 'var(--brand)' },
  comment: { name: 'comment', bg: 'var(--c-sky)' },
  react: { name: 'smiley', bg: 'var(--c-amber)' },
  mention: { name: 'at', bg: 'var(--c-violet)' },
};
function NotifsScreen() {
  const groups = [...new Set(NOTIFS.map(n => n.group))];
  return (
    <div className="screen page-fade">
      <TopBar>
        <div className="brandmark" style={{ fontSize: 27, flex: 1 }}>Activité</div>
        <button className="iconbtn" style={{ marginRight: -6 }}><Icon name="settings" size={22} /></button>
      </TopBar>
      <div className="scroll" style={{ padding: '4px 0 18px' }}>
        {groups.map(g => (
          <div key={g}>
            <div style={{ fontSize: 12, fontWeight: 800, letterSpacing: '0.04em', textTransform: 'uppercase',
              color: 'var(--ink-faint)', padding: '14px 20px 6px' }}>{g}</div>
            <div className="stagger">
              {NOTIFS.filter(n => n.group === g).map((n, i) => {
                const a = person(n.who);
                const ic = NOTIF_ICON[n.type];
                const isFollow = n.type === 'follow';
                return (
                  <div key={n.id} style={{ display: 'flex', alignItems: 'center', gap: 13,
                    padding: '9px 18px', animationDelay: (i * 0.03) + 's',
                    background: n.unread ? 'var(--brand-soft)' : 'transparent' }}>
                    <div style={{ position: 'relative', flexShrink: 0 }}>
                      <Avatar who={a} size={48} />
                      <span style={{ position: 'absolute', right: -3, bottom: -3, width: 22, height: 22,
                        borderRadius: '50%', background: ic.bg, color: 'white', display: 'flex',
                        alignItems: 'center', justifyContent: 'center', border: '2.5px solid var(--bg)' }}>
                        <Icon name={ic.name} size={12} fill="current" stroke={2} />
                      </span>
                    </div>
                    <div style={{ flex: 1, fontSize: 14, lineHeight: 1.4 }}>
                      <span style={{ fontWeight: 700 }}>{a.name}</span>{' '}
                      <span style={{ color: 'var(--ink-soft)' }}>{n.text}</span>{' '}
                      <span style={{ color: 'var(--ink-faint)', fontSize: 12.5, fontWeight: 600 }}>· {n.time}</span>
                    </div>
                    {isFollow ? (
                      <button className="pill" data-active="true" style={{ padding: '8px 16px', fontWeight: 700 }}>
                        Suivre
                      </button>
                    ) : (
                      <div className="ph" style={{ width: 44, height: 44, borderRadius: 12, flexShrink: 0 }} />
                    )}
                  </div>
                );
              })}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ---------- Profile ----------
function ProfileScreen() {
  const pr = PROFILE;
  const [tab, setTab] = useState('grid');
  return (
    <div className="screen page-fade">
      <TopBar>
        <div style={{ flex: 1, fontWeight: 800, fontSize: 18 }}>{pr.handle}</div>
        <button className="iconbtn"><Icon name="share" size={21} /></button>
        <button className="iconbtn" style={{ marginRight: -6 }}><Icon name="settings" size={22} /></button>
      </TopBar>
      <div className="scroll" style={{ padding: '4px 0 20px' }}>
        <div style={{ padding: '6px 20px 0', display: 'flex', alignItems: 'center', gap: 20 }}>
          <Avatar who={{ name: pr.name, hue: 5 }} size={84} ring="linear-gradient(140deg, var(--c-pink), var(--brand))" />
          <div style={{ flex: 1, display: 'flex', justifyContent: 'space-around', textAlign: 'center' }}>
            {[['Posts', pr.posts], ['Abonnés', pr.followers], ['Suivis', pr.following]].map(([l, v]) => (
              <div key={l}>
                <div style={{ fontWeight: 800, fontSize: 19 }}>{v}</div>
                <div style={{ fontSize: 12.5, color: 'var(--ink-faint)', fontWeight: 600 }}>{l}</div>
              </div>
            ))}
          </div>
        </div>
        <div style={{ padding: '14px 20px 0' }}>
          <div style={{ fontWeight: 700, fontSize: 16 }}>{pr.name}</div>
          <p style={{ fontSize: 14, color: 'var(--ink-soft)', margin: '4px 0 0', lineHeight: 1.5,
            textWrap: 'pretty' }}>{pr.bio}</p>
        </div>
        <div style={{ display: 'flex', gap: 9, padding: '16px 20px 6px' }}>
          <button className="btn btn--ghost" style={{ flex: 1, padding: '12px' }}>
            <Icon name="edit" size={17} /> Modifier
          </button>
          <button className="btn btn--ghost" style={{ flex: 1, padding: '12px' }}>Partager</button>
        </div>

        <div style={{ display: 'flex', padding: '10px 20px 0' }}>
          {[['grid', 'grid'], ['bookmark', 'bookmark']].map(([k, ic]) => (
            <button key={k} onClick={() => setTab(k)} style={{ flex: 1, display: 'flex',
              justifyContent: 'center', padding: '11px 0', color: tab === k ? 'var(--brand)' : 'var(--ink-faint)',
              borderBottom: '2px solid ' + (tab === k ? 'var(--brand)' : 'transparent') }}>
              <Icon name={ic} size={22} fill={tab === k ? 'current' : 'none'} />
            </button>
          ))}
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 3, padding: '3px 3px 0' }}>
          {(tab === 'grid' ? pr.grid : pr.grid.slice(0, 3)).map((g, i) => (
            <div key={i} className="ph" style={{ aspectRatio: '1', borderRadius: 4 }}>
              <span className="ph__label">{g}</span>
            </div>
          ))}
        </div>
        {tab === 'bookmark' && (
          <div style={{ textAlign: 'center', color: 'var(--ink-faint)', fontSize: 13.5, padding: '16px' }}>
            3 posts enregistrés
          </div>
        )}
      </div>
    </div>
  );
}

Object.assign(window, { OnboardingScreen, FeedScreen, NotifsScreen, ProfileScreen });