deckhearth/components/AnimatedFireLogo.js

import { useTheme } from '../lib/theme-context';

export default function AnimatedFireLogo({ size = 100 }) {
  const { theme } = useTheme();

  // Theme-aware colors matching the SVG
  const colors = {
    dark: {
      fireMain: '#F6891F',
      fireAccent1: '#F36E21', 
      fireAccent2: '#FFD04A',
      fireAccent3: '#FDBA16',
      cardBg: '#F6E3AE',
      cardBorder: '#E38F36'
    },
    light: {
      fireMain: '#F6891F',
      fireAccent1: '#F36E21',
      fireAccent2: '#FFD04A', 
      fireAccent3: '#FDBA16',
      cardBg: '#F6E3AE',
      cardBorder: '#E38F36'
    }
  };

  const currentColors = colors[theme] || colors.light;

  return (
    <div 
      className="deck-hearth-logo-container relative flex items-center justify-center"
      style={{ width: size * 3.26, height: size * 3.26 }}
    >
      {/* Fire Background - Using exact SVG paths */}
      <svg 
        className="fire-background absolute inset-0"
        width={size * 3.26} 
        height={size * 3.26} 
        viewBox="0 0 326 326" 
        fill="none" 
        xmlns="http://www.w3.org/2000/svg"
      >
        <g clipPath="url(#clip0_fire)">
          {/* Main fire shapes from the SVG */}
          <path className="flame-layer-1" d="M211.715 94.6967C211.715 94.6967 209.622 101.675 199.174 119.407C198.823 93.2832 169.773 88.9099 182.258 47.2872C157.061 58.7385 142.423 94.1578 145.001 140.948C138.543 88.0352 112.033 49.1173 64 44C98.2339 120.833 66.2348 162.497 66.2348 203.991C66.2348 260.607 107.804 287 142.262 287C239.132 287 235.864 166.136 211.715 94.6967Z" fill={currentColors.fireMain}/>
          
          <path className="flame-layer-2" d="M201.086 25.6613C201.086 25.6613 215.587 78.0979 185.816 131.161C159.21 178.586 195.12 236.661 195.12 236.661C195.12 236.661 258.732 227.273 240.821 89.1201C240.821 89.1201 228.978 158.124 209.438 161.541C209.438 161.541 222.276 146.728 225.367 112.561C229.699 64.664 201.086 25.6613 201.086 25.6613Z" fill={currentColors.fireAccent1}/>
          
          <path className="flame-layer-3" d="M92.304 301.661C92.304 301.661 67.7598 294.509 55.3478 281.891C42.9358 269.274 32.9739 241.467 32.9739 241.467C32.9739 241.467 32.3928 225.492 23 197.089C23 197.089 31.0954 209.031 35.3059 220.974C35.3059 220.974 22.5129 170.297 39.4343 147.869C56.3558 125.438 40.8113 62.1796 34.0085 57.6613C34.0085 57.6613 65.5267 71.2161 81.9369 171.916C98.3496 272.614 122.525 280.791 96.6181 301.661" fill={currentColors.fireAccent1}/>
          
          <path className="flame-layer-4" d="M238.189 25.6613C238.189 25.6613 266.33 86.6985 247.024 123.979C227.716 161.26 195.548 226.913 245.989 283.661C245.989 283.661 345.517 201.84 238.189 25.6613Z" fill={currentColors.fireAccent2}/>
          
          <path className="flame-layer-5" d="M131.109 32C131.109 32 84.7729 124.795 107.064 190C107.064 190 172.434 158.284 147.211 99.6461C121.993 41.0078 131.109 56.3772 131.109 32Z" fill={currentColors.fireAccent3}/>
          
          <path className="flame-layer-6" d="M276.384 110.661C276.384 110.661 298.578 186.421 273.791 226.119C249.008 265.818 237 297.661 237 297.661C237 297.661 354.059 255.233 276.384 110.661Z" fill={currentColors.fireAccent1}/>
          
          <path className="flame-layer-7" d="M70.2457 86.6613C70.2457 86.6613 28.9443 264.291 98.0413 290.748C167.141 317.208 88.6828 156.543 70.2457 86.6613Z" fill={currentColors.fireAccent3}/>
          
          {/* Small flame details */}
          <path className="flame-small-1" d="M274 48.6613C274 48.6613 298.845 75.3604 286.615 90.6505C269.456 91.3257 289.896 60.0323 274 48.6613Z" fill={currentColors.fireAccent1}/>
          <path className="flame-small-2" d="M174.035 179.661C174.035 179.661 163.609 211.033 181.404 219.661C197.095 214.187 174.896 192.43 174.035 179.661Z" fill={currentColors.fireAccent1}/>
          <path className="flame-small-3" d="M157.965 9C157.965 9 168.391 40.3721 150.596 49C134.905 43.5258 157.104 21.7684 157.965 9Z" fill={currentColors.fireAccent1}/>
          <path className="flame-small-4" d="M172 123.661C172 123.661 164.781 137.997 169.739 144.661C175.669 143.985 167.095 130.077 172 123.661Z" fill={currentColors.fireAccent1}/>
          <path className="flame-small-5" d="M227 35.6613C227 35.6613 236.024 50.6795 229.826 57.6613C222.414 56.9532 233.131 42.3825 227 35.6613Z" fill={currentColors.fireAccent1}/>
        </g>
        
        <defs>
          <clipPath id="clip0_fire">
            <rect width="326" height="326" fill="white"/>
          </clipPath>
        </defs>
      </svg>

      {/* Left Card - Simple rectangular card */}
      <div className="card-left absolute" style={{ 
        left: '25%', 
        top: '50%', 
        transform: 'translate(-50%, -50%) rotate(-20deg)',
        zIndex: 10
      }}>
        <div 
          className="simple-card"
          style={{
            width: size * 0.8,
            height: size * 1.1,
            backgroundColor: currentColors.cardBg,
            border: `3px solid ${currentColors.cardBorder}`,
            borderRadius: '8px',
            boxShadow: '0 4px 12px rgba(0, 0, 0, 0.3)',
            position: 'relative'
          }}
        >
          {/* Small fire icon in corner */}
          <div style={{
            position: 'absolute',
            top: '8px',
            left: '8px',
            width: '16px',
            height: '20px',
            background: `linear-gradient(135deg, ${currentColors.fireAccent1}, ${currentColors.fireAccent2})`,
            borderRadius: '50% 50% 50% 50% / 60% 60% 40% 40%',
            opacity: 0.8
          }} />
        </div>
      </div>

      {/* Right Card - Simple rectangular card */}
      <div className="card-right absolute" style={{ 
        right: '25%', 
        top: '50%', 
        transform: 'translate(50%, -50%) rotate(20deg)',
        zIndex: 10
      }}>
        <div 
          className="simple-card"
          style={{
            width: size * 0.8,
            height: size * 1.1,
            backgroundColor: currentColors.cardBg,
            border: `3px solid ${currentColors.cardBorder}`,
            borderRadius: '8px',
            boxShadow: '0 4px 12px rgba(0, 0, 0, 0.3)',
            position: 'relative'
          }}
        >
          {/* Small fire icon in corner */}
          <div style={{
            position: 'absolute',
            top: '8px',
            right: '8px',
            width: '16px',
            height: '20px',
            background: `linear-gradient(135deg, ${currentColors.fireAccent1}, ${currentColors.fireAccent2})`,
            borderRadius: '50% 50% 50% 50% / 60% 60% 40% 40%',
            opacity: 0.8
          }} />
        </div>
      </div>

      {/* Center Card - Simple rectangular card, larger */}
      <div className="card-center absolute" style={{ 
        left: '50%', 
        top: '48%', 
        transform: 'translate(-50%, -50%)',
        zIndex: 15
      }}>
        <div 
          className="simple-card"
          style={{
            width: size * 0.9,
            height: size * 1.2,
            backgroundColor: currentColors.cardBg,
            border: `3px solid ${currentColors.cardBorder}`,
            borderRadius: '8px',
            boxShadow: '0 6px 16px rgba(0, 0, 0, 0.4)',
            position: 'relative',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center'
          }}
        >
          {/* Centered fire icon */}
          <div style={{
            width: '24px',
            height: '30px',
            background: `linear-gradient(135deg, ${currentColors.fireAccent1}, ${currentColors.fireAccent2})`,
            borderRadius: '50% 50% 50% 50% / 60% 60% 40% 40%',
            opacity: 0.9,
            position: 'relative'
          }}>
            {/* Inner flame accent */}
            <div style={{
              position: 'absolute',
              top: '4px',
              left: '50%',
              transform: 'translateX(-50%)',
              width: '12px',
              height: '18px',
              background: currentColors.fireAccent2,
              borderRadius: '50% 50% 50% 50% / 60% 60% 40% 40%',
              opacity: 0.8
            }} />
          </div>
        </div>
      </div>

      <style jsx>{`
        .deck-hearth-logo-container {
          filter: drop-shadow(0 0 20px rgba(255, 107, 53, 0.3));
        }
        
        /* Fire Animations - Using exact flame layers */
        .fire-background {
          animation: fire-glow 4s ease-in-out infinite alternate;
        }
        
        .flame-layer-1 { animation: flame-flicker-1 2.1s ease-in-out infinite alternate; animation-delay: -0.1s; }
        .flame-layer-2 { animation: flame-flicker-2 1.8s ease-in-out infinite alternate; animation-delay: -0.3s; }
        .flame-layer-3 { animation: flame-flicker-3 2.3s ease-in-out infinite alternate; animation-delay: -0.7s; }
        .flame-layer-4 { animation: flame-flicker-4 1.9s ease-in-out infinite alternate; animation-delay: -0.2s; }
        .flame-layer-5 { animation: flame-flicker-5 2.0s ease-in-out infinite alternate; animation-delay: -0.5s; }
        .flame-layer-6 { animation: flame-flicker-6 1.7s ease-in-out infinite alternate; animation-delay: -0.8s; }
        .flame-layer-7 { animation: flame-flicker-7 2.2s ease-in-out infinite alternate; animation-delay: -0.4s; }
        
        .flame-small-1 { animation: flame-small 1.2s ease-in-out infinite alternate; animation-delay: -0.1s; }
        .flame-small-2 { animation: flame-small 1.4s ease-in-out infinite alternate; animation-delay: -0.3s; }
        .flame-small-3 { animation: flame-small 1.1s ease-in-out infinite alternate; animation-delay: -0.5s; }
        .flame-small-4 { animation: flame-small 1.3s ease-in-out infinite alternate; animation-delay: -0.2s; }
        .flame-small-5 { animation: flame-small 1.5s ease-in-out infinite alternate; animation-delay: -0.4s; }
        
        /* Card Animations - Gentle floating */
        .card-center {
          animation: card-float-center 4s ease-in-out infinite;
        }
        
        .card-left {
          animation: card-float-left 4.5s ease-in-out infinite;
          animation-delay: -1s;
        }
        
        .card-right {
          animation: card-float-right 4.2s ease-in-out infinite;
          animation-delay: -2s;
        }
        
        /* Fire Animations */
        @keyframes fire-glow {
          0% { filter: drop-shadow(0 0 15px rgba(255, 107, 53, 0.4)) brightness(1); }
          100% { filter: drop-shadow(0 0 20px rgba(255, 107, 53, 0.6)) brightness(1.1); }
        }
        
        @keyframes flame-flicker-1 {
          0% { transform: scaleY(1) scaleX(1) rotate(0deg); opacity: 1; }
          100% { transform: scaleY(1.05) scaleX(0.98) rotate(-0.5deg); opacity: 0.95; }
        }
        
        @keyframes flame-flicker-2 {
          0% { transform: scaleY(1) scaleX(1) rotate(0deg); opacity: 0.9; }
          100% { transform: scaleY(1.08) scaleX(0.95) rotate(1deg); opacity: 1; }
        }
        
        @keyframes flame-flicker-3 {
          0% { transform: scaleY(1) scaleX(1) rotate(0deg); opacity: 1; }
          100% { transform: scaleY(1.03) scaleX(1.02) rotate(-0.8deg); opacity: 0.92; }
        }
        
        @keyframes flame-flicker-4 {
          0% { transform: scaleY(1) scaleX(1) rotate(0deg); opacity: 0.95; }
          100% { transform: scaleY(1.06) scaleX(0.97) rotate(1.2deg); opacity: 1; }
        }
        
        @keyframes flame-flicker-5 {
          0% { transform: scaleY(1) scaleX(1) rotate(0deg); opacity: 1; }
          100% { transform: scaleY(1.04) scaleX(1.01) rotate(-1deg); opacity: 0.88; }
        }
        
        @keyframes flame-flicker-6 {
          0% { transform: scaleY(1) scaleX(1) rotate(0deg); opacity: 0.93; }
          100% { transform: scaleY(1.07) scaleX(0.96) rotate(0.7deg); opacity: 1; }
        }
        
        @keyframes flame-flicker-7 {
          0% { transform: scaleY(1) scaleX(1) rotate(0deg); opacity: 1; }
          100% { transform: scaleY(1.02) scaleX(1.03) rotate(-0.3deg); opacity: 0.96; }
        }
        
        @keyframes flame-small {
          0% { transform: scaleY(1) scaleX(1); opacity: 0.8; }
          100% { transform: scaleY(1.15) scaleX(0.9); opacity: 1; }
        }
        
        /* Card Float Animations */
        @keyframes card-float-center {
          0%, 100% { 
            transform: translate(-50%, -50%) rotate(0deg) scale(1);
          }
          25% { 
            transform: translate(-50%, -52%) rotate(1deg) scale(1.02);
          }
          50% { 
            transform: translate(-48%, -50%) rotate(-0.5deg) scale(0.98);
          }
          75% { 
            transform: translate(-52%, -48%) rotate(1.5deg) scale(1.01);
          }
        }
        
        @keyframes card-float-left {
          0%, 100% { 
            transform: translate(-50%, -50%) rotate(-20deg) scale(1);
          }
          25% { 
            transform: translate(-48%, -52%) rotate(-19deg) scale(1.01);
          }
          50% { 
            transform: translate(-52%, -50%) rotate(-21deg) scale(0.99);
          }
          75% { 
            transform: translate(-50%, -48%) rotate(-18deg) scale(1.02);
          }
        }
        
        @keyframes card-float-right {
          0%, 100% { 
            transform: translate(50%, -50%) rotate(20deg) scale(1);
          }
          25% { 
            transform: translate(52%, -52%) rotate(19deg) scale(1.01);
          }
          50% { 
            transform: translate(48%, -50%) rotate(21deg) scale(0.99);
          }
          75% { 
            transform: translate(50%, -48%) rotate(18deg) scale(1.02);
          }
        }
      `}</style>
    </div>
  );
}