// Hotel onboarding wizard — multi-step registration to onboard a new hotel onto clickinPMS

function OnboardingWizard(){
  const [step, setStep] = React.useState(0);
  const [data, setData] = React.useState({
    hotelName:'Hotel Triglav', city:'Bled', country:'Slovenija', taxId:'SI12345678',
    plan:'Growth', rooms:48, currency:'EUR', vat:'9,5%',
    pms:'clickinPMS', channels:['booking','airbnb'],
    paymentMethods:['card','cash','transfer'],
    primaryColor:'#0097A7',
    inviteEmails:'',
    timezone:'Europe/Ljubljana', language:'sl',
  });

  const set = (k,v)=>setData(d=>({...d,[k]:v}));
  const toggle = (k,v)=>setData(d=>({...d,[k]:d[k].includes(v)?d[k].filter(x=>x!==v):[...d[k],v]}));

  const steps = [
    {id:'welcome', title:'Dobrodošli', sub:'Postavili bomo vaš hotel v 5 minutah.'},
    {id:'hotel',   title:'Osnovni podatki', sub:'Povejte nam nekaj o vašem hotelu.'},
    {id:'plan',    title:'Naročniški paket', sub:'Izberite paket, ki ustreza vaši velikosti.'},
    {id:'rooms',   title:'Sobe in tipi', sub:'Konfigurirajmo vaš inventar.'},
    {id:'finance', title:'Finance in računi', sub:'Plačila, davki in valute.'},
    {id:'channels',title:'Prodajni kanali', sub:'Povežite Booking, Airbnb in ostale.'},
    {id:'team',    title:'Ekipa', sub:'Povabite kolege.'},
    {id:'brand',   title:'Vizualna identiteta', sub:'Logo in barve za goste.'},
    {id:'done',    title:'Vse pripravljeno!', sub:'Vaš hotel je nared za prvo rezervacijo.'},
  ];
  const cur = steps[step];
  const progress = (step / (steps.length-1)) * 100;

  return <div style={{minHeight:'100vh', display:'flex', flexDirection:'column', background:'#F8F9FA'}}>
    {/* Top bar */}
    <div style={{padding:'18px 32px', borderBottom:'1px solid #E5E5E5', background:'#fff', display:'flex', alignItems:'center', justifyContent:'space-between'}}>
      <img src="assets/logo-clickinpms.svg" style={{height:24}}/>
      <div style={{display:'flex', alignItems:'center', gap:12}}>
        <div style={{fontSize:12, color:'#707070'}}>Korak {step+1} / {steps.length}</div>
        <button style={{padding:'6px 12px', background:'transparent', border:'1px solid #E5E5E5', borderRadius:6, fontSize:12, fontFamily:'inherit', cursor:'pointer', color:'#4D4D4D'}}>Shrani in nadaljuj kasneje</button>
      </div>
    </div>

    {/* Progress bar */}
    <div style={{height:4, background:'#F0F0F0'}}>
      <div style={{height:'100%', width:`${progress}%`, background:'linear-gradient(90deg,#00BCD4,#0097A7)', transition:'width 300ms'}}/>
    </div>

    {/* Stepper */}
    <div style={{padding:'18px 32px', background:'#fff', borderBottom:'1px solid #F0F0F0', display:'flex', gap:0, overflowX:'auto'}}>
      {steps.map((s,i)=>{
        const a = i===step, d = i<step;
        return <div key={s.id} style={{flex:'0 0 auto', display:'flex', alignItems:'center', gap:8, paddingRight:24}}>
          <div style={{width:26, height:26, borderRadius:'50%', background:d?'#2DD164':a?'#0097A7':'#F0F0F0', color:d||a?'#fff':'#9A9A9A', display:'flex', alignItems:'center', justifyContent:'center', fontSize:12, fontWeight:700}}>
            {d ? <HIcon name="check" size={12}/> : i+1}
          </div>
          <div style={{fontSize:12, fontWeight:a?700:500, color:a?'#1A1A1A':d?'#4D4D4D':'#9A9A9A', whiteSpace:'nowrap'}}>{s.title}</div>
          {i<steps.length-1 && <div style={{width:32, height:1, background:d?'#2DD164':'#E5E5E5', marginLeft:8}}/>}
        </div>;
      })}
    </div>

    {/* Content */}
    <div style={{flex:1, padding:'40px 32px', display:'flex', alignItems:'flex-start', justifyContent:'center'}}>
      <div style={{width:'100%', maxWidth:cur.id==='welcome'||cur.id==='done'?640:880}}>
        {cur.id==='welcome' && <StepWelcome onNext={()=>setStep(1)}/>}
        {cur.id==='hotel'   && <StepHotel data={data} set={set}/>}
        {cur.id==='plan'    && <StepPlan data={data} set={set}/>}
        {cur.id==='rooms'   && <StepRooms data={data} set={set}/>}
        {cur.id==='finance' && <StepFinance data={data} set={set}/>}
        {cur.id==='channels'&& <StepChannels data={data} toggle={toggle}/>}
        {cur.id==='team'    && <StepTeam data={data} set={set}/>}
        {cur.id==='brand'   && <StepBrand data={data} set={set}/>}
        {cur.id==='done'    && <StepDone data={data}/>}
      </div>
    </div>

    {/* Footer */}
    {cur.id!=='welcome' && <div style={{padding:'18px 32px', borderTop:'1px solid #E5E5E5', background:'#fff', display:'flex', justifyContent:'space-between', alignItems:'center'}}>
      <button onClick={()=>setStep(Math.max(0,step-1))} style={{padding:'10px 20px', background:'transparent', border:'1px solid #E5E5E5', borderRadius:6, fontSize:13, fontWeight:600, fontFamily:'inherit', cursor:'pointer', color:'#4D4D4D'}}>← Nazaj</button>
      <div style={{display:'flex', gap:10}}>
        {cur.id!=='done' && <button style={{padding:'10px 20px', background:'transparent', border:'none', fontSize:13, fontWeight:500, fontFamily:'inherit', cursor:'pointer', color:'#9A9A9A'}}>Preskoči</button>}
        <button onClick={()=>setStep(Math.min(steps.length-1, step+1))} style={{padding:'10px 24px', background:cur.id==='done'?'#2DD164':'linear-gradient(135deg,#00BCD4,#0097A7)', color:'#fff', border:'none', borderRadius:6, fontSize:13, fontWeight:700, fontFamily:'inherit', cursor:'pointer'}}>
          {cur.id==='done'?'Odpri konzolo →':step===steps.length-2?'Zaključi nastavitve →':'Naprej →'}
        </button>
      </div>
    </div>}
  </div>;
}

