Untitled

"use client"

import React from 'react';

// Add these trees to your existing themes with:
// premium: {
//   name: "Premium Forest",
//   trees: [WillowTree, MapleSapling, BlossomTree, GoldenElm, EnchantedTree]
// }

// Graceful Willow Tree - Starts simple, develops into a flowing willow
const WillowTree = ({ scale }: { scale: number }) => {
  if (scale === 0) return null;
  return (
    <svg viewBox="0 0 100 100" className="w-full h-full transform transition-all duration-1000"
      style={{ transform: `scale(${0.5 + (scale * 0.5) / 100})` }}>
      <defs>
        <linearGradient id="trunkGradient" x1="0%" y1="0%" x2="100%" y2="0%">
          <stop offset="0%" style={{ stopColor: '#8B4513', stopOpacity: 0.9 }} />
          <stop offset="50%" style={{ stopColor: '#A0522D', stopOpacity: 1 }} />
          <stop offset="100%" style={{ stopColor: '#8B4513', stopOpacity: 0.9 }} />
        </linearGradient>
        <linearGradient id="leafGradient" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" style={{ stopColor: '#74B72E', stopOpacity: 1 }} />
          <stop offset="100%" style={{ stopColor: '#4A7A1E', stopOpacity: 1 }} />
        </linearGradient>
      </defs>
      
      {/* Curved trunk */}
      <path 
        d="M48 90 C48 70 45 60 47 40 L53 40 C55 60 52 70 52 90" 
        fill="url(#trunkGradient)" 
        className="transition-all duration-500"
      />
      
      {/* Drooping branches with leaves */}
      {scale >= 20 && (
        <g className="transition-all duration-500">
          <path 
            d="M50 40 Q30 50 20 70" 
            fill="none" 
            stroke="#8B4513" 
            strokeWidth="1"
          />
          <path 
            d="M50 40 Q70 50 80 70" 
            fill="none" 
            stroke="#8B4513" 
            strokeWidth="1"
          />
          <path 
            d="M20 70 Q35 60 50 65 Q65 60 80 70" 
            fill="url(#leafGradient)" 
            opacity={scale >= 50 ? "0.9" : "0.5"}
          />
        </g>
      )}
      
      {/* Additional foliage layers */}
      {scale >= 50 && (
        <g>
          <path 
            d="M25 55 Q50 35 75 55" 
            fill="url(#leafGradient)" 
            opacity="0.8"
          />
          <path 
            d="M30 45 Q50 30 70 45" 
            fill="url(#leafGradient)" 
            opacity="0.7"
          />
        </g>
      )}
      
      {/* Fine details and highlights */}
      {scale >= 80 && (
        <g className="transition-all duration-300">
          {[...Array(6)].map((_, i) => (
            <path
              key={i}
              d={`M${40 + i * 4} ${35 + i * 3} Q${50} ${30 + i * 2} ${60 - i * 4} ${35 + i * 3}`}
              fill="none"
              stroke="#9CD161"
              strokeWidth="0.5"
              opacity="0.6"
            />
          ))}
        </g>
      )}

      {/* Sparkle effects for completed growth */}
      {scale >= 95 && (
        <g>
          {[...Array(5)].map((_, i) => (
            <circle
              key={i}
              cx={35 + Math.random() * 30}
              cy={35 + Math.random() * 20}
              r="0.5"
              fill="#FFFFFF"
              opacity="0.8"
            />
          ))}
        </g>
      )}
    </svg>
  );
};

