/* Decorative SVG elements: berries, leaves, branches */

const BerryBranch = ({ flip = false, size = 220, color = '#E36A1F' }) => (
  <svg viewBox="0 0 200 200" width={size} height={size}
       style={{ transform: flip ? 'scaleX(-1)' : 'none' }}>
    <g>
      {/* branch */}
      <path d="M10 100 Q 50 80, 90 90 T 180 70"
            stroke="#5A3820" strokeWidth="1.5" fill="none" />
      {/* leaves */}
      {[
        { x: 30, y: 90, r: -20, l: 28 },
        { x: 50, y: 105, r: 15, l: 24 },
        { x: 80, y: 80, r: -25, l: 30 },
        { x: 110, y: 95, r: 10, l: 26 },
        { x: 140, y: 75, r: -15, l: 28 },
      ].map((L, i) => (
        <g key={i} transform={`translate(${L.x},${L.y}) rotate(${L.r})`}>
          <ellipse cx="0" cy="0" rx={L.l/3} ry={L.l} fill="#6A7A48" opacity="0.85" />
          <path d={`M 0 -${L.l} Q 0 0, 0 ${L.l}`} stroke="#3F4928" strokeWidth="0.6" />
        </g>
      ))}
      {/* berries */}
      {[
        { x: 70, y: 95 }, { x: 75, y: 105 }, { x: 65, y: 110 },
        { x: 120, y: 85 }, { x: 128, y: 92 }, { x: 115, y: 95 },
        { x: 160, y: 78 }, { x: 168, y: 84 }, { x: 155, y: 88 }, { x: 162, y: 92 },
      ].map((B, i) => (
        <g key={`b${i}`} transform={`translate(${B.x},${B.y})`}>
          <circle r="7" fill={color} />
          <circle r="7" fill="url(#berryGlow)" opacity="0.6" />
          <circle cx="-2" cy="-2" r="2" fill="#FFE0B8" opacity="0.7" />
          <circle r="7" fill="none" stroke="#7B2F0C" strokeWidth="0.4" />
        </g>
      ))}
      <defs>
        <radialGradient id="berryGlow">
          <stop offset="0%" stopColor="#FFD08A" stopOpacity="0.9" />
          <stop offset="100%" stopColor="#E36A1F" stopOpacity="0" />
        </radialGradient>
      </defs>
    </g>
  </svg>
);

const SmallBerries = ({ size = 80 }) => (
  <svg viewBox="0 0 100 100" width={size} height={size}>
    <defs>
      <radialGradient id="smGlow">
        <stop offset="0%" stopColor="#FFD08A" stopOpacity="0.9" />
        <stop offset="100%" stopColor="#E36A1F" stopOpacity="0" />
      </radialGradient>
    </defs>
    {[
      { x: 30, y: 50, r: 14 },
      { x: 50, y: 38, r: 13 },
      { x: 65, y: 55, r: 15 },
      { x: 45, y: 62, r: 12 },
    ].map((B, i) => (
      <g key={i}>
        <circle cx={B.x} cy={B.y} r={B.r} fill="#E36A1F" />
        <circle cx={B.x} cy={B.y} r={B.r} fill="url(#smGlow)" />
        <circle cx={B.x - B.r * 0.3} cy={B.y - B.r * 0.3} r={B.r * 0.3} fill="#FFE0B8" opacity="0.7" />
      </g>
    ))}
    {/* leaves */}
    <g transform="translate(20,30) rotate(-20)">
      <ellipse rx="6" ry="22" fill="#6A7A48" />
    </g>
    <g transform="translate(78,32) rotate(25)">
      <ellipse rx="6" ry="22" fill="#5A6B3D" />
    </g>
    <g transform="translate(72,78) rotate(45)">
      <ellipse rx="5" ry="16" fill="#6A7A48" />
    </g>
  </svg>
);

const LeafFlourish = ({ size = 24, color = '#6A7A48' }) => (
  <svg viewBox="0 0 40 24" width={size * (40/24)} height={size}>
    <path d="M5 12 Q 15 4, 20 12 Q 25 20, 35 12" stroke={color} strokeWidth="1.2" fill="none" />
    <ellipse cx="12" cy="9" rx="3" ry="6" transform="rotate(-30 12 9)" fill={color} opacity="0.85" />
    <ellipse cx="20" cy="6" rx="3" ry="5" fill={color} opacity="0.85" />
    <ellipse cx="28" cy="9" rx="3" ry="6" transform="rotate(30 28 9)" fill={color} opacity="0.85" />
  </svg>
);

const Sparkles = () => (
  <svg viewBox="0 0 400 400" width="100%" height="100%" style={{ position: 'absolute', inset: 0, pointerEvents: 'none' }}>
    {Array.from({ length: 24 }).map((_, i) => {
      const cx = Math.random() * 400;
      const cy = Math.random() * 400;
      const r = Math.random() * 1.5 + 0.5;
      return <circle key={i} cx={cx} cy={cy} r={r} fill="#FFE0B8" opacity={Math.random() * 0.7 + 0.3} />;
    })}
  </svg>
);

window.Decor = { BerryBranch, SmallBerries, LeafFlourish, Sparkles };