// ─────────────────────────────────────────────────────────────────────────
// Steps
// ─────────────────────────────────────────────────────────────────────────

function StepWelcome({ onNext }){
  return <div style={{textAlign:'center', padding:'40px 0'}}>
    <div style={{width:96, height:96, borderRadius:24, background:'linear-gradient(135deg,#00BCD4,#0097A7)', color:'#fff', display:'flex', alignItems:'center', justifyContent:'center', margin:'0 auto 24px', fontFamily:'var(--font-display)', fontSize:38, fontWeight:800}}>👋</div>
    <h1 style={{fontFamily:'var(--font-display)', fontSize:36, fontWeight:800, letterSpacing:'-0.02em', margin:0}}>Pozdravljeni v clickinPMS</h1>
    <p style={{fontSize:15, color:'#4D4D4D', lineHeight:1.6, marginTop:14, marginBottom:36}}>Postavili bomo vaš hotel na platformo v 8 korakih — 5 do 7 minut. Vsa polja lahko kasneje uredite.</p>
    <div style={{display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:14, marginBottom:32, textAlign:'left'}}>
      {[
        ['settings','Konfiguriramo','sobe, cene, davke'],
        ['link','Povežemo','Booking, Airbnb, plačilne sisteme'],
        ['users','Povabimo','vašo recepcijo in housekeeping'],
      ].map(([ic,a,b])=>
        <div key={a} style={{padding:'18px', background:'#fff', borderRadius:12, border:'1px solid #F0F0F0'}}>
          <div style={{width:36, height:36, borderRadius:9, background:'#E0F7FA', color:'#0097A7', display:'flex', alignItems:'center', justifyContent:'center', marginBottom:10}}><HIcon name={ic} size={18}/></div>
          <div style={{fontSize:14, fontWeight:700}}>{a}</div>
          <div style={{fontSize:12, color:'#707070', marginTop:2}}>{b}</div>
        </div>
      )}
    </div>
    <button onClick={onNext} style={{padding:'14px 32px', background:'linear-gradient(135deg,#00BCD4,#0097A7)', color:'#fff', border:'none', borderRadius:8, fontSize:14, fontWeight:700, fontFamily:'inherit', cursor:'pointer'}}>Začnimo →</button>
    <div style={{fontSize:11, color:'#9A9A9A', marginTop:18}}>Potrebujete pomoč? Pišite nam na <a href="#" style={{color:'#0097A7', fontWeight:600}}>onboarding@clickinpms.com</a></div>
  </div>;
}

