/* animals.jsx — gentle-touch SVG illustration style */

const P = {
  bread:'#E8B872', breadHi:'#FBE4B6', breadSh:'#C89050', crust:'#B07838',
  choco:'#5C3620', muzzle:'#F8E4C8', cheek:'#F4A098', earIn:'#C87A68', nose:'#D07878',
  pig:'#FABDCE', pigHi:'#FDE2EC', pigSh:'#E898B8',
  chick:'#F9DC72', chickHi:'#FEF5C8', chickSh:'#E8BC32', beak:'#F09038',
  frog:'#AACF78', frogHi:'#D6EDB4', frogSh:'#7AAE4A',
};

function Grad({ id, hi, base, cx=72, cy=88 }) {
  return (
    <radialGradient id={id} cx={cx} cy={cy} r="110" gradientUnits="userSpaceOnUse">
      <stop offset="0%" stopColor={hi} />
      <stop offset="100%" stopColor={base} />
    </radialGradient>
  );
}
function Shadow({ id }) {
  return (
    <filter id={id} x="-20%" y="-20%" width="140%" height="140%">
      <feDropShadow dx="0" dy="3.5" stdDeviation="5" floodColor="#9A6028" floodOpacity="0.18" />
    </filter>
  );
}

function Eye({ cx, cy, r=11 }) {
  return (
    <g>
      <circle className="db-eye" cx={cx} cy={cy} r={r} fill={P.choco} />
      <circle cx={cx-r*0.28} cy={cy-r*0.33} r={r*0.36} fill="white" />
      <circle cx={cx+r*0.3} cy={cy-r*0.55} r={r*0.17} fill="white" opacity="0.72" />
    </g>
  );
}
function Cheeks({ cx1=65, cx2=135, cy=130, rx=15, ry=9, fill=P.cheek }) {
  return (
    <>
      <ellipse className="db-cheek" cx={cx1} cy={cy} rx={rx} ry={ry} fill={fill} />
      <ellipse className="db-cheek" cx={cx2} cy={cy} rx={rx} ry={ry} fill={fill} />
    </>
  );
}
function Smile({ x1=88, x2=112, cy=145, depth=9 }) {
  return <path d={`M${x1},${cy} Q100,${cy+depth} ${x2},${cy}`}
    fill="none" stroke={P.choco} strokeWidth="2.8" strokeLinecap="round" />;
}
function face(id, fill) {
  return <circle cx={100} cy={122} r={70} fill={fill} stroke={P.crust} strokeWidth="2.5"
    filter={`url(#${id}_s)`} />;
}

/* ── BEAR ── */
function BearSVG({ id }) {
  const f = `url(#${id}_f)`;
  return <>
    <defs><Grad id={id+'_f'} hi={P.breadHi} base={P.bread} /><Shadow id={id+'_s'} /></defs>
    <circle cx={57} cy={64} r={27} fill={P.bread} stroke={P.crust} strokeWidth="2.5" />
    <circle cx={143} cy={64} r={27} fill={P.bread} stroke={P.crust} strokeWidth="2.5" />
    <circle cx={57} cy={66} r={15} fill={P.earIn} />
    <circle cx={143} cy={66} r={15} fill={P.earIn} />
    {face(id, f)}
    <ellipse cx={100} cy={139} rx={26} ry={18} fill={P.muzzle} opacity="0.9" />
    <ellipse cx={100} cy={131} rx={7} ry={5.5} fill={P.choco} />
    <Smile cy={143} />
    <Cheeks cy={130} />
    <Eye cx={80} cy={111} /><Eye cx={120} cy={111} />
  </>;
}

