/*  Watercolor decorative SVG primitives.
    Abstract – evoke the painted feel without redrawing a botanical print. */

const FloralCluster = ({ size = 320, hue = "coral", rotate = 0, style = {}, opacity = .85 }) => {
  // hue: coral | peach | sage
  const pal = hue === "sage" ? {
    petalA: "#9CB088", petalB: "#5A6B47", petalC: "#C7D1B8", leafA: "#5A6B47", center: "#7A8A60"
  } : hue === "peach" ? {
    petalA: "#FAD9C8", petalB: "#F4A5A0", petalC: "#FCE7DA", leafA: "#7A8A60", center: "#E78A8C"
  } : {
    petalA: "#F4A5A0", petalB: "#E78A8C", petalC: "#FBE6E2", leafA: "#7A8A60", center: "#C9484D"
  };
  const u = Math.random().toString(36).slice(2, 8);
  return (
    <svg viewBox="0 0 200 200" width={size} height={size}
         style={{ transform:`rotate(${rotate}deg)`, opacity, ...style }}
         aria-hidden="true">
      <defs>
        <radialGradient id={`g-petal-${u}`} cx=".4" cy=".35" r=".7">
          <stop offset="0%"  stopColor={pal.petalC} stopOpacity="1" />
          <stop offset="55%" stopColor={pal.petalA} stopOpacity=".95" />
          <stop offset="100%" stopColor={pal.petalB} stopOpacity=".85" />
        </radialGradient>
        <radialGradient id={`g-petal2-${u}`} cx=".5" cy=".45" r=".7">
          <stop offset="0%"  stopColor={pal.petalC} />
          <stop offset="100%" stopColor={pal.petalA} stopOpacity=".7"/>
        </radialGradient>
        <radialGradient id={`g-leaf-${u}`} cx=".5" cy=".5" r=".7">
          <stop offset="0%" stopColor="#C7D1B8"/>
          <stop offset="100%" stopColor={pal.leafA} stopOpacity=".9" />
        </radialGradient>
        <filter id={`grain-${u}`}>
          <feTurbulence type="fractalNoise" baseFrequency=".9" numOctaves="2" seed="3"/>
          <feColorMatrix values="0 0 0 0 0.95  0 0 0 0 0.85  0 0 0 0 0.8  0 0 0 .25 0" />
          <feComposite in2="SourceGraphic" operator="in"/>
          <feBlend in="SourceGraphic" mode="multiply"/>
        </filter>
        <filter id={`blur-${u}`}><feGaussianBlur stdDeviation=".6"/></filter>
      </defs>

      {/* leaves underneath */}
      <g filter={`url(#blur-${u})`} opacity=".9">
        <path d="M30 130 Q 50 80, 95 95 Q 70 140, 30 130 Z" fill={`url(#g-leaf-${u})`} />
        <path d="M170 130 Q 150 80, 105 95 Q 130 140, 170 130 Z" fill={`url(#g-leaf-${u})`} />
        <path d="M100 30 Q 130 50, 120 95 Q 80 80, 100 30 Z" fill={`url(#g-leaf-${u})`} opacity=".85"/>
      </g>

      {/* large bloom */}
      <g filter={`url(#grain-${u})`}>
        <circle cx="100" cy="100" r="58" fill={`url(#g-petal-${u})`} />
        <circle cx="85"  cy="92"  r="32" fill={`url(#g-petal2-${u})`} opacity=".9" />
        <circle cx="118" cy="108" r="34" fill={`url(#g-petal2-${u})`} opacity=".9" />
        <circle cx="106" cy="86"  r="22" fill={`url(#g-petal-${u})`} opacity=".95" />
        <circle cx="92"  cy="116" r="22" fill={`url(#g-petal-${u})`} opacity=".95" />
      </g>
      {/* center */}
      <circle cx="100" cy="100" r="7" fill={pal.center} opacity=".55"/>

      {/* small buds */}
      <g opacity=".95" filter={`url(#blur-${u})`}>
        <circle cx="48"  cy="62"  r="13" fill={`url(#g-petal-${u})`} />
        <circle cx="155" cy="60"  r="11" fill={`url(#g-petal-${u})`} />
        <circle cx="55"  cy="160" r="10" fill={`url(#g-petal-${u})`} />
      </g>
    </svg>
  );
};

