// Guest mobile app — gostova app za rezervacijo, online check-in, digitalni ključ, room service

function GuestApp({ dark }){
  const [tab, setTab] = React.useState('home');
  return <div style={{height:'100%', display:'flex', flexDirection:'column', background:dark?'#0F1419':'#F8F9FA', color:dark?'#E5E5E5':'#1A1A1A'}}>
    {tab==='home'   && <GuestHome    dark={dark}/>}
    {tab==='key'    && <GuestKey     dark={dark}/>}
    {tab==='order'  && <GuestOrder   dark={dark}/>}
    {tab==='profile'&& <GuestProfile dark={dark}/>}
    <div style={{height:80, paddingBottom:18, background:dark?'#1A1A1A':'#fff', borderTop:`1px solid ${dark?'#2B2B2B':'#F0F0F0'}`, display:'flex'}}>
      {[
        ['home','home','Doma'],
        ['key','key','Ključ'],
        ['order','box','Storitve'],
        ['profile','users','Profil'],
      ].map(([k,ic,l])=>{
        const a=tab===k;
        return <button key={k} onClick={()=>setTab(k)} style={{flex:1, background:'transparent', border:'none', display:'flex', flexDirection:'column', alignItems:'center', gap:3, paddingTop:12, color:a?'#2DD164':(dark?'#9A9A9A':'#707070'), fontFamily:'inherit', cursor:'pointer'}}>
          <HIcon name={ic} size={22}/>
          <div style={{fontSize:10, fontWeight:a?700:500}}>{l}</div>
        </button>;
      })}
    </div>
  </div>;
}

function GuestHome({ dark }){
  const muted = dark?'#9A9A9A':'#707070';
  return <div style={{flex:1, overflowY:'auto'}}>
    <div style={{padding:'24px 20px 20px', background:'linear-gradient(135deg,#00BCD4 0%,#2196F3 50%,#0D47A1 100%)', color:'#fff', borderRadius:'0 0 24px 24px'}}>
      <div style={{fontSize:11, fontWeight:600, letterSpacing:'.1em', textTransform:'uppercase', opacity:.85}}>Dobrodošli</div>
      <div style={{fontFamily:'var(--font-display)', fontSize:24, fontWeight:700, marginTop:4}}>James Schmidt</div>
      <div style={{fontSize:13, opacity:.9, marginTop:2}}>Hotel Triglav Bled · Junior Suite 305</div>
      <div style={{display:'flex', gap:16, marginTop:18, paddingTop:18, borderTop:'1px solid rgba(255,255,255,.2)'}}>
        <div><div style={{fontSize:10, opacity:.8, fontWeight:600, textTransform:'uppercase', letterSpacing:'.08em'}}>Prihod</div><div style={{fontFamily:'var(--font-display)', fontSize:16, fontWeight:700, marginTop:2}}>28. apr</div></div>
        <div style={{width:1, background:'rgba(255,255,255,.2)'}}/>
        <div><div style={{fontSize:10, opacity:.8, fontWeight:600, textTransform:'uppercase', letterSpacing:'.08em'}}>Odhod</div><div style={{fontFamily:'var(--font-display)', fontSize:16, fontWeight:700, marginTop:2}}>4. maj</div></div>
        <div style={{width:1, background:'rgba(255,255,255,.2)'}}/>
        <div><div style={{fontSize:10, opacity:.8, fontWeight:600, textTransform:'uppercase', letterSpacing:'.08em'}}>Noči</div><div style={{fontFamily:'var(--font-display)', fontSize:16, fontWeight:700, marginTop:2}}>6</div></div>
      </div>
    </div>

    <div style={{padding:'20px'}}>
      <button style={{width:'100%', padding:'18px 20px', background:dark?'#1A1A1A':'#fff', border:'none', borderRadius:16, display:'flex', alignItems:'center', gap:14, marginBottom:14, cursor:'pointer', fontFamily:'inherit', textAlign:'left'}}>
        <div style={{width:48, height:48, borderRadius:12, background:'linear-gradient(135deg,#2DD164,#00BCD4)', color:'#fff', display:'flex', alignItems:'center', justifyContent:'center'}}><HIcon name="check" size={22}/></div>
        <div style={{flex:1}}>
          <div style={{fontSize:15, fontWeight:700, color:dark?'#fff':'#1A1A1A'}}>Online check-in</div>
          <div style={{fontSize:12, color:muted, marginTop:2}}>Prihranite čas — uredite check-in v 2 minutah</div>
        </div>
        <HIcon name="chevright" size={16} color={muted}/>
      </button>

      <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:12, marginBottom:14}}>
        {[
          ['key','Digitalni ključ','#2196F3'],
          ['box','Room service','#FF9800'],
          ['cleaning','Housekeeping','#9C27B0'],
          ['headset','Recepcija','#00BCD4'],
        ].map(([ic,l,c])=>
          <button key={l} style={{padding:'18px 14px', background:dark?'#1A1A1A':'#fff', border:'none', borderRadius:14, display:'flex', flexDirection:'column', alignItems:'flex-start', gap:8, cursor:'pointer', fontFamily:'inherit'}}>
            <div style={{width:36, height:36, borderRadius:9, background:c, color:'#fff', display:'flex', alignItems:'center', justifyContent:'center'}}><HIcon name={ic} size={16}/></div>
            <div style={{fontSize:13, fontWeight:600, color:dark?'#fff':'#1A1A1A'}}>{l}</div>
          </button>
        )}
      </div>

      <div style={{padding:'14px 16px', background:dark?'#1A1A1A':'#fff', borderRadius:14, marginBottom:14}}>
        <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:10}}>
          <div style={{fontSize:13, fontWeight:700, color:dark?'#fff':'#1A1A1A'}}>Dobrodošli paket</div>
          <HBadge tone="orange">VIP</HBadge>
        </div>
        <div style={{fontSize:12, color:muted, lineHeight:1.55}}>Sveže cvetje · Jeziki na sredozemski način · Brezplačni wellness vstop · Pozni check-out do 14h</div>
      </div>

      <div style={{fontSize:12, fontWeight:700, color:muted, letterSpacing:'.1em', textTransform:'uppercase', marginBottom:10}}>Doživetja na Bledu</div>
      {[['Vožnja s pletno do otoka','€18 / oseba','#00BCD4'],['Pohod na Mali grad','vodena, 2h','#2DD164'],['Wellness 2h','plačan paket vključen','#FF9800']].map(([n,d,c])=>
        <div key={n} style={{padding:'12px 14px', background:dark?'#1A1A1A':'#fff', borderRadius:12, marginBottom:8, display:'flex', alignItems:'center', gap:10}}>
          <div style={{width:8, height:36, borderRadius:4, background:c}}/>
          <div style={{flex:1}}>
            <div style={{fontSize:13, fontWeight:600, color:dark?'#fff':'#1A1A1A'}}>{n}</div>
            <div style={{fontSize:11, color:muted, marginTop:1}}>{d}</div>
          </div>
          <HIcon name="chevright" size={14} color={muted}/>
        </div>
      )}
    </div>
  </div>;
}

