const LEAVES = [
  // Left low cluster (b1 tip ~40,308)
  { cx: 34, cy: 302, r: 18, fill: '#22c55e', delay: '1.65s' },
  { cx: 14, cy: 295, r: 15, fill: '#16a34a', delay: '1.70s' },
  { cx: 26, cy: 280, r: 16, fill: '#4ade80', delay: '1.68s' },
  { cx: 48, cy: 290, r: 13, fill: '#15803d', delay: '1.72s' },
  { cx: 8,  cy: 312, r: 12, fill: '#22c55e', delay: '1.75s' },
  // Right low cluster (b2 tip ~240,302)
  { cx: 246, cy: 296, r: 18, fill: '#22c55e', delay: '1.75s' },
  { cx: 266, cy: 290, r: 15, fill: '#16a34a', delay: '1.80s' },
  { cx: 254, cy: 275, r: 16, fill: '#4ade80', delay: '1.78s' },
  { cx: 234, cy: 286, r: 13, fill: '#15803d', delay: '1.82s' },
  { cx: 270, cy: 308, r: 12, fill: '#22c55e', delay: '1.85s' },
  // sb3/sb4 mid-tips
  { cx: 50,  cy: 270, r: 13, fill: '#4ade80', delay: '1.80s' },
  { cx: 228, cy: 267, r: 13, fill: '#4ade80', delay: '1.85s' },
  // sb1/sb2 outer tips
  { cx: 8,   cy: 255, r: 14, fill: '#4ade80', delay: '1.90s' },
  { cx: 270, cy: 251, r: 14, fill: '#4ade80', delay: '1.90s' },
  // Left mid cluster (b3 tip ~44,258)
  { cx: 38,  cy: 252, r: 16, fill: '#22c55e', delay: '2.05s' },
  { cx: 18,  cy: 246, r: 13, fill: '#4ade80', delay: '2.10s' },
  { cx: 30,  cy: 232, r: 14, fill: '#16a34a', delay: '2.08s' },
  { cx: 52,  cy: 240, r: 11, fill: '#86efac', delay: '2.12s' },
  { cx: 12,  cy: 264, r: 10, fill: '#22c55e', delay: '2.15s' },
  // Right mid cluster (b4 tip ~236,255)
  { cx: 242, cy: 248, r: 16, fill: '#22c55e', delay: '2.10s' },
  { cx: 262, cy: 242, r: 13, fill: '#4ade80', delay: '2.15s' },
  { cx: 250, cy: 228, r: 14, fill: '#16a34a', delay: '2.12s' },
  { cx: 230, cy: 238, r: 11, fill: '#86efac', delay: '2.18s' },
  { cx: 266, cy: 260, r: 10, fill: '#22c55e', delay: '2.20s' },
  // sb5/sb6 outer tips (~16,214 and ~262,210)
  { cx: 12,  cy: 208, r: 13, fill: '#86efac', delay: '2.30s' },
  { cx: 266, cy: 206, r: 13, fill: '#86efac', delay: '2.30s' },
  // Left upper cluster (b5 tip ~86,218)
  { cx: 80,  cy: 212, r: 17, fill: '#4ade80', delay: '2.45s' },
  { cx: 62,  cy: 202, r: 14, fill: '#22c55e', delay: '2.50s' },
  { cx: 90,  cy: 196, r: 12, fill: '#86efac', delay: '2.48s' },
  { cx: 68,  cy: 188, r: 13, fill: '#4ade80', delay: '2.52s' },
  // Right upper cluster (b6 tip ~194,214)
  { cx: 200, cy: 208, r: 17, fill: '#4ade80', delay: '2.48s' },
  { cx: 218, cy: 198, r: 14, fill: '#22c55e', delay: '2.52s' },
  { cx: 192, cy: 193, r: 12, fill: '#86efac', delay: '2.50s' },
  { cx: 210, cy: 185, r: 13, fill: '#4ade80', delay: '2.55s' },
  // Top center canopy (b7 tip ~128,196)
  { cx: 120, cy: 188, r: 16, fill: '#4ade80', delay: '2.60s' },
  { cx: 140, cy: 176, r: 21, fill: '#22c55e', delay: '2.65s' },
  { cx: 160, cy: 188, r: 16, fill: '#4ade80', delay: '2.62s' },
  { cx: 126, cy: 166, r: 13, fill: '#16a34a', delay: '2.68s' },
  { cx: 154, cy: 164, r: 14, fill: '#86efac', delay: '2.72s' },
  { cx: 140, cy: 154, r: 18, fill: '#22c55e', delay: '2.75s' },
  { cx: 134, cy: 142, r: 12, fill: '#4ade80', delay: '2.78s' },
  { cx: 148, cy: 140, r: 11, fill: '#86efac', delay: '2.80s' },
]

const PARTICLES = [
  { cx: 45,  cy: 420, r: 5, fill: '#4ade80', delay: '3.5s',  dur: '7s'  },
  { cx: 235, cy: 415, r: 3, fill: '#86efac', delay: '5.0s',  dur: '9s'  },
  { cx: 88,  cy: 425, r: 4, fill: '#22c55e', delay: '4.0s',  dur: '8s'  },
  { cx: 192, cy: 418, r: 5, fill: '#4ade80', delay: '6.0s',  dur: '10s' },
  { cx: 140, cy: 422, r: 3, fill: '#86efac', delay: '3.8s',  dur: '6s'  },
  { cx: 115, cy: 416, r: 4, fill: '#22c55e', delay: '7.0s',  dur: '8s'  },
  { cx: 165, cy: 424, r: 3, fill: '#4ade80', delay: '4.5s',  dur: '7s'  },
]