function StepHeader({ title, sub }){
  return <div style={{marginBottom:28}}>
    <div style={{fontSize:11, fontWeight:700, color:'#0097A7', letterSpacing:'.18em', textTransform:'uppercase'}}>Onboarding</div>
    <h1 style={{fontFamily:'var(--font-display)', fontSize:30, fontWeight:700, letterSpacing:'-0.02em', margin:'6px 0 4px'}}>{title}</h1>
    <p style={{fontSize:14, color:'#707070', margin:0}}>{sub}</p>
  </div>;
}

const Field = ({label, hint, children}) => <label style={{display:'block', marginBottom:16}}>
  <div style={{fontSize:12, fontWeight:600, color:'#4D4D4D', marginBottom:6}}>{label}</div>
  {children}
  {hint && <div style={{fontSize:11, color:'#9A9A9A', marginTop:6}}>{hint}</div>}
</label>;
const Input = (p) => <input {...p} style={{width:'100%', padding:'10px 12px', fontSize:14, fontFamily:'inherit', border:'1px solid #E5E5E5', borderRadius:6, outline:'none', background:'#fff', ...p.style}}/>;

function StepHotel({ data, set }){
  return <div>
    <StepHeader title="Osnovni podatki o hotelu" sub="Te informacije se uporabljajo za račune, prijavo gostov in komunikacijo."/>
    <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:24}}>
      <div>
        <Field label="Ime hotela"><Input value={data.hotelName} onChange={e=>set('hotelName', e.target.value)}/></Field>
        <Field label="Naslov"><Input defaultValue="Cesta svobode 12, 4260 Bled"/></Field>
        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:12}}>
          <Field label="Mesto"><Input value={data.city} onChange={e=>set('city',e.target.value)}/></Field>
          <Field label="Država"><Input value={data.country} onChange={e=>set('country',e.target.value)}/></Field>
        </div>
        <Field label="Davčna številka" hint="Uporabljena za račune in DDV poročanje"><Input value={data.taxId} onChange={e=>set('taxId',e.target.value)}/></Field>
      </div>
      <div>
        <Field label="Tip nastanitve">
          <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:8}}>
            {[['hotel','Hotel'],['apt','Apartmaji'],['camp','Kamp'],['mix','Mix']].map(([k,l],i)=>
              <button key={k} style={{padding:'14px', background:i===0?'#E0F7FA':'#fff', border:`2px solid ${i===0?'#0097A7':'#E5E5E5'}`, borderRadius:8, fontSize:13, fontWeight:600, fontFamily:'inherit', cursor:'pointer', color:i===0?'#006064':'#4D4D4D'}}>{l}</button>
            )}
          </div>
        </Field>
        <Field label="Število sob"><Input type="number" value={data.rooms} onChange={e=>set('rooms', +e.target.value)}/></Field>
        <Field label="Časovni pas"><Input value={data.timezone} onChange={e=>set('timezone',e.target.value)}/></Field>
        <Field label="Privzeti jezik">
          <div style={{display:'flex', gap:6}}>
            {['sl','en','de','it','hr'].map(l=>
              <button key={l} onClick={()=>set('language',l)} style={{padding:'8px 14px', background:data.language===l?'#0097A7':'#fff', color:data.language===l?'#fff':'#4D4D4D', border:`1px solid ${data.language===l?'#0097A7':'#E5E5E5'}`, borderRadius:6, fontSize:12, fontWeight:700, fontFamily:'inherit', textTransform:'uppercase', cursor:'pointer'}}>{l}</button>
            )}
          </div>
        </Field>
      </div>
    </div>
  </div>;
}

