// Living botanicals — animated SVGs, ambient drifters, parallax helpers

// ── Static SVG primitives ─────────────────────────────
function LeafSpray({ size = 200, color = 'currentColor', style }) {
  return (
    <svg viewBox="0 0 200 200" width={size} height={size} style={style} fill="none" stroke={color} strokeWidth="1.2" strokeLinecap="round">
      <path d="M100 190 Q102 130 100 60" />
      {[[170,50,145,150,160,'l'],[150,130,125,150,140,'r'],[130,72,105,76,120,'l'],[110,128,85,124,100,'r'],[90,76,65,80,80,'l'],[70,120,50,116,62,'r']].map(([y1,x2,y2,x3,y3,side],i) => {
        const d = side === 'l'
          ? `M100 ${y1} Q${x2} ${y2} ${x3} ${y2-15}`
          : `M100 ${y1} Q${x2} ${y2} ${x3} ${y2-15}`;
        return <g key={i}>
          <path d={`M100 ${y1} Q${x2} ${y2} ${x3} ${y2-15}`} fill={color} fillOpacity="0.18" />
          <path d={`M100 ${y1} Q${x2} ${y2} ${x3} ${y2-15}`} />
        </g>;
      })}
    </svg>
  );
}

function FernFrond({ size = 240, color = 'currentColor', style, flip = false, animated = false }) {
  const cls = animated ? 'sway' : '';
  return (
    <svg viewBox="0 0 240 280" width={size} height={size * 280 / 240} className={cls}
         style={{ transform: flip ? 'scaleX(-1)' : 'none', transformOrigin: 'bottom center', ...style }}
         fill="none" stroke={color} strokeWidth="1.1" strokeLinecap="round">
      <path d="M120 270 Q118 200 110 130 Q102 70 80 30" />
      {[...Array(9)].map((_, i) => {
        const t = i / 9;
        const cx = 120 - t * 40;
        const cy = 270 - t * 240;
        const len = 60 - t * 35;
        return [
          <g key={'l'+i} transform={`translate(${cx} ${cy}) rotate(${-30 - t * 15})`}>
            <ellipse cx={len/2} cy={0} rx={len/2} ry={len/8} fill={color} fillOpacity="0.16" />
            <ellipse cx={len/2} cy={0} rx={len/2} ry={len/8} />
          </g>,
          <g key={'r'+i} transform={`translate(${cx} ${cy}) rotate(${210 + t * 15})`}>
            <ellipse cx={len/2} cy={0} rx={len/2} ry={len/8} fill={color} fillOpacity="0.16" />
            <ellipse cx={len/2} cy={0} rx={len/2} ry={len/8} />
          </g>
        ];
      })}
    </svg>
  );
}

function VineBorder({ width = 800, color = 'currentColor', style }) {
  return (
    <svg viewBox="0 0 800 50" width={width} height={50} style={style} fill="none" stroke={color} strokeWidth="1" strokeLinecap="round">
      <path d="M0 25 Q100 10 200 25 T400 25 T600 25 T800 25" />
      {[80, 220, 360, 500, 640, 760].map((x, i) => (
        <g key={i} transform={`translate(${x} ${i % 2 ? 30 : 20})`}>
          <ellipse cx="0" cy="0" rx="10" ry="3.5" fill={color} fillOpacity="0.25" transform="rotate(-30)" />
          <ellipse cx="0" cy="0" rx="10" ry="3.5" transform="rotate(-30)" />
        </g>
      ))}
    </svg>
  );
}

function Bloom({ size = 80, color = 'currentColor', center = '#c46a4a', style, animated = false }) {
  return (
    <svg viewBox="0 0 100 100" width={size} height={size} style={style} className={animated ? 'bloom-pulse' : ''}>
      <g transform="translate(50 50)">
        {[0, 60, 120, 180, 240, 300].map((a) => (
          <ellipse key={a} cx="0" cy="-22" rx="14" ry="22" fill={color} fillOpacity="0.85" stroke={color} strokeWidth="0.6" transform={`rotate(${a})`} />
        ))}
        <circle r="9" fill={center} />
      </g>
    </svg>
  );
}

function Sprig({ size = 120, color = 'currentColor', style, animated = false }) {
  return (
    <svg viewBox="0 0 120 120" width={size} height={size} style={{ transformOrigin: 'bottom center', ...style }} className={animated ? 'sway-soft' : ''} fill="none" stroke={color} strokeWidth="1.1" strokeLinecap="round">
      <path d="M60 115 Q58 80 50 50 Q44 30 30 15" />
      {[[40,80,-40,14,5],[78,65,35,12,4.5],[36,50,-50,11,4],[64,35,40,10,3.5]].map(([cx,cy,r,rx,ry],i) => (
        <g key={i}>
          <ellipse cx={cx} cy={cy} rx={rx} ry={ry} fill={color} fillOpacity="0.2" transform={`rotate(${r} ${cx} ${cy})`} />
          <ellipse cx={cx} cy={cy} rx={rx} ry={ry} transform={`rotate(${r} ${cx} ${cy})`} />
        </g>
      ))}
    </svg>
  );
}

