// SHOT — Remaining screens (check-in, stories, events, notif, search, profile, settings)
(function(){
const { useState, useEffect } = React;
const { StatusBar: SB3, TopNav: TN3, Icon: I3, AmbianceDot: A3, vibeLabel: VL3 } = window.SHOT_SCREENS_1;
const { BARS: B3, STORIES: S3, FRIENDS: F3, SUGGESTED: SU3, EVENTS: E3, NOTIFS_TODAY: NT, NOTIFS_YESTERDAY: NY, NOTIFS_WEEK: NW, REVIEWS: R3, avatarColor: AC3 } = window.SHOT_DATA;

/* ════════════════════════════════════════════════════
   CHECK-IN FLOW
════════════════════════════════════════════════════ */
const CheckinScreen = ({ barId, onBack, onSubmit }) => {
  const b = B3.find(x => x.id === barId) || B3[0];
  const [vibe, setVibe] = useState('hot');
  const [friends, setFriends] = useState(new Set(['f1', 'f2']));
  const [pub, setPub] = useState(true);

  const toggleFriend = (id) => setFriends(s => { const n = new Set(s); n.has(id) ? n.delete(id) : n.add(id); return n; });

  return (
    <>
      <TN3 title="Check-in" onBack={onBack}/>
      <div style={{padding:'8px 18px 18px'}}>
        <div className="checkin-bar-card">
          <div className="checkin-bar-img" style={{background: b.photo}}></div>
          <div style={{flex:1}}>
            <div className="checkin-bar-name">{b.name}</div>
            <div className="checkin-bar-addr">{b.addr} · {b.dist}</div>
          </div>
          <span className="tag-mini" style={{background:'rgba(232,105,74,0.15)',color:'var(--orange)'}}>📍 Tu y es</span>
        </div>

        <div style={{fontFamily:'var(--font-display)',fontSize:11,fontWeight:800,letterSpacing:'.18em',textTransform:'uppercase',color:'var(--text-4)',marginBottom:10}}>L'ambiance ce soir ?</div>
        <div className="vibe-options">
          {[
            { id: 'calm',  name: 'Calme',  desc: 'Tranquille, pour discuter' },
            { id: 'anime', name: 'Animé',  desc: 'Plein mais ça respire' },
            { id: 'hot',   name: 'Chaud',  desc: 'Ça monte, faut se faufiler' },
            { id: 'fire',  name: 'Blindé', desc: 'Compte sur tes coudes' },
          ].map(opt => (
            <div key={opt.id} className={"vibe-opt" + (vibe===opt.id?' on':'')} onClick={() => setVibe(opt.id)}>
              <div className="vibe-opt-row">
                <div className="vibe-opt-dot" style={{background: `var(--amb-${opt.id})`}}></div>
                <div className="vibe-opt-name">{opt.name}</div>
              </div>
              <div className="vibe-opt-desc">{opt.desc}</div>
            </div>
          ))}
        </div>

        <div style={{fontFamily:'var(--font-display)',fontSize:11,fontWeight:800,letterSpacing:'.18em',textTransform:'uppercase',color:'var(--text-4)',marginBottom:6}}>Tag tes potes</div>
        <div style={{background:'var(--bg-surface)',borderRadius:14,padding:'2px 14px',marginBottom:18,border:'1px solid var(--border)'}}>
          {F3.slice(0,4).map(f => (
            <div key={f.id} className="friend-pick-row" onClick={() => toggleFriend(f.id)}>
              <div className="friend-pick-av" style={{background:f.color}}>{f.initials}</div>
              <div style={{flex:1,minWidth:0}}>
                <div className="friend-pick-name">{f.name}</div>
                <div className="friend-pick-handle">{f.handle}</div>
              </div>
              <div className={"friend-pick-check" + (friends.has(f.id)?' on':'')}></div>
            </div>
          ))}
        </div>

        <div style={{display:'flex',alignItems:'center',gap:12,padding:14,background:'var(--bg-surface)',borderRadius:14,border:'1px solid var(--border)',marginBottom:18}}>
          <I3 name={pub?'globe':'lock'} size={20} stroke="var(--text-2)"/>
          <div style={{flex:1}}>
            <div style={{fontSize:13,fontWeight:700,color:'var(--text-1)'}}>{pub?'Public':'Amis uniquement'}</div>
            <div style={{fontSize:11,color:'var(--text-4)'}}>{pub?'Visible sur la carte pour tout le monde':'Seuls tes amis te voient'}</div>
          </div>
          <div className={"settings-switch" + (pub?' on':'')} onClick={() => setPub(!pub)}>
            <div className="settings-switch-thumb"></div>
          </div>
        </div>

        <button className="phone-cta orange" style={{width:'100%'}} onClick={onSubmit}>🍻 Confirmer mon check-in</button>
      </div>
    </>
  );
};

const CheckinSuccessScreen = ({ onDone }) => {
  useEffect(() => { const t = setTimeout(onDone, 2200); return () => clearTimeout(t); }, []);
  return (
    <>
      <div className="success-stage">
        <div className="success-burst"></div>
        <div>
          <div className="success-title">Check-in confirmé.</div>
          <div className="success-desc" style={{marginTop:14}}>Tu es au <strong style={{color:'var(--text-1)'}}>Comptoir des Halles</strong> avec Léa et Théo. Tes potes sont notifiés.</div>
        </div>
        <div style={{display:'flex',gap:10,width:'100%',maxWidth:280}}>
          <button className="phone-cta ghost" style={{flex:1}} onClick={onDone}>Continuer</button>
        </div>
        <div style={{fontSize:11,color:'var(--text-4)',marginTop:8}}>Tu débloques le badge <strong style={{color:'var(--orange)'}}>"Soirée du jeudi"</strong> 🏆</div>
      </div>
    </>
  );
};

/* ════════════════════════════════════════════════════
   STORIES (viewer + create)
════════════════════════════════════════════════════ */
const StoryViewerScreen = ({ storyId, onClose }) => {
  const s = S3.find(x => x.id === storyId) || S3[1];
  return (
    <div className="story-viewer">
      <div className="story-bars">
        <div className="story-bar done"><div className="fill"></div></div>
        <div className="story-bar active"><div className="fill"></div></div>
        <div className="story-bar"><div className="fill"></div></div>
        <div className="story-bar"><div className="fill"></div></div>
      </div>
      <div className="story-header">
        <div className="story-av" style={{background: s.color || AC3(s.name)}}>{s.initials}</div>
        <div>
          <div className="story-bar-name">{s.name}</div>
          <div className="story-time">il y a 23 min · 📍 Le Sansone</div>
        </div>
        <div className="story-close" onClick={onClose}>×</div>
      </div>
      <div className="story-body">
        <div className="story-img photo-ph" style={{background: 'linear-gradient(135deg, #C94F32, #2C4431 70%)'}}></div>
        <div style={{position:'relative',zIndex:1,color:'#fff'}}>
          <span className="story-create-tag" style={{position:'static',display:'inline-flex',marginBottom:10}}>📍 Le Sansone</span>
          <div className="story-caption">Ça commence fort.</div>
          <div className="story-caption-sub">DJ jusqu'à 4h, la terrasse est blindée</div>
        </div>
      </div>
      <div className="story-reply">
        <div className="story-reply-in">Répondre à {s.name}…</div>
        <div style={{width:42,height:42,borderRadius:'50%',background:'rgba(255,255,255,0.2)',display:'flex',alignItems:'center',justifyContent:'center',color:'#fff',backdropFilter:'blur(8px)'}}>
          <I3 name="heart" size={18} stroke="#fff"/>
        </div>
      </div>
    </div>
  );
};

const StoryCreateScreen = ({ onBack, onShare }) => (
  <div className="story-create-stage">
    <div className="story-create-top">
      <div className="story-create-tool" onClick={onBack}>×</div>
      <div className="story-create-toolbar">
        <div className="story-create-tool"><I3 name="text" size={18} stroke="#fff"/></div>
        <div className="story-create-tool"><I3 name="sticker" size={18} stroke="#fff"/></div>
        <div className="story-create-tool"><I3 name="pin" size={18} stroke="#fff"/></div>
      </div>
    </div>

    <div style={{position:'relative',zIndex:1,textAlign:'center'}}>
      <span className="story-create-tag" style={{display:'inline-flex'}}>
        <I3 name="pin" size={12} stroke="#fff"/> Le Comptoir des Halles
      </span>
      <div className="story-create-overlay-text">Ce soir<br/>ça démarre.</div>
    </div>

    <div className="story-create-bottom">
      <div className="story-create-capture">
        <div className="story-create-capture-inner"></div>
      </div>
      <div className="story-create-bottombar">
        <div className="story-create-share-circle">
          <I3 name="share" size={14} stroke="#fff"/>
        </div>
        <div className="story-create-share">Ta story · Public</div>
        <div onClick={onShare} style={{padding:'8px 18px',background:'var(--orange)',borderRadius:10,fontFamily:'var(--font-display)',fontSize:13,fontWeight:800,color:'#fff',letterSpacing:'.06em',textTransform:'uppercase',cursor:'pointer'}}>Publier</div>
      </div>
    </div>
  </div>
);

/* ════════════════════════════════════════════════════
   EVENTS LIST + DETAIL
════════════════════════════════════════════════════ */
const EventsScreen = ({ goEvent }) => (
  <>
    <div className="app-topnav">
      <div style={{width:36}}></div>
      <div className="app-top-title">Soirées</div>
      <div className="app-top-action"><I3 name="filter" size={16} stroke="var(--text-1)"/></div>
    </div>

    <div className="pills" style={{padding:'0 18px 14px'}}>
      <div className="pill on">Tout · 12</div>
      <div className="pill"><A3 vibe="hot"/>BDE</div>
      <div className="pill">🍺 Bar partenaires</div>
      <div className="pill">📅 Cette semaine</div>
      <div className="pill">🎉 Ce week-end</div>
    </div>

    <div className="event-list">
      {E3.map(e => (
        <div key={e.id} className="event-card" onClick={() => goEvent(e.id)}>
          <div className={"event-date-block " + (e.tag==='bde'?'green':'orange')}>
            <div className="event-date-day">{e.day}</div>
            <div className="event-date-month">{e.month}</div>
          </div>
          <div className="event-info">
            <div className="event-title">{e.title}</div>
            <div className="event-meta">{e.dow}<span className="dot"></span>{e.time}<span className="dot"></span>{e.bar}</div>
            <div className="event-foot">
              <div className="event-rsvp-count">
                <div className="event-rsvp-stack">
                  {e.attendees.slice(0,3).map((a,i) => (
                    <div key={i} className="av" style={{background:AC3(a)}}></div>
                  ))}
                </div>
                <span><strong style={{color:'var(--text-1)'}}>{e.rsvp}</strong> intéressés</span>
              </div>
              <span className={"event-tag " + e.tag}>{e.tag==='bde'?'BDE':'Promo'}</span>
            </div>
          </div>
        </div>
      ))}
    </div>
  </>
);

const EventDetailScreen = ({ eventId, onBack, onShare }) => {
  const e = E3.find(x => x.id === eventId) || E3[0];
  const [rsvp, setRsvp] = useState(false);
  return (
    <>
      <div className="event-detail-hero" style={{background: 'linear-gradient(135deg, #E8694A, #C94F32 50%, #1A2A1E)'}}>
        <div className="bar-hero-back" onClick={onBack}>
          <div style={{width:8,height:8,borderLeft:'2px solid #fff',borderBottom:'2px solid #fff',transform:'rotate(45deg) translate(2px,-2px)'}}></div>
        </div>
        <div className="bar-hero-action" onClick={onShare}>
          <I3 name="share" size={16} stroke="#fff"/>
        </div>
        <div className="event-detail-tag">🎉 {e.org}</div>
        <div className="event-detail-bottom">
          <div className="bar-hero-tags">
            <span className="tag-mini">{e.dow} {e.day} {e.month}</span>
            <span className="tag-mini">{e.time}</span>
          </div>
          <div className="event-detail-name">{e.title}</div>
          <div className="event-detail-meta">{e.bar} · {e.address}</div>
        </div>
      </div>

      <div style={{padding:'14px 18px 8px'}}>
        <p style={{fontSize:14,color:'var(--text-2)',lineHeight:1.65}}>{e.desc}</p>
      </div>

      <div className="event-info-row">
        <div className="event-info-icon"><I3 name="clock" size={18} stroke="var(--orange)"/></div>
        <div>
          <div className="event-info-lbl">Quand</div>
          <div className="event-info-val">{e.dow} {e.day} {e.month} · {e.time}</div>
        </div>
      </div>
      <div className="event-info-row">
        <div className="event-info-icon"><I3 name="pin" size={18} stroke="var(--orange)"/></div>
        <div>
          <div className="event-info-lbl">Où</div>
          <div className="event-info-val">{e.bar}<br/><span style={{fontSize:12,color:'var(--text-3)',fontWeight:400}}>{e.address}</span></div>
        </div>
      </div>
      <div className="event-info-row" style={{borderBottom:'none'}}>
        <div className="event-info-icon"><I3 name="profile" size={18} stroke="var(--orange)"/></div>
        <div style={{flex:1}}>
          <div className="event-info-lbl">RSVP</div>
          <div className="event-info-val"><strong style={{color:'var(--orange)'}}>{e.rsvp}</strong> · {e.capacity} places</div>
        </div>
      </div>

      <div className="attendees-list" style={{paddingTop:0}}>
        {e.attendees.slice(0,7).map((a,i) => (
          <div key={i} className="attendee-av" style={{background:AC3(a)}}>{a}</div>
        ))}
        <div className="attendee-more">+{e.rsvp - 7}</div>
      </div>

      <div style={{padding:'8px 18px 24px',display:'flex',gap:8}}>
        <button className={"phone-cta " + (rsvp ? 'green' : 'orange')} style={{flex:1}} onClick={() => setRsvp(!rsvp)}>
          {rsvp ? '✓ Tu y vas' : '🎉 J\'y vais'}
        </button>
        <button className="phone-cta ghost" style={{width:50}}>
          <I3 name="bookmark" size={16} stroke="currentColor"/>
        </button>
      </div>
    </>
  );
};

/* ════════════════════════════════════════════════════
   NOTIFICATIONS
════════════════════════════════════════════════════ */
const NotificationsScreen = ({ onBack }) => (
  <>
    <TN3 title="Notifications" onBack={onBack} action={
      <div className="app-top-action" style={{width:'auto',padding:'0 12px',fontFamily:'var(--font-display)',fontSize:11,fontWeight:800,letterSpacing:'.06em',textTransform:'uppercase',color:'var(--orange)'}}>Tout lu</div>
    }/>
    <div className="notif-list">
      <div className="notif-day">Aujourd'hui</div>
      {NT.map(n => (
        <div key={n.id} className={"notif-row" + (n.unread?' unread':'')}>
          <div className={"notif-icon-bubble " + n.icon}>{n.emoji}</div>
          <div className="notif-body">
            <div className="notif-txt" dangerouslySetInnerHTML={{__html: n.text}}></div>
            <div className="notif-time">{n.time}</div>
          </div>
          {n.unread && <div className="notif-dot-unread"></div>}
        </div>
      ))}
      <div className="notif-day">Hier</div>
      {NY.map(n => (
        <div key={n.id} className="notif-row">
          <div className={"notif-icon-bubble " + n.icon}>{n.emoji}</div>
          <div className="notif-body">
            <div className="notif-txt" dangerouslySetInnerHTML={{__html: n.text}}></div>
            <div className="notif-time">{n.time}</div>
          </div>
        </div>
      ))}
      <div className="notif-day">Cette semaine</div>
      {NW.map(n => (
        <div key={n.id} className="notif-row">
          <div className={"notif-icon-bubble " + n.icon}>{n.emoji}</div>
          <div className="notif-body">
            <div className="notif-txt" dangerouslySetInnerHTML={{__html: n.text}}></div>
            <div className="notif-time">{n.time}</div>
          </div>
        </div>
      ))}
    </div>
  </>
);

/* ════════════════════════════════════════════════════
   SEARCH
════════════════════════════════════════════════════ */
const SearchScreen = ({ onBack, goBar }) => {
  const [q, setQ] = useState('');
  return (
    <>
      <TN3 title="" onBack={onBack}/>
      <div className="search-input-wrap" style={{paddingTop:0}}>
        <input className="search-input" placeholder="Bars, soirées, amis…" value={q} onChange={e=>setQ(e.target.value)} autoFocus/>
        {q && <div className="search-cancel" onClick={()=>setQ('')}>Effacer</div>}
      </div>

      {!q && (
        <>
          <div className="search-section">Recherches récentes <span className="search-section-action">Effacer</span></div>
          {['Le Sansone', 'Bar à vin', 'Mama Brasserie', 'Soirée jeudi'].map(s => (
            <div key={s} className="search-row-item">
              <div className="search-row-icon" style={{display:'flex',alignItems:'center',justifyContent:'center',color:'var(--text-3)'}}>
                <I3 name="clock" size={16} stroke="currentColor"/>
              </div>
              <div style={{flex:1}}>
                <div className="search-row-name">{s}</div>
              </div>
            </div>
          ))}

          <div className="search-section">Recherches populaires</div>
          <div className="filter-row" style={{padding:'0 18px 14px'}}>
            <div className="pill on">🔥 Blindé ce soir</div>
            <div className="pill">🎧 DJ sets</div>
            <div className="pill">☀️ Terrasses</div>
            <div className="pill">🎉 BDE</div>
            <div className="pill">🍸 Cocktails</div>
            <div className="pill">🍺 Happy hour</div>
          </div>

          <div className="search-section">Bars tendance</div>
          {B3.slice(0,3).map(b => (
            <div key={b.id} className="search-row-item" onClick={()=>goBar(b.id)}>
              <div className="search-row-icon" style={{background: b.photo}}></div>
              <div style={{flex:1}}>
                <div className="search-row-name">{b.name}</div>
                <div className="search-row-sub">{b.addr} · <span style={{color:'var(--orange)'}}>{b.live} live</span></div>
              </div>
              <I3 name="bookmark" size={14} stroke="var(--text-4)"/>
            </div>
          ))}
        </>
      )}

      {q && (
        <>
          <div className="search-section">Bars</div>
          {B3.filter(b => b.name.toLowerCase().includes(q.toLowerCase())).map(b => (
            <div key={b.id} className="search-row-item" onClick={()=>goBar(b.id)}>
              <div className="search-row-icon" style={{background: b.photo}}></div>
              <div style={{flex:1}}>
                <div className="search-row-name">{b.name}</div>
                <div className="search-row-sub">{b.addr}</div>
              </div>
            </div>
          ))}
        </>
      )}
    </>
  );
};

/* ════════════════════════════════════════════════════
   PROFILE + FRIENDS + EDIT + SETTINGS
════════════════════════════════════════════════════ */
const ProfileScreen = ({ goFriends, goSettings, goEdit, goBar }) => {
  const [tab, setTab] = useState('checkins');
  return (
    <>
      <div className="app-topnav">
        <div style={{width:36}}></div>
        <div className="app-top-title">@marie.l</div>
        <div className="app-top-action" onClick={goSettings}><I3 name="settings" size={16} stroke="var(--text-1)"/></div>
      </div>

      <div className="profile-hero">
        <div className="profile-av">ML</div>
        <div style={{textAlign:'center'}}>
          <div className="profile-name">Marie Lefèvre</div>
          <div className="profile-handle">@marie.l · Sciences Po Paris</div>
        </div>
        <div className="profile-bio">Bar à vin et terrasse au soleil. Toujours partante pour un dernier verre.</div>
        <div className="profile-stats">
          <div className="profile-stat">
            <div className="profile-stat-val">87</div>
            <div className="profile-stat-lbl">Check-ins</div>
          </div>
          <div style={{width:1,height:30,background:'var(--border)'}}></div>
          <div className="profile-stat" onClick={goFriends}>
            <div className="profile-stat-val">142</div>
            <div className="profile-stat-lbl">Amis</div>
          </div>
          <div style={{width:1,height:30,background:'var(--border)'}}></div>
          <div className="profile-stat">
            <div className="profile-stat-val">23</div>
            <div className="profile-stat-lbl">Bars sauvés</div>
          </div>
        </div>
        <div className="profile-actions">
          <button className="phone-cta ghost" onClick={goEdit}>Modifier</button>
          <button className="phone-cta orange"><I3 name="share" size={14} stroke="#fff"/></button>
        </div>
      </div>

      <div className="profile-tabs">
        <div className={"profile-tab" + (tab==='checkins'?' on':'')} onClick={()=>setTab('checkins')}>Check-ins</div>
        <div className={"profile-tab" + (tab==='saved'?' on':'')} onClick={()=>setTab('saved')}>Sauvés</div>
        <div className={"profile-tab" + (tab==='badges'?' on':'')} onClick={()=>setTab('badges')}>Badges</div>
      </div>

      {tab === 'checkins' && (
        <div className="profile-grid">
          {[...B3, ...B3].slice(0,9).map((b,i) => (
            <div key={i} className="profile-grid-item" onClick={() => goBar(b.id)}>
              <div className="photo-ph" style={{background: b.photo, height: '100%'}}></div>
              <div className="profile-grid-bar">{b.name.split(' ').slice(0,2).join(' ')}</div>
            </div>
          ))}
        </div>
      )}
      {tab === 'saved' && (
        <div className="profile-grid">
          {B3.slice(0,6).map((b,i) => (
            <div key={i} className="profile-grid-item" onClick={() => goBar(b.id)}>
              <div className="photo-ph" style={{background: b.photo, height: '100%'}}></div>
              <div className="profile-grid-bar">{b.name}</div>
            </div>
          ))}
        </div>
      )}
      {tab === 'badges' && (
        <div style={{padding:18,display:'grid',gridTemplateColumns:'1fr 1fr',gap:12}}>
          {[
            {icon:'🍺',name:'Habitué',sub:'10 check-ins au Sansone'},
            {icon:'🌙',name:'Noctambule',sub:'5 fermetures de bar'},
            {icon:'🎉',name:'Fêtard BDE',sub:'3 soirées BDE'},
            {icon:'⭐',name:'Critique',sub:'25 avis publiés'},
          ].map((b,i)=>(
            <div key={i} style={{background:'var(--bg-surface)',border:'1px solid var(--border)',borderRadius:14,padding:14,textAlign:'center'}}>
              <div style={{fontSize:36,marginBottom:6}}>{b.icon}</div>
              <div style={{fontFamily:'var(--font-display)',fontSize:14,fontWeight:800,color:'var(--text-1)'}}>{b.name}</div>
              <div style={{fontSize:10,color:'var(--text-4)',marginTop:3}}>{b.sub}</div>
            </div>
          ))}
        </div>
      )}
    </>
  );
};

const FriendsScreen = ({ onBack }) => (
  <>
    <TN3 title="Amis · 142" onBack={onBack} action={
      <div className="app-top-action"><I3 name="search" size={16} stroke="var(--text-1)"/></div>
    }/>

    <div className="search-section" style={{padding:'8px 18px 6px'}}>En live <span style={{fontSize:10,color:'var(--orange)'}}>● {F3.filter(f=>f.live).length}</span></div>
    {F3.filter(f => f.live).map(f => (
      <div key={f.id} className="friend-row">
        <div className="friend-row-av" style={{background:f.color}}>
          {f.initials}
          <span className="live-dot"></span>
        </div>
        <div style={{flex:1,minWidth:0}}>
          <div className="friend-row-name">{f.name}</div>
          <div className="friend-row-status"><span className="live">● En live</span> · {f.status}</div>
        </div>
        <div className="friend-row-action">Voir</div>
      </div>
    ))}

    <div className="search-section">Tous tes amis</div>
    {F3.filter(f => !f.live).map(f => (
      <div key={f.id} className="friend-row">
        <div className="friend-row-av" style={{background:f.color}}>{f.initials}</div>
        <div style={{flex:1,minWidth:0}}>
          <div className="friend-row-name">{f.name}</div>
          <div className="friend-row-status">{f.status}</div>
        </div>
        <div className="friend-row-action">Message</div>
      </div>
    ))}

    <div className="search-section">Suggestions</div>
    {SU3.map(f => (
      <div key={f.id} className="friend-row">
        <div className="friend-row-av" style={{background:f.color}}>{f.initials}</div>
        <div style={{flex:1,minWidth:0}}>
          <div className="friend-row-name">{f.name}</div>
          <div className="friend-row-status">{f.sub}</div>
        </div>
        <div className="friend-row-action add">+ Ajouter</div>
      </div>
    ))}
  </>
);

const EditProfileScreen = ({ onBack }) => (
  <>
    <TN3 title="Modifier le profil" onBack={onBack} action={
      <div className="app-top-action" style={{width:'auto',padding:'0 14px',fontFamily:'var(--font-display)',fontSize:11,fontWeight:800,letterSpacing:'.08em',textTransform:'uppercase',color:'var(--orange)'}}>Enregistrer</div>
    }/>
    <div className="edit-av-wrap">
      <div className="edit-av">
        ML
        <div className="edit-av-camera"><I3 name="cam" size={14} stroke="#fff"/></div>
      </div>
      <div className="edit-av-change">Changer la photo</div>
    </div>
    <div style={{padding:'8px 18px 24px'}}>
      <div className="field">
        <label className="field-lbl">Prénom</label>
        <input className="field-in" defaultValue="Marie"/>
      </div>
      <div className="field">
        <label className="field-lbl">Nom</label>
        <input className="field-in" defaultValue="Lefèvre"/>
      </div>
      <div className="field">
        <label className="field-lbl">Pseudo</label>
        <input className="field-in" defaultValue="@marie.l"/>
      </div>
      <div className="field">
        <label className="field-lbl">Bio</label>
        <textarea className="field-in" style={{height:80,paddingTop:14,resize:'none',fontFamily:'var(--font-body)'}} defaultValue="Bar à vin et terrasse au soleil. Toujours partante pour un dernier verre."/>
      </div>
      <div className="field">
        <label className="field-lbl">École</label>
        <input className="field-in" defaultValue="Sciences Po Paris"/>
      </div>
      <div className="field">
        <label className="field-lbl">Ville</label>
        <input className="field-in" defaultValue="Paris · 5e"/>
      </div>
    </div>
  </>
);

const SettingsScreen = ({ onBack, goEdit }) => {
  const [pub, setPub] = useState(false);
  const [notif, setNotif] = useState(true);
  const [loc, setLoc] = useState(true);
  return (
    <>
      <TN3 title="Réglages" onBack={onBack}/>
      <div className="settings-list">
        <div className="settings-group">
          <div className="settings-group-lbl">Compte</div>
          <div className="settings-row" onClick={goEdit}>
            <div className="settings-row-icon o"><I3 name="user" size={16}/></div>
            <div className="settings-row-lbl">Profil</div>
            <div className="settings-row-arrow"></div>
          </div>
          <div className="settings-row">
            <div className="settings-row-icon"><I3 name="lock" size={16}/></div>
            <div className="settings-row-lbl">Sécurité</div>
            <div className="settings-row-arrow"></div>
          </div>
          <div className="settings-row">
            <div className="settings-row-icon g"><I3 name="profile" size={16}/></div>
            <div className="settings-row-lbl">Amis & contacts</div>
            <div className="settings-row-val">142</div>
            <div className="settings-row-arrow"></div>
          </div>
        </div>

        <div className="settings-group">
          <div className="settings-group-lbl">Confidentialité</div>
          <div className="settings-row">
            <div className="settings-row-icon"><I3 name="globe" size={16}/></div>
            <div className="settings-row-lbl">Profil public</div>
            <div className={"settings-switch" + (pub?' on':'')} onClick={(e)=>{e.stopPropagation();setPub(!pub);}}>
              <div className="settings-switch-thumb"></div>
            </div>
          </div>
          <div className="settings-row">
            <div className="settings-row-icon"><I3 name="pin" size={16}/></div>
            <div className="settings-row-lbl">Localisation</div>
            <div className={"settings-switch" + (loc?' on':'')} onClick={(e)=>{e.stopPropagation();setLoc(!loc);}}>
              <div className="settings-switch-thumb"></div>
            </div>
          </div>
          <div className="settings-row">
            <div className="settings-row-icon"><I3 name="bell" size={16}/></div>
            <div className="settings-row-lbl">Notifications push</div>
            <div className={"settings-switch" + (notif?' on':'')} onClick={(e)=>{e.stopPropagation();setNotif(!notif);}}>
              <div className="settings-switch-thumb"></div>
            </div>
          </div>
        </div>

        <div className="settings-group">
          <div className="settings-group-lbl">Préférences</div>
          <div className="settings-row">
            <div className="settings-row-icon"><I3 name="heart" size={16}/></div>
            <div className="settings-row-lbl">Ambiances préférées</div>
            <div className="settings-row-val">3 sélectionnées</div>
            <div className="settings-row-arrow"></div>
          </div>
          <div className="settings-row">
            <div className="settings-row-icon"><I3 name="info" size={16}/></div>
            <div className="settings-row-lbl">Langue</div>
            <div className="settings-row-val">Français</div>
            <div className="settings-row-arrow"></div>
          </div>
        </div>

        <div className="settings-group">
          <div className="settings-group-lbl">Aide & légal</div>
          <div className="settings-row">
            <div className="settings-row-icon"><I3 name="chat" size={16}/></div>
            <div className="settings-row-lbl">Support</div>
            <div className="settings-row-arrow"></div>
          </div>
          <div className="settings-row">
            <div className="settings-row-icon"><I3 name="info" size={16}/></div>
            <div className="settings-row-lbl">Conditions & confidentialité</div>
            <div className="settings-row-arrow"></div>
          </div>
          <div className="settings-row" style={{color:'var(--error)'}}>
            <div className="settings-row-icon" style={{background:'rgba(192,57,43,0.12)',color:'var(--error)'}}><I3 name="logout" size={16}/></div>
            <div className="settings-row-lbl" style={{color:'var(--error)'}}>Déconnexion</div>
            <div className="settings-row-arrow" style={{borderColor:'var(--error)'}}></div>
          </div>
        </div>

        <div style={{padding:'18px',textAlign:'center',fontSize:11,color:'var(--text-4)'}}>SHOT · v1.0.0 · Made in Paris</div>
      </div>
    </>
  );
};

window.SHOT_SCREENS_3 = { CheckinScreen, CheckinSuccessScreen, StoryViewerScreen, StoryCreateScreen, EventsScreen, EventDetailScreen, NotificationsScreen, SearchScreen, ProfileScreen, FriendsScreen, EditProfileScreen, SettingsScreen };
})();