function GuestKey({ dark }){
  const muted = dark?'#9A9A9A':'#707070';
  return <div style={{flex:1, display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', padding:'30px 20px', background: dark?'radial-gradient(ellipse at top, #1F2A36 0%, #0F1419 60%)':'radial-gradient(ellipse at top, #E3F2FD 0%, #F8F9FA 60%)'}}>
    <div style={{fontSize:11, fontWeight:700, color:muted, letterSpacing:'.18em', textTransform:'uppercase', marginBottom:8}}>Vaš digitalni ključ</div>
    <div style={{fontFamily:'var(--font-display)', fontSize:48, fontWeight:800, color:dark?'#fff':'#1A1A1A', letterSpacing:'-0.02em'}}>305</div>
    <div style={{fontSize:13, color:muted, marginBottom:32}}>Junior Suite · 3. nadstropje</div>

    <div style={{width:240, height:240, borderRadius:'50%', background:'linear-gradient(135deg,#00BCD4,#2196F3,#0D47A1)', display:'flex', alignItems:'center', justifyContent:'center', boxShadow:'0 18px 40px rgba(33,150,243,.3)', marginBottom:32, position:'relative'}}>
      <div style={{position:'absolute', inset:14, borderRadius:'50%', border:'2px dashed rgba(255,255,255,.4)'}}/>
      <div style={{textAlign:'center', color:'#fff'}}>
        <HIcon name="key" size={64} color="#fff"/>
        <div style={{fontSize:13, fontWeight:600, marginTop:8, opacity:.95}}>Pridrži ob ključavnico</div>
      </div>
    </div>

    <div style={{width:'100%', maxWidth:320, padding:'14px 18px', background:dark?'#1A1A1A':'#fff', borderRadius:14, fontSize:12}}>
      <div style={{display:'flex', justifyContent:'space-between', padding:'4px 0'}}>
        <span style={{color:muted}}>Veljaven do</span>
        <span style={{fontWeight:700, fontFamily:'var(--font-mono)'}}>04.05.2026 11:00</span>
      </div>
      <div style={{display:'flex', justifyContent:'space-between', padding:'4px 0'}}>
        <span style={{color:muted}}>Dostop</span>
        <span style={{fontWeight:600}}>Soba · Wellness · Garaža</span>
      </div>
      <div style={{display:'flex', justifyContent:'space-between', padding:'4px 0'}}>
        <span style={{color:muted}}>Bluetooth</span>
        <span style={{display:'inline-flex', alignItems:'center', gap:4, color:'#2DD164', fontWeight:600}}><span style={{width:6, height:6, borderRadius:'50%', background:'#2DD164'}}/>Povezano</span>
      </div>
    </div>
  </div>;
}

function GuestOrder({ dark }){
  const muted = dark?'#9A9A9A':'#707070';
  return <div style={{flex:1, overflowY:'auto', padding:'20px'}}>
    <div style={{fontSize:11, fontWeight:600, color:muted, letterSpacing:'.1em', textTransform:'uppercase', marginBottom:6}}>Storitve v sobi</div>
    <div style={{fontFamily:'var(--font-display)', fontSize:24, fontWeight:700, marginBottom:18}}>Kaj potrebujete?</div>

    <div style={{display:'flex', gap:8, marginBottom:18, overflowX:'auto'}}>
      {['Vse','Zajtrk','Glavne jedi','Pijača','Wellness','Pripomočki'].map((c,i)=>
        <button key={c} style={{padding:'7px 14px', fontSize:12, fontWeight:600, fontFamily:'inherit', whiteSpace:'nowrap',
          background: i===0?'#2DD164':(dark?'#1A1A1A':'#fff'), color: i===0?'#fff':(dark?'#E5E5E5':'#1A1A1A'),
          border:`1px solid ${i===0?'#2DD164':(dark?'#2B2B2B':'#E5E5E5')}`, borderRadius:999, cursor:'pointer'}}>{c}</button>
      )}
    </div>

    {[
      ['Kontinentalni zajtrk','Kava, sok, pecivo, džem, sadje','€18','25 min'],
      ['Domač cheeseburger','S krompirčkom in solato','€16','35 min'],
      ['Steklenica šampanjca','Moët & Chandon Brut, 0,75 l','€85','15 min'],
      ['Wellness paket za 2','2× vstop + masaža 30 min','€95','rezervacija'],
      ['Sveže brisače (4 kos)','Dostava v sobo','brez plačila','15 min'],
      ['Posteljica za otroka','Postavitev v sobo','brez plačila','30 min'],
    ].map(([n,d,p,t])=>
      <div key={n} style={{padding:'14px', background:dark?'#1A1A1A':'#fff', borderRadius:12, marginBottom:10, display:'flex', alignItems:'center', gap:12}}>
        <div style={{width:48, height:48, borderRadius:10, background:dark?'#2B2B2B':'#F5F5F5', display:'flex', alignItems:'center', justifyContent:'center'}}><HIcon name="box" size={20} color={muted}/></div>
        <div style={{flex:1, minWidth:0}}>
          <div style={{fontSize:14, fontWeight:600, color:dark?'#fff':'#1A1A1A'}}>{n}</div>
          <div style={{fontSize:11, color:muted, marginTop:2}}>{d}</div>
          <div style={{fontSize:11, color:muted, marginTop:4, display:'flex', gap:8}}><span style={{fontWeight:700, color:p.startsWith('€')?'#2196F3':'#2DD164'}}>{p}</span> · <span>{t}</span></div>
        </div>
        <button style={{width:32, height:32, borderRadius:'50%', background:'#2DD164', color:'#fff', border:'none', cursor:'pointer', display:'flex', alignItems:'center', justifyContent:'center'}}><HIcon name="plus" size={16}/></button>
      </div>
    )}
  </div>;
}

function GuestProfile({ dark }){
  const muted = dark?'#9A9A9A':'#707070';
  return <div style={{flex:1, overflowY:'auto', padding:'24px 20px'}}>
    <div style={{textAlign:'center', marginBottom:24}}>
      <div style={{width:80, height:80, borderRadius:'50%', background:'linear-gradient(135deg,#00BCD4,#2196F3)', color:'#fff', display:'flex', alignItems:'center', justifyContent:'center', fontFamily:'var(--font-display)', fontWeight:700, fontSize:30, margin:'0 auto 12px'}}>JS</div>
      <div style={{fontFamily:'var(--font-display)', fontSize:22, fontWeight:700}}>James Schmidt</div>
      <div style={{fontSize:13, color:muted, marginTop:2}}>VIP · 4. bivanje</div>
    </div>

    <div style={{padding:'14px 16px', background:'linear-gradient(135deg,#FFB74D,#FF9800)', color:'#fff', borderRadius:14, marginBottom:18}}>
      <div style={{fontSize:11, fontWeight:700, letterSpacing:'.1em', textTransform:'uppercase', opacity:.9}}>Triglav Club Gold</div>
      <div style={{fontFamily:'var(--font-display)', fontSize:20, fontWeight:700, marginTop:4}}>2.480 točk</div>
      <div style={{fontSize:12, opacity:.9, marginTop:4}}>Še 520 do Platinum statusa</div>
    </div>

    {['Moja bivanja','Računi in DDV','Plačilna sredstva','Preference','Komunikacija','Pravna obvestila','Odjava'].map((l,i)=>
      <button key={l} style={{display:'flex', justifyContent:'space-between', alignItems:'center', width:'100%', padding:'14px 16px', background:dark?'#1A1A1A':'#fff', border:'none', borderRadius:12, marginBottom:8, fontSize:14, fontWeight:500, fontFamily:'inherit', color:i===6?'#E53935':(dark?'#fff':'#1A1A1A'), cursor:'pointer'}}>
        {l} <HIcon name="chevright" size={14} color={muted}/>
      </button>
    )}
  </div>;
}

Object.assign(window, { GuestApp });