// components/Characters.jsx
// Placeholder character frames — swap for real illustrations later.

const Character = ({ name, pose, size = 'md', className = '' }) => {
  const sizes = {
    xs: { w: 72, h: 96, font: 10 },
    sm: { w: 110, h: 140, font: 11 },
    md: { w: 160, h: 200, font: 12 },
    lg: { w: 220, h: 280, font: 13 },
    xl: { w: 280, h: 360, font: 14 },
  };
  const s = sizes[size];
  return (
    <div
      className={`char-ph ${className}`}
      data-char={name}
      style={{ width: s.w, height: s.h, fontSize: s.font }}
    >
      <div className="char-silhouette" style={{ fontSize: s.font + 1 }}>
        {pose || 'イラスト'}
      </div>
      <span style={{ position: 'absolute', bottom: 8, fontSize: s.font - 1, opacity: .7 }}>
        {name}差し替え
      </span>
    </div>
  );
};

const DotSensei = (props) => <Character name="ドット先生" pose={props.pose || '犬・関西弁'} {...props} />;
const Harin    = (props) => <Character name="ハリン"     pose={props.pose || 'ハリネズミ'} {...props} />;
const Kame     = (props) => <Character name="亀"         pose={props.pose || 'カメ'} {...props} />;

// Kame with penlight (推し活モード)
const KamePenlight = ({ size = 'md' }) => {
  const sizes = { sm: 110, md: 160, lg: 220 };
  const w = sizes[size] || 160;
  return (
    <div style={{ position: 'relative', width: w, display: 'inline-block' }}>
      <Kame size={size} pose="推し活カメ" />
      {/* Penlights */}
      <div style={{
        position: 'absolute',
        top: '18%',
        right: -18,
        width: 10, height: w * 0.45,
        background: 'linear-gradient(to top, #ff8ab6, #fff 60%, #ffd93d)',
        border: '2px solid var(--line)',
        borderRadius: 6,
        transformOrigin: 'bottom center',
      }} className="penlight" />
      <div style={{
        position: 'absolute',
        top: '20%',
        left: -14,
        width: 10, height: w * 0.42,
        background: 'linear-gradient(to top, #3b9eff, #fff 60%, #ffd93d)',
        border: '2px solid var(--line)',
        borderRadius: 6,
        transformOrigin: 'bottom center',
        animationDelay: '-0.3s',
      }} className="penlight" />
    </div>
  );
};

Object.assign(window, { Character, DotSensei, Harin, Kame, KamePenlight });