function MonsteraLeaf({ size = 200, color = 'currentColor', style, animated = false }) {
  return (
    <svg viewBox="0 0 200 220" width={size} height={size * 220 / 200} style={{ transformOrigin: 'bottom right', ...style }} className={animated ? 'sway' : ''}>
      <g fill={color} fillOpacity="0.85" stroke={color} strokeWidth="0.8">
        <path d="M100 210 Q60 200 40 160 Q20 120 30 80 Q40 40 80 20 Q120 10 150 30 Q180 60 175 110 Q170 150 150 180 Q130 205 100 210 Z" />
        <path d="M50 60 Q60 55 70 60 L65 80 Q55 75 50 60 Z" fill="var(--paper)" fillOpacity="1" />
        <path d="M50 100 Q65 95 75 105 L70 120 Q55 115 50 100 Z" fill="var(--paper)" fillOpacity="1" />
        <path d="M55 140 Q70 135 78 145 L72 160 Q60 155 55 140 Z" fill="var(--paper)" fillOpacity="1" />
        <path d="M130 60 Q120 55 110 65 L118 80 Q128 75 130 60 Z" fill="var(--paper)" fillOpacity="1" />
        <path d="M140 100 Q125 95 118 108 L125 122 Q138 118 140 100 Z" fill="var(--paper)" fillOpacity="1" />
        <path d="M132 140 Q120 135 112 148 L118 162 Q130 158 132 140 Z" fill="var(--paper)" fillOpacity="1" />
        <path d="M100 30 Q98 110 100 200" fill="none" stroke={color} strokeWidth="1.2" />
      </g>
    </svg>
  );
}

// ── New: Palm leaf, eucalyptus branch, jacaranda blossom ────
function PalmLeaf({ size = 240, color = 'currentColor', style, animated = false }) {
  return (
    <svg viewBox="0 0 240 280" width={size} height={size * 280 / 240}
         className={animated ? 'sway' : ''}
         style={{ transformOrigin: 'bottom center', ...style }} fill="none" stroke={color} strokeWidth="1" strokeLinecap="round">
      <path d="M120 280 Q120 200 110 100 Q100 50 80 10" strokeWidth="1.6" />
      {[...Array(14)].map((_, i) => {
        const t = i / 14;
        const cx = 120 - t * 40;
        const cy = 280 - t * 270;
        const len = 80 - t * 50;
        const angL = -55 - t * 10;
        const angR = 235 + t * 10;
        return [
          <path key={'l'+i} d={`M${cx} ${cy} Q${cx + Math.cos(angL*Math.PI/180)*len*0.5} ${cy + Math.sin(angL*Math.PI/180)*len*0.5} ${cx + Math.cos(angL*Math.PI/180)*len} ${cy + Math.sin(angL*Math.PI/180)*len}`} stroke={color} strokeWidth="1.1" />,
          <path key={'r'+i} d={`M${cx} ${cy} Q${cx + Math.cos(angR*Math.PI/180)*len*0.5} ${cy + Math.sin(angR*Math.PI/180)*len*0.5} ${cx + Math.cos(angR*Math.PI/180)*len} ${cy + Math.sin(angR*Math.PI/180)*len}`} stroke={color} strokeWidth="1.1" />,
        ];
      })}
    </svg>
  );
}

function Eucalyptus({ size = 200, color = 'currentColor', style, animated = false }) {
  return (
    <svg viewBox="0 0 200 280" width={size} height={size * 280 / 200}
         className={animated ? 'sway-soft' : ''}
         style={{ transformOrigin: 'top center', ...style }} fill={color} stroke={color} strokeWidth="0.8" strokeLinecap="round">
      <path d="M100 0 Q102 60 106 130 Q110 200 120 270" fill="none" strokeWidth="1.2" />
      {[
        [80, 30, -25], [120, 50, 30], [70, 70, -35], [130, 95, 35],
        [60, 120, -40], [140, 140, 40], [55, 170, -42], [145, 195, 42],
        [70, 220, -38], [135, 245, 38],
      ].map(([cx, cy, r], i) => (
        <g key={i} transform={`rotate(${r} ${cx} ${cy})`}>
          <ellipse cx={cx} cy={cy} rx="22" ry="14" fillOpacity="0.7" />
        </g>
      ))}
    </svg>
  );
}

