// Botanical leaf SVG decorations — used as backgrounds and ornaments
const SvgLeaf = ({ x, y, dx, dy, w = 0.45 }) => {
  const cx1 = x + dx * 0.5 - dy * w;
  const cy1 = y + dy * 0.5 + dx * w;
  const cx2 = x + dx * 0.5 + dy * w;
  const cy2 = y + dy * 0.5 - dx * w;
  return (
    <g>
      <path d={`M ${x} ${y} Q ${cx1} ${cy1} ${x+dx} ${y+dy} Q ${cx2} ${cy2} ${x} ${y} Z`} />
      <path d={`M ${x} ${y} Q ${x + dx*0.5} ${y + dy*0.5} ${x+dx} ${y+dy}`} stroke="rgba(255,255,255,0.4)" strokeWidth="1" fill="none" />
    </g>
  );
};

const LeafSpray = ({flip=false, size=180, opacity=0.7, color="#7da086"}) => (
  <svg width={size} height={size*0.7} viewBox="0 0 200 140" style={{transform: flip?'scaleX(-1)':'none', opacity}}>
    <g fill={color} stroke={color} strokeLinejoin="round">
      <path d="M 20 120 Q 100 90 180 30" fill="none" strokeWidth="2.5" strokeLinecap="round" />
      <path d="M 80 95 Q 130 50 160 20" fill="none" strokeWidth="1.5" strokeLinecap="round" />
      
      {/* Main branch bottom leaves */}
      <SvgLeaf x={40} y={111} dx={25} dy={15} w={0.5} />
      <SvgLeaf x={80} y={95} dx={28} dy={12} w={0.5} />
      <SvgLeaf x={120} y={73} dx={30} dy={8} w={0.5} />
      
      {/* Main branch top leaves */}
      <SvgLeaf x={60} y={104} dx={15} dy={-25} w={0.5} />
      <SvgLeaf x={100} y={82} dx={18} dy={-28} w={0.5} />
      <SvgLeaf x={140} y={57} dx={20} dy={-26} w={0.5} />
      
      {/* End leaf main branch */}
      <SvgLeaf x={180} y={30} dx={22} dy={-15} w={0.4} />
      
      {/* Secondary branch bottom leaves */}
      <SvgLeaf x={110} y={67} dx={22} dy={5} w={0.5} />
      <SvgLeaf x={140} y={38} dx={20} dy={2} w={0.5} />
      
      {/* Secondary branch top leaves */}
      <SvgLeaf x={95} y={80} dx={10} dy={-20} w={0.5} />
      <SvgLeaf x={125} y={54} dx={12} dy={-22} w={0.5} />
      
      {/* End leaf secondary branch */}
      <SvgLeaf x={160} y={20} dx={18} dy={-10} w={0.4} />
    </g>
  </svg>
);

const LeafSprig = ({size=80, color="#7da086", opacity=0.9}) => (
  <svg width={size} height={size*0.5} viewBox="0 0 100 50" style={{opacity}}>
    <g fill={color} stroke={color} strokeLinejoin="round">
      <path d="M 10 40 Q 50 30 90 10" fill="none" strokeWidth="2" strokeLinecap="round" />
      <SvgLeaf x={25} y={36} dx={15} dy={8} w={0.5} />
      <SvgLeaf x={45} y={30} dx={16} dy={6} w={0.5} />
      <SvgLeaf x={65} y={22} dx={17} dy={4} w={0.5} />
      
      <SvgLeaf x={35} y={33} dx={8} dy={-15} w={0.5} />
      <SvgLeaf x={55} y={26} dx={10} dy={-14} w={0.5} />
      <SvgLeaf x={75} y={17} dx={12} dy={-12} w={0.5} />
      
      {/* End leaf */}
      <SvgLeaf x={90} y={10} dx={12} dy={-6} w={0.4} />
    </g>
  </svg>
);

const SmallLeafIcon = ({size=18, color="currentColor"}) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill={color}>
    <path d="M12 3c-5 0-9 4-9 9 0 0 4-1 7-4 3 3 7 4 7 4 0-5-4-9-5-9z" opacity=".85"/>
    <path d="M12 3v18" stroke={color} strokeWidth="1" fill="none" opacity=".5"/>
  </svg>
);

// Logo - Image based BOTANICA logo
const BotanicaLogo = ({size=36}) => {
  return (
    <img src="assets/ボタニカ　ロゴ.png" alt="BOTANICA" height={size} style={{display: 'block', width: 'auto', objectFit: 'contain'}} />
  );
};

window.LeafSpray = LeafSpray;
window.LeafSprig = LeafSprig;
window.SmallLeafIcon = SmallLeafIcon;
window.BotanicaLogo = BotanicaLogo;