// tailgate-kit.jsx — shared Tailgate tokens, primitives, and mini-components
// All screens import these via window globals.

const TG = {
  cream:'#f5ecd7', ink:'#1a1510', ink2:'#2d241a', orange:'#ee5a24', orangeDk:'#c23c0a',
  mustard:'#f4b23c', field:'#2f6e3b', fieldDk:'#234e2c', chalk:'#fffbf0', brick:'#8c2820',
};

const tgCss = `
.tg-root{font-family:'Archivo',system-ui,sans-serif;color:${TG.ink};background:${TG.cream};height:100%;display:flex;flex-direction:column;position:relative;overflow:hidden;}
.tg-display{font-family:'Archivo Black',sans-serif;letter-spacing:-.02em;text-transform:uppercase;}
.tg-hand{font-family:'Caveat',cursive;font-weight:700;}
.tg-grain{position:absolute;inset:0;pointer-events:none;opacity:.4;mix-blend-mode:multiply;background-image:radial-gradient(rgba(80,50,20,.12) 1px,transparent 1px);background-size:3px 3px;}
.tg-btn{font-family:'Archivo Black',sans-serif;font-size:15px;letter-spacing:.03em;text-transform:uppercase;padding:16px 18px;background:${TG.ink};color:${TG.cream};border:0;cursor:pointer;width:100%;display:flex;align-items:center;justify-content:center;gap:10px;box-shadow:4px 4px 0 ${TG.orange};}
.tg-btn.orange{background:${TG.orange};color:${TG.cream};box-shadow:4px 4px 0 ${TG.ink};}
.tg-btn.mustard{background:${TG.mustard};color:${TG.ink};box-shadow:4px 4px 0 ${TG.ink};}
.tg-btn.ghost{background:transparent;color:${TG.ink};border:2px solid ${TG.ink};box-shadow:none;}
.tg-btn.sm{font-size:12px;padding:11px 14px;box-shadow:3px 3px 0 ${TG.ink};}
.tg-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border:2px solid ${TG.ink};background:${TG.cream};font-family:'Archivo Black',sans-serif;font-size:10px;letter-spacing:.1em;text-transform:uppercase;border-radius:999px;}
.tg-stamp{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;background:${TG.ink};color:${TG.cream};font-family:'Archivo Black',sans-serif;font-size:10px;letter-spacing:.12em;text-transform:uppercase;}
.tg-chip-orange{background:${TG.orange};color:${TG.cream};padding:3px 10px;font-family:'Archivo Black',sans-serif;font-size:10px;letter-spacing:.12em;text-transform:uppercase;display:inline-block;}
.tg-card{background:${TG.chalk};border:2px solid ${TG.ink};box-shadow:5px 5px 0 ${TG.ink};}
.tg-field{padding:12px 14px;display:flex;justify-content:space-between;align-items:center;border-bottom:2px dashed ${TG.ink};gap:12px;}
.tg-field:last-child{border-bottom:0;}
.tg-field .lbl{font-family:'Archivo Black',sans-serif;font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:${TG.ink2};}
.tg-field .val{font-family:'Archivo Black',sans-serif;font-size:15px;letter-spacing:-.01em;}
.tg-input{border:2px solid ${TG.ink};padding:13px 14px;font-size:15px;font-family:'Archivo',sans-serif;font-weight:600;width:100%;background:${TG.chalk};box-shadow:3px 3px 0 ${TG.ink};}
.tg-nav{display:flex;background:${TG.ink};color:${TG.cream};}
.tg-nav>div{flex:1;padding:10px 0 11px;display:flex;flex-direction:column;align-items:center;gap:3px;font-family:'Archivo Black',sans-serif;font-size:10px;letter-spacing:.1em;text-transform:uppercase;opacity:.5;}
.tg-nav>div.on{opacity:1;border-top:3px solid ${TG.orange};padding-top:7px;}
.tg-nav svg{width:18px;height:18px;}
@keyframes tg-spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes tg-pulse{0%,100%{opacity:1}50%{opacity:.4}}
.tg-hl{background:${TG.mustard};padding:0 4px;display:inline-block;transform:rotate(-1.5deg);}
`;

if (typeof document !== 'undefined' && !document.getElementById('tg-kit')) {
  const s = document.createElement('style'); s.id='tg-kit'; s.textContent = tgCss; document.head.appendChild(s);
}