// Vibrant Maple Sapling
const MapleSapling = ({ scale }: { scale: number }) => {
  if (scale === 0) return null;
  return (
    <svg viewBox="0 0 100 100" className="w-full h-full transform transition-all duration-1000"
      style={{ transform: `scale(${0.5 + (scale * 0.5) / 100})` }}>
      <defs>
        <radialGradient id="mapleGradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
          <stop offset="0%" style={{ stopColor: '#E65D4F', stopOpacity: 1 }} />
          <stop offset="100%" style={{ stopColor: '#C41E3A', stopOpacity: 1 }} />
        </radialGradient>
        <radialGradient id="mapleshadow" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
          <stop offset="0%" style={{ stopColor: '#AA1E3A', stopOpacity: 1 }} />
          <stop offset="100%" style={{ stopColor: '#851E3A', stopOpacity: 1 }} />
        </radialGradient>
      </defs>

      {/* Elegant trunk */}
      <path 
        d="M45 90 C45 70 48 50 47 40 L53 40 C52 50 55 70 55 90" 
        fill="#8B4513"
      />

      {/* Maple leaf layers */}
      {scale >= 20 && (
        <g className="transition-all duration-500">
          <path
            d="M50 35 L45 45 L40 42 L45 50 L35 48 L45 55 L30 60 L50 65 L70 60 L55 55 L65 48 L55 50 L60 42 L55 45 Z"
            fill="url(#mapleGradient)"
            opacity={scale >= 50 ? "1" : "0.7"}
          />
        </g>
      )}

      {/* Additional foliage */}
      {scale >= 50 && (
        <g>
          <path
            d="M45 30 L40 40 L35 37 L40 45 L30 43 L40 50 L25 55 L45 60 L65 55 L50 50 L60 43 L50 45 L55 37 L50 40 Z"
            fill="url(#mapleshadow)"
            opacity="0.8"
            transform="scale(0.8) translate(12, 0)"
          />
        </g>
      )}

      {/* Fine veins */}
      {scale >= 80 && (
        <g>
          {[...Array(5)].map((_, i) => (
            <path
              key={i}
              d={`M50 35 L${45 + i * 2} ${45 + i * 2}`}
              stroke="#D4544C"
              strokeWidth="0.3"
              opacity="0.6"
            />
          ))}
        </g>
      )}
    </svg>
  );
};

// Ethereal Blossom Tree
const BlossomTree = ({ scale }: { scale: number }) => {
  if (scale === 0) return null;
  return (
    <svg viewBox="0 0 100 100" className="w-full h-full transform transition-all duration-1000"
      style={{ transform: `scale(${0.5 + (scale * 0.5) / 100})` }}>
      <defs>
        <radialGradient id="blossomGradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
          <stop offset="0%" style={{ stopColor: '#FFE5F0', stopOpacity: 1 }} />
          <stop offset="100%" style={{ stopColor: '#FFB7D5', stopOpacity: 1 }} />
        </radialGradient>
      </defs>

      {/* Graceful trunk */}
      <path 
        d="M45 90 Q50 70 47 40 L53 40 Q50 70 55 90" 
        fill="#966F33" 
      />

      {/* Base foliage */}
      {scale >= 20 && (
        <g className="transition-all duration-500">
          {[...Array(3)].map((_, i) => (
            <circle
              key={i}
              cx={50}
              cy={45 - i * 5}
              r={15 - i * 2}
              fill="url(#blossomGradient)"
              opacity={(scale >= 50 ? 0.9 : 0.6) - i * 0.1}
            />
          ))}
        </g>
      )}

      {/* Flower clusters */}
      {scale >= 50 && (
        <g>
          {[...Array(12)].map((_, i) => (
            <g key={i}>
              <circle
                cx={40 + Math.random() * 20}
                cy={35 + Math.random() * 20}
                r="2"
                fill="#FFE5F0"
              />
              <circle
                cx={40 + Math.random() * 20}
                cy={35 + Math.random() * 20}
                r="1"
                fill="#FF69B4"
              />
            </g>
          ))}
        </g>
      )}

      {/* Detailed branches */}
      {scale >= 80 && (
        <g>
          {[...Array(4)].map((_, i) => (
            <path
              key={i}
              d={`M50 ${40 + i * 5} Q${60 - i * 5} ${45 + i * 3} ${65 - i * 5} ${40 + i * 4}`}
              stroke="#8B4513"
              strokeWidth="0.5"
              fill="none"
            />
          ))}
        </g>
      )}

      {/* Falling petals */}
      {scale >= 95 && (
        <g>
          {[...Array(8)].map((_, i) => (
            <path
              key={i}
              d={`M${35 + Math.random() * 30} ${30 + Math.random() * 40} q2 0 2 2`}
              fill="#FFE5F0"
              opacity="0.6"
            />
          ))}
        </g>
      )}
    </svg>
  );
};