/* ── RABBIT ── */
function RabbitSVG({ id }) {
  const f = `url(#${id}_f)`;
  return <>
    <defs><Grad id={id+'_f'} hi={P.breadHi} base={P.bread} /><Shadow id={id+'_s'} /></defs>
    <ellipse cx={72} cy={58} rx={18} ry={50} fill={P.bread} stroke={P.crust} strokeWidth="2.5" />
    <ellipse cx={128} cy={58} rx={18} ry={50} fill={P.bread} stroke={P.crust} strokeWidth="2.5" />
    <ellipse cx={72} cy={62} rx={10} ry={33} fill={P.earIn} opacity="0.82" />
    <ellipse cx={128} cy={62} rx={10} ry={33} fill={P.earIn} opacity="0.82" />
    {face(id, f)}
    <ellipse cx={100} cy={136} rx={6.5} ry={5.5} fill={P.nose} />
    <Smile cy={143} depth={8} />
    <Cheeks cy={130} />
    <Eye cx={80} cy={112} /><Eye cx={120} cy={112} />
  </>;
}

/* ── CAT ── */
function CatSVG({ id }) {
  const f = `url(#${id}_f)`;
  return <>
    <defs><Grad id={id+'_f'} hi={P.breadHi} base={P.bread} /><Shadow id={id+'_s'} /></defs>
    <path d="M50,94 Q65,44 82,94" fill={P.bread} stroke={P.crust} strokeWidth="2.5" strokeLinejoin="round" />
    <path d="M118,94 Q135,44 150,94" fill={P.bread} stroke={P.crust} strokeWidth="2.5" strokeLinejoin="round" />
    <path d="M60,92 Q65,56 76,92" fill={P.earIn} opacity="0.85" />
    <path d="M124,92 Q135,56 140,92" fill={P.earIn} opacity="0.85" />
    {face(id, f)}
    <polygon points="100,133 94,139 106,139" fill={P.nose} />
    <Smile cy={145} depth={7} />
    <line x1="55" y1="131" x2="88" y2="137" stroke={P.crust} strokeWidth="1.8" strokeLinecap="round" opacity="0.42" />
    <line x1="55" y1="139" x2="88" y2="140" stroke={P.crust} strokeWidth="1.8" strokeLinecap="round" opacity="0.42" />
    <line x1="145" y1="131" x2="112" y2="137" stroke={P.crust} strokeWidth="1.8" strokeLinecap="round" opacity="0.42" />
    <line x1="145" y1="139" x2="112" y2="140" stroke={P.crust} strokeWidth="1.8" strokeLinecap="round" opacity="0.42" />
    <Cheeks cy={130} />
    <Eye cx={80} cy={111} /><Eye cx={120} cy={111} />
  </>;
}

/* ── PIG ── */
function PigSVG({ id }) {
  const f = `url(#${id}_f)`;
  return <>
    <defs><Grad id={id+'_f'} hi={P.pigHi} base={P.pig} cx={70} cy={88} /><Shadow id={id+'_s'} /></defs>
    <ellipse cx={64} cy={72} rx={19} ry={15} fill={P.pig} stroke={P.pigSh} strokeWidth="2.2" transform="rotate(-22,64,72)" />
    <ellipse cx={136} cy={72} rx={19} ry={15} fill={P.pig} stroke={P.pigSh} strokeWidth="2.2" transform="rotate(22,136,72)" />
    <circle cx={100} cy={122} r={70} fill={f} stroke={P.pigSh} strokeWidth="2.5" filter={`url(#${id}_s)`} />
    <ellipse cx={100} cy={148} rx={27} ry={19} fill={P.pigSh} opacity="0.65" />
    <ellipse cx={90} cy={147} rx={6.5} ry={8.5} fill="rgba(180,68,104,0.38)" />
    <ellipse cx={110} cy={147} rx={6.5} ry={8.5} fill="rgba(180,68,104,0.38)" />
    <Cheeks cy={128} fill="#F894B8" cx1={63} cx2={137} rx={16} ry={10} />
    <Eye cx={80} cy={112} /><Eye cx={120} cy={112} />
  </>;
}

