// Roses aquarelle dessinées en SVG — style doux, pétales superposés
// Plusieurs variations pour varier les compositions

const RoseBloom = ({ size = 120, hue = 'pink', opacity = 1, style = {} }) => {
  // Palette aquarelle rose poudré
  const palettes = {
    pink: {
      outer: '#f4d4d8',
      mid: '#e8b4bc',
      inner: '#d89099',
      core: '#b9606e',
      shadow: '#9a4d5b',
    },
    blush: {
      outer: '#f9e2e0',
      mid: '#f0c2bc',
      inner: '#dd9a96',
      core: '#c47670',
      shadow: '#a05955',
    },
    dusty: {
      outer: '#ecc9cc',
      mid: '#dba5ac',
      inner: '#c47e88',
      core: '#a3606c',
      shadow: '#7e4651',
    },
  };
  const c = palettes[hue] || palettes.pink;

  return (
    <svg
      viewBox="0 0 200 200"
      width={size}
      height={size}
      style={{ display: 'block', opacity, ...style }}
      xmlns="http://www.w3.org/2000/svg"
    >
      <defs>
        <radialGradient id={`rose-bg-${hue}`} cx="50%" cy="50%" r="55%">
          <stop offset="0%" stopColor={c.outer} stopOpacity="0.9" />
          <stop offset="60%" stopColor={c.mid} stopOpacity="0.55" />
          <stop offset="100%" stopColor={c.outer} stopOpacity="0" />
        </radialGradient>
        <radialGradient id={`rose-petal-${hue}`} cx="50%" cy="40%" r="60%">
          <stop offset="0%" stopColor={c.outer} />
          <stop offset="60%" stopColor={c.mid} />
          <stop offset="100%" stopColor={c.inner} />
        </radialGradient>
        <radialGradient id={`rose-core-${hue}`} cx="50%" cy="50%" r="50%">
          <stop offset="0%" stopColor={c.core} />
          <stop offset="80%" stopColor={c.shadow} />
        </radialGradient>
        <filter id={`rose-blur-${hue}`}>
          <feGaussianBlur stdDeviation="0.6" />
        </filter>
      </defs>

      {/* Halo aquarelle */}
      <circle cx="100" cy="100" r="95" fill={`url(#rose-bg-${hue})`} />

      {/* Pétales extérieurs */}
      <g filter={`url(#rose-blur-${hue})`} opacity="0.85">
        <ellipse cx="100" cy="45" rx="38" ry="48" fill={`url(#rose-petal-${hue})`} transform="rotate(-15 100 60)" />
        <ellipse cx="155" cy="80" rx="38" ry="48" fill={`url(#rose-petal-${hue})`} transform="rotate(50 155 80)" />
        <ellipse cx="145" cy="140" rx="38" ry="48" fill={`url(#rose-petal-${hue})`} transform="rotate(115 145 140)" />
        <ellipse cx="80" cy="155" rx="38" ry="48" fill={`url(#rose-petal-${hue})`} transform="rotate(180 80 155)" />
        <ellipse cx="45" cy="115" rx="38" ry="48" fill={`url(#rose-petal-${hue})`} transform="rotate(240 45 115)" />
        <ellipse cx="55" cy="60" rx="38" ry="48" fill={`url(#rose-petal-${hue})`} transform="rotate(300 55 60)" />
      </g>

      {/* Pétales intermédiaires */}
      <g opacity="0.92">
        <ellipse cx="100" cy="70" rx="26" ry="34" fill={`url(#rose-petal-${hue})`} transform="rotate(0 100 80)" />
        <ellipse cx="130" cy="95" rx="26" ry="34" fill={`url(#rose-petal-${hue})`} transform="rotate(70 130 95)" />
        <ellipse cx="120" cy="130" rx="26" ry="34" fill={`url(#rose-petal-${hue})`} transform="rotate(135 120 130)" />
        <ellipse cx="80" cy="130" rx="26" ry="34" fill={`url(#rose-petal-${hue})`} transform="rotate(210 80 130)" />
        <ellipse cx="70" cy="95" rx="26" ry="34" fill={`url(#rose-petal-${hue})`} transform="rotate(290 70 95)" />
      </g>

      {/* Pétales intérieurs */}
      <g opacity="1">
        <ellipse cx="100" cy="92" rx="16" ry="22" fill={c.inner} transform="rotate(20 100 100)" />
        <ellipse cx="112" cy="108" rx="16" ry="22" fill={c.inner} transform="rotate(110 112 108)" />
        <ellipse cx="88" cy="112" rx="16" ry="22" fill={c.inner} transform="rotate(220 88 112)" />
      </g>

      {/* Cœur enroulé */}
      <g>
        <ellipse cx="100" cy="102" rx="10" ry="14" fill={`url(#rose-core-${hue})`} transform="rotate(15 100 102)" />
        <path
          d="M 96 96 Q 100 90 106 96 Q 110 102 104 108 Q 98 112 94 106 Q 92 100 96 96 Z"
          fill={c.shadow}
          opacity="0.7"
        />
      </g>

      {/* Touches d'aquarelle organiques */}
      <g opacity="0.35">
        <circle cx="60" cy="55" r="6" fill={c.outer} filter={`url(#rose-blur-${hue})`} />
        <circle cx="160" cy="70" r="5" fill={c.outer} filter={`url(#rose-blur-${hue})`} />
        <circle cx="170" cy="150" r="7" fill={c.outer} filter={`url(#rose-blur-${hue})`} />
        <circle cx="40" cy="160" r="6" fill={c.outer} filter={`url(#rose-blur-${hue})`} />
      </g>
    </svg>
  );
};

