// Botanical / ocean / sunset / tiki SVG motifs.
// All geometric, composed of simple primitives.

const Monstera = ({ size = 120, color = "#1F5A3F", style }) => (
  <svg viewBox="0 0 120 120" width={size} height={size} style={style}>
    <g fill={color}>
      <path d="M60 114 Q 58 70 28 46 Q 10 34 14 16 Q 30 12 46 26 Q 58 38 60 50 Q 62 38 74 26 Q 90 12 106 16 Q 110 34 92 46 Q 62 70 60 114 Z" />
    </g>
    <g fill="#FFF" opacity="0.25">
      <ellipse cx="32" cy="34" rx="6" ry="10" transform="rotate(-30 32 34)" />
      <ellipse cx="88" cy="34" rx="6" ry="10" transform="rotate(30 88 34)" />
      <ellipse cx="48" cy="52" rx="5" ry="8" transform="rotate(-15 48 52)" />
      <ellipse cx="72" cy="52" rx="5" ry="8" transform="rotate(15 72 52)" />
    </g>
  </svg>
);

const PalmFrond = ({ size = 160, color = "#2D6B4A", style }) => (
  <svg viewBox="0 0 200 200" width={size} height={size} style={style}>
    <g fill={color}>
      {[...Array(9)].map((_, i) => {
        const angle = -70 + i * 16;
        const len = 75 + (i === 4 ? 6 : 0);
        return (
          <ellipse
            key={i}
            cx="100"
            cy="100"
            rx={len}
            ry="11"
            transform={`rotate(${angle} 100 100) translate(${len - 10} 0)`}
          />
        );
      })}
      <rect x="98" y="100" width="4" height="96" fill={color} />
    </g>
  </svg>
);

const Hibiscus = ({ size = 80, color = "#FF3D6E", stamen = "#FFD36B", style }) => (
  <svg viewBox="0 0 80 80" width={size} height={size} style={style}>
    <g transform="translate(40 40)">
      {[...Array(5)].map((_, i) => (
        <ellipse key={i} cx="0" cy="-18" rx="14" ry="20" fill={color} transform={`rotate(${i * 72})`} />
      ))}
      <circle r="8" fill={stamen} />
      <circle r="3" fill="#FFF4C4" />
    </g>
  </svg>
);

const Wave = ({ width = 400, height = 60, color = "#5FB7E0", style }) => (
  <svg viewBox={`0 0 400 60`} width={width} height={height} style={style} preserveAspectRatio="none">
    <path d="M0 30 Q 50 0 100 30 T 200 30 T 300 30 T 400 30 L 400 60 L 0 60 Z" fill={color} />
    <path d="M0 40 Q 50 10 100 40 T 200 40 T 300 40 T 400 40" stroke="#FFF" strokeWidth="2" fill="none" opacity="0.4" />
  </svg>
);

const Sun = ({ size = 220, style }) => (
  <svg viewBox="0 0 220 220" width={size} height={size} style={style}>
    <defs>
      <radialGradient id="sunGrad" cx="50%" cy="50%">
        <stop offset="0%" stopColor="#FFE38A" />
        <stop offset="50%" stopColor="#FFB05A" />
        <stop offset="100%" stopColor="#FF6B4A" />
      </radialGradient>
    </defs>
    <circle cx="110" cy="110" r="80" fill="url(#sunGrad)" />
    {[...Array(12)].map((_, i) => (
      <rect key={i} x="108" y="8" width="4" height="22" rx="2" fill="#FFB05A" transform={`rotate(${i * 30} 110 110)`} />
    ))}
  </svg>
);

const Pineapple = ({ size = 60, style }) => (
  <svg viewBox="0 0 60 80" width={size} height={size * 80/60} style={style}>
    <g fill="#2D6B4A">
      {[...Array(5)].map((_, i) => (
        <path key={i} d={`M30 18 Q ${30 + (i - 2) * 6} 2 ${30 + (i - 2) * 4} 18 Z`} />
      ))}
    </g>
    <ellipse cx="30" cy="48" rx="20" ry="28" fill="#F5B042" />
    <g stroke="#C7811E" strokeWidth="1.5" fill="none">
      {[...Array(4)].map((_, i) => (
        <line key={i} x1="12" y1={30 + i * 8} x2="48" y2={26 + i * 8} />
      ))}
      {[...Array(4)].map((_, i) => (
        <line key={i} x1={14 + i * 10} y1="22" x2={10 + i * 10} y2="74" />
      ))}
    </g>
  </svg>
);

const Surfboard = ({ width = 60, height = 220, color = "#E07A4F", stripe = "#FFD36B", style }) => (
  <svg viewBox="0 0 60 220" width={width} height={height} style={style}>
    <rect x="10" y="0" width="40" height="220" rx="20" fill={color} />
    <rect x="28" y="10" width="4" height="200" fill={stripe} opacity="0.6" />
    <rect x="18" y="30" width="24" height="6" rx="3" fill="#FFF" opacity="0.5" />
    <rect x="26" y="208" width="8" height="12" fill="#3A2A1E" />
  </svg>
);

const Coconut = ({ size = 48, style }) => (
  <svg viewBox="0 0 60 60" width={size} height={size} style={style}>
    <circle cx="30" cy="30" r="24" fill="#6B3A1E" />
    <circle cx="22" cy="24" r="3" fill="#2E1810" />
    <circle cx="34" cy="22" r="3" fill="#2E1810" />
    <circle cx="28" cy="34" r="3" fill="#2E1810" />
  </svg>
);

const TikiTorch = ({ height = 140, style }) => (
  <svg viewBox="0 0 40 140" width={height * 40/140} height={height} style={style}>
    <rect x="16" y="40" width="8" height="100" fill="#5E3A1F" />
    <g fill="#7A4E2A">
      {[...Array(6)].map((_, i) => <rect key={i} x="14" y={40 + i * 16} width="12" height="2" />)}
    </g>
    <path d="M20 0 Q 8 18 12 32 Q 20 24 20 40 Q 28 24 28 32 Q 32 18 20 0 Z" fill="#FF6B4A" />
    <path d="M20 8 Q 14 20 16 30 Q 20 24 20 36 Q 24 24 24 30 Q 26 20 20 8 Z" fill="#FFD36B" />
  </svg>
);

Object.assign(window, { Monstera, PalmFrond, Hibiscus, Wave, Sun, Pineapple, Surfboard, Coconut, TikiTorch });