// Golden Elm
const GoldenElm = ({ scale }: { scale: number }) => {
  if (scale === 0) return null;
  return (
    <svg viewBox="0 0 100 100" className="w-full h-full transform transition-all duration-1000"
      style={{ transform: `scale(${0.5 + (scale * 0.5) / 100})` }}>
      <defs>
        <radialGradient id="sunlightGradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
          <stop offset="0%" style={{ stopColor: '#FFD700', stopOpacity: 0.6 }} />
          <stop offset="100%" style={{ stopColor: '#FFA500', stopOpacity: 0.8 }} />
        </radialGradient>
        <linearGradient id="leafGradientGold" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" style={{ stopColor: '#9ACD32', stopOpacity: 1 }} />
          <stop offset="100%" style={{ stopColor: '#6B8E23', stopOpacity: 1 }} />
        </linearGradient>
      </defs>

      {/* Majestic trunk */}
      <path 
        d="M43 90 Q48 70 47 35 L53 35 Q52 70 57 90" 
        fill="#8B4513" 
      />

      {/* Layered foliage */}
      {scale >= 20 && (
        <g className="transition-all duration-500">
          <path
            d="M25 45 Q50 15 75 45"
            fill="url(#leafGradientGold)"
            opacity={scale >= 50 ? "0.9" : "0.6"}
          />
          <circle
            cx="50"
            cy="40"
            r="20"
            fill="url(#sunlightGradient)"
            opacity="0.4"
          />
        </g>
      )}

      {/* Branch structure */}
      {scale >= 50 && (
        <g>
          {[...Array(5)].map((_, i) => (
            <path
              key={i}
              d={`M50 35 Q${30 + i * 10} ${40 + i * 5} ${20 + i * 15} ${50 + i * 5}`}
              stroke="#8B4513"
              strokeWidth="0.7"
              fill="none"
            />
          ))}
        </g>
      )}

      {/* Detailed leaves */}
      {scale >= 80 && (
        <g>
          {[...Array(15)].map((_, i) => (
            <path
              key={i}
              d={`M${35 + Math.random() * 30} ${30 + Math.random() * 20} q-2 -3 0 -6 q2 -3 4 0 q2 3 0 6 q-2 3 -4 0`}
              fill="#90EE90"
              opacity="0.8"
            />
          ))}
        </g>
      )}

      {/* Light rays */}
      {scale >= 95 && (
        <g>
          {[...Array(8)].map((_, i) => {
            const angle = (i * Math.PI) / 4;
            return (
              <line
                key={i}
                x1={50 + Math.cos(angle) * 15}
                y1={40 + Math.sin(angle) * 15}
                x2={50 + Math.cos(angle) * 25}
                y2={40 + Math.sin(angle) * 25}
                stroke="#FFD700"
                strokeWidth="0.5"
                opacity="0.4"
              />
            );
          })}
        </g>
      )}
    </svg>
  );
};


