/** BentoTile.jsx — core bento card */
function BentoTile({ size = 'sq', variant = 'parchment', eyebrow, title, body, children, onClick, hieroglyphs, bgImage }) {
  const classes = `tile tile-${size} tile-${variant} ${hieroglyphs ? 'tile-hieroglyphs' : ''}`;
  const style = bgImage ? { backgroundImage: `url(${bgImage})`, backgroundSize: 'cover', backgroundPosition: 'center' } : {};
  return (
    <div className={classes} style={style} onClick={onClick}>
      {eyebrow && <div className="tile-eyebrow">{eyebrow}</div>}
      {title && <div className="tile-title">{title}</div>}
      {body && <div className="tile-body">{body}</div>}
      {children}
    </div>
  );
}

/** ComicPanel.jsx — a single comic panel */
function ComicPanel({ caption, speech, bgColor = 'var(--emerald-500)', children, speechPos = {top: 20, right: 12} }) {
  return (
    <div className="comic-panel" style={{background: bgColor}}>
      {children}
      {caption && <div className="comic-caption">{caption}</div>}
      {speech && (
        <div className="comic-bubble" style={speechPos}>{speech}</div>
      )}
    </div>
  );
}

/** MoodAvatar — replaces emoji */
const MOODS = {
  Skeptical: { bg: '#A8C6E0', sx: '0% 0%' },
  Playful:   { bg: '#B9D9AC', sx: '100% 0%' },
  Curious:   { bg: '#F4D47A', sx: '0% 100%' },
  Hungry:    { bg: '#F2A668', sx: '100% 100%' },
};
function MoodAvatar({ mood = 'Skeptical', size = 72, label = true, onClick, active }) {
  const m = MOODS[mood];
  return (
    <button onClick={onClick} style={{background:'none', border:'none', padding: 0, cursor:'pointer', display:'inline-flex', flexDirection:'column', alignItems:'center', gap:6, opacity: active === false ? 0.4 : 1, transition:'opacity .2s'}}>
      <div style={{
        width: size, height: size, borderRadius:'50%',
        background: `url(assets/milo-personalities.png) center center / auto ${m.bg}`,
        border:'3px solid var(--ink-900)',
        boxShadow: active ? '3px 3px 0 var(--ink-900)' : 'none',
        transform: active ? 'translate(-1px,-1px)' : 'none',
      }}/>
      {label && <span style={{fontFamily:'var(--font-ui)', fontWeight:700, fontSize:11, letterSpacing:'0.12em', textTransform:'uppercase', color:'var(--ink-900)'}}>{mood}</span>}
    </button>
  );
}

/** WisdomCard — "Rule XVII" quote */
function WisdomCard({ rule, body }) {
  return (
    <BentoTile size="tall" variant="parchment">
      <div className="tile-eyebrow">{rule}</div>
      <div style={{fontFamily:'var(--font-serif)', fontStyle:'italic', fontSize:20, lineHeight:1.3, color:'var(--fg-1)', marginTop:10}}>
        "{body}"
      </div>
      <div style={{position:'absolute', bottom:16, right:16, fontFamily:'var(--font-display)', fontSize:11, letterSpacing:'0.18em', color:'var(--oxblood-500)', textTransform:'uppercase'}}>— Studia Canis</div>
    </BentoTile>
  );
}

/** FactCard — "Did You Know?" */
function FactCard({ number = 'III', body }) {
  return (
    <BentoTile size="wide" variant="midnight" hieroglyphs>
      <div style={{display:'flex', gap:20, alignItems:'center', height:'100%'}}>
        <div style={{fontFamily:'var(--font-display)', fontWeight:900, fontSize:72, color:'var(--royal-gold-500)', lineHeight:0.8, textShadow:'0 3px 0 var(--ink-900)'}}>{number}</div>
        <div>
          <div className="tile-eyebrow">Did you know?</div>
          <div style={{fontFamily:'var(--font-serif)', fontSize:16, lineHeight:1.4, color:'var(--parchment-100)', marginTop:6}}>{body}</div>
        </div>
      </div>
    </BentoTile>
  );
}

Object.assign(window, { BentoTile, ComicPanel, MoodAvatar, WisdomCard, FactCard, MOODS });