/* eslint-disable no-undef */
// Polished burger built from STACKED ELLIPSES (not CSS 3D transforms,
// which DOM-screenshot tools refuse to render). Each "ingredient" is a
// flat oval with a strong drop-shadow, overlapped vertically to imply
// stacking. Whole thing slowly bobs and oscillates side-to-side for life.

function BurgerHero3D({ size = 280, spin = true }) {
  // Layers from TOP visually to BOTTOM (DOM order = paint order)
  // Each: { w (frac of size), h (px), color, dy (overlap up px), dome? }
  const L = [
    { w: 1.00, h: 78, color: '#0A0505', dome: true, label: 'top bun' },
    { w: 0.96, h: 14, color: '#FAFAFA',           label: 'cheese' },
    { w: 0.99, h: 30, color: '#DA0505',           label: 'patty 2' },
    { w: 0.94, h: 14, color: '#FAFAFA',           label: 'cheese' },
    { w: 0.99, h: 30, color: '#DA0505',           label: 'patty 1' },
    { w: 1.00, h: 36, color: '#0A0505',           label: 'bottom' },
  ];
  // base spacing between layer-centers
  const gap = 14;

  return (
    <div style={{
      width: size, height: 'auto',
      position: 'relative',
      animation: spin ? 'tb-bun-sway 7s ease-in-out infinite' : 'none',
      transformOrigin: 'center bottom',
    }}>
      <div style={{
        display: 'flex', flexDirection: 'column', alignItems: 'center',
        position: 'relative',
      }}>
        {L.map((l, i) => {
          const w = size * l.w;
          // ellipse via border-radius 50% / dome adjusted
          const radius = l.dome
            ? '50% 50% 36% 36% / 95% 95% 28% 28%'
            : '50%';
          return (
            <div key={i} style={{
              width: w, height: l.h, background: l.color,
              borderRadius: radius,
              marginTop: i === 0 ? 0 : -l.h * 0.55,
              boxShadow: `0 ${l.dome ? 2 : 4}px 0 rgba(0,0,0,0.18), 0 6px 16px rgba(0,0,0,0.18)`,
              position: 'relative', zIndex: L.length - i,
            }}>
              {/* sesame seeds on dome */}
              {l.dome && [[-32, 18], [-14, 6], [8, 4], [26, 14], [36, 28], [-32, 36]].map(([x, y], k) => (
                <span key={k} style={{
                  position: 'absolute', left: '50%', top: y, marginLeft: x,
                  width: 7, height: 3, borderRadius: 99,
                  background: '#FAFAFA', opacity: 0.92,
                  transform: `rotate(${k * 23 - 30}deg)`,
                }}/>
              ))}
              {/* subtle highlight on cheese / patty */}
              {!l.dome && i > 0 && (
                <span style={{
                  position: 'absolute', left: '14%', top: '20%',
                  width: '30%', height: '30%', borderRadius: '50%',
                  background: 'rgba(255,255,255,0.18)',
                  filter: 'blur(2px)',
                  pointerEvents: 'none',
                }}/>
              )}
            </div>
          );
        })}
      </div>
      {/* glow / shadow plate */}
      <div style={{
        position: 'absolute', left: '50%', bottom: -10,
        transform: 'translateX(-50%)',
        width: size * 0.85, height: size * 0.1, borderRadius: '50%',
        background: 'radial-gradient(closest-side, rgba(0,0,0,0.45), transparent)',
        filter: 'blur(7px)',
        zIndex: -1,
      }}/>
    </div>
  );
}

window.BurgerHero3D = BurgerHero3D;