const RoseBud = ({ size = 60, hue = 'pink', opacity = 1, rotation = 0, style = {} }) => {
  const palettes = {
    pink: { outer: '#f4d4d8', mid: '#e8b4bc', inner: '#c47e88', core: '#9a4d5b', leaf: '#9ca989' },
    blush: { outer: '#f9e2e0', mid: '#f0c2bc', inner: '#c47670', core: '#a05955', leaf: '#9ca989' },
    dusty: { outer: '#ecc9cc', mid: '#dba5ac', inner: '#a3606c', core: '#7e4651', leaf: '#8b9778' },
  };
  const c = palettes[hue] || palettes.pink;

  return (
    <svg
      viewBox="0 0 100 140"
      width={size}
      height={size * 1.4}
      style={{ display: 'block', opacity, transform: `rotate(${rotation}deg)`, ...style }}
      xmlns="http://www.w3.org/2000/svg"
    >
      <defs>
        <radialGradient id={`bud-${hue}-${rotation}`} cx="50%" cy="40%" r="60%">
          <stop offset="0%" stopColor={c.outer} />
          <stop offset="60%" stopColor={c.mid} />
          <stop offset="100%" stopColor={c.inner} />
        </radialGradient>
        <linearGradient id={`leaf-${hue}-${rotation}`} x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" stopColor={c.leaf} stopOpacity="0.9" />
          <stop offset="100%" stopColor={c.leaf} stopOpacity="0.5" />
        </linearGradient>
      </defs>

      {/* Tige */}
      <path d="M 50 50 Q 48 90 52 135" stroke={c.leaf} strokeWidth="2" fill="none" opacity="0.8" />

      {/* Feuilles */}
      <path d="M 50 80 Q 30 78 22 95 Q 38 92 50 88 Z" fill={`url(#leaf-${hue}-${rotation})`} opacity="0.85" />
      <path d="M 52 105 Q 75 100 82 118 Q 65 115 52 112 Z" fill={`url(#leaf-${hue}-${rotation})`} opacity="0.85" />

      {/* Sépales */}
      <path d="M 35 55 Q 50 70 65 55 Q 60 65 50 68 Q 40 65 35 55 Z" fill={c.leaf} opacity="0.8" />

      {/* Bouton */}
      <ellipse cx="50" cy="38" rx="20" ry="28" fill={`url(#bud-${hue}-${rotation})`} />
      <path d="M 38 32 Q 50 20 62 32 Q 60 45 50 48 Q 40 45 38 32 Z" fill={c.mid} opacity="0.8" />
      <ellipse cx="50" cy="35" rx="8" ry="12" fill={c.inner} opacity="0.7" />
    </svg>
  );
};

const Leaf = ({ size = 80, opacity = 0.7, rotation = 0, color = '#9ca989', style = {} }) => (
  <svg
    viewBox="0 0 100 100"
    width={size}
    height={size}
    style={{ display: 'block', opacity, transform: `rotate(${rotation}deg)`, ...style }}
    xmlns="http://www.w3.org/2000/svg"
  >
    <defs>
      <linearGradient id={`leaf-grad-${rotation}-${color.replace('#', '')}`} x1="0%" y1="0%" x2="100%" y2="100%">
        <stop offset="0%" stopColor={color} stopOpacity="0.9" />
        <stop offset="100%" stopColor={color} stopOpacity="0.4" />
      </linearGradient>
    </defs>
    <path
      d="M 20 50 Q 30 20 50 15 Q 75 25 80 50 Q 75 75 50 85 Q 30 80 20 50 Z"
      fill={`url(#leaf-grad-${rotation}-${color.replace('#', '')})`}
    />
    <path d="M 25 50 Q 50 35 78 50" stroke={color} strokeWidth="1" fill="none" opacity="0.5" />
    <path d="M 30 45 Q 40 40 50 42" stroke={color} strokeWidth="0.6" fill="none" opacity="0.4" />
    <path d="M 35 55 Q 45 58 55 56" stroke={color} strokeWidth="0.6" fill="none" opacity="0.4" />
  </svg>
);