function StepPlan({ data, set }){
  const plans = [
    {id:'Starter', price:79, rooms:'do 20 sob', features:['1 prodajni kanal','Email podpora','Osnovni dashboard']},
    {id:'Growth',  price:189, rooms:'do 80 sob', features:['Neomejeni kanali','Channel manager','Self check-in kiosk','Telefon + email','Mobile aplikacije'], best:true},
    {id:'Scale',   price:389, rooms:'neomejeno', features:['Vse iz Growth','Multi-property','API dostop','24/7 podpora','Dedicated account manager']},
  ];
  return <div>
    <StepHeader title="Izberite naročniški paket" sub="Mesečno plačilo, brez vezav. Paket lahko kadarkoli zamenjate."/>
    <div style={{display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:14}}>
      {plans.map(p=>{
        const a = data.plan===p.id;
        return <button key={p.id} onClick={()=>set('plan',p.id)} style={{padding:'24px', background:a?'#fff':'#fff', border:`2px solid ${a?'#0097A7':'#E5E5E5'}`, borderRadius:14, textAlign:'left', cursor:'pointer', fontFamily:'inherit', position:'relative', boxShadow:a?'0 8px 24px rgba(0,151,167,.15)':'none'}}>
          {p.best && <div style={{position:'absolute', top:-10, right:14, padding:'3px 10px', background:'#FF9800', color:'#fff', borderRadius:999, fontSize:10, fontWeight:700, letterSpacing:'.08em', textTransform:'uppercase'}}>Najbolj priljubljeno</div>}
          <div style={{fontSize:11, fontWeight:700, color:'#0097A7', letterSpacing:'.1em', textTransform:'uppercase'}}>{p.id}</div>
          <div style={{display:'flex', alignItems:'baseline', gap:4, marginTop:8}}>
            <div style={{fontFamily:'var(--font-display)', fontSize:36, fontWeight:800, letterSpacing:'-0.02em'}}>€{p.price}</div>
            <div style={{fontSize:13, color:'#9A9A9A'}}>/mesec</div>
          </div>
          <div style={{fontSize:12, color:'#707070', marginBottom:14}}>{p.rooms}</div>
          <div style={{borderTop:'1px solid #F0F0F0', paddingTop:14}}>
            {p.features.map(f=>
              <div key={f} style={{display:'flex', alignItems:'center', gap:8, fontSize:12, color:'#4D4D4D', marginBottom:6}}>
                <HIcon name="check" size={12} color="#2DD164"/>{f}
              </div>
            )}
          </div>
          <div style={{marginTop:18, padding:'10px', background:a?'#0097A7':'#F5F5F5', color:a?'#fff':'#4D4D4D', borderRadius:6, fontSize:12, fontWeight:700, textAlign:'center'}}>{a?'Izbrano ✓':'Izberi'}</div>
        </button>;
      })}
    </div>
    <div style={{marginTop:20, padding:'14px 18px', background:'#E0F7FA', borderRadius:10, fontSize:13, color:'#006064', borderLeft:'3px solid #0097A7'}}>
      <b>Prvih 30 dni brezplačno</b> · Preizkusite katerikoli paket — brez kartice, brez obveznosti.
    </div>
  </div>;
}