/* ── CHICK ── */
function ChickSVG({ id }) {
  const f = `url(#${id}_f)`;
  return <>
    <defs><Grad id={id+'_f'} hi={P.chickHi} base={P.chick} cx={70} cy={88} /><Shadow id={id+'_s'} /></defs>
    <ellipse cx={87} cy={58} rx={9.5} ry={17} fill={P.beak} transform="rotate(-18,87,58)" />
    <ellipse cx={100} cy={53} rx={9.5} ry={19} fill={P.beak} />
    <ellipse cx={113} cy={58} rx={9.5} ry={17} fill={P.beak} transform="rotate(18,113,58)" />
    <circle cx={100} cy={122} r={70} fill={f} stroke={P.chickSh} strokeWidth="2.5" filter={`url(#${id}_s)`} />
    <ellipse cx={100} cy={148} rx={12.5} ry={8.5} fill={P.beak} />
    <ellipse cx={100} cy={143} rx={10.5} ry={5.5} fill={P.beak} />
    <Cheeks cy={130} fill={P.beak} cx1={64} cx2={136} rx={15} ry={8.5} />
    <Eye cx={80} cy={112} /><Eye cx={120} cy={112} />
  </>;
}

/* ── FROG ── */
function FrogSVG({ id }) {
  const f = `url(#${id}_f)`, e = `url(#${id}_e)`;
  return <>
    <defs>
      <Grad id={id+'_f'} hi={P.frogHi} base={P.frog} cx={70} cy={100} />
      <Grad id={id+'_e'} hi={P.frogHi} base={P.frog} cx={45} cy={40} />
      <Shadow id={id+'_s'} />
    </defs>
    <circle cx={100} cy={124} r={70} fill={f} stroke={P.frogSh} strokeWidth="2.5" filter={`url(#${id}_s)`} />
    <circle cx={66} cy={96} r={24} fill={e} stroke={P.frogSh} strokeWidth="2.5" />
    <circle cx={134} cy={96} r={24} fill={e} stroke={P.frogSh} strokeWidth="2.5" />
    <circle cx={93} cy={135} r={5} fill={P.frogSh} opacity="0.48" />
    <circle cx={107} cy={135} r={5} fill={P.frogSh} opacity="0.48" />
    <path d="M72,150 Q100,172 128,150" fill="none" stroke={P.choco} strokeWidth="3.2" strokeLinecap="round" />
    <Cheeks cy={143} fill={P.cheek} cx1={63} cx2={137} rx={15} ry={9} />
    <Eye cx={66} cy={96} r={10} /><Eye cx={134} cy={96} r={10} />
  </>;
}

/* ── dispatcher ── */
const FACES = { bear:BearSVG, rabbit:RabbitSVG, cat:CatSVG, pig:PigSVG, chick:ChickSVG, frog:FrogSVG };

function AnimalBread({ type = 'bear', size = 160 }) {
  const Face = FACES[type] || BearSVG;
  const id = 'ab_' + type;
  return (
    <svg className="db-animal" width={size} height={size}
      viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg"
      style={{ display:'block', overflow:'visible', flex:'0 0 auto' }}>
      <Face id={id} />
    </svg>
  );
}

const ANIMALS = [
  { type:'bear',   name:'くまさん',   bread:'はちみつパン',   line:'こんにちは！はちみつたっぷり、あまいよ。', tag:'いちばん にんき' },
  { type:'rabbit', name:'うさぎさん', bread:'にんじんパン',   line:'ぴょん！おみみまで ぜんぶ たべられるよ。', tag:'やさいパン' },
  { type:'cat',    name:'ねこさん',   bread:'ミルクパン',     line:'にゃ〜。ふわふわで ミルクのあじ。',        tag:'ふわふわ' },
  { type:'pig',    name:'ぶたさん',   bread:'いちごあんパン', line:'ぶぅ〜。なかは あまい いちごあん！',       tag:'なかみ たっぷり' },
  { type:'chick',  name:'ひよこさん', bread:'たまごパン',     line:'ぴよぴよ♪ ふわふわ たまごクリーム。',     tag:'やきたて' },
  { type:'frog',   name:'かえるさん', bread:'メロンパン',     line:'ケロ！さくさくの みどりの メロンパン。',   tag:'さくさく' },
];

Object.assign(window, { AnimalBread, ANIMALS });