export function TreeAnimation() {
  return (
    <div className="tree-wrap">
      <svg
        className="tree-svg"
        viewBox="0 115 280 325"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
        aria-hidden="true"
      >
        {/* Floating leaf particles */}
        {PARTICLES.map((p, i) => (
          <circle
            key={i}
            className="t-particle"
            cx={p.cx} cy={p.cy} r={p.r} fill={p.fill}
            style={{ animationDelay: p.delay, animationDuration: p.dur }}
          />
        ))}

        {/* Roots */}
        <path className="t-root" style={{ animationDelay: '1.00s' }}
          d="M 134 408 C 108 414 80 412 56 418" stroke="#C4954A" strokeWidth="5" strokeLinecap="round" />
        <path className="t-root" style={{ animationDelay: '1.05s' }}
          d="M 146 408 C 172 414 200 412 224 418" stroke="#C4954A" strokeWidth="5" strokeLinecap="round" />
        <path className="t-root" style={{ animationDelay: '1.02s' }}
          d="M 140 410 C 138 422 134 430 128 436" stroke="#C4954A" strokeWidth="4" strokeLinecap="round" />
        <path className="t-root" style={{ animationDelay: '1.08s' }}
          d="M 140 410 C 142 422 146 430 152 436" stroke="#C4954A" strokeWidth="4" strokeLinecap="round" />

        {/* Trunk — two overlapping strokes for depth */}
        <path className="t-trunk" style={{ animationDelay: '0.20s' }}
          d="M 133 410 L 133 265" stroke="#8B6120" strokeWidth="17" strokeLinecap="round" />
        <path className="t-trunk" style={{ animationDelay: '0.28s' }}
          d="M 147 410 L 147 265" stroke="#C4954A" strokeWidth="7"  strokeLinecap="round" />

        {/* Level-1 branches */}
        <path className="t-branch" style={{ animationDelay: '1.00s' }}
          d="M 136 356 C 104 336 70 322 40 308" stroke="#A0732A" strokeWidth="8" strokeLinecap="round" />
        <path className="t-branch" style={{ animationDelay: '1.10s' }}
          d="M 144 348 C 176 328 210 314 240 302" stroke="#A0732A" strokeWidth="8" strokeLinecap="round" />

        {/* Level-2 branches */}
        <path className="t-branch" style={{ animationDelay: '1.50s' }}
          d="M 136 310 C 104 292 70 276 44 258" stroke="#9B6D28" strokeWidth="6" strokeLinecap="round" />
        <path className="t-branch" style={{ animationDelay: '1.60s' }}
          d="M 144 304 C 176 286 210 270 236 255" stroke="#9B6D28" strokeWidth="6" strokeLinecap="round" />

        {/* Level-3 branches */}
        <path className="t-branch" style={{ animationDelay: '1.90s' }}
          d="M 136 272 C 115 253 100 237 86 218" stroke="#9B6D28" strokeWidth="5" strokeLinecap="round" />
        <path className="t-branch" style={{ animationDelay: '2.00s' }}
          d="M 144 268 C 165 249 180 233 194 214" stroke="#9B6D28" strokeWidth="5" strokeLinecap="round" />
        <path className="t-branch" style={{ animationDelay: '2.10s' }}
          d="M 140 252 C 136 232 132 215 128 196" stroke="#9B6D28" strokeWidth="4" strokeLinecap="round" />

        {/* Sub-branches off level-1 */}
        <path className="t-branch" style={{ animationDelay: '1.55s' }}
          d="M 40 308 C 24 292 16 276 12 260" stroke="#8B6520" strokeWidth="4" strokeLinecap="round" />
        <path className="t-branch" style={{ animationDelay: '1.65s' }}
          d="M 240 302 C 256 286 262 270 266 255" stroke="#8B6520" strokeWidth="4" strokeLinecap="round" />
        <path className="t-branch" style={{ animationDelay: '1.45s' }}
          d="M 74 326 C 60 308 54 292 52 276" stroke="#8B6520" strokeWidth="3" strokeLinecap="round" />
        <path className="t-branch" style={{ animationDelay: '1.55s' }}
          d="M 206 320 C 220 302 224 286 224 271" stroke="#8B6520" strokeWidth="3" strokeLinecap="round" />

        {/* Sub-branches off level-2 */}
        <path className="t-branch" style={{ animationDelay: '2.05s' }}
          d="M 44 258 C 28 242 20 228 16 214" stroke="#8B6520" strokeWidth="3" strokeLinecap="round" />
        <path className="t-branch" style={{ animationDelay: '2.15s' }}
          d="M 236 255 C 252 239 258 225 262 210" stroke="#8B6520" strokeWidth="3" strokeLinecap="round" />

        {/* Leaves — inside a group so the whole canopy can sway */}
        <g className="t-canopy">
          {LEAVES.map((l, i) => (
            <circle
              key={i}
              className="t-leaf"
              cx={l.cx} cy={l.cy} r={l.r}
              fill={l.fill}
              style={{ animationDelay: l.delay }}
            />
          ))}
        </g>
      </svg>
    </div>
  )
}