/* global React */
const { useState, useEffect, useRef } = React;

// Simple botanical leaf sprigs as inline SVG components
function LeafSprig({ className, style }) {
  return (
    <svg className={className} style={style} width="120" height="180" viewBox="0 0 120 180" fill="none">
      <path d="M60 5 C 60 5, 58 60, 60 175" stroke="currentColor" strokeWidth="0.6" />
      <g stroke="currentColor" strokeWidth="0.5" fill="none">
        <ellipse cx="40" cy="30" rx="14" ry="5" transform="rotate(-30 40 30)" />
        <ellipse cx="80" cy="50" rx="14" ry="5" transform="rotate(30 80 50)" />
        <ellipse cx="34" cy="70" rx="18" ry="6" transform="rotate(-25 34 70)" />
        <ellipse cx="86" cy="92" rx="18" ry="6" transform="rotate(25 86 92)" />
        <ellipse cx="40" cy="120" rx="14" ry="5" transform="rotate(-20 40 120)" />
        <ellipse cx="78" cy="145" rx="12" ry="4" transform="rotate(20 78 145)" />
      </g>
    </svg>
  );
}

function LaurelHalf({ className, style, flip }) {
  return (
    <svg className={className} style={{ transform: flip ? 'scaleX(-1)' : 'none', ...style }} width="60" height="120" viewBox="0 0 60 120" fill="none">
      <path d="M55 10 C 30 30, 18 60, 12 110" stroke="currentColor" strokeWidth="0.6" fill="none" />
      <g stroke="currentColor" strokeWidth="0.5" fill="none">
        <ellipse cx="42" cy="22" rx="8" ry="3" transform="rotate(40 42 22)" />
        <ellipse cx="34" cy="38" rx="9" ry="3.5" transform="rotate(50 34 38)" />
        <ellipse cx="28" cy="55" rx="10" ry="4" transform="rotate(60 28 55)" />
        <ellipse cx="22" cy="72" rx="10" ry="4" transform="rotate(65 22 72)" />
        <ellipse cx="18" cy="90" rx="9" ry="3.5" transform="rotate(70 18 90)" />
      </g>
    </svg>
  );
}

function Floret({ size = 40, className, style }) {
  return (
    <svg className={className} style={style} width={size} height={size} viewBox="0 0 40 40" fill="none">
      <circle cx="20" cy="20" r="3" fill="currentColor" />
      {[0, 45, 90, 135, 180, 225, 270, 315].map(a => (
        <ellipse key={a} cx="20" cy="10" rx="3" ry="6" fill="currentColor" opacity="0.85"
          transform={`rotate(${a} 20 20)`} />
      ))}
    </svg>
  );
}

// SVG placeholder for gallery tiles
function PlaceholderTile({ tint = 'a', label }) {
  const palettes = {
    a: ['#3d0000', '#734741', '#b08a4a'],
    b: ['#586357', '#052102', '#b08a4a'],
    c: ['#280d08', '#734741', '#d4a85a'],
    d: ['#7d2233', '#b08a4a', '#586357'],
    e: ['#1a0808', '#3d0000', '#b08a4a'],
  };
  const [c1, c2, c3] = palettes[tint] || palettes.a;
  const id = `g${tint}-${label?.replace(/\s/g, '')}`;
  return (
    <svg viewBox="0 0 400 300" preserveAspectRatio="xMidYMid slice">
      <defs>
        <linearGradient id={id} x1="0" y1="0" x2="1" y2="1">
          <stop offset="0" stopColor={c1} />
          <stop offset="1" stopColor={c2} />
        </linearGradient>
        <pattern id={`${id}p`} width="6" height="6" patternUnits="userSpaceOnUse" patternTransform="rotate(35)">
          <line x1="0" y1="0" x2="0" y2="6" stroke={c3} strokeWidth="0.6" opacity="0.25" />
        </pattern>
      </defs>
      <rect width="400" height="300" fill={`url(#${id})`} />
      <rect width="400" height="300" fill={`url(#${id}p)`} />
      <g opacity="0.5" stroke={c3} fill="none" strokeWidth="0.8">
        <ellipse cx="200" cy="150" rx="100" ry="40" transform="rotate(-15 200 150)" />
        <ellipse cx="200" cy="150" rx="70" ry="28" transform="rotate(20 200 150)" />
      </g>
    </svg>
  );
}

window.LeafSprig = LeafSprig;
window.LaurelHalf = LaurelHalf;
window.Floret = Floret;
window.PlaceholderTile = PlaceholderTile;