function StepRooms({ data, set }){
  const [types,setTypes] = React.useState([
    {n:'Standard Double', count:24, price:120},
    {n:'Junior Suite',    count:14, price:185},
    {n:'Executive Suite', count:6,  price:280},
    {n:'Družinska soba',  count:4,  price:220},
  ]);
  return <div>
    <StepHeader title="Sobe in tipi" sub="Konfigurirajmo inventar. Cene in razpoložljivost lahko spreminjate kadarkoli."/>
    <div style={{background:'#fff', border:'1px solid #E5E5E5', borderRadius:12, overflow:'hidden'}}>
      <div style={{display:'grid', gridTemplateColumns:'2fr 1fr 1fr 1fr 60px', gap:14, padding:'12px 18px', background:'#F8F9FA', fontSize:11, fontWeight:700, color:'#707070', letterSpacing:'.08em', textTransform:'uppercase'}}>
        <div>Tip sobe</div><div>Število</div><div>Osnovna cena</div><div>Sezonska cena</div><div></div>
      </div>
      {types.map((t,i)=>
        <div key={t.n} style={{display:'grid', gridTemplateColumns:'2fr 1fr 1fr 1fr 60px', gap:14, padding:'14px 18px', borderTop:'1px solid #F0F0F0', alignItems:'center'}}>
          <div style={{fontSize:14, fontWeight:600}}>{t.n}</div>
          <Input defaultValue={t.count} style={{padding:'6px 10px'}}/>
          <Input defaultValue={`€${t.price}`} style={{padding:'6px 10px'}}/>
          <Input defaultValue={`€${Math.round(t.price*1.4)}`} style={{padding:'6px 10px'}}/>
          <button style={{background:'transparent', border:'none', cursor:'pointer', color:'#9A9A9A', display:'flex', justifyContent:'center'}}><HIcon name="x" size={16}/></button>
        </div>
      )}
      <button style={{width:'100%', padding:'12px', background:'#F8F9FA', border:'none', borderTop:'1px dashed #E5E5E5', fontSize:13, fontWeight:600, color:'#0097A7', fontFamily:'inherit', cursor:'pointer'}}>+ Dodaj tip sobe</button>
    </div>
    <div style={{marginTop:18, padding:'14px 18px', background:'#FFF8E1', borderRadius:10, fontSize:13, color:'#E65100', borderLeft:'3px solid #FF9800'}}>
      💡 Imate seznam sob v Excelu? <a href="#" style={{color:'#E65100', fontWeight:700, textDecoration:'underline'}}>Naložite ga</a> — uvozimo namesto vas.
    </div>
  </div>;
}

function StepFinance({ data, set }){
  return <div>
    <StepHeader title="Finance, davki in plačila" sub="Nastavili bomo račune, DDV in plačilne sisteme."/>
    <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:24}}>
      <div>
        <Field label="Valuta">
          <div style={{display:'flex', gap:6}}>
            {['EUR','USD','HRK','CHF'].map(c=><button key={c} onClick={()=>set('currency',c)} style={{padding:'10px 18px', background:data.currency===c?'#0097A7':'#fff', color:data.currency===c?'#fff':'#4D4D4D', border:`1px solid ${data.currency===c?'#0097A7':'#E5E5E5'}`, borderRadius:6, fontSize:13, fontWeight:700, fontFamily:'inherit', cursor:'pointer'}}>{c}</button>)}
          </div>
        </Field>
        <Field label="DDV stopnja za nastanitev"><Input value={data.vat} onChange={e=>set('vat',e.target.value)}/></Field>
        <Field label="Turistična taksa" hint="Po slovenskem pravilniku za destinacijo Bled"><Input defaultValue="€2,50 / oseba / noč"/></Field>
        <Field label="Številčenje računov" hint="2026-XXXXX, ponastavi se 1.1.2027"><Input defaultValue="2026-00001"/></Field>
      </div>
      <div>
        <Field label="Sprejemljivi načini plačila">
          {[
            ['card','Kreditna kartica','Stripe / Adyen'],
            ['cash','Gotovina','Davčne blagajne integrirane'],
            ['transfer','Bančno nakazilo','SEPA'],
            ['gift','Darilni boni','Lasten sistem'],
            ['paypal','PayPal','Beta'],
          ].map(([k,l,d])=>{
            const a = data.paymentMethods.includes(k);
            return <div key={k} onClick={()=>set('paymentMethods', a ? data.paymentMethods.filter(x=>x!==k) : [...data.paymentMethods,k])} style={{padding:'12px 14px', background:a?'#E0F7FA':'#fff', border:`2px solid ${a?'#0097A7':'#E5E5E5'}`, borderRadius:8, marginBottom:8, cursor:'pointer', display:'flex', alignItems:'center', gap:12}}>
              <div style={{width:20, height:20, borderRadius:5, background:a?'#0097A7':'transparent', border:`2px solid ${a?'#0097A7':'#9A9A9A'}`, color:'#fff', display:'flex', alignItems:'center', justifyContent:'center'}}>{a && <HIcon name="check" size={12}/>}</div>
              <div style={{flex:1}}>
                <div style={{fontSize:13, fontWeight:600, color:a?'#006064':'#1A1A1A'}}>{l}</div>
                <div style={{fontSize:11, color:'#707070'}}>{d}</div>
              </div>
            </div>;
          })}
        </Field>
      </div>
    </div>
  </div>;
}

