// KioskFrame — floor-standing kiosk device bezel for a 1080×1920 portrait screen.
// Renders the kiosk screen inside a real-feeling enclosure with pedestal, shadow,
// and optional ambient floor plane. Children are rendered at the native 1080×1920
// resolution; the frame scales with a CSS transform so everything stays crisp.

function KioskFrame({ children, showPedestal=true, showFloor=true, scale=1, scene='lobby' }) {
  // Device dimensions (physical proportions)
  const screenW = 1080;
  const screenH = 1920;
  const bezel = 44;
  const deviceW = screenW + bezel*2;
  const deviceH = screenH + bezel*2;
  const pedestalH = showPedestal ? 520 : 0;
  const totalH = deviceH + pedestalH;
  const totalW = Math.max(deviceW + 200, 1400);

  const scenes = {
    lobby: {
      bg: 'radial-gradient(ellipse at 50% 20%, #2b2620 0%, #13100d 55%, #080706 100%)',
      floor: 'linear-gradient(180deg, #1a1613 0%, #0a0806 100%)',
    },
    studio: {
      bg: 'radial-gradient(ellipse at 50% 30%, #1a2430 0%, #0b1118 60%, #05080c 100%)',
      floor: 'linear-gradient(180deg, #0d131b 0%, #05080c 100%)',
    },
    light: {
      bg: 'radial-gradient(ellipse at 50% 25%, #e8e4de 0%, #c9c3bb 55%, #a6a098 100%)',
      floor: 'linear-gradient(180deg, #b8b2a8 0%, #8a857d 100%)',
    },
  };
  const palette = scenes[scene] || scenes.lobby;

  return (
    <div style={{
      position:'relative',
      width: totalW,
      height: totalH + (showFloor ? 260 : 80),
      background: palette.bg,
      display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'flex-start',
      borderRadius: 32,
      overflow:'hidden',
    }}>
      {/* Ceiling wash */}
      <div style={{
        position:'absolute', top:0, left:0, right:0, height:360,
        background:'radial-gradient(ellipse at 50% 0%, rgba(255,230,180,.12) 0%, transparent 70%)',
        pointerEvents:'none',
      }}/>

      {/* Floor plane */}
      {showFloor && (
        <div style={{
          position:'absolute', bottom:0, left:0, right:0, height:280,
          background: palette.floor,
          borderTop:'1px solid rgba(255,255,255,.04)',
        }}>
          {/* subtle perspective grid */}
          <div style={{
            position:'absolute', inset:0,
            backgroundImage:
              'repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0, rgba(255,255,255,.03) 1px, transparent 1px, transparent 80px)',
            maskImage:'linear-gradient(180deg, rgba(0,0,0,.8) 0%, transparent 100%)',
            WebkitMaskImage:'linear-gradient(180deg, rgba(0,0,0,.8) 0%, transparent 100%)',
          }}/>
        </div>
      )}

      {/* Soft spotlight behind device */}
      <div style={{
        position:'absolute', top:60, left:'50%', transform:'translateX(-50%)',
        width: 900, height: 900,
        background:'radial-gradient(circle, rgba(0,188,212,.08) 0%, transparent 60%)',
        pointerEvents:'none',
      }}/>

      {/* Device stack */}
      <div style={{
        position:'relative', marginTop: 48,
        display:'flex', flexDirection:'column', alignItems:'center',
      }}>
        {/* Screen + bezel */}
        <div style={{
          position:'relative',
          width: deviceW,
          height: deviceH,
          background:'linear-gradient(180deg, #1c1c1c 0%, #0b0b0b 100%)',
          borderRadius: 40,
          padding: bezel,
          boxShadow:
            '0 2px 0 rgba(255,255,255,.06) inset, '+
            '0 -2px 0 rgba(0,0,0,.6) inset, '+
            '0 0 0 2px rgba(0,0,0,.8), '+
            '0 60px 120px rgba(0,0,0,.7), '+
            '0 30px 60px rgba(0,0,0,.5)',
        }}>
          {/* tiny camera */}
          <div style={{
            position:'absolute', top:16, left:'50%', transform:'translateX(-50%)',
            width:10, height:10, borderRadius:'50%',
            background:'radial-gradient(circle, #2a2a2a 0%, #000 70%)',
            boxShadow:'inset 0 1px 2px rgba(255,255,255,.1)',
          }}/>
          {/* screen */}
          <div style={{
            position:'relative',
            width:screenW, height:screenH,
            borderRadius:20, overflow:'hidden',
            boxShadow:'0 0 0 1px rgba(255,255,255,.04) inset',
          }}>
            {children}
            {/* subtle screen glare */}
            <div style={{
              position:'absolute', inset:0, pointerEvents:'none',
              background:'linear-gradient(135deg, rgba(255,255,255,.06) 0%, transparent 35%, transparent 65%, rgba(255,255,255,.02) 100%)',
            }}/>
          </div>
        </div>

        {/* Pedestal */}
        {showPedestal && (
          <>
            {/* neck */}
            <div style={{
              width: 320, height: 80,
              background:'linear-gradient(180deg, #1a1a1a 0%, #0f0f0f 100%)',
              borderRadius:'0 0 12px 12px',
              boxShadow:'inset 0 2px 0 rgba(255,255,255,.06), 0 4px 10px rgba(0,0,0,.4)',
            }}/>
            {/* column */}
            <div style={{
              width: 240, height: 340,
              background:'linear-gradient(180deg, #161616 0%, #0a0a0a 100%)',
              borderRadius:'8px 8px 4px 4px',
              boxShadow:'inset 1px 0 0 rgba(255,255,255,.04), inset -1px 0 0 rgba(0,0,0,.4), 0 20px 40px rgba(0,0,0,.5)',
              display:'flex', alignItems:'center', justifyContent:'center',
            }}>
              <img src="assets/logo-mark-white.png" alt="" style={{width:52, height:52, opacity:.35}}/>
            </div>
            {/* base */}
            <div style={{
              width: 420, height: 36,
              background:'linear-gradient(180deg, #222 0%, #0a0a0a 100%)',
              borderRadius:'6px 6px 2px 2px',
              boxShadow:'0 10px 30px rgba(0,0,0,.6)',
            }}/>
            {/* contact shadow */}
            <div style={{
              width: 520, height: 14, marginTop: 2,
              background:'radial-gradient(ellipse at center, rgba(0,0,0,.75) 0%, transparent 70%)',
              filter:'blur(4px)',
            }}/>
          </>
        )}
      </div>
    </div>
  );
}

Object.assign(window, { KioskFrame });