// Logo.jsx — EasylifeLogo component
function Logo({ size = 34, spinning = true, onClick }) {
  const inset1 = Math.round(size * 0.06);
  const inset2 = Math.round(size * 0.22);
  const svgSz = Math.round(size * 0.36);

  return (
    <div onClick={onClick} style={{
      width: size, height: size, borderRadius: '50%', position: 'relative',
      cursor: onClick ? 'pointer' : 'default', flexShrink: 0,
    }}>
      <div style={{
        position: 'absolute', inset: 0, borderRadius: '50%',
        background: 'conic-gradient(from 0deg, var(--accent,#00d4aa), #004d3a, var(--accent-c,#00b4d8), #001a44, var(--accent,#00d4aa))',
        animation: spinning ? 'logoSpin 4s linear infinite' : 'none',
        filter: 'blur(1px)',
        zIndex: 1,
      }} />
      <div style={{
        position: 'absolute', inset: inset1, borderRadius: '50%',
        background: 'conic-gradient(from 180deg, transparent 15%, rgba(0,212,170,0.35), transparent 35%, rgba(0,180,216,0.35), transparent 65%)',
        animation: spinning ? 'logoSpin 3s linear infinite reverse' : 'none',
        zIndex: 1,
      }} />
      <div style={{
        position: 'absolute', inset: inset2, borderRadius: '50%',
        background: 'radial-gradient(circle at 35% 35%, #0e1e35, #060a14)',
        zIndex: 2,
      }} />
      <div style={{
        position: 'absolute', inset: 0, display: 'flex', alignItems: 'center',
        justifyContent: 'center', zIndex: 3,
      }}>
        <svg width={svgSz} height={svgSz} viewBox="0 0 20 20" fill="none">
          <path d="M4 10.5l4.5 4.5L16 6" stroke="var(--accent-check,#00e676)"
            strokeWidth="2.8" strokeLinecap="round" strokeLinejoin="round"
            style={{ filter: 'drop-shadow(0 0 3px rgba(0,230,118,0.5))' }} />
        </svg>
      </div>
    </div>
  );
}