// ── SIN CITY ADVENTURE — Shared Components ──────────────────────────────
// Dark luxury tokens + UI primitives shared across all screens

const SC = {
  // Palette (pulled from main-lobby-v2 atmosphere)
  ink:      '#060402',
  ink2:     '#0d0806',
  stone:    '#18110a',
  stone2:   '#241810',
  warm:     '#2e1f0d',
  gold:     '#c4903a',
  goldHi:   '#e8bb60',
  goldDark: '#6a3e10',
  ember:    '#b83020',
  parch:    '#ead9a8',
  parch2:   'rgba(234,217,168,0.58)',
  border:   'rgba(196,144,58,0.18)',
  borderHi: 'rgba(196,144,58,0.52)',
};

const CIN = (sz, wt=600) => ({
  fontFamily: "'Cinzel', 'Trajan Pro', serif",
  fontSize: sz,
  fontWeight: wt,
  letterSpacing: '0.07em',
  lineHeight: 1.3,
});
const COR = (sz, wt=400) => ({
  fontFamily: "'Cormorant Garamond', 'Palatino', serif",
  fontSize: sz,
  fontWeight: wt,
  lineHeight: 1.45,
});

const HATCH = 'repeating-linear-gradient(45deg,#0f0b07 0,#0f0b07 2px,#1a1209 2px,#1a1209 10px)';

// Ornamental divider using BG-04 strip
const OrnDiv = ({style}) => (
  <div style={{
    height: 20,
    backgroundImage: "url('uploads/BG-04.png')",
    backgroundSize: 'auto 20px',
    backgroundRepeat: 'repeat-x',
    backgroundPosition: 'center',
    opacity: 0.7,
    ...style
  }}/>
);

// Gold gradient button
const ScBtn = ({children, primary, small, onClick, style}) => (
  <div onClick={onClick} style={{
    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
    padding: small ? '5px 14px' : '9px 26px',
    cursor: 'pointer',
    background: primary
      ? `linear-gradient(180deg, ${SC.goldHi} 0%, ${SC.gold} 50%, ${SC.goldDark} 100%)`
      : 'transparent',
    border: `1px solid ${primary ? SC.goldHi : SC.borderHi}`,
    ...CIN(small ? 9 : 11, 700),
    color: primary ? SC.ink : SC.gold,
    boxShadow: primary ? '0 4px 20px rgba(196,144,58,0.3)' : 'none',
    flexShrink: 0,
    ...style
  }}>{children}</div>
);

// Status chip
const ScChip = ({children, live, gold, style}) => (
  <span style={{
    display: 'inline-flex', alignItems: 'center', gap: 5,
    padding: '2px 9px',
    background: live ? 'rgba(184,48,32,0.14)' : gold ? 'rgba(196,144,58,0.12)' : 'rgba(255,255,255,0.05)',
    border: `1px solid ${live ? SC.ember : gold ? SC.borderHi : 'rgba(255,255,255,0.09)'}`,
    ...CIN(9, live || gold ? 700 : 400),
    color: live ? '#e86050' : gold ? SC.goldHi : SC.parch2,
    ...style
  }}>
    {live && <span style={{width:5,height:5,borderRadius:'50%',background:'#e86050',
      boxShadow:'0 0 6px #e86050',display:'block',flexShrink:0}}/>}
    {children}
  </span>
);

// Progress bar
const ScProgress = ({pct, style}) => (
  <div style={{height:5, background:'rgba(255,255,255,0.07)', borderRadius:3, overflow:'hidden', ...style}}>
    <div style={{
      width: `${pct}%`, height: '100%',
      background: `linear-gradient(90deg, ${SC.gold}, ${SC.goldHi})`,
      borderRadius: 3,
      boxShadow: '0 0 8px rgba(232,187,96,0.5)',
    }}/>
  </div>
);

