// clickinPMS Kiosk — shared primitives (flex-based layout)
// Portrait 1080×1920 target. Every screen composes via <KioskShell>:
//   - fixed top chrome  (logo + language pills)
//   - vertical content column that FLOWS; gaps controlled by design tokens
//   - fixed bottom action row (primary CTA + optional back, always at safe-area)
// No more hand-placed `top: 480px` — content centers and flows.

// Design tokens for kiosk layout (all relative to 1080×1920 canvas)
const KIOSK = {
  W: 1080,
  H: 1920,
  safeTop: 200,        // below logo + lang pills
  safeBottom: 200,     // above bottom CTA row
  gutter: 80,
  stackGap: 48,        // default gap between stacked items
  fieldGap: 24,        // grid gap within clusters
};

function KioskShell({ children, hideLang, lang='SI', onLangChange }) {
  return (
    <div data-kiosk style={{
      position:'relative', width:KIOSK.W, height:KIOSK.H, overflow:'hidden',
      background:'url(assets/kiosk-bg.png) center/cover',
      fontFamily:'Outfit, Plus Jakarta Sans, system-ui, sans-serif', color:'#fff',
      display:'flex', flexDirection:'column',
    }}>
      {/* photo protection gradient */}
      <div style={{
        position:'absolute', inset:0,
        background:'linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.15) 22%, rgba(0,0,0,.15) 72%, rgba(0,0,0,.60) 100%)',
        pointerEvents:'none',
      }} />

      {/* Top chrome */}
      <div style={{
        position:'relative', zIndex:3,
        display:'flex', alignItems:'center', justifyContent:'space-between',
        padding:'48px 56px 0',
      }}>
        <img src="assets/logo-mark-white.png" alt="" style={{width:96, height:96}}/>
        {!hideLang && (
          <div style={{display:'flex', gap:12, fontSize:20, fontWeight:600, letterSpacing:'.1em'}}>
            {['SI','EN','DE','IT'].map(c => (
              <button key={c} onClick={()=>onLangChange&&onLangChange(c)} style={{
                padding:'12px 18px', borderRadius:999,
                background: lang===c ? '#00BCD4' : 'rgba(255,255,255,.16)',
                backdropFilter:'blur(10px)',
                border:'1px solid rgba(255,255,255,.25)',
                color:'#fff', fontFamily:'inherit', fontWeight:600, fontSize:20, letterSpacing:'.1em',
                cursor:'pointer',
              }}>{c}</button>
            ))}
          </div>
        )}
      </div>

      {/* Flow container - children render as rows; screens compose their own sections */}
      <div style={{
        position:'relative', zIndex:2, flex:1,
        display:'flex', flexDirection:'column',
        padding:`${KIOSK.stackGap}px ${KIOSK.gutter}px`,
      }}>
        {children}
      </div>
    </div>
  );
}

// Vertical column that centers its children; gap & align are parameters.
function KioskStack({ children, gap=KIOSK.stackGap, align='center', justify='center', flex=1, style }) {
  return (
    <div style={{
      flex, display:'flex', flexDirection:'column',
      alignItems:align, justifyContent:justify, gap,
      ...style,
    }}>{children}</div>
  );
}

// Horizontal row with default centered layout.
function KioskRow({ children, gap=40, justify='center', align='center', style }) {
  return (
    <div style={{
      display:'flex', gap, justifyContent:justify, alignItems:align,
      ...style,
    }}>{children}</div>
  );
}

// Action bar pinned to the bottom; holds primary CTA + optional back.
function KioskActionBar({ back, children, style }) {
  return (
    <div style={{
      display:'flex', alignItems:'center', justifyContent:'space-between',
      paddingTop:32, paddingBottom:24, gap:24,
      ...style,
    }}>
      <div style={{minWidth:220, display:'flex', justifyContent:'flex-start'}}>
        {back && <BackButton onClick={back} />}
      </div>
      <div style={{display:'flex', gap:24, justifyContent:'center', flex:1, flexWrap:'wrap'}}>
        {children}
      </div>
      <div style={{minWidth:220}}/>
    </div>
  );
}

function KioskHero({ children, size=128, muted=false }) {
  return (
    <div style={{
      textAlign:'center', width:'100%',
      fontSize:size, fontWeight:700, lineHeight:1.02, letterSpacing:'-0.02em',
      textShadow:'0 4px 28px rgba(0,0,0,.55)',
      whiteSpace:'pre-line',
      opacity: muted ? .92 : 1,
    }}>{children}</div>
  );
}

function KioskSubhead({ children, size=44 }) {
  return (
    <div style={{
      textAlign:'center', width:'100%',
      fontSize:size, fontWeight:500, lineHeight:1.15,
      opacity:.92, textShadow:'0 2px 12px rgba(0,0,0,.4)',
      whiteSpace:'pre-line',
    }}>{children}</div>
  );
}