function StepChannels({ data, toggle }){
  const channels = [
    {id:'booking',  n:'Booking.com', d:'Največji OTA za EU trg',          fee:'15% provizija',     col:'#003580'},
    {id:'airbnb',   n:'Airbnb',      d:'Idealen za apartmaje in butike',  fee:'3% + 14% gosta',   col:'#FF5A5F'},
    {id:'expedia',  n:'Expedia',     d:'Mednarodni gosti, ZDA in DACH',   fee:'10–18% provizija', col:'#FFC72C'},
    {id:'hrs',      n:'HRS',         d:'Poslovni gosti v DACH',           fee:'10% provizija',    col:'#003E7E'},
    {id:'agoda',    n:'Agoda',       d:'Azijski trg',                     fee:'15% provizija',    col:'#5B2D8C'},
    {id:'tripadvisor', n:'TripAdvisor Plus', d:'Premium nišni gosti',     fee:'12% provizija',    col:'#34E0A1'},
  ];
  return <div>
    <StepHeader title="Prodajni kanali" sub="Po končanem onboardingu bo naša ekipa povezala kanale namesto vas — brez stresa."/>
    <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:14}}>
      {channels.map(c=>{
        const a = data.channels.includes(c.id);
        return <div key={c.id} onClick={()=>toggle('channels', c.id)} style={{padding:'18px', background:'#fff', border:`2px solid ${a?'#0097A7':'#E5E5E5'}`, borderRadius:12, cursor:'pointer', display:'flex', gap:14, alignItems:'center'}}>
          <div style={{width:48, height:48, borderRadius:10, background:c.col, color:'#fff', display:'flex', alignItems:'center', justifyContent:'center', fontFamily:'var(--font-display)', fontWeight:800, fontSize:18, flexShrink:0}}>{c.n[0]}</div>
          <div style={{flex:1}}>
            <div style={{display:'flex', alignItems:'center', gap:8}}>
              <div style={{fontSize:14, fontWeight:700}}>{c.n}</div>
              {a && <HBadge tone="success">Povezano</HBadge>}
            </div>
            <div style={{fontSize:12, color:'#707070', marginTop:2}}>{c.d}</div>
            <div style={{fontSize:11, color:'#9A9A9A', marginTop:4, fontFamily:'var(--font-mono)'}}>{c.fee}</div>
          </div>
          <div style={{width:24, height:24, borderRadius:'50%', background:a?'#2DD164':'transparent', border:`2px solid ${a?'#2DD164':'#9A9A9A'}`, color:'#fff', display:'flex', alignItems:'center', justifyContent:'center'}}>
            {a && <HIcon name="check" size={12}/>}
          </div>
        </div>;
      })}
    </div>
  </div>;
}