// Enchanted Tree
const EnchantedTree = ({ scale }: { scale: number }) => {
  if (scale === 0) return null;
  return (
    <svg viewBox="0 0 100 100" className="w-full h-full transform transition-all duration-1000"
      style={{ transform: `scale(${0.5 + (scale * 0.5) / 100})` }}>
      <defs>
        <radialGradient id="magicGlow" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
          <stop offset="0%" style={{ stopColor: '#88D8FF', stopOpacity: 0.6 }} />
          <stop offset="100%" style={{ stopColor: '#4FC3F7', stopOpacity: 0 }} />
        </radialGradient>
        <linearGradient id="trunkMagic" x1="0%" y1="0%" x2="100%" y2="0%">
          <stop offset="0%" style={{ stopColor: '#5D4037', stopOpacity: 1 }} />
          <stop offset="50%" style={{ stopColor: '#795548', stopOpacity: 1 }} />
          <stop offset="100%" style={{ stopColor: '#5D4037', stopOpacity: 1 }} />
        </linearGradient>
        <radialGradient id="foliageMagic" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
          <stop offset="0%" style={{ stopColor: '#81C784', stopOpacity: 1 }} />
          <stop offset="100%" style={{ stopColor: '#2E7D32', stopOpacity: 1 }} />
        </radialGradient>
      </defs>

      {/* Magical glow base */}
      {scale >= 20 && (
        <circle
          cx="50"
          cy="50"
          r="30"
          fill="url(#magicGlow)"
          className="transition-all duration-500"
          opacity={scale / 100}
        />
      )}

      {/* Twisted trunk */}
      <path
        d="M45 90 C48 80 45 70 47 60 C49 50 46 45 47 35 L53 35 C54 45 51 50 53 60 C55 70 52 80 55 90"
        fill="url(#trunkMagic)"
        className="transition-all duration-500"
      />

      {/* Base foliage layers */}
      {scale >= 20 && (
        <g className="transition-all duration-500">
          <path
            d="M30 60 Q50 20 70 60"
            fill="url(#foliageMagic)"
            opacity="0.9"
          />
          {scale >= 40 && [...Array(3)].map((_, i) => (
            <path
              key={i}
              d={`M${35 + i * 5} ${55 - i * 5} Q50 ${25 + i * 5} ${65 - i * 5} ${55 - i * 5}`}
              fill="url(#foliageMagic)"
              opacity={0.7 - i * 0.1}
            />
          ))}
        </g>
      )}

      {/* Spiraling branches */}
      {scale >= 50 && (
        <g>
          {[...Array(6)].map((_, i) => {
            const angle = (i * Math.PI) / 3;
            return (
              <path
                key={i}
                d={`M50 40 Q${50 + Math.cos(angle) * 20} ${40 + Math.sin(angle) * 20} ${50 + Math.cos(angle) * 25} ${40 + Math.sin(angle) * 25}`}
                stroke="#5D4037"
                strokeWidth="0.5"
                fill="none"
                opacity="0.7"
              />
            );
          })}
        </g>
      )}

      {/* Magical details */}
      {scale >= 80 && (
        <g>
          {/* Swirling patterns */}
          {[...Array(3)].map((_, i) => (
            <path
              key={i}
              d={`M${40 + i * 7} 35 Q50 ${30 + i * 5} ${60 - i * 7} 35`}
              stroke="#81C784"
              strokeWidth="0.5"
              fill="none"
              opacity="0.6"
            />
          ))}
          {/* Glowing orbs */}
          {[...Array(5)].map((_, i) => (
            <g key={i}>
              <circle
                cx={40 + Math.random() * 20}
                cy={30 + Math.random() * 20}
                r="1"
                fill="#B9F6CA"
                opacity="0.8"
              />
              <circle
                cx={40 + Math.random() * 20}
                cy={30 + Math.random() * 20}
                r="0.5"
                fill="#FFFFFF"
                opacity="0.9"
              />
            </g>
          ))}
        </g>
      )}

      {/* Magical sparkles and flowing energy */}
      {scale >= 95 && (
        <g>
          {/* Sparkles */}
          {[...Array(8)].map((_, i) => {
            const angle = (i * Math.PI) / 4;
            return (
              <g key={i}>
                <circle
                  cx={50 + Math.cos(angle) * 15}
                  cy={40 + Math.sin(angle) * 15}
                  r="0.5"
                  fill="#FFFFFF"
                  opacity="0.9"
                >
                  <animate
                    attributeName="opacity"
                    values="0.9;0.1;0.9"
                    dur="2s"
                    repeatCount="indefinite"
                    begin={`${i * 0.25}s`}
                  />
                </circle>
                <path
                  d={`M${50 + Math.cos(angle) * 12} ${40 + Math.sin(angle) * 12} 
                      q${Math.cos(angle) * 3} ${Math.sin(angle) * 3} 
                      ${Math.cos(angle) * 6} ${Math.sin(angle) * 6}`}
                  stroke="#B9F6CA"
                  strokeWidth="0.3"
                  fill="none"
                  opacity="0.6"
                />
              </g>
            );
          })}
        </g>
      )}
    </svg>
  );
};