/* small single flower for in-line dividers */
const TinyFlower = ({ size = 22, color = "#C9484D" }) => (
  <svg viewBox="0 0 24 24" width={size} height={size} aria-hidden="true">
    <g fill={color} opacity=".85">
      <circle cx="12" cy="6"  r="3.2"/>
      <circle cx="18" cy="12" r="3.2"/>
      <circle cx="12" cy="18" r="3.2"/>
      <circle cx="6"  cy="12" r="3.2"/>
      <circle cx="12" cy="12" r="2.4" fill="#FAD9C8" />
    </g>
  </svg>
);

/* painted brush stroke (loose horizontal swash) */
const BrushStroke = ({ width = 480, color = "#FAD9C8", style = {} , opacity = .6}) => {
  const u = Math.random().toString(36).slice(2,6);
  return (
    <svg viewBox="0 0 480 80" width={width} style={style} aria-hidden="true">
      <defs>
        <radialGradient id={`bs-${u}`} cx=".5" cy=".5" r=".6">
          <stop offset="0%" stopColor={color} stopOpacity="1" />
          <stop offset="100%" stopColor={color} stopOpacity="0" />
        </radialGradient>
      </defs>
      <g opacity={opacity}>
        <ellipse cx="120" cy="42" rx="120" ry="20" fill={`url(#bs-${u})`} />
        <ellipse cx="260" cy="38" rx="140" ry="14" fill={`url(#bs-${u})`} />
        <ellipse cx="380" cy="44" rx="100" ry="22" fill={`url(#bs-${u})`} />
      </g>
    </svg>
  );
};

const HorizontalRule = ({ color = "#C9484D", flower = true }) => (
  <div className="divider" style={{ color }}>
    <span className="line"></span>
    {flower && <TinyFlower color={color} />}
    <span className="line"></span>
  </div>
);

/* a single drifting petal element used in the hero floating layer */
const Petal = ({ left, dx, dur, delay, rot, scale, color }) => (
  <span
    style={{
      position:"absolute",
      top:"-10vh", left: left + "%",
      width: 14*scale + "px", height: 18*scale + "px",
      background: `radial-gradient(ellipse at 35% 30%, #fce7da 0%, ${color} 70%, ${color} 100%)`,
      borderRadius: "60% 40% 70% 30% / 60% 30% 70% 40%",
      filter: "blur(.4px)",
      opacity: 0,
      transform: `rotate(${rot}deg)`,
      animation: `drift ${dur}s linear ${delay}s infinite`,
      ['--dx']: dx + "px",
      ['--rot']: (rot+260)+"deg",
    }}
  />
);

const PetalRain = ({ count = 18, palette = ["#F4A5A0","#FAD9C8","#E78A8C"] }) => {
  const items = React.useMemo(() => {
    const arr = [];
    for (let i=0; i<count; i++){
      arr.push({
        left: Math.random()*100,
        dx: (Math.random()-0.5)*220,
        dur: 14 + Math.random()*16,
        delay: -Math.random()*22,
        rot: Math.random()*360,
        scale: .7 + Math.random()*1.2,
        color: palette[Math.floor(Math.random()*palette.length)],
      });
    }
    return arr;
  }, [count, palette.join(",")]);
  return (
    <div aria-hidden="true" style={{
      position:"absolute", inset:0, overflow:"hidden", pointerEvents:"none", zIndex: 1
    }}>
      {items.map((p,i)=> <Petal key={i} {...p} />)}
    </div>
  );
};

Object.assign(window, { FloralCluster, TinyFlower, BrushStroke, HorizontalRule, PetalRain, Petal });