function StepTeam({ data, set }){
  const [team,setTeam] = React.useState([
    {email:'recepcija@triglavbled.si', role:'Receptionist'},
    {email:'sef@triglavbled.si',       role:'Manager'},
  ]);
  const [next,setNext] = React.useState({email:'', role:'Receptionist'});
  const roles = ['Receptionist','Manager','Housekeeping','IT','Manager','Računovodstvo'];
  return <div>
    <StepHeader title="Povabite ekipo" sub="Pošljemo jim email z navodili za prijavo in 2FA."/>
    <div style={{background:'#fff', border:'1px solid #E5E5E5', borderRadius:12, overflow:'hidden', marginBottom:18}}>
      {team.map((m,i)=>
        <div key={m.email} style={{display:'flex', alignItems:'center', gap:14, padding:'14px 18px', borderTop:i>0?'1px solid #F0F0F0':'none'}}>
          <div style={{width:36, height:36, borderRadius:'50%', background:'#0097A7', color:'#fff', display:'flex', alignItems:'center', justifyContent:'center', fontWeight:700, fontSize:13}}>{m.email[0].toUpperCase()}</div>
          <div style={{flex:1}}>
            <div style={{fontSize:13, fontWeight:600}}>{m.email}</div>
            <div style={{fontSize:11, color:'#707070'}}>{m.role}</div>
          </div>
          <HBadge tone="warning">Pošljemo vabilo</HBadge>
          <button onClick={()=>setTeam(team.filter((_,j)=>j!==i))} style={{background:'transparent', border:'none', cursor:'pointer', color:'#9A9A9A', display:'flex'}}><HIcon name="x" size={16}/></button>
        </div>
      )}
      <div style={{display:'flex', gap:8, padding:'14px 18px', borderTop:'1px solid #F0F0F0', background:'#F8F9FA'}}>
        <Input placeholder="email@vaš-hotel.si" value={next.email} onChange={e=>setNext({...next, email:e.target.value})} style={{flex:1}}/>
        <select value={next.role} onChange={e=>setNext({...next, role:e.target.value})} style={{padding:'10px 12px', fontSize:13, fontFamily:'inherit', border:'1px solid #E5E5E5', borderRadius:6}}>
          {roles.map(r=><option key={r}>{r}</option>)}
        </select>
        <button onClick={()=>{ if(!next.email) return; setTeam([...team, next]); setNext({email:'', role:'Receptionist'});}} style={{padding:'10px 18px', background:'#0097A7', color:'#fff', border:'none', borderRadius:6, fontSize:13, fontWeight:700, fontFamily:'inherit', cursor:'pointer'}}>+ Povabi</button>
      </div>
    </div>
    <div style={{padding:'14px 18px', background:'#F0F4F8', borderRadius:10, fontSize:13, color:'#4D4D4D'}}>
      Skupna cena: <b>2 vabila</b> · brez doplačila do <b>{data.plan==='Scale'?'∞':data.plan==='Growth'?'15':'5'} uporabnikov</b> v paketu {data.plan}.
    </div>
  </div>;
}

function StepBrand({ data, set }){
  const colors = ['#0097A7','#0D47A1','#9C27B0','#E53935','#FF9800','#2DD164','#1A1A1A'];
  return <div>
    <StepHeader title="Vaša vizualna identiteta" sub="Logo in barva se uporabljata na guest portalu, emailih in računih."/>
    <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:32}}>
      <div>
        <Field label="Logo hotela">
          <div style={{padding:'40px', background:'#fff', border:'2px dashed #E5E5E5', borderRadius:12, textAlign:'center', cursor:'pointer'}}>
            <div style={{width:48, height:48, borderRadius:12, background:'#F0F4F8', color:'#9A9A9A', display:'flex', alignItems:'center', justifyContent:'center', margin:'0 auto 10px'}}><HIcon name="box" size={20}/></div>
            <div style={{fontSize:13, fontWeight:600, color:'#4D4D4D'}}>Povleci sem ali izberi datoteko</div>
            <div style={{fontSize:11, color:'#9A9A9A', marginTop:4}}>SVG, PNG · do 2 MB · transparentno ozadje priporočeno</div>
          </div>
        </Field>
        <Field label="Primarna barva">
          <div style={{display:'flex', gap:8, flexWrap:'wrap'}}>
            {colors.map(c=>
              <button key={c} onClick={()=>set('primaryColor',c)} style={{width:42, height:42, borderRadius:10, background:c, border:data.primaryColor===c?'3px solid #1A1A1A':'1px solid #E5E5E5', cursor:'pointer'}}/>
            )}
            <div style={{display:'flex', alignItems:'center', gap:6}}>
              <input type="color" value={data.primaryColor} onChange={e=>set('primaryColor',e.target.value)} style={{width:42, height:42, border:'none', borderRadius:10, cursor:'pointer'}}/>
              <span style={{fontSize:11, color:'#9A9A9A'}}>Po meri</span>
            </div>
          </div>
        </Field>
        <Field label="Domena za guest portal" hint="Privzeto: yourhotel.clickin.io · po želji povežemo lasten domain."><Input defaultValue="triglavbled.clickin.io"/></Field>
      </div>
      <div>
        <div style={{fontSize:12, fontWeight:600, color:'#4D4D4D', marginBottom:6}}>Predogled gostovega emaila</div>
        <div style={{background:'#fff', border:'1px solid #E5E5E5', borderRadius:12, overflow:'hidden'}}>
          <div style={{padding:'18px 20px', background:data.primaryColor, color:'#fff'}}>
            <div style={{fontFamily:'var(--font-display)', fontSize:18, fontWeight:700}}>{data.hotelName}</div>
            <div style={{fontSize:12, opacity:.85, marginTop:2}}>Potrdilo rezervacije · #BK-2026-04-1024</div>
          </div>
          <div style={{padding:'24px 20px'}}>
            <div style={{fontSize:14, color:'#1A1A1A', marginBottom:14}}>Pozdravljeni James,</div>
            <div style={{fontSize:13, color:'#4D4D4D', lineHeight:1.6, marginBottom:18}}>Veseli nas, da ste izbrali {data.hotelName}. Vaša rezervacija je potrjena. Veselimo se vašega obiska 28. aprila.</div>
            <div style={{padding:'14px', background:'#F8F9FA', borderRadius:10, fontSize:13}}>
              <div style={{display:'flex', justifyContent:'space-between', padding:'4px 0'}}><span style={{color:'#707070'}}>Soba</span><b>305 · Junior Suite</b></div>
              <div style={{display:'flex', justifyContent:'space-between', padding:'4px 0'}}><span style={{color:'#707070'}}>Datum</span><b>28.04 — 04.05</b></div>
              <div style={{display:'flex', justifyContent:'space-between', padding:'4px 0'}}><span style={{color:'#707070'}}>Skupaj</span><b>€1.110,00</b></div>
            </div>
            <button style={{marginTop:14, padding:'10px 18px', background:data.primaryColor, color:'#fff', border:'none', borderRadius:6, fontSize:13, fontWeight:700}}>Online check-in →</button>
          </div>
        </div>
      </div>
    </div>
  </div>;
}

