// Flowers.jsx — subtle scattered floral decorations for the page background.
// Simple geometric SVG (ellipses + a circle) — repeats throughout the document.

function Flower({ size = 80, top, left, right, opacity = 0.08, rotate = 0, kind = 'flower', tone = 'terracotta' }) {
  const style = {
    position: 'absolute',
    top, left, right,
    width: size,
    height: size,
    opacity,
    transform: `rotate(${rotate}deg)`,
    pointerEvents: 'none',
    zIndex: 0,
  };
  const fill = tone === 'mushroom' ? 'var(--mushroom)' : 'var(--terracotta)';
  if (kind === 'flower') {
    return (
      <svg style={style} viewBox="0 0 40 40" fill={fill} aria-hidden="true">
        <g>
          <ellipse cx="20" cy="9" rx="3.6" ry="8" />
          <ellipse cx="20" cy="9" rx="3.6" ry="8" transform="rotate(60 20 20)" />
          <ellipse cx="20" cy="9" rx="3.6" ry="8" transform="rotate(120 20 20)" />
          <ellipse cx="20" cy="9" rx="3.6" ry="8" transform="rotate(180 20 20)" />
          <ellipse cx="20" cy="9" rx="3.6" ry="8" transform="rotate(240 20 20)" />
          <ellipse cx="20" cy="9" rx="3.6" ry="8" transform="rotate(300 20 20)" />
        </g>
        <circle cx="20" cy="20" r="2.6" fill="var(--mushroom)" />
      </svg>
    );
  }
  if (kind === 'small') {
    // 5-petal smaller flower
    return (
      <svg style={style} viewBox="0 0 40 40" fill={fill} aria-hidden="true">
        <g>
          <ellipse cx="20" cy="10" rx="3" ry="7" />
          <ellipse cx="20" cy="10" rx="3" ry="7" transform="rotate(72 20 20)" />
          <ellipse cx="20" cy="10" rx="3" ry="7" transform="rotate(144 20 20)" />
          <ellipse cx="20" cy="10" rx="3" ry="7" transform="rotate(216 20 20)" />
          <ellipse cx="20" cy="10" rx="3" ry="7" transform="rotate(288 20 20)" />
        </g>
        <circle cx="20" cy="20" r="2.2" fill="var(--mushroom)" />
      </svg>
    );
  }
  // 'sprig' — three ovals on a curved sprig
  return (
    <svg style={style} viewBox="0 0 40 40" fill={fill} aria-hidden="true">
      <ellipse cx="14" cy="10" rx="3.2" ry="6" transform="rotate(-30 14 10)" />
      <ellipse cx="26" cy="20" rx="3.2" ry="6" transform="rotate(30 26 20)" />
      <ellipse cx="14" cy="30" rx="3.2" ry="6" transform="rotate(-30 14 30)" />
    </svg>
  );
}

function DecorFlowers() {
  // Scattered flowers across the page — fixed top offsets in px so they
  // distribute consistently regardless of viewport width. Edge positions
  // are negative or right-anchored so they feel like they're "blooming"
  // in from the sides.
  const items = [
    { kind: 'flower', top:   80, left:  -38, size: 150, opacity: 0.07, rotate:  15, tone: 'terracotta' },
    { kind: 'sprig',  top:  340, right: -20, size: 110, opacity: 0.09, rotate: -25, tone: 'mushroom' },
    { kind: 'small',  top:  720, left:   20, size:  70, opacity: 0.09, rotate:  40, tone: 'terracotta' },
    { kind: 'flower', top: 1080, right:  30, size: 120, opacity: 0.06, rotate: -10, tone: 'terracotta' },
    { kind: 'sprig',  top: 1480, left:  -10, size:  90, opacity: 0.09, rotate:  25, tone: 'mushroom' },
    { kind: 'flower', top: 1880, right: -30, size: 130, opacity: 0.06, rotate:  35, tone: 'terracotta' },
    { kind: 'small',  top: 2280, left:   40, size:  80, opacity: 0.09, rotate: -15, tone: 'mushroom' },
    { kind: 'sprig',  top: 2660, right:  10, size: 100, opacity: 0.09, rotate:  20, tone: 'mushroom' },
    { kind: 'flower', top: 3060, left:  -20, size: 110, opacity: 0.07, rotate: -30, tone: 'terracotta' },
    { kind: 'small',  top: 3460, right:  40, size:  75, opacity: 0.09, rotate:  10, tone: 'terracotta' },
    { kind: 'sprig',  top: 3860, left:   30, size:  95, opacity: 0.09, rotate: -40, tone: 'mushroom' },
    { kind: 'flower', top: 4260, right: -20, size: 120, opacity: 0.06, rotate:  20, tone: 'terracotta' },
    { kind: 'small',  top: 4680, left:  -10, size:  85, opacity: 0.09, rotate: -20, tone: 'mushroom' },
    { kind: 'sprig',  top: 5080, right:  30, size: 100, opacity: 0.08, rotate:  30, tone: 'mushroom' },
    { kind: 'flower', top: 5480, left:   20, size: 110, opacity: 0.07, rotate: -10, tone: 'terracotta' },
  ];
  return (
    <div className="decor-flowers" aria-hidden="true">
      {items.map((it, i) => <Flower key={i} {...it} />)}
    </div>
  );
}

Object.assign(window, { Flower, DecorFlowers });