const EucalyptusSprig = ({ size = 120, opacity = 0.7, rotation = 0, style = {} }) => (
  <svg
    viewBox="0 0 120 200"
    width={size * 0.6}
    height={size}
    style={{ display: 'block', opacity, transform: `rotate(${rotation}deg)`, ...style }}
    xmlns="http://www.w3.org/2000/svg"
  >
    <defs>
      <radialGradient id={`euc-${rotation}`} cx="50%" cy="50%" r="50%">
        <stop offset="0%" stopColor="#b8c4a8" />
        <stop offset="100%" stopColor="#8b9778" />
      </radialGradient>
    </defs>
    <path d="M 60 10 Q 58 100 62 195" stroke="#7d8a6c" strokeWidth="1.5" fill="none" />
    {[
      [60, 30, 35, -25],
      [60, 30, 85, 25],
      [60, 60, 30, -20],
      [60, 60, 90, 20],
      [60, 95, 35, -25],
      [60, 95, 85, 25],
      [60, 130, 32, -22],
      [60, 130, 88, 22],
      [60, 165, 38, -28],
      [60, 165, 82, 28],
    ].map(([sx, sy, ex, rot], i) => (
      <g key={i}>
        <line x1={sx} y1={sy} x2={ex} y2={sy + 5} stroke="#7d8a6c" strokeWidth="0.8" />
        <ellipse cx={ex} cy={sy + 5} rx="11" ry="8" fill={`url(#euc-${rotation})`} transform={`rotate(${rot} ${ex} ${sy + 5})`} opacity="0.85" />
      </g>
    ))}
  </svg>
);

// Petit pétale qui tombe
const Petal = ({ size = 14, hue = 'pink', style = {} }) => {
  const palettes = {
    pink:     { start: '#f9e2e0', end: '#e8b4bc' },
    blush:    { start: '#f9e2e0', end: '#f0c2bc' },
    dusty:    { start: '#f9e2e0', end: '#dba5ac' },
    gold:     { start: '#e8c887', end: '#a87f3a' },
    goldsoft: { start: '#f0d9a5', end: '#c39e54' },
  };
  const c = palettes[hue] || palettes.pink;
  return (
    <svg viewBox="0 0 20 30" width={size} height={size * 1.5} style={{ display: 'block', ...style }} xmlns="http://www.w3.org/2000/svg">
      <defs>
        <radialGradient id={`petal-fall-${hue}-${size}`} cx="50%" cy="40%" r="60%">
          <stop offset="0%" stopColor={c.start} />
          <stop offset="100%" stopColor={c.end} />
        </radialGradient>
      </defs>
      <path d="M 10 2 Q 18 10 16 22 Q 10 28 4 22 Q 2 10 10 2 Z" fill={`url(#petal-fall-${hue}-${size})`} opacity="0.85" />
    </svg>
  );
};

// Rose photographique réaliste
const RealRose = ({ size = 160, src = 'assets/rose-real-1.png', rotation = 0, opacity = 1, style = {} }) => (
  <img
    src={src}
    alt=""
    aria-hidden="true"
    style={{
      width: size,
      height: size,
      objectFit: 'contain',
      transform: `rotate(${rotation}deg)`,
      opacity,
      filter: 'drop-shadow(0 6px 18px rgba(196, 118, 112, 0.18))',
      ...style,
    }}
  />
);