function StepDone({ data }){
  return <div style={{textAlign:'center', padding:'30px 0'}}>
    <div style={{width:96, height:96, borderRadius:'50%', background:'#2DD164', color:'#fff', display:'flex', alignItems:'center', justifyContent:'center', margin:'0 auto 24px'}}><HIcon name="check" size={48}/></div>
    <h1 style={{fontFamily:'var(--font-display)', fontSize:36, fontWeight:800, letterSpacing:'-0.02em', margin:0}}>Pripravljeno! 🎉</h1>
    <p style={{fontSize:15, color:'#4D4D4D', lineHeight:1.6, marginTop:14, marginBottom:30}}>{data.hotelName} je nastavljen in pripravljen sprejemati rezervacije.<br/>Naša onboarding ekipa vas bo poklicala v 24 urah.</p>
    <div style={{display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:14, textAlign:'left', marginBottom:32}}>
      {[
        ['settings', `${data.rooms} sob`, 'konfigurirano'],
        ['link', `${data.channels.length} kanalov`, 'pripravljenih za sinhronizacijo'],
        ['users', '2 uporabnika', 'povabljena'],
      ].map(([ic,a,b])=>
        <div key={a} style={{padding:'18px', background:'#F0FDF4', borderRadius:12, border:'1px solid #DCFCE7'}}>
          <div style={{width:36, height:36, borderRadius:9, background:'#2DD164', color:'#fff', display:'flex', alignItems:'center', justifyContent:'center', marginBottom:10}}><HIcon name={ic} size={18}/></div>
          <div style={{fontSize:14, fontWeight:700, color:'#1A1A1A'}}>{a}</div>
          <div style={{fontSize:12, color:'#15803D', marginTop:2}}>{b}</div>
        </div>
      )}
    </div>
    <div style={{padding:'18px 24px', background:'#fff', border:'1px solid #E5E5E5', borderRadius:12, textAlign:'left', display:'flex', alignItems:'center', gap:14}}>
      <div style={{width:48, height:48, borderRadius:'50%', background:'linear-gradient(135deg,#FF9800,#F57C00)', color:'#fff', display:'flex', alignItems:'center', justifyContent:'center', fontWeight:700, fontFamily:'var(--font-display)'}}>NK</div>
      <div style={{flex:1}}>
        <div style={{fontSize:13, fontWeight:700}}>Nina Kovač · Vaš onboarding manager</div>
        <div style={{fontSize:12, color:'#707070', marginTop:1}}>Pomaga vam s postavitvijo prvih rezervacij in povezovanjem kanalov.</div>
      </div>
      <button style={{padding:'9px 16px', background:'#0097A7', color:'#fff', border:'none', borderRadius:6, fontSize:12, fontWeight:700, fontFamily:'inherit'}}>Termin v koledarju →</button>
    </div>
  </div>;
}

Object.assign(window, { OnboardingWizard });