// ── Primitives ────────────────────────────────────────────
const Shield = ({size=30}) => (
  <svg width={size} height={size*1.1} viewBox="0 0 40 44" style={{flexShrink:0}}>
    <path d="M20 1 L38 6 L38 22 Q38 36 20 43 Q2 36 2 22 L2 6 Z" fill={TG.orange} stroke={TG.ink} strokeWidth="2.5"/>
    <text x="20" y="28" textAnchor="middle" fontFamily="Archivo Black" fontSize="18" fill={TG.cream}>W</text>
  </svg>
);

const StarBurst = ({size=80, children, fill=TG.mustard}) => (
  <div style={{position:'relative',width:size,height:size}}>
    <svg width={size} height={size} viewBox="0 0 80 80">
      <g fill={fill} stroke={TG.ink} strokeWidth="2" strokeLinejoin="round">
        <path d="M40 2 L44 18 L58 6 L52 24 L72 18 L58 32 L78 36 L58 42 L74 56 L54 50 L58 70 L44 58 L40 78 L36 58 L22 70 L26 50 L6 56 L22 42 L2 36 L22 32 L8 18 L28 24 L22 6 L36 18 Z"/>
      </g>
    </svg>
    <div style={{position:'absolute',inset:0,display:'flex',alignItems:'center',justifyContent:'center',flexDirection:'column',padding:4,textAlign:'center'}}>{children}</div>
  </div>
);

const Pennant = ({color=TG.orange}) => (
  <div style={{width:0,height:0,borderLeft:'14px solid transparent',borderRight:'14px solid transparent',borderTop:`16px solid ${color}`,flexShrink:0}}/>
);

const PennantStrip = ({height=26}) => (
  <div style={{height,display:'flex',justifyContent:'space-around',background:TG.ink,padding:'0 4px'}}>
    {Array.from({length:18}).map((_,i)=>(
      <Pennant key={i} color={i%3===0?TG.orange:i%3===1?TG.mustard:TG.field}/>
    ))}
  </div>
);

const TicketEdge = ({dark=false, count=22}) => (
  <div style={{position:'absolute',left:-1,right:-1,bottom:-7,display:'flex',justifyContent:'space-between'}}>
    {Array.from({length:count}).map((_,i)=>(
      <div key={i} style={{width:10,height:10,background:dark?TG.ink:TG.cream,border:`2px solid ${TG.ink}`,borderRadius:'50%'}}/>
    ))}
  </div>
);

const Avatar = ({name, size=32, color}) => {
  const colors = [TG.orange, TG.field, TG.mustard, TG.brick];
  const bg = color || colors[(name.charCodeAt(0)||0)%4];
  const fg = bg===TG.mustard?TG.ink:TG.cream;
  return <div style={{width:size,height:size,borderRadius:'50%',background:bg,color:fg,border:`2px solid ${TG.ink}`,display:'flex',alignItems:'center',justifyContent:'center',fontFamily:'Archivo Black',fontSize:size*0.34,flexShrink:0}}>{name.slice(0,2).toUpperCase()}</div>;
};

const TeamBadge = ({code, bg=TG.brick, size=40}) => (
  <div style={{width:size,height:size,background:bg,border:`2px solid ${TG.ink}`,color:TG.cream,display:'flex',alignItems:'center',justifyContent:'center',fontFamily:'Archivo Black',fontSize:size*0.3,letterSpacing:'.02em',flexShrink:0}}>{code}</div>
);

const StickyNote = ({children, rotate=-3, color=TG.mustard, style={}}) => (
  <div style={{background:color,border:`2px solid ${TG.ink}`,padding:'10px 12px',fontFamily:'Caveat, cursive',fontWeight:700,fontSize:15,color:TG.ink,boxShadow:`3px 3px 0 ${TG.ink}`,transform:`rotate(${rotate}deg)`,...style}}>{children}</div>
);

const NavBar = ({active='home'}) => (
  <div className="tg-nav">
    {[
      {k:'home',l:'HOME',i:<path d="M3 17V9l7-5 7 5v8M8 17v-5h4v5"/>},
      {k:'games',l:'GAMES',i:<><rect x="3" y="4" width="14" height="12"/><path d="M3 8h14"/></>},
      {k:'wallet',l:'WALLET',i:<><rect x="3" y="5" width="14" height="11" rx="1"/><path d="M3 8h14"/><circle cx="13" cy="12" r="1.2"/></>},
      {k:'me',l:'ME',i:<><circle cx="10" cy="7" r="3"/><path d="M3 17c0-4 3-6 7-6s7 2 7 6"/></>},
    ].map(n=>(
      <div key={n.k} className={active===n.k?'on':''}>
        <svg viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="2">{n.i}</svg>
        {n.l}
      </div>
    ))}
  </div>
);