function KioskButton({ variant='primary', size='hero', onClick, children, style }) {
  const palette = {
    primary: { bg:'#00BCD4', hover:'#0097A7', color:'#fff', border:'2px solid transparent',
               shadow:'0 16px 40px rgba(0,188,212,.4), 0 4px 12px rgba(0,188,212,.3)' },
    action:  { bg:'#2196F3', hover:'#1976D2', color:'#fff', border:'2px solid transparent',
               shadow:'0 16px 40px rgba(33,150,243,.4)' },
    staff:   { bg:'#FFB300', hover:'#FB8C00', color:'#1A1A1A', border:'2px solid transparent',
               shadow:'0 16px 40px rgba(255,179,0,.4)' },
    ghost:   { bg:'rgba(255,255,255,0.12)', hover:'rgba(255,255,255,0.22)', color:'#fff',
               border:'2px solid rgba(255,255,255,.45)', shadow:'0 4px 20px rgba(0,0,0,.3)' },
  }[variant];
  const sizing = size==='hero'
    ? { padding:'28px 96px', fontSize:52, borderRadius:40, minWidth:340 }
    : size==='lg'
    ? { padding:'24px 56px', fontSize:36, borderRadius:32, minWidth:240 }
    : { padding:'18px 40px', fontSize:28, borderRadius:24, minWidth:180 };
  const [h, setH] = React.useState(false);
  const [p, setP] = React.useState(false);
  return (
    <button onClick={onClick}
      onMouseEnter={()=>setH(true)} onMouseLeave={()=>{setH(false);setP(false)}}
      onMouseDown={()=>setP(true)} onMouseUp={()=>setP(false)}
      style={{
        background: h ? palette.hover : palette.bg,
        color: palette.color,
        border: palette.border,
        fontFamily:'inherit', fontWeight:700, letterSpacing:'.02em', cursor:'pointer',
        boxShadow: palette.shadow,
        transform: p ? 'scale(.98)' : 'scale(1)',
        transition:'background 200ms, transform 80ms, box-shadow 200ms',
        whiteSpace:'nowrap',
        ...sizing, ...style,
      }}
    >{children}</button>
  );
}

function BackButton({ onClick }) {
  const [h, setH] = React.useState(false);
  return (
    <button onClick={onClick}
      onMouseEnter={()=>setH(true)} onMouseLeave={()=>setH(false)}
      style={{
        padding:'20px 40px', fontSize:28, fontWeight:600,
        background: h ? 'rgba(0,0,0,.55)' : 'rgba(0,0,0,0.35)',
        color:'#fff',
        border:'2px solid rgba(255,255,255,.55)', borderRadius:40,
        fontFamily:'inherit', cursor:'pointer', backdropFilter:'blur(12px)',
        transition:'background 200ms', whiteSpace:'nowrap',
      }}>← Nazaj</button>
  );
}

function FlagCircle({ code, selected, onClick, size=220 }) {
  const flags = {
    SI: (
      <div style={{width:'100%',height:'100%',borderRadius:'50%',overflow:'hidden',
        background:'linear-gradient(180deg,#fff 33%,#0044AA 33% 66%,#CC0000 66%)'}} />
    ),
    GB: (
      <div style={{width:'100%',height:'100%',borderRadius:'50%',overflow:'hidden',background:'#012169',position:'relative'}}>
        <div style={{position:'absolute',inset:0,background:
          'linear-gradient(45deg, transparent 46%, #fff 46% 54%, transparent 54%), linear-gradient(-45deg, transparent 46%, #fff 46% 54%, transparent 54%)'}} />
        <div style={{position:'absolute',inset:0,background:
          'linear-gradient(90deg, transparent 42%, #fff 42% 58%, transparent 58%), linear-gradient(0deg, transparent 42%, #fff 42% 58%, transparent 58%)'}} />
        <div style={{position:'absolute',inset:0,background:
          'linear-gradient(90deg, transparent 46%, #C8102E 46% 54%, transparent 54%), linear-gradient(0deg, transparent 46%, #C8102E 46% 54%, transparent 54%)'}} />
      </div>
    ),
    DE: (
      <div style={{width:'100%',height:'100%',borderRadius:'50%',overflow:'hidden',
        background:'linear-gradient(180deg,#000 33%,#DD0000 33% 66%,#FFCE00 66%)'}} />
    ),
    IT: (
      <div style={{width:'100%',height:'100%',borderRadius:'50%',overflow:'hidden',
        background:'linear-gradient(90deg,#009246 33%,#fff 33% 66%,#CE2B37 66%)'}} />
    ),
  };
  return (
    <button onClick={onClick} style={{
      width:size, height:size, borderRadius:'50%', padding:0, border:'none',
      boxShadow: selected
        ? '0 0 0 8px #00BCD4, 0 20px 40px rgba(0,0,0,.35)'
        : '0 20px 40px rgba(0,0,0,.35)',
      cursor:'pointer', background:'transparent', transition:'transform 200ms, box-shadow 200ms',
      transform: selected ? 'scale(1.05)' : 'scale(1)',
    }}
    onMouseEnter={e=>e.currentTarget.style.transform = selected ? 'scale(1.08)' : 'scale(1.04)'}
    onMouseLeave={e=>e.currentTarget.style.transform = selected ? 'scale(1.05)' : 'scale(1)'}
    >{flags[code]}</button>
  );
}

Object.assign(window, {
  KIOSK, KioskShell, KioskStack, KioskRow, KioskActionBar,
  KioskHero, KioskSubhead, KioskButton, BackButton, FlagCircle,
});