function JacarandaSprig({ size = 200, color = '#9b7fb8', style, animated = false }) {
  return (
    <svg viewBox="0 0 200 200" width={size} height={size}
         className={animated ? 'sway-soft' : ''}
         style={{ transformOrigin: 'top center', ...style }}>
      <g stroke="#5d6d4a" strokeWidth="1" fill="none" strokeLinecap="round">
        <path d="M100 0 Q102 50 100 100 Q98 150 105 200" />
        <path d="M100 60 Q70 70 50 90" />
        <path d="M100 110 Q140 115 160 130" />
        <path d="M100 150 Q70 160 55 180" />
      </g>
      {[
        [50, 90], [60, 80], [42, 100], [52, 110],
        [160, 130], [150, 120], [170, 140], [158, 145],
        [55, 180], [65, 175], [45, 188], [60, 195],
        [85, 50], [95, 45], [110, 60],
      ].map(([cx, cy], i) => (
        <g key={i}>
          {[0, 90, 180, 270].map((a) => (
            <ellipse key={a} cx={cx} cy={cy - 4} rx="2.5" ry="5" fill={color} fillOpacity="0.85" transform={`rotate(${a} ${cx} ${cy})`} />
          ))}
          <circle cx={cx} cy={cy} r="1.3" fill="#c46a4a" />
        </g>
      ))}
    </svg>
  );
}

// ── Critters ────────────────────────────────────────────
function Butterfly({ size = 40, color = '#c46a4a', style, animated = false }) {
  return (
    <svg viewBox="0 0 80 60" width={size} height={size * 60/80} style={style} className={animated ? 'flutter' : ''}>
      <g>
        <ellipse cx="40" cy="30" rx="2" ry="14" fill="#1a2418" />
        <g className="wing-l">
          <path d="M40 24 Q18 8 12 24 Q14 38 30 32 Z" fill={color} fillOpacity="0.85" stroke="#1a2418" strokeWidth="0.8" />
          <path d="M40 36 Q22 48 16 40 Q18 30 32 36 Z" fill={color} fillOpacity="0.7" stroke="#1a2418" strokeWidth="0.8" />
        </g>
        <g className="wing-r">
          <path d="M40 24 Q62 8 68 24 Q66 38 50 32 Z" fill={color} fillOpacity="0.85" stroke="#1a2418" strokeWidth="0.8" />
          <path d="M40 36 Q58 48 64 40 Q62 30 48 36 Z" fill={color} fillOpacity="0.7" stroke="#1a2418" strokeWidth="0.8" />
        </g>
      </g>
    </svg>
  );
}

// ── Ambient layer — drifting petals/leaves across the page ───
function AmbientGarden() {
  const items = React.useMemo(() => {
    const arr = [];
    for (let i = 0; i < 14; i++) {
      arr.push({
        id: i,
        left: Math.random() * 100,
        top: Math.random() * 100,
        size: 8 + Math.random() * 14,
        duration: 18 + Math.random() * 22,
        delay: -Math.random() * 30,
        rotate: Math.random() * 360,
        kind: i % 4, // 0:petal, 1:leaf, 2:tiny-leaf, 3:dot
        color: ['#c46a4a', '#5d8050', '#8aa074', '#e8b8a0'][i % 4],
      });
    }
    return arr;
  }, []);

  return (
    <div className="ambient-garden" aria-hidden>
      {items.map((it) => (
        <div key={it.id}
             className="ambient-item"
             style={{
               left: it.left + '%',
               top: it.top + '%',
               width: it.size,
               height: it.size,
               animationDuration: it.duration + 's',
               animationDelay: it.delay + 's',
               transform: `rotate(${it.rotate}deg)`,
             }}>
          <svg viewBox="0 0 20 20" width="100%" height="100%">
            {it.kind === 0 && <ellipse cx="10" cy="10" rx="8" ry="4" fill={it.color} opacity="0.8" />}
            {it.kind === 1 && <path d="M10 18 Q4 14 4 8 Q10 2 16 8 Q16 14 10 18 Z" fill={it.color} opacity="0.7" />}
            {it.kind === 2 && <ellipse cx="10" cy="10" rx="3" ry="6" fill={it.color} opacity="0.6" />}
            {it.kind === 3 && <circle cx="10" cy="10" r="2.5" fill={it.color} opacity="0.7" />}
          </svg>
        </div>
      ))}
    </div>
  );
}

// ── Parallax wrapper hook ─────────────────────────────
function useParallax(strength = 0.3) {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const onScroll = () => {
      const rect = el.getBoundingClientRect();
      const center = rect.top + rect.height / 2;
      const offset = (window.innerHeight / 2 - center) * strength;
      el.style.transform = `translateY(${offset}px)`;
    };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, [strength]);
  return ref;
}

function Parallax({ strength = 0.3, children, style }) {
  const ref = useParallax(strength);
  return <div ref={ref} style={{ willChange: 'transform', ...style }}>{children}</div>;
}

Object.assign(window, {
  LeafSpray, FernFrond, VineBorder, Bloom, Sprig, MonsteraLeaf,
  PalmLeaf, Eucalyptus, JacarandaSprig, Butterfly,
  AmbientGarden, Parallax, useParallax,
});