// Text input placeholder
const ScInput = ({placeholder, style}) => (
  <div style={{
    padding: '6px 12px',
    background: 'rgba(255,255,255,0.04)',
    border: `1px solid ${SC.border}`,
    ...COR(12), color: SC.parch2,
    ...style
  }}>{placeholder || 'Type here…'}</div>
);

// Token balance badge
const TokenBadge = ({amount}) => (
  <div style={{
    display: 'flex', alignItems: 'center', gap: 7,
    padding: '4px 13px',
    background: 'rgba(196,144,58,0.08)',
    border: `1px solid ${SC.borderHi}`,
  }}>
    <img src="uploads/UI-02.png" style={{width:16,height:16,objectFit:'contain'}}/>
    <span style={{...CIN(11,700), color: SC.goldHi}}>{amount} SC</span>
  </div>
);

// Top nav bar
const ScNav = ({crumb, right}) => (
  <div style={{
    height: 50, flexShrink: 0,
    background: `linear-gradient(180deg, ${SC.ink2} 0%, rgba(13,8,6,0.97) 100%)`,
    borderBottom: `1px solid ${SC.border}`,
    display: 'flex', alignItems: 'center', padding: '0 22px', gap: 14,
  }}>
    <img src="uploads/UI-01.png" style={{width:28,height:28,objectFit:'contain',opacity:0.9}}/>
    <span style={{...CIN(14,700), color: SC.goldHi, letterSpacing:'0.2em'}}>SIN CITY</span>
    {crumb && <>
      <span style={{...COR(13), color: SC.parch2}}>›</span>
      <span style={{...CIN(10,600), color: SC.parch2}}>{crumb}</span>
    </>}
    <div style={{flex:1}}/>
    {right}
  </div>
);

// Gift icon card
const GiftCard = ({src, name, price, active, onClick, small}) => (
  <div onClick={onClick} style={{
    border: `1px solid ${active ? SC.gold : SC.border}`,
    background: active ? 'rgba(196,144,58,0.10)' : SC.stone,
    borderRadius: 2, padding: small ? '4px' : '6px 4px',
    textAlign: 'center', cursor: 'pointer',
    boxShadow: active ? `0 0 14px rgba(196,144,58,0.35)` : 'none',
    transition: 'all 0.15s',
  }}>
    <img src={src} style={{width:'100%', aspectRatio:'1', objectFit:'contain',
      filter:'drop-shadow(0 2px 6px rgba(196,144,58,0.3))'}}/>
    <div style={{...CIN(small?7:8, 600), color: SC.parch2, marginTop:2}}>{name}</div>
    <div style={{...CIN(small?8:9, 700), color: SC.gold}}>{price}</div>
  </div>
);

// Chat row
const ChatRow = ({user, vip, msg, gift, time}) => (
  <div style={{
    display:'flex', gap:6, padding:'3px 11px',
    background: vip ? 'rgba(196,144,58,0.07)' : 'transparent',
    borderLeft: `2px solid ${vip ? SC.gold : 'transparent'}`,
  }}>
    <div style={{width:20,height:20,borderRadius:'50%',background:SC.stone2,
      border:`1px solid ${SC.border}`,flexShrink:0}}/>
    <div style={{flex:1, minWidth:0}}>
      <div style={{display:'flex', alignItems:'center', gap:4}}>
        <span style={{...CIN(9,700), color: vip ? SC.goldHi : SC.parch}}>{user}</span>
        {vip && <span style={{fontSize:9}}>👑</span>}
        {time && <span style={{...CIN(8,400), color:'rgba(234,217,168,0.28)', marginLeft:'auto'}}>{time}</span>}
      </div>
      <span style={{...COR(11), color: gift ? SC.goldHi : 'rgba(234,217,168,0.52)'}}>{msg}</span>
    </div>
  </div>
);

Object.assign(window, { SC, CIN, COR, HATCH, OrnDiv, ScBtn, ScChip, ScProgress, ScInput, TokenBadge, ScNav, GiftCard, ChatRow });