// Mobile status bar stub (since we're not using IOSDevice wrapper everywhere)
const StatusBar = ({dark=false}) => (
  <div style={{height:44,padding:'12px 20px 0',display:'flex',justifyContent:'space-between',alignItems:'center',position:'relative',zIndex:10,fontFamily:'-apple-system,system-ui',fontSize:14,fontWeight:600,color:dark?TG.cream:TG.ink}}>
    <span>9:41</span>
    <div style={{display:'flex',gap:5,alignItems:'center'}}>
      <svg width="16" height="10" viewBox="0 0 16 10"><rect x="0" y="6" width="3" height="4" rx=".5" fill="currentColor"/><rect x="4.5" y="4" width="3" height="6" rx=".5" fill="currentColor"/><rect x="9" y="2" width="3" height="8" rx=".5" fill="currentColor"/><rect x="13.5" y="0" width="3" height="10" rx=".5" fill="currentColor"/></svg>
      <svg width="22" height="10" viewBox="0 0 22 10"><rect x=".5" y=".5" width="19" height="9" rx="2" stroke="currentColor" fill="none" opacity=".4"/><rect x="2" y="2" width="16" height="6" rx="1" fill="currentColor"/></svg>
    </div>
  </div>
);

// Simple artboard wrapper for mobile phone shape
const Phone = ({children, dark=false}) => (
  <div style={{width:402,height:874,borderRadius:44,overflow:'hidden',background:dark?TG.ink:TG.cream,position:'relative',boxShadow:'0 30px 60px rgba(0,0,0,0.18), 0 0 0 1px rgba(0,0,0,0.12)',display:'flex',flexDirection:'column'}}>
    <div style={{position:'absolute',top:10,left:'50%',transform:'translateX(-50%)',width:120,height:32,borderRadius:20,background:'#000',zIndex:50}}/>
    <StatusBar dark={dark}/>
    <div style={{flex:1,display:'flex',flexDirection:'column',minHeight:0,overflow:'hidden'}}>{children}</div>
    <div style={{position:'absolute',bottom:6,left:'50%',transform:'translateX(-50%)',width:130,height:4,borderRadius:2,background:dark?'rgba(245,236,215,.7)':'rgba(26,21,16,.3)',zIndex:60}}/>
  </div>
);

// Desktop window inner (use ChromeWindow outer)
const Desktop = ({children, bg=TG.cream}) => (
  <div style={{background:bg,height:'100%',fontFamily:'Archivo, sans-serif',color:TG.ink,display:'flex',flexDirection:'column',overflow:'hidden'}}>
    {children}
  </div>
);

const DesktopHeader = ({crumb, user='A'}) => (
  <>
    <div style={{background:TG.ink,color:TG.cream,padding:'12px 24px',display:'flex',alignItems:'center',gap:14,borderBottom:`3px solid ${TG.orange}`}}>
      <Shield size={28}/>
      <div className="tg-display" style={{fontSize:16}}>WELIKE<span style={{color:TG.mustard}}>SPORTS</span></div>
      {crumb && <div className="tg-pill" style={{borderColor:TG.cream,color:TG.cream,background:'transparent',fontSize:9}}>{crumb}</div>}
      <div style={{flex:1}}/>
      <div className="tg-display" style={{fontSize:10,opacity:.7}}>LEAGUES</div>
      <div className="tg-display" style={{fontSize:10,opacity:.7}}>WALLET · $1,240</div>
      <div className="tg-display" style={{fontSize:10,opacity:.7,padding:'4px 8px',border:`1px solid ${TG.cream}`,borderRadius:3}}>↔ SWITCH TO PLAYER</div>
      <Avatar name={user} size={28}/>
    </div>
    <PennantStrip height={22}/>
  </>
);

Object.assign(window, { TG, Shield, StarBurst, Pennant, PennantStrip, TicketEdge, Avatar, TeamBadge, StickyNote, NavBar, StatusBar, Phone, Desktop, DesktopHeader });