// SHOT — Screen components (atoms + onboarding flow)
(function(){
const { useState, useEffect, useRef } = React;
const { FRIENDS, EVENTS, INTERESTS } = window.SHOT_DATA;

/* ════════════════════════════════════════════════════
   ATOMS
════════════════════════════════════════════════════ */
const StatusBar = ({ time = '21:47' }) => (
  <div className="statusbar">
    <div className="statusbar-time">{time}</div>
    <div className="statusbar-icons">
      <div className="sbar-icon signal"><i style={{height:3}}/><i style={{height:5}}/><i style={{height:7}}/><i style={{height:9}}/></div>
      <div className="sbar-icon wifi"></div>
      <div className="sbar-icon bat"></div>
    </div>
  </div>
);

const TopNav = ({ title, onBack, action, compact }) => (
  <div className={"app-topnav" + (compact ? " compact" : "")}>
    {onBack ? <div className="app-back" onClick={onBack}></div> : <div style={{width:36}}></div>}
    <div className="app-top-title">{title}</div>
    {action || <div style={{width:36}}></div>}
  </div>
);

const Icon = ({ name, size = 20, stroke = 'currentColor' }) => {
  const paths = {
    map:     <><circle cx="12" cy="10" r="3"/><path d="M12 21s-7-7.5-7-12a7 7 0 0 1 14 0c0 4.5-7 12-7 12z"/></>,
    feed:    <><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="14" y2="18"/></>,
    event:   <><rect x="3" y="5" width="18" height="16" rx="2"/><line x1="3" y1="10" x2="21" y2="10"/><line x1="8" y1="3" x2="8" y2="7"/><line x1="16" y1="3" x2="16" y2="7"/></>,
    profile: <><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4.5 4-7 8-7s8 2.5 8 7"/></>,
    bell:    <><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10 21a2 2 0 0 0 4 0"/></>,
    search:  <><circle cx="11" cy="11" r="7"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></>,
    settings:<><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09a1.65 1.65 0 0 0-1-1.51 1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.6 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09a1.65 1.65 0 0 0 1.51-1 1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33h0A1.65 1.65 0 0 0 10 4.6V4a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51h0a1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82v0a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></>,
    chat:    <><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></>,
    share:   <><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.6" y1="13.5" x2="15.4" y2="17.5"/><line x1="15.4" y1="6.5" x2="8.6" y2="10.5"/></>,
    heart:   <><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78L12 21.23l8.84-8.84a5.5 5.5 0 0 0 0-7.78z"/></>,
    bookmark:<><path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/></>,
    clock:   <><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></>,
    pin:     <><path d="M12 21s-7-7.5-7-12a7 7 0 0 1 14 0c0 4.5-7 12-7 12z"/><circle cx="12" cy="9" r="2.5"/></>,
    plus:    <><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></>,
    user:    <><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4.5 4-7 8-7s8 2.5 8 7"/></>,
    cam:     <><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></>,
    lock:    <><rect x="4" y="11" width="16" height="11" rx="2"/><path d="M8 11V8a4 4 0 0 1 8 0v3"/></>,
    globe:   <><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15 15 0 0 1 4 10 15 15 0 0 1-4 10 15 15 0 0 1-4-10 15 15 0 0 1 4-10z"/></>,
    info:    <><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12" y2="8"/></>,
    logout:  <><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></>,
    filter:  <><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/></>,
    text:    <><path d="M4 7V4h16v3"/><line x1="9" y1="20" x2="15" y2="20"/><line x1="12" y1="4" x2="12" y2="20"/></>,
    sticker: <><path d="M21 12c0-4.97-4.03-9-9-9s-9 4.03-9 9 4.03 9 9 9c0 0 5-4 9-9z"/><path d="M12 21s4-4 9-9"/></>,
  };
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={stroke} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      {paths[name] || null}
    </svg>
  );
};

const BottomNav = ({ tab, onTab, onCenter }) => (
  <div className="bnav">
    <button className={"bnav-item" + (tab==='map' ? ' on' : '')} onClick={() => onTab('map')}>
      <div className="bnav-icon-wrap"><Icon name="map" size={22}/></div>
      <div className="bnav-lbl">Map</div>
    </button>
    <button className={"bnav-item" + (tab==='feed' ? ' on' : '')} onClick={() => onTab('feed')}>
      <div className="bnav-icon-wrap"><Icon name="feed" size={22}/></div>
      <div className="bnav-lbl">Feed</div>
    </button>
    <div className="bnav-item bnav-center">
      <button className="bnav-center-btn" onClick={onCenter}><Icon name="plus" size={26} stroke="#fff"/></button>
    </div>
    <button className={"bnav-item" + (tab==='events' ? ' on' : '')} onClick={() => onTab('events')}>
      <div className="bnav-icon-wrap"><Icon name="event" size={22}/></div>
      <div className="bnav-lbl">Events</div>
    </button>
    <button className={"bnav-item" + (tab==='profile' ? ' on' : '')} onClick={() => onTab('profile')}>
      <div className="bnav-icon-wrap"><Icon name="profile" size={22}/></div>
      <div className="bnav-lbl">Profil</div>
    </button>
  </div>
);

const AmbianceDot = ({ vibe }) => {
  const colors = { calm: 'var(--amb-calm)', anime: 'var(--amb-anime)', hot: 'var(--amb-hot)', fire: 'var(--amb-fire)' };
  return <span style={{width:8,height:8,borderRadius:'50%',background:colors[vibe],display:'inline-block'}}></span>;
};
const vibeLabel = (v) => ({ calm: 'Calme', anime: 'Animé', hot: 'Chaud', fire: 'Blindé' })[v];

/* ════════════════════════════════════════════════════
   SCREEN: SPLASH
════════════════════════════════════════════════════ */
const SplashScreen = ({ onDone }) => {
  useEffect(() => { const t = setTimeout(onDone, 1400); return () => clearTimeout(t); }, []);
  return (
    <>
      <StatusBar/>
      <div className="splash-stage">
        <div className="splash-logo">SHOT<em>.</em></div>
        <div className="splash-tagline">Le réseau social des bars</div>
        <div className="splash-loader">Chargement…</div>
      </div>
    </>
  );
};

/* ════════════════════════════════════════════════════
   SCREEN: ONBOARDING
════════════════════════════════════════════════════ */
const ONB_SLIDES = [
  {
    title: <>Découvre les bars<br/><em>autour de toi.</em></>,
    desc: "Une carte vivante en temps réel. L'ambiance, l'affluence, les promos — tout, en un coup d'œil.",
    vis: 'map'
  },
  {
    title: <>Check-in avec<br/><em>tes potes.</em></>,
    desc: "Préviens tes amis quand tu pars, retrouve-les en un tap. Les soirs deviennent moins solos.",
    vis: 'friends'
  },
  {
    title: <>Toutes les soirées<br/><em>au même endroit.</em></>,
    desc: "Les events BDE, les soirées partenaires, les happy hours. RSVP en deux secondes.",
    vis: 'events'
  }
];

const OnbVis = ({ kind }) => {
  if (kind === 'map') return (
    <div style={{width:260,height:280,position:'relative',borderRadius:24,overflow:'hidden',border:'1px solid var(--border-md)',background:'var(--map-bg)'}}>
      <div className="map-grid"></div>
      <div className="pin hot" style={{left:'30%',top:'35%'}}>🍺</div>
      <div className="pin anime" style={{left:'62%',top:'45%'}}>🍺</div>
      <div className="pin fire" style={{left:'50%',top:'70%'}}>🍺</div>
      <div className="pin event" style={{left:'25%',top:'65%'}}>🎉</div>
      <div className="pin me" style={{left:'45%',top:'52%'}}></div>
    </div>
  );
  if (kind === 'friends') return (
    <div style={{width:260,height:280,display:'flex',flexDirection:'column',gap:12,padding:'14px 0',justifyContent:'center'}}>
      {FRIENDS.slice(0,3).map(f => (
        <div key={f.id} style={{display:'flex',alignItems:'center',gap:12,padding:'12px 16px',background:'var(--bg-surface)',borderRadius:14,border:'1px solid var(--border)'}}>
          <div style={{width:42,height:42,borderRadius:'50%',background:f.color,color:'#fff',display:'flex',alignItems:'center',justifyContent:'center',fontFamily:'var(--font-display)',fontSize:14,fontWeight:900,position:'relative'}}>
            {f.initials}
            {f.live && <span style={{position:'absolute',bottom:-2,right:-2,width:14,height:14,borderRadius:'50%',background:'var(--orange)',border:'2px solid var(--bg-surface)'}}></span>}
          </div>
          <div style={{flex:1,minWidth:0}}>
            <div style={{fontSize:13,fontWeight:700,color:'var(--text-1)'}}>{f.name}</div>
            <div style={{fontSize:11,color:f.live?'var(--orange)':'var(--text-4)',fontWeight:f.live?700:400}}>{f.status}</div>
          </div>
        </div>
      ))}
    </div>
  );
  return (
    <div style={{width:260,height:280,display:'flex',flexDirection:'column',gap:10,justifyContent:'center'}}>
      {EVENTS.slice(0,2).map(e => (
        <div key={e.id} style={{display:'flex',gap:12,background:'var(--bg-surface)',borderRadius:14,padding:12,border:'1px solid var(--border)'}}>
          <div style={{width:54,flexShrink:0,background:e.tag==='bde'?'var(--green)':'var(--orange)',borderRadius:10,display:'flex',flexDirection:'column',alignItems:'center',justifyContent:'center',color:'#fff',padding:'8px 0'}}>
            <div style={{fontFamily:'var(--font-display)',fontSize:22,fontWeight:900,lineHeight:1}}>{e.day}</div>
            <div style={{fontSize:10,fontWeight:700,textTransform:'uppercase',letterSpacing:'.08em',opacity:.9}}>{e.month}</div>
          </div>
          <div>
            <div style={{fontFamily:'var(--font-display)',fontSize:15,fontWeight:800,color:'var(--text-1)',lineHeight:1.1,marginBottom:3}}>{e.title}</div>
            <div style={{fontSize:11,color:'var(--text-4)'}}>{e.bar} · {e.time}</div>
          </div>
        </div>
      ))}
    </div>
  );
};

const OnboardingScreen = ({ idx, onNext, onSkip, onSignup }) => {
  const slide = ONB_SLIDES[idx];
  const isLast = idx === ONB_SLIDES.length - 1;
  return (
    <>
      <StatusBar/>
      <div className="app-topnav compact">
        <div style={{width:36}}></div>
        <div style={{flex:1}}></div>
        <div className="app-top-action" onClick={onSkip} style={{width:'auto',padding:'0 14px',fontFamily:'var(--font-display)',fontSize:12,fontWeight:800,letterSpacing:'.08em',textTransform:'uppercase',color:'var(--text-3)'}}>Passer</div>
      </div>
      <div className="onb-stage">
        <div className="onb-vis"><OnbVis kind={slide.vis}/></div>
        <div className="onb-dots">
          {ONB_SLIDES.map((_,i) => <div key={i} className={"onb-dot" + (i===idx?' on':'')}></div>)}
        </div>
        <div className="onb-title">{slide.title}</div>
        <div className="onb-desc" style={{marginBottom:24}}>{slide.desc}</div>
        <div className="onb-cta-row">
          <button className="phone-cta orange" style={{flex:1}} onClick={isLast ? onSignup : onNext}>
            {isLast ? 'Commencer' : 'Suivant'}
          </button>
        </div>
      </div>
    </>
  );
};

/* ════════════════════════════════════════════════════
   SCREEN: SIGNUP / VERIFY / INTERESTS
════════════════════════════════════════════════════ */
const SignupScreen = ({ onBack, onNext }) => (
  <>
    <StatusBar/>
    <TopNav title="" onBack={onBack}/>
    <div style={{padding:'8px 24px 24px'}}>
      <h1 style={{fontFamily:'var(--font-display)',fontSize:36,fontWeight:900,letterSpacing:'-0.02em',lineHeight:1,marginBottom:10,color:'var(--text-1)'}}>Crée ton<br/><em style={{color:'var(--orange)',fontStyle:'normal'}}>compte SHOT.</em></h1>
      <p style={{fontSize:14,color:'var(--text-3)',lineHeight:1.55,marginBottom:24}}>On envoie un code par SMS — pas de mot de passe, pas de réseaux, pas de friction.</p>

      <div className="field">
        <label className="field-lbl">Prénom</label>
        <input className="field-in" defaultValue="Marie" />
      </div>
      <div className="field">
        <label className="field-lbl">Téléphone</label>
        <input className="field-in" defaultValue="+33 6 12 34 56 78" />
      </div>
      <div className="field">
        <label className="field-lbl">Date de naissance</label>
        <input className="field-in" defaultValue="14 / 03 / 2003" />
      </div>

      <div style={{display:'flex',alignItems:'flex-start',gap:10,marginTop:6,marginBottom:18}}>
        <div style={{width:20,height:20,borderRadius:6,background:'var(--orange)',display:'flex',alignItems:'center',justifyContent:'center',flexShrink:0,marginTop:2}}>
          <div style={{width:8,height:5,borderLeft:'2px solid #fff',borderBottom:'2px solid #fff',transform:'rotate(-45deg) translate(1px,0)'}}></div>
        </div>
        <div style={{fontSize:11,color:'var(--text-3)',lineHeight:1.5}}>
          J'ai 18 ans ou plus et j'accepte les <strong style={{color:'var(--text-1)'}}>conditions d'utilisation</strong> et la <strong style={{color:'var(--text-1)'}}>politique de confidentialité</strong> de SHOT.
        </div>
      </div>

      <button className="phone-cta orange" onClick={onNext} style={{width:'100%',marginBottom:10}}>Recevoir mon code</button>
      <div style={{textAlign:'center',fontSize:12,color:'var(--text-4)'}}>Tu as déjà un compte ? <span style={{color:'var(--orange)',fontWeight:700,cursor:'pointer'}}>Connexion</span></div>
    </div>
  </>
);

const VerifyScreen = ({ onBack, onNext }) => {
  const [code] = useState(['4', '8', '2', '1', '', '']);
  return (
    <>
      <StatusBar/>
      <TopNav title="" onBack={onBack}/>
      <div style={{padding:'8px 24px 24px'}}>
        <h1 style={{fontFamily:'var(--font-display)',fontSize:36,fontWeight:900,letterSpacing:'-0.02em',lineHeight:1,marginBottom:10,color:'var(--text-1)'}}>Vérification</h1>
        <p style={{fontSize:14,color:'var(--text-3)',lineHeight:1.55,marginBottom:24}}>On vient d'envoyer un code à 6 chiffres au <strong style={{color:'var(--text-1)'}}>+33 6 12 34 56 78</strong>.</p>
        <div className="code-row" style={{marginBottom:20}}>
          {code.map((c, i) => <div key={i} className={"code-cell" + (c ? " filled" : "")}>{c}</div>)}
        </div>
        <div style={{textAlign:'center',fontSize:12,color:'var(--text-4)',marginBottom:24}}>Pas reçu ? <span style={{color:'var(--orange)',fontWeight:700,cursor:'pointer'}}>Renvoyer dans 0:42</span></div>
        <button className="phone-cta orange" onClick={onNext} style={{width:'100%'}}>Vérifier</button>
      </div>
    </>
  );
};

const InterestsScreen = ({ onNext, onBack }) => {
  const [sel, setSel] = useState(new Set(['wine','craft','cock']));
  const toggle = (id) => {
    setSel(s => { const n = new Set(s); n.has(id) ? n.delete(id) : n.add(id); return n; });
  };
  return (
    <>
      <StatusBar/>
      <TopNav title="" onBack={onBack}/>
      <div style={{padding:'8px 24px 24px',display:'flex',flexDirection:'column',height:'100%'}}>
        <h1 style={{fontFamily:'var(--font-display)',fontSize:32,fontWeight:900,letterSpacing:'-0.02em',lineHeight:1,marginBottom:10,color:'var(--text-1)'}}>Tes <em style={{color:'var(--orange)',fontStyle:'normal'}}>ambiances</em><br/>préférées</h1>
        <p style={{fontSize:13,color:'var(--text-3)',lineHeight:1.55,marginBottom:20}}>Sélectionne au moins 3 styles. On personnalise ta carte et ton feed.</p>
        <div className="interest-grid" style={{flex:1}}>
          {INTERESTS.map(it => (
            <div key={it.id} className={"interest-chip" + (sel.has(it.id) ? ' on' : '')} onClick={() => toggle(it.id)}>
              <div className="interest-chip-icon">{it.icon}</div>
              <div className="interest-chip-lbl">{it.label}</div>
            </div>
          ))}
        </div>
        <button className="phone-cta orange" onClick={onNext} style={{width:'100%',marginTop:18}}>Continuer ({sel.size} sélectionnés)</button>
      </div>
    </>
  );
};

window.SHOT_SCREENS_1 = { StatusBar, TopNav, BottomNav, Icon, AmbianceDot, vibeLabel, SplashScreen, OnboardingScreen, SignupScreen, VerifyScreen, InterestsScreen };
})();