// Couronne / arrangement complexe pour les coins — utilise les vraies roses
const FloralCorner = ({ size = 320, mirror = false, density = 'medium', style = {} }) => {
  const counts = { sparse: 0.65, medium: 1, generous: 1.35 };
  const m = counts[density] || 1;
  const transform = mirror ? 'scaleX(-1)' : 'none';

  return (
    <div style={{ position: 'relative', width: size, height: size, transform, ...style }}>
      {/* Eucalyptus en arrière-plan */}
      <div style={{ position: 'absolute', top: -20, left: -30 }}>
        <EucalyptusSprig size={size * 0.85} opacity={0.55 * m} rotation={-15} />
      </div>
      <div style={{ position: 'absolute', top: 50, left: 30 }}>
        <EucalyptusSprig size={size * 0.7} opacity={0.5 * m} rotation={25} />
      </div>

      {/* Rose principale */}
      <div style={{ position: 'absolute', top: -20, left: 20 }}>
        <RealRose size={size * 0.62} src="assets/rose-real-1.png" opacity={1} rotation={-8} />
      </div>

      {/* Rose secondaire (plus pâle) */}
      <div style={{ position: 'absolute', top: size * 0.42, left: -10 }}>
        <RealRose size={size * 0.48} src="assets/rose-real-3.png" opacity={0.95 * Math.min(m, 1.05)} rotation={20} />
      </div>

      {/* Rose plus saturée petite */}
      <div style={{ position: 'absolute', top: size * 0.2, left: size * 0.5 }}>
        <RealRose size={size * 0.4} src="assets/rose-real-2.png" opacity={0.9 * Math.min(m, 1.05)} rotation={35} />
      </div>

      {/* Feuilles */}
      <div style={{ position: 'absolute', top: size * 0.05, left: size * 0.6 }}>
        <Leaf size={size * 0.22} opacity={0.5 * m} rotation={45} color="#9ca989" />
      </div>
      <div style={{ position: 'absolute', top: size * 0.78, left: size * 0.25 }}>
        <Leaf size={size * 0.2} opacity={0.45 * m} rotation={-40} color="#b8c4a8" />
      </div>
    </div>
  );
};

// Petit ornement bordure
const FloralDivider = ({ width = 200, opacity = 0.8 }) => (
  <svg viewBox="0 0 400 60" width={width} height={width * 0.15} style={{ opacity, display: 'block' }} xmlns="http://www.w3.org/2000/svg">
    <defs>
      <linearGradient id="div-gold" x1="0%" y1="0%" x2="100%" y2="0%">
        <stop offset="0%" stopColor="#d4af6a" stopOpacity="0" />
        <stop offset="50%" stopColor="#b89249" stopOpacity="1" />
        <stop offset="100%" stopColor="#d4af6a" stopOpacity="0" />
      </linearGradient>
    </defs>
    <line x1="20" y1="30" x2="180" y2="30" stroke="url(#div-gold)" strokeWidth="0.8" />
    <line x1="220" y1="30" x2="380" y2="30" stroke="url(#div-gold)" strokeWidth="0.8" />
    <g transform="translate(200 30)">
      <circle r="3" fill="#b89249" />
      <ellipse cx="-10" cy="0" rx="8" ry="3" fill="#e8b4bc" opacity="0.8" transform="rotate(-20)" />
      <ellipse cx="10" cy="0" rx="8" ry="3" fill="#e8b4bc" opacity="0.8" transform="rotate(20)" />
      <ellipse cx="0" cy="-8" rx="3" ry="6" fill="#d89099" opacity="0.9" />
      <ellipse cx="0" cy="8" rx="3" ry="6" fill="#d89099" opacity="0.9" />
    </g>
  </svg>
);

// ============= WATERCOLOR BRANCH (teal + gold) =============
// Inspiration : feuilles aquarelle teal/sauge/gold sur fond clair
const WatercolorBranch = ({ size = 360, mirror = false, style = {} }) => {
  const transform = mirror ? 'scaleX(-1)' : 'none';
  return (
    <svg
      viewBox="0 0 360 360"
      width={size}
      height={size}
      style={{ display: 'block', transform, ...style }}
      xmlns="http://www.w3.org/2000/svg"
    >
      <defs>
        <linearGradient id="wlf-deep" x1="20%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" stopColor="#a4c2bf" stopOpacity="0.55" />
          <stop offset="55%" stopColor="#3e6e6a" stopOpacity="0.95" />
          <stop offset="100%" stopColor="#264e4b" stopOpacity="1" />
        </linearGradient>
        <linearGradient id="wlf-mid" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" stopColor="#bcd6d3" stopOpacity="0.5" />
          <stop offset="100%" stopColor="#5b8784" stopOpacity="0.95" />
        </linearGradient>
        <linearGradient id="wlf-pale" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" stopColor="#d3e3e0" stopOpacity="0.3" />
          <stop offset="100%" stopColor="#9ab7b3" stopOpacity="0.65" />
        </linearGradient>
        <linearGradient id="wlf-sage" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" stopColor="#b8c9b1" stopOpacity="0.5" />
          <stop offset="100%" stopColor="#7a9879" stopOpacity="0.85" />
        </linearGradient>
        <linearGradient id="wlf-gold" x1="0%" y1="0%" x2="100%" y2="0%">
          <stop offset="0%" stopColor="#e8c887" />
          <stop offset="50%" stopColor="#b89249" />
          <stop offset="100%" stopColor="#8c6b32" />
        </linearGradient>
        <filter id="wlf-soft">
          <feGaussianBlur stdDeviation="0.5" />
        </filter>
      </defs>

      {/* Feuilles pâles d'arrière-plan */}
      <g opacity="0.55" filter="url(#wlf-soft)">
        <path d="M 30 80 Q 60 30 130 50 Q 110 100 60 100 Q 35 95 30 80 Z" fill="url(#wlf-pale)" />
        <path d="M 90 30 Q 160 20 195 80 Q 165 110 110 80 Q 90 50 90 30 Z" fill="url(#wlf-pale)" />
        <path d="M 200 60 Q 270 50 285 130 Q 250 145 215 110 Q 195 80 200 60 Z" fill="url(#wlf-pale)" />
      </g>

      {/* Branches dorées */}
      <g stroke="url(#wlf-gold)" fill="none" strokeLinecap="round">
        <path d="M 30 240 Q 80 180 140 130 Q 200 90 250 70" strokeWidth="1.4" opacity="0.85" />
        <path d="M 140 130 Q 165 100 210 90" strokeWidth="0.9" opacity="0.75" />
        <path d="M 100 175 Q 75 165 50 175" strokeWidth="0.8" opacity="0.7" />
        <path d="M 195 105 Q 220 95 250 110" strokeWidth="0.8" opacity="0.7" />
        <path d="M 60 215 Q 35 220 18 240" strokeWidth="0.7" opacity="0.65" />
        <path d="M 175 115 Q 165 145 180 175" strokeWidth="0.7" opacity="0.6" />
      </g>

      {/* Feuilles sauge (couche intermédiaire) */}
      <g>
        <path d="M 75 50 Q 110 25 145 60 Q 130 95 95 90 Q 75 75 75 50 Z" fill="url(#wlf-sage)" opacity="0.75" />
        <path d="M 165 145 Q 215 130 235 175 Q 210 210 175 195 Q 155 170 165 145 Z" fill="url(#wlf-sage)" opacity="0.7" />
      </g>

      {/* Feuilles teal moyennes */}
      <g>
        <path d="M 35 130 Q 70 90 120 110 Q 115 155 75 165 Q 40 160 35 130 Z" fill="url(#wlf-mid)" opacity="0.92" />
        <path d="M 120 60 Q 175 40 205 95 Q 180 130 135 115 Q 115 90 120 60 Z" fill="url(#wlf-mid)" opacity="0.9" />
        <path d="M 215 105 Q 270 95 290 150 Q 260 180 220 165 Q 200 135 215 105 Z" fill="url(#wlf-mid)" opacity="0.88" />
      </g>

      {/* Feuilles teal foncées (premier plan) */}
      <g>
        <path d="M 80 80 Q 130 50 170 100 Q 145 145 100 130 Q 75 110 80 80 Z" fill="url(#wlf-deep)" opacity="0.95" />
        <path d="M 175 30 Q 230 15 250 75 Q 220 100 185 80 Q 165 55 175 30 Z" fill="url(#wlf-deep)" opacity="0.95" />
        <path d="M 30 170 Q 70 145 105 195 Q 90 230 50 220 Q 25 200 30 170 Z" fill="url(#wlf-deep)" opacity="0.9" />
      </g>

      {/* Nervures dorées sur feuilles */}
      <g stroke="url(#wlf-gold)" strokeWidth="0.6" fill="none" opacity="0.7">
        <path d="M 95 95 Q 120 90 155 100" />
        <path d="M 50 145 Q 80 140 110 150" />
        <path d="M 195 55 Q 215 60 235 75" />
        <path d="M 240 130 Q 255 140 275 160" />
        <path d="M 60 195 Q 80 195 95 215" />
      </g>

      {/* Petits points dorés */}
      <g fill="url(#wlf-gold)">
        <circle cx="50" cy="195" r="2.2" />
        <circle cx="35" cy="210" r="1.5" />
        <circle cx="62" cy="225" r="1.4" />
        <circle cx="245" cy="65" r="2" />
        <circle cx="260" cy="78" r="1.3" />
        <circle cx="270" cy="55" r="1.4" />
        <circle cx="195" cy="180" r="1.6" />
        <circle cx="205" cy="195" r="1.2" />
        <circle cx="155" cy="35" r="1.3" />
        <circle cx="225" cy="195" r="1.5" />
        <circle cx="20" cy="160" r="1.2" />
      </g>
    </svg>
  );
};

Object.assign(window, { RoseBloom, RoseBud, Leaf, EucalyptusSprig, Petal, FloralCorner, FloralDivider, RealRose, WatercolorBranch });